/* ==========================================================================
   HWSE Server Hardware Blog – Custom Header & Footer Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTENT WIDTH LADDER
   Half of the boxed content width.  --hwse-box-pad turns it into the side
   padding that every full-bleed section uses, so changing it here rescales
   the header, footer, hero and every page wrapper at once.

   The steps land on the same widths as the Shopware storefront's .container
   (server-hardware.com), so blog and shop line up at each tier:
       default  1200px   ≥1400  1320px   ≥1600  1500px   ≥1920  1800px
   -------------------------------------------------------------------------- */
:root {
	--hwse-content-half: 600px;
}

@media (min-width: 1400px) { :root { --hwse-content-half: 660px; } }
@media (min-width: 1600px) { :root { --hwse-content-half: 750px; } }
@media (min-width: 1920px) { :root { --hwse-content-half: 900px; } }

/* --------------------------------------------------------------------------
   SITE BACKGROUND
   The three off-canvas radial glows are the background for the whole site, not
   just the home page — every template's wrapper is transparent so this shows
   through.  Only the header and the footer paint over it, from their own
   tokens (--hwse-header-bg / --hwse-nav-bg / --hwse-footer-bg).

   Declared on body so it also covers pages shorter than the viewport, and
   because custom.css loads after global-styles-inline-css, which sets
   body { background-color: var(--wp--preset--color--base) } from the parent.
   -------------------------------------------------------------------------- */
body {
	background-position-x: 0%, 0%;
	background-position-y: 50vh, 0%;
	background-repeat: repeat, repeat;
	background-attachment: scroll, scroll;
	background-color: var(--wp--custom--hwse-page-bg);
	background-image: radial-gradient(100vw 200vh at 120vw top, rgba(40, 50, 157, 0.25) 0%, rgba(40, 50, 157, 0) 50%), radial-gradient(100vw 200vh at -20vw center, rgba(40, 50, 157, 0.25) 0%, rgba(40, 50, 157, 0) 50%), radial-gradient(100vw 200vh at 120vw bottom, rgba(40, 50, 157, 0.25) 0%, rgba(40, 50, 157, 0) 50%);
	background-size: 100vw 300vh;
	background-origin: padding-box, padding-box;
	background-clip: border-box, border-box;
}

/* --------------------------------------------------------------------------
   Font tweaks – theme.json handles @font-face and font-family assignment;
   these rules add OpenType features and heading refinements it can't express.
   -------------------------------------------------------------------------- */
body {
	font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   RESET: remove TwentyTwentyFour header/footer defaults
   -------------------------------------------------------------------------- */
.hwse-site-header,
.hwse-site-footer {
	margin: 0;
	padding: 0;
}

/* Kill the 1.2rem margin WordPress core injects via :root :where(.is-layout-flow) > *
   Targets: the template-part wrapper, the hwse wrappers, and all their direct children */
.wp-block-template-part:has(.hwse-site-header),
.wp-block-template-part:has(.hwse-site-footer),
.hwse-site-header,
.hwse-site-footer,
.hwse-site-header > *,
.hwse-site-footer > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* The sticky sits on the header element, not on the part wrapper, so that
   anything else in parts/header.html (the breadcrumbs) scrolls away normally.
   display:contents is what makes that possible: without it the header's
   containing block would be the wrapper, which is exactly the header's own
   height, so it would have nothing to stick against. Removing the wrapper's
   box hoists both children into .wp-site-blocks and gives the header a
   full-page containing block — the same one the wrapper used to have. */
.wp-block-template-part:has(.hwse-site-header) {
	display: contents;
}

.hwse-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.hwse-site-header {
	/* No background here — each row sets its own so backdrop-filter can see page content */
	color: var(--wp--custom--hwse-on-dark);
	width: 100%;
}

/* --------------------------------------------------------------------------
   Top row – Logo | Search | Icons
   -------------------------------------------------------------------------- */
.hwse-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 0.4rem;
	padding-inline: 0.7rem;
	background-color: var(--wp--custom--hwse-header-bg);
}

/* Logo – WP injects inline style="width:180px;height:auto" on both wrapper and img,
   so !important is required to override them */
.hwse-header__logo .wp-block-site-logo {
	margin: 0;
	line-height: 0;
	width: auto !important;
}
.hwse-header__logo .wp-block-site-logo a {
	display: flex;
	align-items: center;
	line-height: 0;
}
.hwse-header__logo .wp-block-site-logo img {
	height: 40px;
	width: auto;
	max-width: none;
}

/* Search bar – d-none d-xl-block col-6 col-px-0 d-flex justify-content-center align-items-center */
.hwse-header__search {
	display: none !important;   /* hidden below xl */
	flex: 0 0 50%;
	max-width: 50%;
	min-width: 0;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	justify-content: center;
	align-items: center;
}
.hwse-header__search .wp-block-search__inside-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	width: 100%;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid var(--wp--custom--hwse-search-border);
	background-color: var(--wp--custom--hwse-on-dark);
}
.hwse-header__search .wp-block-search__input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	padding: 10px 16px;
	font-size: 14px;
	background: transparent;
	color: var(--wp--custom--hwse-search-text);
	border: none !important;
	border-radius: 0.5rem 0 0 0.5rem !important;
	outline: none;
	box-sizing: border-box;
	height: auto !important;
}
.hwse-header__search .wp-block-search__button {
	flex: 0 0 auto !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	color: var(--wp--custom--hwse-search-icon) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 10px 14px 10px 8px;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hwse-header__search .wp-block-search__button:hover {
	color: var(--wp--custom--hwse-search-text) !important;
	background: transparent !important;
}
.hwse-header__search .wp-block-search__button svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* Language switcher (Polylang dropdown) */
.hwse-header__lang-switcher {
	position: relative;
	display: flex;
	align-items: center;
}

.hwse-header__lang-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--wp--custom--hwse-on-dark);
	line-height: 0;
	border-radius: 4px;
	transition: opacity 0.2s;
}

.hwse-header__lang-toggle:hover {
	opacity: 0.8;
}

.hwse-header__lang-toggle img {
	display: block;
	border-radius: 2px;
}

.hwse-header__lang-arrow {
	transition: transform 0.2s;
}

.hwse-header__lang-switcher.is-open .hwse-header__lang-arrow {
	transform: rotate(180deg);
}

.hwse-header__lang-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 6px;
	background: var(--wp--custom--hwse-card-bg);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	min-width: 140px;
	overflow: hidden;
	z-index: 1001;
}

.hwse-header__lang-switcher.is-open .hwse-header__lang-dropdown {
	display: block;
}

.hwse-header__lang-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	color: var(--wp--custom--hwse-dark-text);
	text-decoration: none;
	font-size: 13px;
	transition: background-color 0.15s;
}

.hwse-header__lang-option:hover {
	background: var(--wp--custom--hwse-hover-bg);
}

.hwse-header__lang-option img {
	display: block;
	border-radius: 2px;
	flex-shrink: 0;
}

/* Icon links */
.hwse-header__icons {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-shrink: 0;
}
.hwse-header__icon-link {
	color: var(--wp--custom--hwse-on-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	line-height: 0;
	transition: color 0.2s, opacity 0.2s;
	opacity: 1;
}
.hwse-header__icon-link:hover {
	color: var(--wp--custom--hwse-primary);
	opacity: 1;
}
.hwse-header__icon-link--flag {
	opacity: 1;
}
.hwse-header__icon-link--flag:hover {
	opacity: 0.85;
}
.hwse-header__icon-link--flag svg {
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Bottom row – Navigation | Trust badges
   -------------------------------------------------------------------------- */
.hwse-header__bottom {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	background-color: var(--wp--custom--hwse-header-bottom-bg);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-top: 1px solid var(--wp--custom--hwse-divider);
	/* No overflow-x here.  Setting one axis to a non-visible value computes the
	   other to auto, which makes this row a scroll container and clips the
	   submenu dropdown, since that is positioned absolutely below the bar. */
}

/* Navigation */
.hwse-header__nav {
	display: flex;
	align-items: stretch;
}
.hwse-header__nav .wp-block-navigation__container {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: nowrap;
}
.hwse-header__nav .wp-block-navigation-item {
	display: flex;
	align-items: stretch;
}
.hwse-header__nav .wp-block-navigation-item__content {
	color: var(--wp--custom--hwse-on-dark);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 24px 8px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	cursor: pointer;
}
/* Hover changes nothing but the cursor — no background wash, no colour shift.
   cursor: pointer is set on the item above so it also covers the submenu
   toggle, which is a <button> and would otherwise show the default arrow. */
/* DEALS% item: add CSS class "is-deals" to this menu item in the WordPress Navigation Editor */
.hwse-header__nav .is-deals > .wp-block-navigation-item__content,
.hwse-header__nav .is-deals > a {
	color: var(--wp--custom--hwse-primary);
}

/* Navigation mobile toggle */
.hwse-header__nav .wp-block-navigation__responsive-container-open,
.hwse-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--custom--hwse-on-dark);
}

/* --------------------------------------------------------------------------
   Navigation: no borders, in any state

   The submenu panel needs the compound selector.  Core styles it with
       .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container
   at specificity 0,3,0; .hwse-header__nav alone is only 0,2,0 and loses, so
   the class is pinned to the nav element itself (it carries both) to match at
   0,3,0 — custom.css loads after core's stylesheet, so source order decides.
   -------------------------------------------------------------------------- */
.hwse-header__nav.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 8px 0;
}

.hwse-header__nav .wp-block-navigation-item,
.hwse-header__nav .wp-block-navigation-item__content,
.hwse-header__nav .wp-block-navigation-submenu__toggle,
.hwse-header__nav .wp-block-navigation__responsive-container,
.hwse-header__nav .wp-block-navigation__responsive-container-open,
.hwse-header__nav .wp-block-navigation__responsive-container-close {
	border: 0;
	box-shadow: none;
}

/* Hover / focus / active / current keep the colour change, never an edge. */
.hwse-header__nav .wp-block-navigation-item__content:hover,
.hwse-header__nav .wp-block-navigation-item__content:focus,
.hwse-header__nav .wp-block-navigation-item__content:active,
.hwse-header__nav .wp-block-navigation-submenu__toggle:hover,
.hwse-header__nav .wp-block-navigation-submenu__toggle:focus,
.hwse-header__nav .current-menu-item > .wp-block-navigation-item__content,
.hwse-header__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* Keyboard users still need to see where they are.  :focus-visible only fires
   for keyboard focus, so the mouse states above stay borderless. */
.hwse-header__nav a:focus-visible,
.hwse-header__nav button:focus-visible {
	outline: 2px solid var(--wp--custom--hwse-primary);
	outline-offset: -2px;
}

/* Submenu links: the top-level bar is bold uppercase white on dark; inside the
   white panel none of that applies, so each of those is reset explicitly. */
.hwse-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--custom--hwse-body-text);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	padding: 10px 22px;
}

/* No chevron on items that have a submenu — core renders it as
   <span class="wp-block-navigation__submenu-icon"><svg>…</svg></span>
   inside the toggle.  The submenu still opens on hover and on click. */
.hwse-header__nav .wp-block-navigation__submenu-icon {
	display: none;
}

/* Trust-badge info items */
.hwse-header__info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 20px;
}
.hwse-header__info-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--custom--hwse-on-dark);
	text-decoration: none;
	padding: 11px 14px;
	transition: color 0.2s;
}
a.hwse-header__info-item:hover {
	color: var(--wp--custom--hwse-primary);
}
a.hwse-header__info-item:hover svg {
	color: var(--wp--custom--hwse-primary);
}

/* --------------------------------------------------------------------------
   Header focus rings

   Core applies a focus outline to everything in the page:
       :where(.wp-site-blocks *:focus) { outline-width: 2px; outline-style: solid }
   It sets no colour, so it lands as a white ring on our dark header — visible
   even when a badge is clicked with the mouse.  Suppress it for pointer focus
   and keep a deliberate one for keyboard users only.
   -------------------------------------------------------------------------- */
.hwse-site-header a:focus,
.hwse-site-header button:focus,
.hwse-site-header input:focus {
	outline: none;
}

.hwse-site-header a:focus-visible,
.hwse-site-header button:focus-visible,
.hwse-site-header input:focus-visible {
	outline: 2px solid var(--wp--custom--hwse-primary);
	outline-offset: -2px;
}
.hwse-header__info-item svg {
	flex-shrink: 0;
}
.hwse-header__info-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.hwse-header__info-text strong {
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}
.hwse-header__info-text span {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--wp--custom--hwse-info-secondary);
	line-height: normal;
	white-space: nowrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.hwse-site-footer {
	background-color: var(--wp--custom--hwse-footer-bg);
	color: var(--wp--custom--hwse-on-dark);
	font-size: 14px;
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
}

/* --------------------------------------------------------------------------
   Top bar – Reseller | Email | Social
   -------------------------------------------------------------------------- */
.hwse-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px var(--hwse-box-pad);
	background-color: var(--wp--custom--hwse-nav-bg);
	border-bottom: 1px solid var(--wp--custom--hwse-divider);
}

/* Reseller CTA */
.hwse-footer__reseller {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--custom--hwse-on-dark);
	text-decoration: none;
	transition: color 0.2s;
}
.hwse-footer__reseller:hover {
	color: var(--wp--custom--hwse-primary);
}
.hwse-footer__reseller svg {
	flex-shrink: 0;
	opacity: 0.8;
}
.hwse-footer__reseller-text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.hwse-footer__reseller-text strong {
	font-size: 14px;
	font-weight: 700;
}
.hwse-footer__reseller-text span {
	font-size: 12px;
	opacity: 0.65;
}

/* Email link */
.hwse-footer__contact-email {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--custom--hwse-on-dark);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}
.hwse-footer__contact-email:hover {
	color: var(--wp--custom--hwse-primary);
}

/* Footer top-links wrapper (reseller CTA + email) */
.hwse-footer__top-links {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Social icons (wp:social-links block) */
.hwse-footer__social.wp-block-social-links {
	gap: 16px;
	margin: 0;
	padding: 0;
}
.hwse-footer__social .wp-social-link {
	margin: 0 !important;
}
.hwse-footer__social .wp-social-link a {
	color: var(--wp--custom--hwse-on-dark) !important;
	background: none !important;
	padding: 0 !important;
	opacity: 0.75;
	transition: opacity 0.2s, color 0.2s;
}
.hwse-footer__social .wp-social-link a:hover {
	opacity: 1;
	color: var(--wp--custom--hwse-primary) !important;
}
.hwse-footer__social .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Main columns grid (wp:columns override)
   -------------------------------------------------------------------------- */
.hwse-footer__main.wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 32px;
	padding: 32px var(--hwse-box-pad) 28px;
	margin: 0;
}
.hwse-footer__col--company.wp-block-column {
	flex: 0 0 220px !important;
	max-width: 220px !important;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.hwse-footer__col.wp-block-column:not(.hwse-footer__col--company) {
	flex: 1 1 0 !important;
	min-width: 0;
}

.hwse-footer__col-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--hwse-muted);
	margin: 0 0 14px 0;
	padding: 0;
}

/* Company column – logo (wp:site-logo block) */
.hwse-footer__logo.wp-block-site-logo {
	margin: 0 0 12px 0;
	line-height: 0;
}
.hwse-footer__logo.wp-block-site-logo img {
	max-width: 150px;
	height: auto;
	display: block;
}
.hwse-footer__company-name {
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 10px 0;
	color: var(--wp--custom--hwse-on-dark);
}
.hwse-footer__company-address {
	font-style: normal;
	font-size: 12px;
	color: var(--wp--custom--hwse-muted);
	line-height: 1.7;
	margin: 0;
}

/* Stores links column */
.hwse-footer__stores-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hwse-footer__stores-links li a {
	color: var(--wp--custom--hwse-muted);
	text-decoration: none;
	font-size: 12px;
	transition: color 0.2s;
}
.hwse-footer__stores-links li a:hover {
	color: var(--wp--custom--hwse-on-dark);
}

/* Certificates column */
.hwse-footer__certificates {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hwse-footer__cert-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.hwse-footer__cert-badge {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--wp--custom--hwse-on-dark);
	flex: 1 1 0;
	min-width: 0;
}
.hwse-footer__cert-img {
	height: 40px;
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
	object-position: left;
}
.hwse-footer__cert-img--short {
	height: 24px;
}
.hwse-footer__cert-label {
	font-size: 11px;
	color: var(--wp--custom--hwse-muted);
	line-height: 1.3;
}

/* Payment methods column */
.hwse-footer__payments {
	padding: 8px;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	max-width: 220px;
}
.hwse-footer__payments-img {
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Disclaimer row
   -------------------------------------------------------------------------- */
.hwse-footer__disclaimer {
	padding: 16px var(--hwse-box-pad);
	font-size: 11px;
	color: var(--wp--custom--hwse-subtle);
	line-height: 1.65;
	border-top: 1px solid var(--wp--custom--hwse-divider);
	margin: 0;
}
.hwse-footer__disclaimer p {
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Legal / bottom bar
   -------------------------------------------------------------------------- */
.hwse-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px var(--hwse-box-pad);
	border-top: 1px solid var(--wp--custom--hwse-divider);
}
.hwse-footer__legal-nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hwse-footer__legal-nav .wp-block-navigation-item__content {
	color: var(--wp--custom--hwse-muted);
	text-decoration: none;
	font-size: 12px;
	transition: color 0.2s;
}
.hwse-footer__legal-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--hwse-on-dark);
}
.hwse-footer__copyright {
	margin: 0;
	color: var(--wp--custom--hwse-subtle);
	font-size: 12px;
	white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Desktop (1200px+) — search visible, generous padding --------------- */
@media (min-width: 1200px) {
	.hwse-header__top {
		padding-block: 0.9rem;
		padding-inline: 1.15rem;
	}
	.hwse-header__search {
		display: flex !important;
	}
}

/* --- Small Desktop (≤1199px) — compact badges, footer 2-col ------------ */
@media (max-width: 1199px) {
	/* Compact trust badges: hide subtitle, tighten spacing */
	.hwse-header__info-text span {
		display: none;
	}
	.hwse-header__info-item {
		padding: 8px 10px;
		gap: 8px;
	}
	.hwse-header__info {
		gap: 4px;
		padding-right: 12px;
	}
	/* Footer → 2-col wrap */
	.hwse-footer__main.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.hwse-footer__col--company.wp-block-column,
	.hwse-footer__col.wp-block-column:not(.hwse-footer__col--company) {
		flex: 1 1 calc(50% - 16px) !important;
		max-width: calc(50% - 16px) !important;
	}
}

/* --- Tablet (≤959px) — icon-only badges, tighter spacing ---------------- */
@media (max-width: 959px) {
	/* Trust badges: icons only */
	.hwse-header__info-text {
		display: none;
	}
	.hwse-header__info-item {
		padding: 8px;
	}
	.hwse-header__info {
		gap: 2px;
		padding-right: 8px;
	}
	.hwse-header__top {
		padding: 12px 20px;
	}
	.hwse-header__icons {
		gap: 18px;
	}
	.hwse-header__nav .wp-block-navigation-item__content {
		font-size: 15px;
		padding: 10px 14px;
	}
}

/* --- Small Tablet (≤767px) — hide badges, trim icons, stacked footer --- */
@media (max-width: 767px) {
	.hwse-header__info {
		display: none;
	}
	.hwse-header__top {
		flex-wrap: wrap;
		padding: 12px 16px;
		gap: 12px;
	}
	.hwse-header__logo .wp-block-site-logo img {
		max-width: 140px;
	}
	.hwse-header__bottom {
		padding-right: 0;
	}
	/* Hide Compare + Wishlist, keep Account + Cart */
	.hwse-header__icon-link--compare,
	.hwse-header__icon-link--wishlist {
		display: none;
	}
	.hwse-header__icons {
		gap: 16px;
	}
	.hwse-header__nav .wp-block-navigation-item__content {
		font-size: 14px;
		padding: 10px 12px;
	}
	/* Footer → single column */
	.hwse-site-footer {
		--hwse-box-pad: 16px;
	}
	.hwse-footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hwse-footer__top-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hwse-footer__main.wp-block-columns {
		flex-direction: column !important;
		gap: 28px;
	}
	.hwse-footer__col--company.wp-block-column,
	.hwse-footer__col.wp-block-column:not(.hwse-footer__col--company) {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.hwse-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* --- Mobile (≤599px) — WP hamburger active, compact header -------------- */
@media (max-width: 599px) {
	.hwse-header__top {
		flex-wrap: nowrap;
		padding: 8px 12px;
	}
	.hwse-header__logo .wp-block-site-logo img {
		height: 32px;
	}
	/* Only Cart visible */
	.hwse-header__icon-link--account {
		display: none;
	}
	/* Slim bottom row for hamburger */
	.hwse-header__bottom {
		padding: 0;
	}
	.hwse-header__nav .wp-block-navigation__responsive-container-open {
		padding: 8px 12px;
	}
	.hwse-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 24px;
		height: 24px;
	}
}

/* --- Small phones (≤374px) — even tighter -------------------------------- */
@media (max-width: 374px) {
	.hwse-header__logo .wp-block-site-logo img {
		height: 28px;
	}
	.hwse-header__top {
		padding: 6px 10px;
	}
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

.hwse-home {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	margin: 0 !important;
}

/* Remove WP core flow margin from home sections */
.hwse-home > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* --------------------------------------------------------------------------
   Section shared
   -------------------------------------------------------------------------- */
.hwse-section {
	padding: 0 var(--hwse-box-pad) 48px;
}

.hwse-section__heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 32px 0;
	color: var(--wp--custom--hwse-dark-text);
}

/* --------------------------------------------------------------------------
   SECTION 1: Hero
   -------------------------------------------------------------------------- */
.hwse-hero {
	position: relative;
	margin: 0;
	padding: 16px 16px 48px;
}

.hwse-hero__image,
.hwse-category__hero {
	width: 100%;
	height: 340px;
	border-radius: 10px;
	overflow: hidden;
}
.hwse-hero__img,
.hwse-category__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hwse-hero__title {
	text-align: center;
	font-size: 36px;
	font-weight: 300;
	color: var(--wp--custom--hwse-hero-title);
	letter-spacing: 0.01em;
	margin: 32px 0 0 0;
	padding: 0 16px;
}

/* --------------------------------------------------------------------------
   SECTION 2: Posts Grid
   -------------------------------------------------------------------------- */
.hwse-section--posts {
	background-color: transparent;
}

.hwse-posts-section {
	margin: 0;
}

.hwse-posts-section__layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

/* Sidebar */
.hwse-posts-sidebar {
	flex: 0 0 260px;
	position: sticky;
	top: 120px;
}

.hwse-posts-sidebar__search {
	position: relative;
	margin-bottom: 24px;
}

.hwse-posts-sidebar__search-input {
	width: 100%;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--wp--custom--hwse-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: var(--wp--custom--hwse-card-bg);
	color: var(--wp--custom--hwse-dark-text);
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.hwse-posts-sidebar__search-input:focus {
	border-color: var(--wp--custom--hwse-primary);
}

.hwse-posts-sidebar__search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--custom--hwse-subtle);
	pointer-events: none;
}

.hwse-posts-sidebar__section {
	margin-bottom: 24px;
}

.hwse-posts-sidebar__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--custom--hwse-subtle);
	margin: 0 0 12px 0;
}

.hwse-posts-sidebar__categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Rendered as a <button> on the home/category grid (filters in place) and as an
   <a> on archives (navigates to the category archive) — must look identical. */
.hwse-posts-sidebar__cat-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--custom--hwse-body-text);
	font-size: 14px;
	font-family: inherit;
	/* <button> defaults to line-height:normal, <a> inherits the body's — pin it
	   so both variants render at the same height. */
	line-height: 1.2;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.hwse-posts-sidebar__cat-btn:hover {
	background-color: var(--wp--custom--hwse-hover-bg);
}

.hwse-posts-sidebar__cat-btn.is-active {
	background-color: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
}

.hwse-posts-sidebar__cat-btn.is-active .hwse-posts-sidebar__cat-count {
	color: rgba(255, 255, 255, 0.8);
}

.hwse-posts-sidebar__cat-count {
	font-size: 12px;
	color: var(--wp--custom--hwse-muted);
}

.hwse-posts-sidebar__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hwse-posts-sidebar__tag-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
	color: var(--wp--custom--hwse-body-text);
}

.hwse-posts-sidebar__tag-checkbox {
	accent-color: var(--wp--custom--hwse-primary);
}

.hwse-posts-sidebar__tag-name {
	user-select: none;
}

/* Posts grid */
.hwse-posts-grid-wrap {
	flex: 1;
	min-width: 0;
}

.hwse-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Post card */
.hwse-card {
	background: var(--wp--custom--hwse-card-bg);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}

.hwse-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hwse-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
	padding: 16px;
}

/* Kill any stray <p> tags wpautop injects inside cards */
.hwse-card p:empty {
	display: none;
}

.hwse-card__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--custom--hwse-border-light);
	border-radius: 10px;
	margin-bottom: 14px;
}

.hwse-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hwse-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--wp--custom--hwse-border-light) 0%, var(--wp--custom--hwse-border) 100%);
}

.hwse-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hwse-card__title {
	font-family: var(--wp--preset--font-family--heading-font);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 6px 0;
	color: var(--wp--custom--hwse-dark-text);
}

.hwse-card__meta {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: 14px;
	color: var(--wp--custom--hwse-muted);
	margin-bottom: 14px;
}

.hwse-card__date::after {
	content: ",\00a0";
}

.hwse-card__excerpt {
	font-size: 15px;
	font-weight: 300;
	color: var(--wp--custom--hwse-secondary-text);
	line-height: 1.65;
	margin: 0 0 18px 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hwse-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hwse-card__tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 400;
	background: var(--wp--custom--hwse-tag-bg);
	color: var(--wp--custom--hwse-body-text);
	border: 1px solid var(--wp--custom--hwse-border);
	white-space: nowrap;
}

.hwse-card__tag--new {
	background: var(--wp--custom--hwse-tag-new);
	color: var(--wp--custom--hwse-on-dark);
	border-color: var(--wp--custom--hwse-tag-new);
}

.hwse-card__tag--highlight {
	background: var(--wp--custom--hwse-tag-highlight);
	color: var(--wp--custom--hwse-on-dark);
	border-color: var(--wp--custom--hwse-tag-highlight);
}

/* Load More */
.hwse-posts-grid__load-more-wrap {
	text-align: center;
	margin-top: 32px;
}

.hwse-posts-grid__load-more {
	display: inline-block;
	padding: 12px 40px;
	border: 2px solid var(--wp--custom--hwse-primary);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--custom--hwse-primary);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.hwse-posts-grid__load-more:hover {
	background: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
}

.hwse-posts-grid__load-more:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Spinner */
.hwse-posts-grid__spinner {
	text-align: center;
	padding: 24px 0;
}

.hwse-posts-grid__spinner-dot {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid var(--wp--custom--hwse-border-light);
	border-top-color: var(--wp--custom--hwse-primary);
	border-radius: 50%;
	animation: hwse-spin 0.7s linear infinite;
}

@keyframes hwse-spin {
	to { transform: rotate(360deg); }
}

/* Empty state */
.hwse-posts-grid__empty {
	text-align: center;
	color: var(--wp--custom--hwse-muted);
	font-size: 15px;
	padding: 48px 16px;
}

/* --------------------------------------------------------------------------
   SECTION 3: CTA Contact
   -------------------------------------------------------------------------- */
.hwse-cta {
	background: transparent;
	margin: 0;
	padding: 0 var(--hwse-box-pad, max(32px, calc(50% - var(--hwse-content-half))));
}

/* Kill WP flow margins on the template-part wrapper, keep 48px bottom */
.wp-block-template-part:has(.hwse-cta),
.hwse-cta,
.hwse-cta > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.wp-block-template-part:has(.hwse-cta) {
	padding-bottom: 48px;
}

.hwse-cta__inner {
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 14px;
	background: var(--wp--custom--hwse-card-bg);
	border-radius: 10px;
}

.hwse-cta__agent {
	flex-shrink: 0;
	width: 150px;
	overflow: hidden;
	border-radius: 6px;
}

.hwse-cta__agent-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hwse-cta__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
}

.hwse-cta__row-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.hwse-cta__row-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.hwse-cta__title {
	font-size: 18px;
	font-weight: 400;
	margin: 0;
	color: var(--wp--custom--hwse-dark-text);
	line-height: 1.4;
}

.hwse-cta__subtitle {
	font-size: 13px;
	margin: 0;
	color: var(--wp--custom--hwse-subtle);
	line-height: 1.5;
}

.hwse-cta__contact-label {
	font-size: 14px;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0;
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
	flex-shrink: 0;
}

.hwse-cta__contact-label strong {
	font-weight: 700;
}

.hwse-cta__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.hwse-cta__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--custom--hwse-dark-text);
}

.hwse-cta__phone svg {
	flex-shrink: 0;
}

.hwse-cta__phone-number {
	color: var(--wp--custom--hwse-dark-text);
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.hwse-cta__phone-number:hover {
	color: var(--wp--custom--hwse-primary);
}

.hwse-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 24px;
	background: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
	box-sizing: border-box;
}

.hwse-cta__button:hover {
	background: var(--wp--custom--hwse-primary-hover);
}

.hwse-cta__button svg {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SECTION 4: Blog Categories
   -------------------------------------------------------------------------- */
.hwse-section--categories {
	background-color: transparent;
}

.hwse-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.hwse-category-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	background: var(--wp--custom--hwse-card-bg);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--wp--custom--hwse-border-light);
	text-align: center;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hwse-category-card:hover {
	border-color: var(--wp--custom--hwse-primary);
	box-shadow: 0 4px 12px rgba(252, 94, 7, 0.1);
	transform: translateY(-2px);
}

.hwse-category-card__title {
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0;
}

/* --------------------------------------------------------------------------
   SECTION 4b: Category Tiles — hwse/category-tiles + hwse/category-tile blocks

   Distinct from SECTION 4 above, which styles the [hwse_blog_categories]
   shortcode. Both can appear on the same page, so the class names are kept
   separate on purpose (tile vs card).
   -------------------------------------------------------------------------- */
.hwse-category-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hwse-category-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* 12/5 rather than 3/1 — at the 384px desktop tile width that is 160px
	   instead of 128px, i.e. 2rem taller. */
	aspect-ratio: 12 / 5;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--wp--custom--hwse-nav-bg);
	text-decoration: none;
}

.hwse-category-tile__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Bottom-weighted scrim — heaviest under the title, fading out before the top
   so the image is not flattened. The title is white and photos are often light. */
.hwse-category-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.4) 18%,
		rgba(0, 0, 0, 0.15) 35%,
		rgba(0, 0, 0, 0) 100%
	);
	transition: background 0.3s ease;
}

.hwse-category-tile__title {
	position: relative;
	z-index: 2;
	padding: 0 20px 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--custom--hwse-on-dark);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	/* Grow upward from the baseline so the zoom does not crop at the edge. */
	transform-origin: bottom center;
	transition: transform 0.3s ease, color 0.3s ease;
}

.hwse-category-tile:hover .hwse-category-tile__title,
.hwse-category-tile:focus-visible .hwse-category-tile__title {
	transform: scale(1.08);
	color: var(--wp--custom--hwse-primary);
}

.hwse-category-tile:hover .hwse-category-tile__media,
.hwse-category-tile:focus-visible .hwse-category-tile__media {
	transform: scale(1.06);
}

.hwse-category-tile:hover::after,
.hwse-category-tile:focus-visible::after {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.86) 0%,
		rgba(0, 0, 0, 0.5) 18%,
		rgba(0, 0, 0, 0.27) 35%,
		rgba(0, 0, 0, 0.06) 100%
	);
}

.hwse-category-tile:focus-visible {
	outline: 3px solid var(--wp--custom--hwse-primary);
	outline-offset: 3px;
}

@media (max-width: 1199px) {
	.hwse-category-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 599px) {
	.hwse-category-tiles {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* A full-width tile needs a squarer ratio or it reads as a letterbox strip. */
	.hwse-category-tile {
		aspect-ratio: 9 / 5;
	}

	.hwse-category-tile__title {
		padding: 0 16px 16px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hwse-category-tile__media,
	.hwse-category-tile__title,
	.hwse-category-tile::after {
		transition: none;
	}

	.hwse-category-tile:hover .hwse-category-tile__media,
	.hwse-category-tile:focus-visible .hwse-category-tile__media,
	.hwse-category-tile:hover .hwse-category-tile__title,
	.hwse-category-tile:focus-visible .hwse-category-tile__title {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   SECTION 5: About Our Blog
   -------------------------------------------------------------------------- */
.hwse-section--about {
	background-color: transparent;
}

.hwse-about.wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 48px;
	align-items: center;
}

.hwse-about__image.wp-block-column {
	flex: 0 0 45% !important;
	max-width: 45% !important;
}

/* The left column is an empty core/image block — the picture is chosen from
   the media library in the Site Editor, not shipped with the theme. */
.hwse-about__image .wp-block-image {
	margin: 0;
}

.hwse-about__image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	object-fit: cover;
}

/* Until an image is picked the column would collapse, so it holds its shape
   as a dashed placeholder.  :has() means this disappears on its own the
   moment an <img> exists — no extra class to remove. */
.hwse-about__image.wp-block-column:not(:has(img)) {
	min-height: 320px;
	border: 2px dashed var(--wp--custom--hwse-border);
	border-radius: 10px;
}

.hwse-about__content.wp-block-column {
	flex: 1 !important;
}

.hwse-about__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 16px 0;
}

/* Wrapper around a single {i18n:about_p_html} string, so the <p> tags come
   from the translation and translators never touch class names. */
.hwse-about__text p {
	font-size: 15px;
	color: var(--wp--custom--hwse-secondary-text);
	line-height: 1.7;
	margin: 0 0 14px 0;
}

.hwse-about__text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   CATEGORY ARCHIVE
   Reuses the home page layout (.hwse-home) — title + sidebar + posts grid.
   ========================================================================== */

/* No hero image above the title here, so the title block needs its own top gap. */
/* Category teaser banner — the term's tile image, above the title.  The
   section collapses to nothing when the category has no image, because
   [hwse_category_hero] returns an empty string and the padding below is
   only applied when the banner is actually present. */
.hwse-section--hero {
	padding: 0;
}

/* Same 16px gutters as .hwse-hero, so the teaser is exactly as wide as the
   home page's top image rather than sitting inside the 1200px content box. */
.hwse-section--hero:has(.hwse-category__hero) {
	padding: 0 16px;
}

/* With a banner present the title no longer needs its own top gap. */
.hwse-category:has(.hwse-category__hero) .hwse-section--title {
	padding-top: 32px;
}

.hwse-category .hwse-section--title {
	padding-top: 48px;
}

.hwse-category__title {
	margin-top: 0;
}

/* Term description sits below the posts grid — reads as prose, not a subtitle.
   core/term-description renders nothing when the term has no description, so
   the gap below the grid simply disappears on categories without one. */
.hwse-category__description {
	margin: 48px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--custom--hwse-body-text);
}

.hwse-category__description p {
	margin: 0 0 16px;
}

/* Term descriptions may contain arbitrary HTML (images, links) from the editor. */
.hwse-category__description img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.hwse-category__description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.hwse-category .hwse-section--title {
		padding-top: 32px;
	}
}

/* Support box inside the posts sidebar. Below 959px the sidebar stacks
   full-width, so cap the card instead of letting the 4/3 image blow up. */
@media (max-width: 959px) {
	.hwse-posts-sidebar .hwse-sidebar-contact {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   HOME PAGE RESPONSIVE
   ========================================================================== */

/* --- Desktop (1200px+) --------------------------------------------------- */
@media (min-width: 1200px) {
	.hwse-hero__image,
	.hwse-category__hero {
		height: 400px;
	}
	.hwse-hero__title {
		font-size: 40px;
	}
}

/* --- Small Desktop (≤1199px) --------------------------------------------- */
@media (max-width: 1199px) {
	.hwse-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hwse-posts-sidebar {
		flex: 0 0 220px;
	}
	.hwse-categories-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.hwse-about.wp-block-columns {
		gap: 32px;
	}
}

/* --- Tablet (≤959px) ----------------------------------------------------- */
@media (max-width: 959px) {
	.hwse-section {
		padding: 36px 24px;
	}
	.hwse-hero__image,
	.hwse-category__hero {
		height: 260px;
	}
	.hwse-hero__title {
		font-size: 28px;
		margin-top: 24px;
	}
	.hwse-posts-section__layout {
		flex-direction: column;
	}
	.hwse-posts-sidebar {
		flex: none;
		width: 100%;
		position: static;
	}
	.hwse-posts-sidebar__categories {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}
	.hwse-posts-sidebar__cat-btn {
		width: auto;
		padding: 6px 14px;
	}
	.hwse-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hwse-cta__inner {
		gap: 16px;
	}
	.hwse-cta__agent {
		width: 110px;
	}
	.hwse-cta__contact-label {
		display: none;
	}
	.hwse-cta__row-top {
		justify-content: flex-start;
	}
	.hwse-about.wp-block-columns {
		flex-direction: column !important;
		gap: 24px;
	}
	.hwse-about__image.wp-block-column {
		flex: none !important;
		max-width: 100% !important;
		width: 100%;
	}
}

/* --- Small Tablet (≤767px) ----------------------------------------------- */
@media (max-width: 767px) {
	.hwse-section {
		padding: 32px 16px;
	}
	.hwse-section__heading {
		font-size: 24px;
		margin-bottom: 24px;
	}
	.hwse-hero__image,
	.hwse-category__hero {
		height: 200px;
	}
	.hwse-hero__title {
		font-size: 24px;
	}
	.hwse-posts-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hwse-cta__inner {
		flex-direction: column;
		gap: 12px;
	}
	.hwse-cta__agent {
		width: 100%;
		height: 120px;
	}
	.hwse-cta__row-top,
	.hwse-cta__row-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.hwse-cta__actions {
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}
	.hwse-cta__button {
		width: 100%;
		justify-content: center;
	}
	.hwse-categories-grid {
		gap: 12px;
	}
	.hwse-category-card {
		padding: 16px;
	}
}

/* --- Mobile (≤599px) ----------------------------------------------------- */
@media (max-width: 599px) {
	.hwse-home {
		--hwse-box-pad: 12px;
	}
	.hwse-section {
		padding: 24px 12px;
	}
	.hwse-section__heading {
		font-size: 20px;
		margin-bottom: 20px;
	}
	.hwse-hero__image,
	.hwse-category__hero {
		height: 160px;
	}
	.hwse-hero__title {
		font-size: 20px;
		margin-top: 16px;
	}
	.hwse-cta__title {
		font-size: 16px;
	}
	.hwse-cta__subtitle {
		font-size: 12px;
	}
	.hwse-cta__button {
		padding: 12px 24px;
		font-size: 14px;
	}
	.hwse-categories-grid {
		grid-template-columns: 1fr;
	}
	.hwse-about__title {
		font-size: 22px;
	}
	.hwse-about__text p {
		font-size: 14px;
	}
}

/* --- Small phones (≤374px) ----------------------------------------------- */
@media (max-width: 374px) {
	.hwse-hero__image,
	.hwse-category__hero {
		height: 130px;
	}
	.hwse-hero__title {
		font-size: 18px;
	}
	.hwse-cta__inner {
		padding: 12px 10px;
	}
	.hwse-cta__agent {
		display: none;
	}
}

/* ==========================================================================
   INDEX (FALLBACK) PAGE
   ========================================================================== */

.hwse-index {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	margin-block-start: 0;
}

.hwse-index > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-section--index {
	padding-top: 32px;
}

.hwse-index__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 24px 0;
}

@media (max-width: 767px) {
	.hwse-index__title {
		font-size: 22px;
	}
}

@media (max-width: 599px) {
	.hwse-index {
		--hwse-box-pad: 12px;
	}
	.hwse-section--index {
		padding-top: 20px;
	}
	.hwse-index__title {
		font-size: 20px;
	}
}

/* ==========================================================================
   STATIC PAGE
   ========================================================================== */

.hwse-page {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	margin: 0 !important;
}

.hwse-page > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-page__header {
	padding: 40px var(--hwse-box-pad) 0;
	text-align: center;
}

.hwse-page__header > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-page__title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 32px 0 !important;
	max-width: 800px;
	margin-inline: auto !important;
}

.hwse-page__body {
	/* Full-bleed on purpose: --hwse-box-pad already centres the column. Never add a
	   max-width here — with border-box the padding is taken out of it, so past a
	   ~2000px viewport the content box collapses to min-content (one word per line). */
	padding: 0 var(--hwse-box-pad) 48px;
}

.hwse-page__body > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-page__content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--custom--hwse-body-text);
	max-width: 800px;
	margin-inline: auto;
}

@media (max-width: 767px) {
	.hwse-page__title {
		font-size: 28px;
	}
}

@media (max-width: 599px) {
	.hwse-page {
		--hwse-box-pad: 12px;
	}
	.hwse-page__header {
		padding: 20px 12px 0;
	}
	.hwse-page__title {
		font-size: 22px;
	}
	.hwse-page__body {
		padding: 0 12px 24px;
	}
}

/* ==========================================================================
   SEARCH RESULTS PAGE
   ========================================================================== */

.hwse-search-page {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	margin-block-start: 0;
}

.hwse-search-page > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-section--search {
	padding-top: 32px;
}

.hwse-search-page__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 8px 0;
}

.hwse-search-results__count {
	font-size: 15px;
	color: var(--wp--custom--hwse-muted);
	margin: 0 0 28px 0;
}

@media (max-width: 767px) {
	.hwse-search-page__title {
		font-size: 22px;
	}
}

@media (max-width: 599px) {
	.hwse-search-page {
		--hwse-box-pad: 12px;
	}
	.hwse-section--search {
		padding-top: 20px;
	}
	.hwse-search-page__title {
		font-size: 20px;
	}
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.hwse-404 {
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 60px 24px 80px;
	text-align: center;
}

.hwse-404 > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-404__heading {
	font-size: 28px;
	font-weight: 300;
	color: var(--wp--custom--hwse-muted);
	margin: 0 0 48px 0 !important;
}

.hwse-404__graphic {
	padding: 4rem 0;
	text-align: center;
}

.hwse-404__svg {
	width: 100%;
	max-width: 480px;
	height: auto;
}

.hwse-404__action {
	display: flex;
	justify-content: center;
}

.hwse-404__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 40px;
	background: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s;
	box-sizing: border-box;
}

.hwse-404__button:hover {
	background: var(--wp--custom--hwse-primary-hover);
}

.hwse-404__button svg {
	flex-shrink: 0;
}

/* 404 Responsive */
@media (max-width: 767px) {
	.hwse-404 {
		min-height: 60vh;
		padding: 40px 16px 60px;
	}
	.hwse-404__heading {
		font-size: 22px;
		margin-bottom: 32px !important;
	}
	.hwse-404__graphic {
		margin-bottom: 40px;
	}
	.hwse-404__svg {
		max-width: 320px;
	}
}

@media (max-width: 374px) {
	.hwse-404__heading {
		font-size: 18px;
	}
	.hwse-404__svg {
		max-width: 240px;
	}
	.hwse-404__button {
		padding: 12px 28px;
		font-size: 14px;
	}
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

/* Yoast owns this markup, so the selectors target what it emits:
     <nav class="hwse-breadcrumbs"><span>
       <span><a>Home</a></span> » <span class="breadcrumb_last">Title</span>
     </span></nav>
   The » separator is a plain text node between the spans, which rules out
   flex/gap here — the trail is laid out as ordinary inline content instead. */
.hwse-breadcrumbs {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	padding: 14px var(--hwse-box-pad);
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--custom--hwse-muted);
}

.hwse-breadcrumbs--center {
	text-align: center;
}

/* Yoast emits " » " as a bare text node between the crumb spans, so there is
   no element to hang a gap on. Margins on the crumbs widen both sides of every
   separator instead; first/last are zeroed so the trail still lines up with the
   page gutter rather than sitting 6px in.
   The outer element is "> *" not "> span" because Yoast's wrapper tag is
   swappable via the wpseo_breadcrumb_output_wrapper filter. */
.hwse-breadcrumbs > * > span {
	margin-inline: 6px;
}

.hwse-breadcrumbs > * > span:first-child {
	margin-inline-start: 0;
}

.hwse-breadcrumbs > * > span:last-child {
	margin-inline-end: 0;
}

.hwse-breadcrumbs a {
	color: var(--wp--custom--hwse-secondary-text);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hwse-breadcrumbs a:hover,
.hwse-breadcrumbs a:focus-visible {
	color: var(--wp--custom--hwse-primary);
	text-decoration: underline;
}

/* Current page: muted, and truncated so a long post title cannot push the
   trail onto a third line. inline-block is what makes ellipsis possible on
   an otherwise inline element. */
.hwse-breadcrumbs .breadcrumb_last {
	color: var(--wp--custom--hwse-muted);
	display: inline-block;
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media (max-width: 767px) {
	.hwse-breadcrumbs {
		font-size: 12px;
		padding-block: 10px;
	}
	/* Tighter, so a 3+ level trail still fits on one line. */
	.hwse-breadcrumbs > * > span {
		margin-inline: 3px;
	}
	.hwse-breadcrumbs .breadcrumb_last {
		max-width: 24ch;
	}
}

@media (max-width: 599px) {
	.hwse-breadcrumbs .breadcrumb_last {
		max-width: 16ch;
	}
}

/* ==========================================================================
   SINGLE POST PAGE
   ========================================================================== */

.hwse-single {
	--hwse-box-pad: max(32px, calc(50% - var(--hwse-content-half)));
	margin: 0 !important;
}

.hwse-single > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* --------------------------------------------------------------------------
   Post header – centered title, meta, featured image
   -------------------------------------------------------------------------- */
.hwse-single__header {
	padding: 40px var(--hwse-box-pad) 32px;
	text-align: center;
}

.hwse-single__header > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-single__title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 16px 0 !important;
	max-width: 800px;
	margin-inline: auto !important;
}

.hwse-single__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	color: var(--wp--custom--hwse-muted);
	margin-bottom: 28px !important;
}

.hwse-single__meta > * {
	margin: 0 !important;
}

.hwse-single__meta-sep {
	color: var(--wp--custom--hwse-muted);
	font-size: 14px;
}

.hwse-single__date,
.hwse-single__author {
	font-size: 14px;
	color: var(--wp--custom--hwse-muted);
}

/* Height and rounding sit on the <img>, not the <figure>: the figure has to
   stay auto-height so the <figcaption> below the image is not clipped. */
.hwse-single__featured-img {
	width: 100%;
	margin: 0 0 48px 0 !important;
}

.hwse-single__featured-img img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

.hwse-single__featured-caption {
	margin: 10px 0 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--custom--hwse-subtle);
	text-align: center;
}

/* Core ships `.wp-block-post-featured-image a { display: block }` for when the
   image itself is the link. It is a descendant selector, so it also catches a
   link inside the caption we inject into that figure — core never expected a
   caption there — and the link breaks onto its own full-width line. Selector
   kept at one class + two elements so it outweighs core's regardless of the
   order the two stylesheets happen to load in. */
.hwse-single__featured-img figcaption a {
	display: inline;
}

/* --------------------------------------------------------------------------
   Body & layout – sidebar left (via order), content right
   -------------------------------------------------------------------------- */
.hwse-single__body {
	padding: 0 var(--hwse-box-pad) 48px;
}

.hwse-single__body > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.hwse-single__layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* Sidebar visually on left, but content first in DOM for SEO */
.hwse-single-sidebar {
	order: -1;
	flex: 0 0 260px;
	position: sticky;
	top: 120px;
}

.hwse-single__content-inner {
	flex: 1;
	min-width: 0;
}

/* Content typography */
.hwse-single__content-inner h2,
.hwse-single__content-inner h3,
.hwse-single__content-inner h4,
.hwse-single__content-inner h5,
.hwse-single__content-inner h6 {
	scroll-margin-top: 130px;
}

.hwse-single__content-inner > *:first-child {
	margin-block-start: 0 !important;
}

/* --------------------------------------------------------------------------
   Post content – a link wrapped in a button
   Authors paste <button><a>…</a></button> into a Custom HTML block. The <button>
   brings the UA's own background, border and font with it, so it is stripped
   back to a bare wrapper and the button look goes on the <a> — the part that is
   actually clickable, and the part carrying the underline to remove.
   :has() keeps the reset off the plain <button>s a shortcode may render into a
   post (load more, category filters), which have no link inside.
   -------------------------------------------------------------------------- */
.hwse-single__content button:has(> a) {
	display: inline-flex;
	vertical-align: middle;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
}

/* Same look as .hwse-cta__button, the Contact button in parts/cta-contact.html. */
.hwse-single__content button > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 24px;
	background: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s;
	box-sizing: border-box;
}

.hwse-single__content button > a:hover {
	background: var(--wp--custom--hwse-primary-hover);
	color: var(--wp--custom--hwse-on-dark);
	text-decoration: none;
}

.hwse-single__content button > a svg {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Post footer – tags + date/author
   -------------------------------------------------------------------------- */
.hwse-single__footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--hwse-border);
}

.hwse-single__footer-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.hwse-single__footer-tags-label {
	font-size: 14px;
	color: var(--wp--custom--hwse-muted);
	margin-right: 4px;
}

.hwse-single__footer-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 13px;
	background: var(--wp--custom--hwse-tag-bg);
	color: var(--wp--custom--hwse-body-text);
	text-decoration: none;
	transition: background-color 0.15s;
}

.hwse-single__footer-tag:hover {
	background: var(--wp--custom--hwse-hover-bg);
}

/* --------------------------------------------------------------------------
   Author box — hwse/author-box block
   -------------------------------------------------------------------------- */
.hwse-author-box {
	display: flex;
	align-items: center;
	gap: 24px;
	/* No vertical padding on purpose — the box is deliberately shorter than the
	   photo, which overhangs it by 1rem top and bottom (see __photo below). */
	padding: 0 32px;
	min-height: 80px;
	background: var(--wp--custom--hwse-card-bg);
	border-radius: 12px;
}

.hwse-author-box__photo {
	flex-shrink: 0;
	width: 112px;
	height: 112px;
	/* Shrinks the photo's contribution to the flex line to 80px, so the box
	   sizes to that and the remaining 2×16px hangs outside it. */
	margin-block: -16px;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* Shown instead of a photo when the author has not uploaded one. */
.hwse-author-box__photo--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--custom--hwse-hover-bg);
	color: var(--wp--custom--hwse-secondary-text);
	font-size: 40px;
	font-weight: 600;
	text-transform: uppercase;
}

.hwse-author-box__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hwse-author-box__name {
	font-size: 27px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--wp--custom--hwse-dark-text);
}

.hwse-author-box__role {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--wp--custom--hwse-secondary-text);
}

/* Either an <img> from the Company icon setting, or the sprite <svg> fallback —
   `color` only affects the latter. */
.hwse-author-box__mark {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	object-fit: contain;
	color: var(--wp--custom--hwse-primary);
}

/* Decorative label; pushed to the right edge by the auto margin. */
.hwse-author-box__watermark {
	margin-left: auto;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--custom--hwse-border-light);
	user-select: none;
}

@media (max-width: 767px) {
	.hwse-author-box {
		gap: 16px;
		padding: 0 20px;
		min-height: 60px;
	}
	.hwse-author-box__photo {
		width: 84px;
		height: 84px;
		margin-block: -12px;
	}
	.hwse-author-box__photo--initial {
		font-size: 30px;
	}
	.hwse-author-box__name {
		font-size: 21px;
	}
	.hwse-author-box__watermark {
		font-size: 24px;
	}
}

@media (max-width: 599px) {
	/* Not enough width for the watermark once the text wraps. */
	.hwse-author-box__watermark {
		display: none;
	}
	.hwse-author-box__role {
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   "Do you have questions?" CTA banner
   -------------------------------------------------------------------------- */
.hwse-single__questions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--wp--custom--hwse-cta-gradient-start) 0%, var(--wp--custom--hwse-cta-gradient-end) 100%);
	color: var(--wp--custom--hwse-on-dark);
}

.hwse-single__questions-text {
	flex: 1;
	min-width: 0;
}

.hwse-single__questions-title {
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 8px 0;
	color: var(--wp--custom--hwse-on-dark);
}

.hwse-single__questions-desc {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.hwse-single__questions-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 32px;
	background: var(--wp--custom--hwse-card-bg);
	color: var(--wp--custom--hwse-dark-text);
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: box-shadow 0.2s;
	box-sizing: border-box;
}

.hwse-single__questions-btn:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hwse-single__questions-btn svg {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   "Our latest articles" section – reuses .hwse-card from home grid
   -------------------------------------------------------------------------- */
/* Spacing for the sections that single.html renders as siblings of the post
   content. It has to be set here, and with !important, because the block-gap
   reset on `.hwse-single__body > *` zeroes their margin-block-start. */
/* The photo overhangs the box by 16px top and bottom, so the visible gap is
   16px smaller than the margin set here. */
.hwse-single__body > .hwse-author-box {
	margin-block: 64px !important;
}

.hwse-single__body > .hwse-single__questions-part,
.hwse-single__body > .hwse-single__latest {
	margin-block-start: 80px !important;
}

.hwse-single__latest-title {
	font-size: 28px;
	font-weight: 300;
	text-align: center;
	color: var(--wp--custom--hwse-dark-text);
	margin: 0 0 32px 0;
}

.hwse-single__latest-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* --------------------------------------------------------------------------
   TOC nav – matches .hwse-posts-sidebar section style (no card bg)
   -------------------------------------------------------------------------- */
.hwse-toc {
	margin-bottom: 32px;
}

.hwse-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hwse-toc__item--indent-1 .hwse-toc__link {
	padding-left: 24px;
}

.hwse-toc__item--indent-2 .hwse-toc__link {
	padding-left: 36px;
}

.hwse-toc__item--indent-3 .hwse-toc__link {
	padding-left: 48px;
}

.hwse-toc__item--indent-4 .hwse-toc__link {
	padding-left: 60px;
}

.hwse-toc__link {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--wp--custom--hwse-body-text);
	text-decoration: none;
	line-height: 1.4;
	border-radius: 6px;
	transition: background-color 0.15s, color 0.15s;
}

.hwse-toc__link:hover {
	background-color: var(--wp--custom--hwse-hover-bg);
}

.hwse-toc__link.is-active {
	background-color: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
}

/* --------------------------------------------------------------------------
   Sidebar Contact section – matches .hwse-posts-sidebar section style
   -------------------------------------------------------------------------- */
.hwse-sidebar-contact {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.hwse-sidebar-contact .hwse-posts-sidebar__title {
	align-self: flex-start;
}

/* The core/shortcode block runs wpautop() on its output, which wraps the card's
   inline children (img, links) in a <p>. On the single post the card is injected
   after wpautop, so it has no <p>. Unwrap it so both render identically. */
.hwse-sidebar-contact > p {
	display: contents;
}

.hwse-sidebar-contact__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

/* Shared with core/button in post content so the two cannot drift apart.
   TwentyTwentyFour styles .wp-block-button__link from its own palette via
   :root :where(...) at specificity 0,1,0, so these plain class selectors win
   on source order — custom.css is loaded after the global styles. */
.hwse-sidebar-contact__button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 24px;
	background: var(--wp--custom--hwse-primary);
	color: var(--wp--custom--hwse-on-dark);
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
	box-sizing: border-box;
}

/* Full width only in the sidebar card; in content the button hugs its label. */
.hwse-sidebar-contact__button {
	width: 100%;
}

.hwse-sidebar-contact__button:hover,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
	background: var(--wp--custom--hwse-primary-hover);
	color: var(--wp--custom--hwse-on-dark);
}

.hwse-sidebar-contact__button svg,
.wp-block-button__link svg {
	flex-shrink: 0;
}

.hwse-sidebar-contact__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--custom--hwse-body-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: color 0.2s;
}

.hwse-sidebar-contact__phone:hover {
	color: var(--wp--custom--hwse-primary);
}

.hwse-sidebar-contact__phone svg {
	flex-shrink: 0;
}

/* ==========================================================================
   SINGLE POST RESPONSIVE
   ========================================================================== */

/* --- Small Desktop (≤1199px) --------------------------------------------- */
@media (max-width: 1199px) {
	.hwse-single-sidebar {
		flex: 0 0 220px;
	}
	.hwse-single__layout {
		gap: 32px;
	}
}

/* --- Tablet (≤959px) — sidebar stacks above content ---------------------- */
@media (max-width: 959px) {
	.hwse-single__header {
		padding: 32px 24px 24px;
	}
	.hwse-single__featured-img img {
		height: 260px;
	}
	.hwse-single__title {
		font-size: 28px;
	}
	.hwse-single__body {
		padding: 0 24px 36px;
	}
	.hwse-single__layout {
		flex-direction: column;
		gap: 24px;
	}
	.hwse-single-sidebar {
		order: 0;
		flex: none;
		width: 100%;
		position: static;
	}
	.hwse-toc__list {
		flex-wrap: wrap;
		gap: 0 16px;
	}
	.hwse-toc__item {
		padding-left: 0 !important;
	}
	.hwse-toc__link {
		border-left: none;
		padding-left: 0;
		margin-left: 0;
	}
}

/* --- Small Tablet (≤767px) ----------------------------------------------- */
@media (max-width: 767px) {
	.hwse-single__header {
		padding: 24px 16px 20px;
	}
	.hwse-single__title {
		font-size: 24px;
	}
	.hwse-single__meta {
		font-size: 13px;
	}
	.hwse-single__body {
		padding: 0 16px 32px;
	}
	.hwse-single__featured-img img {
		height: 200px;
	}
	.hwse-single__latest-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hwse-single__latest-title {
		font-size: 24px;
		margin-bottom: 24px;
	}
	.hwse-single__questions {
		flex-direction: column;
		padding: 24px;
		gap: 20px;
		text-align: center;
	}
	.hwse-single__questions-btn {
		width: 100%;
		justify-content: center;
	}
	.hwse-single__footer {
		flex-direction: column;
		gap: 16px;
	}
}

/* --- Mobile (≤599px) — hide contact card, CTA below content is enough ---- */
@media (max-width: 599px) {
	.hwse-single {
		--hwse-box-pad: 12px;
	}
	.hwse-single__header {
		padding: 20px 12px 16px;
	}
	.hwse-single__title {
		font-size: 22px;
	}
	.hwse-single__body {
		padding: 0 12px 24px;
	}
	.hwse-single__featured-img img {
		height: 160px;
	}
	.hwse-single-sidebar .hwse-sidebar-contact {
		display: none;
	}
}

/* --- Small phones (≤374px) ----------------------------------------------- */
@media (max-width: 374px) {
	.hwse-single__title {
		font-size: 20px;
	}
}

/* --- Release smoke test ---------------------------------------------------
   No-op marker used to verify the GitLab update checker end to end. Declares
   nothing, so it cannot affect rendering. Safe to delete. */
.hwse-release-check {
}

/* --------------------------------------------------------------------------
   WIDE SCREENS (≥1400 / ≥1600 / ≥1920)
   Everything scales off --hwse-content-half above, single posts included: the
   article column fills the wider shell the same way the listing pages do.
   The headline stays capped and centred (see .hwse-single__title), matching
   .hwse-page__title.
   -------------------------------------------------------------------------- */

/* Slightly longer measure on large monitors for the capped prose blocks. */
@media (min-width: 1600px) {
	.hwse-page__title,
	.hwse-page__content,
	.hwse-single__title {
		max-width: 900px;
	}
}

/* --------------------------------------------------------------------------
   TABLES (core/table in post content)

   Core draws 1px around every cell plus a 3px rule under the head, all in
   currentColor — a heavy black grid.  Replaced with horizontal rules only and
   no fills, so the table reads as text rather than as a coloured widget.

   Rules stay in currentColor so each one matches the text it belongs to: the
   header rule follows the darker heading colour, the row rules the body text.

   The radius lives on the <figure>, not the <table>: border-collapse stops a
   table clipping its own corners.  Core already sets overflow-x:auto on the
   figure, which both clips to the radius and keeps wide tables scrollable on
   narrow screens instead of pushing the page sideways.
   -------------------------------------------------------------------------- */
.wp-block-table {
	margin: 0 0 24px;
	border: 1px solid currentColor;
	border-radius: 8px;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	line-height: 1.45;
	background: transparent;
}

/* Kill core's grid and its 3px head rule. */
.wp-block-table thead,
.wp-block-table tfoot {
	border: 0;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid currentColor;
	border-right: 1px solid currentColor;
	padding: 7px 12px;
	text-align: left;
	vertical-align: top;
	background: transparent;
}

/* The last column's rule would sit directly against the figure's border and
   read as a double line, so it is dropped. */
.wp-block-table tr > *:last-child {
	border-right: 0;
}

/* Header carries weight instead of a fill, and a heavier rule under it to
   separate it from the body. */
.wp-block-table thead th {
	font-weight: 600;
	color: var(--wp--custom--hwse-dark-text);
	white-space: nowrap;
	border-bottom-width: 2px;
}

/* No rule under the final row — the figure's border closes it. */
.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 599px) {
	.wp-block-table th,
	.wp-block-table td {
		padding: 6px 10px;
	}

	.wp-block-table table {
		font-size: 13px;
	}
}

/* =========================================================================
   AI GENERATED BADGE

   functions.php puts .hwse-ai-generated on the <img> itself, but an <img> is a
   replaced element and paints no ::before / ::after of its own, so the badge has
   to be drawn on a wrapper.  `:has(> …)` matches whatever element directly wraps
   the image — a div, a figure, a link — so one rule covers every surface there
   is, and any image added later is covered without touching this file.

   ::before rather than ::after, because .hwse-category-tile::after is already
   that tile's gradient scrim.
   ========================================================================= */

:root {
	--hwse-ai-badge-size: 25px;
	--hwse-ai-badge-inset: 5px;
	--hwse-ai-badge-opacity: 1;
}

/* Branding is not editorial imagery, so the logo and the author's portrait are
   excluded outright — listed here rather than given `content: none` later so
   they never pick up `position: relative` either.

   ⚠ The list is wrapped in :where() so it contributes no specificity. Without
   it `:not(.a, .b, .c)` counts as a class and the base rule outweighs the
   caption override further down, which then silently never applies. */
:has(> .hwse-ai-generated):not(:where(.wp-block-site-logo, .custom-logo-link, .hwse-author-box)) {
	position: relative;
}

:has(> .hwse-ai-generated):not(:where(.wp-block-site-logo, .custom-logo-link, .hwse-author-box))::before {
	content: "";
	display: block;
	position: absolute;
	right: var(--hwse-ai-badge-inset);
	bottom: var(--hwse-ai-badge-inset);
	width: var(--hwse-ai-badge-size);
	height: var(--hwse-ai-badge-size);
	margin: 0;
	padding: 0;
	background: url("../images/icons/ai-label.svg") center / contain no-repeat;
	opacity: var(--hwse-ai-badge-opacity);
	/* Cards and tiles are wrapped in an <a> — the badge must not eat the click. */
	pointer-events: none;
	/* Clears the category tile's scrim (z-index 1) and its title (z-index 2). */
	z-index: 3;
}

/* Everywhere else the image fills its wrapper, so wrapper edge == image edge.
   A <figure> does not: it is a block box as wide as the column, while the
   picture inside keeps its own width, which would strand the badge out to the
   right of a narrower image. Shrinking the figure to the picture makes the two
   edges the same again. Alignment survives — .aligncenter and friends work by
   auto margins, which only do anything once the box is narrower than the
   column. */
figure:has(> .hwse-ai-generated) {
	width: fit-content;
	max-width: 100%;
}

/* ⚠ Except where the theme deliberately stretches the picture. Shrink-wrapping
   asks the image for its max-content width, and `width: 100%` is cyclic while
   the parent is being sized, so it is ignored: the hero then falls back to its
   fixed 400px height × aspect ratio (~533px) and the figure collapses to that.
   These two are full-bleed by design and their image already fills them, so
   there is nothing to shrink-wrap in the first place. */
.hwse-single__featured-img:has(> .hwse-ai-generated),
.hwse-about__image .wp-block-image:has(> .hwse-ai-generated) {
	width: 100%;
}

/* A <figure> also keeps its <figcaption> as a sibling *below* the image, so
   `bottom` would measure up from under the caption text and lift the badge off
   the picture. Sharing a grid cell with the <img> pins it to the image box at
   any caption height — the margin here is the inset, not layout spacing.

   Only reached when the image is a direct child of the figure: a linked image
   sits inside an <a>, and that <a> is then the wrapper, which has no caption in
   it and so stays on the simple absolute path above. */
:has(> .hwse-ai-generated):has(> figcaption) {
	display: grid;
	grid-template-columns: 100%;
}

:has(> .hwse-ai-generated):has(> figcaption) > img,
:has(> .hwse-ai-generated):has(> figcaption)::before {
	grid-area: 1 / 1;
}

:has(> .hwse-ai-generated):has(> figcaption) > figcaption {
	grid-area: 2 / 1;
	/* Contributes nothing to the figure's intrinsic width, so a long caption
	   cannot make the box wider than the picture and strand the badge again;
	   then fills whatever width the picture set. */
	width: 0;
	min-width: 100%;
}

:has(> .hwse-ai-generated):has(> figcaption)::before {
	position: relative;
	right: auto;
	bottom: auto;
	place-self: end end;
	margin: 0 var(--hwse-ai-badge-inset) var(--hwse-ai-badge-inset) 0;
}