/*
 * Hood — supplementary styles.
 *
 * theme.json owns colors, type scale and spacing. This file only covers what
 * theme.json cannot express: block style variations, focus behaviour, and the
 * typographic rules from the brand system (§4).
 */

/* ---------------------------------------------------------------------------
 * Typography rules from brand §4
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading {
	text-wrap: balance;
}

/* Running text sits near a 65-character measure. Applies to the constrained
   content column only, so wide/full-width layout blocks are unaffected. */
.entry-content > p,
.wp-block-post-content > p {
	max-width: 68ch;
}

/* Mono is for data, codes and references — never for emphasis (brand §4). */
.hood-data,
.wp-block-post-date,
code, kbd, samp {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

/* Eyebrow label above section headings. */
.hood-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Focus — visible, navy, never removed
 * ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--navy-800);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* On dark grounds the navy ring disappears — switch to white. */
:where(.has-navy-950-background-color, .has-navy-900-background-color,
	.has-navy-800-background-color, .has-ink-950-background-color,
	.has-navy-depth-gradient-background, .has-navy-ink-gradient-background)
	:where(a, button, .wp-block-button__link):focus-visible {
	outline-color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Button variations
 *
 * Default (theme.json): orange #FF783D fill, white label. Fails AA contrast
 * (2.6:1) by deliberate brand decision, Oct 2026 — keep labels bold and large.
 * Brand §2 rule 3 allows only one orange action per view; these are the others.
 * ------------------------------------------------------------------------- */

.wp-block-button.is-style-navy > .wp-block-button__link {
	background-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--base); /* 7.76:1 — AAA */
	border: 1px solid var(--wp--preset--color--navy-800);
}

.wp-block-button.is-style-navy > .wp-block-button__link:hover,
.wp-block-button.is-style-navy > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy-900);
	border-color: var(--wp--preset--color--navy-900);
}

.wp-block-button.is-style-quiet > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy-800);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.wp-block-button.is-style-quiet > .wp-block-button__link:hover,
.wp-block-button.is-style-quiet > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gray-50);
	border-color: var(--wp--preset--color--navy-800);
}

/* Quiet buttons on a dark ground invert to a white outline. */
:where(.has-navy-950-background-color, .has-navy-900-background-color,
	.has-navy-800-background-color, .has-ink-950-background-color,
	.has-navy-depth-gradient-background, .has-navy-ink-gradient-background)
	.wp-block-button.is-style-quiet > .wp-block-button__link {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
}

:where(.has-navy-950-background-color, .has-navy-900-background-color,
	.has-navy-800-background-color, .has-ink-950-background-color,
	.has-navy-depth-gradient-background, .has-navy-ink-gradient-background)
	.wp-block-button.is-style-quiet > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Card group variation
 * ------------------------------------------------------------------------- */

.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gray-100);
	border-radius: 0.75rem;
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

.wp-block-group.is-style-card > :first-child { margin-block-start: 0; }
.wp-block-group.is-style-card > :last-child  { margin-block-end: 0; }

/* ---------------------------------------------------------------------------
 * Icons — Lucide, masked
 *
 * Every SVG in assets/icons is published by functions.php as a pair: a
 * `--hood-icon-NAME` custom property and a `.hood-icon--NAME` class. Adding an
 * icon to the site means adding a file to that directory — nothing here or in
 * functions.php needs to change.
 *
 * Two ways to place one. Content gets the classes, in the editor's
 * Advanced → "Additional CSS class(es)" field or a pattern's className:
 *
 *     class="hood-icon hood-icon--wrench"
 *
 * Components that should always carry a given icon skip the classes and assign
 * the property directly, so the markup stays clean — see the checklist and the
 * utility bar below.
 *
 * The icons are masks, not images: the SVG supplies the shape and
 * `background-color` supplies the colour. Defaulting that to `currentColor`
 * means an icon inverts along with its text on dark grounds for free.
 * ------------------------------------------------------------------------- */

.hood-icon::before {
	content: "";
	display: inline-block;
	flex: none;
	width: var(--hood-icon-size, 1.1em);
	height: var(--hood-icon-size, 1.1em);
	margin-right: 0.5em;
	vertical-align: -0.15em;
	background-color: var(--hood-icon-color, currentColor);

	/* The fallback is a fully transparent image, so `hood-icon` written without
	   an icon class renders nothing rather than a solid coloured square. */
	-webkit-mask: var(--hood-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
	mask: var(--hood-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
}

.hood-icon--sm {
	--hood-icon-size: 0.9em;
}

.hood-icon--lg {
	--hood-icon-size: 1.5em;
}

.hood-icon--xl {
	--hood-icon-size: 2.25em;
}

/* Brand §3: orange is a shape colour, never text. An icon is a shape, so it
   may take the brand orange that the words beside it may not. */
.hood-icon--orange {
	--hood-icon-color: var(--wp--preset--color--orange-500);
}

/* Navy is fixed rather than inherited, so it is for light grounds only. */
.hood-icon--navy {
	--hood-icon-color: var(--wp--preset--color--navy-800);
}

/* Stands the icon above the text — the card and feature-list treatment. */
.hood-icon--block::before {
	display: block;
	margin-right: 0;
	margin-bottom: 0.5rem;
	vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
 * Checklist — Lucide circle-check, 2px stroke, navy (brand §7)
 * ------------------------------------------------------------------------- */

ul.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

ul.is-style-checklist > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

ul.is-style-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--navy-800);
	-webkit-mask: var(--hood-icon-circle-check) center / contain no-repeat;
	mask: var(--hood-icon-circle-check) center / contain no-repeat;
}

/* On dark grounds the check flips to white. */
:where(.has-navy-950-background-color, .has-navy-900-background-color,
	.has-navy-800-background-color, .has-ink-950-background-color,
	.has-navy-depth-gradient-background, .has-navy-ink-gradient-background)
	ul.is-style-checklist > li::before {
	background-color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Header / logo
 * ------------------------------------------------------------------------- */

/* Brand §6: horizontal lockup has a 120px minimum width. */
/* The ShineIQ horizontal lockup is a 4.2:1 aspect, against the old mark's
   9.3:1 — the same width would have more than doubled its height and grown
   the header band. 150px keeps the bar its old depth and stays well clear of
   the 90px minimum width brand §6 sets for this lockup. */
.hood-logo img {
	width: 150px;
	min-width: 90px;
	height: auto;
	display: block;
}

.hood-header {
	border-bottom: 1px solid var(--wp--preset--color--gray-100);
}

/* Clear space: at least the sparkle's height on all sides (brand §6). */
.hood-logo {
	padding: 0.5rem 0;
}

/* The link is inline, so it wraps the block-level img in a line box and leaves
   ~8px of strut underneath it. The figure then centres correctly in the header
   row while the mark itself rides about 4px high. Making the link a flex
   container drops the line box, so the figure's box is exactly the logo's box. */
.hood-logo a {
	display: flex;
}

/* Desktop header action. An orange outline rather than an orange fill, so the
   hero's filled button stays the single orange action per view (brand §2 rule 3).
   Mono caps mark it as a standing utility action, not page content (§4).
   Padding is inset by the border width so the button's outer box — and the
   header height with it — matches every other small button. */
.hood-header-cta > .wp-block-button > .wp-block-button__link {
	background-color: transparent;
	border: 3px solid var(--wp--preset--color--orange-500);
	color: var(--wp--preset--color--navy-800); /* 7.76:1 on white; orange on white is 2.62:1 and fails */
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: calc(0.9rem - 3px) calc(1.6rem - 3px);
}

.hood-header-cta > .wp-block-button > .wp-block-button__link:hover,
.hood-header-cta > .wp-block-button > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--orange-500);
	border-color: var(--wp--preset--color--orange-500);
	color: var(--wp--preset--color--base); /* white on orange by brand decision */
}

/* ---------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------- */

.hood-hero-panel {
	border-radius: 1rem;
	overflow: hidden;
}

/* Skip link */
.skip-link:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--navy-800);
	color: #ffffff;
	border-radius: 0.375rem;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Links on dark grounds
 *
 * theme.json sets the global link colour to navy-800, which is correct on
 * white but measures 1.64:1 inside the navy footer. Dark sections invert
 * to white (12.71:1 on deep navy). Orange is not an option — brand §2 rule 2.
 *
 * These selectors deliberately avoid :where(). theme.json emits its link rule
 * as `:root :where(a...)` — specificity (0,0,1) — so a :where()-wrapped
 * override at (0,0,0) loses. Plain class selectors land at (0,2,1) and win.
 * ------------------------------------------------------------------------- */

.has-navy-950-background-color a:not(.wp-element-button),
.has-navy-900-background-color a:not(.wp-element-button),
.has-navy-800-background-color a:not(.wp-element-button),
.has-ink-950-background-color a:not(.wp-element-button),
.has-navy-depth-gradient-background a:not(.wp-element-button),
.has-navy-ink-gradient-background a:not(.wp-element-button) {
	color: #ffffff;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.has-navy-950-background-color a:not(.wp-element-button):hover,
.has-navy-900-background-color a:not(.wp-element-button):hover,
.has-navy-800-background-color a:not(.wp-element-button):hover,
.has-ink-950-background-color a:not(.wp-element-button):hover,
.has-navy-depth-gradient-background a:not(.wp-element-button):hover,
.has-navy-ink-gradient-background a:not(.wp-element-button):hover {
	text-decoration-color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Top-level regions
 *
 * Every full-bleed band carries its own vertical padding, so the inherited
 * blockGap between header / main / footer only shows up as a stray white
 * strip under the header. Remove it so bands meet cleanly.
 * ------------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Utility bar + sticky header
 *
 * The bar sits in normal flow and the whole template part is sticky with a
 * negative offset equal to the bar's height. Scrolling therefore carries the
 * bar off-screen while the white header pins at the top — no JS, no scroll
 * listener, and nothing to fall out of sync.
 *
 * The bar's height must stay fixed for the offset to line up, so its content
 * never wraps: the compliance note is dropped on narrow screens rather than
 * allowed to run to a second line.
 * ------------------------------------------------------------------------- */

:root {
	--hood-topbar-h: 44px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--hood-topbar-h));
	z-index: 100;
}

/* The admin bar is fixed over the top of the viewport; push the sticky
   offset down by its height so the header is not hidden underneath it. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: calc(32px - var(--hood-topbar-h));
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(46px - var(--hood-topbar-h));
	}
}

/* In-page anchors must clear the pinned header. */
html {
	scroll-padding-top: calc(var(--hood-topbar-h) + 4rem);
}

/* Brand §4: mono is for data, codes and references. The bar carries a
   compliance standard and a phone number — both reference text — so the whole
   bar takes the mono family rather than tagging the two paragraphs. */
.hood-topbar {
	height: var(--hood-topbar-h);
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
}

.hood-topbar__inner {
	width: 100%;
	white-space: nowrap;
}

.hood-topbar__note,
.hood-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.hood-topbar__note::before,
.hood-topbar__phone::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: var(--hood-icon) center / contain no-repeat;
	mask: var(--hood-icon) center / contain no-repeat;
}

/* Brand §3: orange is a shape colour. The shield is a mark, not text. */
.hood-topbar__note::before {
	--hood-icon: var(--hood-icon-shield-check);
	background-color: var(--wp--preset--color--orange-500);
}

.hood-topbar__phone::before {
	--hood-icon: var(--hood-icon-phone);
}

/* The dark-ground link rule already makes this white; drop the underline so the
   number sits at the same weight as the note and the bar reads as one line.
   Hover restores the underline, which is what marks it as the link. */
.hood-topbar__phone a {
	text-decoration: none;
}

.hood-topbar__phone a:hover {
	text-decoration: underline;
}

/* The bar cannot wrap without breaking the sticky offset, so the note is
   dropped before it can push the phone number past the edge. In mono the note
   and number together need roughly 780px, so they are flush at 800px; 900px
   leaves the same slack for longer translations that 720px gave in the body
   face. Re-measure this if the bar's font or copy changes. */
@media (max-width: 900px) {
	.hood-topbar__note {
		display: none;
	}
}

/* Lift the header once the utility bar has scrolled under it. Progressive
   enhancement: browsers without scroll-driven animations simply keep the
   flat border, which is the resting design. */
@supports (animation-timeline: scroll()) {
	.hood-header {
		animation: hood-header-stuck linear both;
		animation-timeline: scroll();
		animation-range: 0 var(--hood-topbar-h);
	}

	@keyframes hood-header-stuck {
		to {
			box-shadow: 0 1px 0 rgba(17, 53, 81, 0.08), 0 6px 20px rgba(17, 53, 81, 0.10);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.hood-header {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * Desktop navigation — active underline
 *
 * The item for the current page or section, and the item whose mega panel is
 * open, carry a 4px brand-navy underline on the bottom edge of the white
 * header bar, and their labels turn the same navy. Hover previews the line in
 * gray-200.
 *
 * To put the line on the bar's edge rather than under the label, the nav is
 * stretched to the full height of the header row: the actions group and the
 * nav stretch, core's wrappers fill them, and each list item is the full row
 * tall with its link centred. The line then hangs from the item's bottom by
 * the header's own padding plus its 1px border.
 *
 * Scoped to the closed container and to 600px+ (core's drawer breakpoint):
 * the open drawer has its own row highlight and arrows.
 * ------------------------------------------------------------------------- */

@media (min-width: 600px) {
	.hood-header .hood-header__actions,
	.hood-header .hood-header__actions > .wp-block-navigation {
		align-self: stretch;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open),
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		height: 100%;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		align-items: stretch;
		gap: 1.75rem;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		align-items: center;
	}

	/* The whole slot is the link, not just the word: it fills the bar from top
	   edge to bottom edge (reaching through the header's padding with a
	   matching negative margin) and half the gap either side. */
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		align-self: stretch;
		margin: calc(-1 * var(--wp--preset--spacing--30)) -0.875rem;
		padding: var(--wp--preset--spacing--30) 0.875rem;
	}

	/* A mega parent's link stops at its word on the right, so it never reaches
	   over the chevron beside it; the chevron sits on top regardless. */
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .hood-has-mega > .wp-block-navigation-item__content {
		margin-right: 0;
		padding-right: 0;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .hood-has-mega > .hood-mega-toggle {
		position: relative;
		z-index: 1;
		align-self: center;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(-1 * var(--wp--preset--spacing--30) - 1px);
		height: 4px;
		background-color: transparent;
		transition: background-color 150ms ease;
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item:hover::after {
		background-color: var(--wp--preset--color--gray-200);
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item.current-menu-item::after,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor::after,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item.hood-has-mega:has(.hood-mega-toggle[aria-expanded="true"])::after {
		/* Two classes, so the active line outranks the hover line (a class
		   plus :hover) and stays blue under the pointer. */
		background-color: var(--wp--preset--color--navy-800);
	}

	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
	.hood-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--navy-800); /* 7.76:1 */
	}
}

/* ---------------------------------------------------------------------------
 * Mega menu
 *
 * One panel per template part named `mega-<slug>`; see hood_mega_panels() in
 * functions.php. The panel is a full-bleed band pinned under the white header
 * bar, with its contents constrained to the same 76rem column as the header
 * and footer so the three share one left edge.
 *
 * Panels are printed with the `hidden` attribute and only revealed by
 * assets/js/mega-nav.js, so with no JavaScript the header is exactly what it
 * was: plain links to each page.
 * ------------------------------------------------------------------------- */

.hood-mega[hidden] {
	display: none;
}

.hood-mega {
	position: absolute;
	/* The header is alignfull with no border, so its padding box already spans
	   the viewport and plain 0 offsets reach the edges. The inset the panel
	   first showed came from the constrained layout's max-width, handled below,
	   not from the padding — negative offsets here would overflow and give the
	   document a horizontal scrollbar. */
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--gray-100);
	box-shadow: 0 18px 40px rgba(17, 53, 81, 0.14);
}

/* The header is a constrained layout, so its layout rule hands every ordinary
   child a max-width and auto side margins — which re-centred the panel inside
   the negative offsets above instead of letting it reach the viewport edge.
   Two classes to outrank that rule. */
.hood-header .hood-mega {
	max-width: none;
	/* `margin: 0`, not just the sides: the layout also gives flow siblings a
	   margin-block-start of one blockGap, which still displaces an absolutely
	   positioned box and dropped the panel 24px clear of the header. */
	margin: 0;
}

/* The header group is the positioning context for the panel. */
.hood-header {
	position: relative;
}

.hood-mega__inner {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* The trigger keeps the nav link's own type; only the chevron is added.
   Qualified up to three classes: the button wears core's
   .wp-block-navigation-item__content, whose own display rule would otherwise
   leave this inline and collapse the chevron to a zero-size inline box. */
.hood-header .wp-block-navigation .hood-mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* The chevron is ::before, not ::after: the desktop nav hover underline is an
   ::after on .wp-block-navigation-item__content, which this button also wears,
   and that rule outspecifies anything one class can say here. `order` puts the
   glyph back on the right of the label. */
.hood-mega-trigger::before {
	content: "";
	order: 2;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--hood-icon-chevron-down) center / contain no-repeat;
	mask: var(--hood-icon-chevron-down) center / contain no-repeat;
	transition: transform 150ms ease;
}

.hood-mega-trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--navy-800);
}

.hood-mega-trigger[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

/* The chevron beside a mega parent's link: the control that shows the panel
   for keyboard and touch (a mouse just hovers). 24px square, the WCAG 2.2
   minimum target. Qualified with .wp-block-navigation to outrank core's
   button resets inside the nav. */
.hood-header .wp-block-navigation .hood-mega-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0 0 0 2px;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	color: inherit;
	cursor: pointer;
}

.hood-mega-toggle::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--hood-icon-chevron-down) center / contain no-repeat;
	mask: var(--hood-icon-chevron-down) center / contain no-repeat;
	transition: transform 150ms ease;
}

.hood-mega-toggle[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

/* In the drawer the mega item is one row: the link (which navigates) and the
   chevron (which opens the panel beneath, accordion-style). The row's orange
   arrow is dropped there so it does not sit beside the chevron as a second,
   conflicting affordance. Same specificity as the drawer row rules below. */
@media (max-width: 599px) {
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
		.wp-block-navigation__responsive-container-content .wp-block-navigation-item.hood-has-mega {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
		.wp-block-navigation__responsive-container-content .hood-has-mega > .wp-block-navigation-item__content {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
		.wp-block-navigation__responsive-container-content .hood-has-mega > .wp-block-navigation-item__content::after {
		content: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .hood-header .wp-block-navigation .hood-mega-toggle,
	.wp-block-navigation__responsive-container.is-menu-open .hood-mega-toggle.hood-mega-toggle {
		width: 3.5rem;
		height: auto;
		min-height: 3.25rem;
		margin: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 0;
		color: #ffffff;
		font-size: 1.25rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .hood-has-mega > .hood-mega {
		flex-basis: 100%;
	}
}

/* One flat list of items, laid out as a grid: two up on the desktop band, one
   up in the drawer. Flat rather than nested columns so the reading order is the
   same in both states — stacked columns would have interleaved the items — and
   so adding a service is duplicating one group in a single list. */
.hood-mega__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem 1rem;
}

.hood-mega__grid > * {
	margin: 0;
}

/* When a panel takes over a nav item that also has a core submenu — the usual
   shape of a Services item built in the Site Editor, an href="#" placeholder
   with its real links beneath — core's dropdown and its toggle chevron would
   sit alongside the panel and duplicate it.

   !important because core's submenu visibility is driven by several rules of
   its own at comparable specificity, and this has to beat all of them rather
   than track each one. The class is added by mega-nav.js, so with no
   JavaScript the core submenu is untouched and still works. */
.hood-has-mega > .wp-block-navigation__submenu-container,
.hood-has-mega > .wp-block-navigation__submenu-icon,
.hood-has-mega > .wp-block-navigation-submenu__toggle {
	display: none !important;
}

.hood-mega__rule {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gray-100);
}

.hood-mega__foot p {
	margin: 0;
}

/* The promo card fills its column so its foot lines up with the tile grid. */
.hood-mega__promo {
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border-radius: 0.75rem;
}

.hood-mega__promo h3 {
	/* theme.json sets heading colour globally to navy-800, which is 1.64:1 on
	   this navy-950 card. The group's text colour does not reach headings. */
	color: #ffffff;
	margin: 0.75rem 0 0;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hood-mega__promo p {
	margin-top: 0.75rem;
}

.hood-mega__promo-link a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Editor-only. main.css is loaded as an editor style, so this styles the
   placeholder that stands in for the panels block on the header canvas. */
.hood-mega-placeholder {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--wp--preset--color--gray-300);
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--ink-600);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

.hood-mega-placeholder__label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--navy-800);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hood-mega-placeholder ul {
	margin: 0 0 0.5rem;
	padding-left: 1.1rem;
}

.hood-mega-placeholder__hint {
	margin: 0;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Mega menu — inside the mobile drawer
 *
 * The same panel node serves both states, because core renders one <ul> and
 * the drawer is that list re-presented as an overlay. Below the breakpoint the
 * panel stops being an absolutely positioned band and becomes an accordion in
 * normal flow under its nav item, so the one trigger drives both.
 *
 * The drawer is navy, not the white of the desktop band, so the tiles and type
 * are re-coloured for a dark ground rather than restyling the drawer itself.
 * ------------------------------------------------------------------------- */

@media (max-width: 599px) {

	/* Outside an open drawer there is nothing to anchor to. */
	.hood-mega {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .hood-mega:not([hidden]) {
		display: block;
		position: static;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.is-menu-open .hood-mega__inner {
		padding: 0 0 0.75rem;
	}

	/* The desktop band's framing has no job in the drawer: the trigger above
	   already says "Services", and the promo card and footnote would bury the
	   links the menu exists to reach. */
	.is-menu-open .hood-mega .hood-eyebrow,
	.is-menu-open .hood-mega__promo,
	.is-menu-open .hood-mega__rule,
	.is-menu-open .hood-mega__foot {
		display: none;
	}

	.is-menu-open .hood-mega__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* The outer 62/38 columns still stack here with the promo column hidden but
	   present, leaving its flex gap as dead space above and below the list. */
	.is-menu-open .hood-mega .wp-block-columns {
		display: block;
		margin: 0;
	}

	.is-menu-open .hood-mega .wp-block-column {
		margin: 0;
	}

	/* The drawer rows carry an orange arrow on ::after. On the trigger that
	   would sit beside the chevron and read as two conflicting affordances, so
	   it is suppressed at the same specificity as the rule that draws it. */
	.hood-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
		.wp-block-navigation__responsive-container-content .hood-mega-trigger::after {
		content: none;
	}

	/* Full-width row with the chevron parked on the right, like the other rows. */
	.hood-header .wp-block-navigation .is-menu-open .hood-mega-trigger {
		width: 100%;
		justify-content: space-between;
	}

	/* An expanded accordion can outgrow the panel, which is overflow:hidden. */
	.is-menu-open .wp-block-navigation__responsive-container-content {
		overflow-y: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile navigation — side drawer
 *
 * Core renders the overlay as a full-screen fixed layer. This turns it into a
 * right-hand drawer: the container becomes the scrim, and the dialog becomes
 * the navy panel. Nothing here runs above 600px, which is core's breakpoint
 * for collapsing the menu.
 *
 * The CTA is an inner block of core/navigation, so the same button renders
 * inline on desktop and inside the drawer on mobile.
 * ------------------------------------------------------------------------- */

/* The overlay's background comes from the block's overlayBackgroundColor, which
   WordPress emits as a `has-*-background-color` utility carrying !important.
   Matching it is the only way to turn the full-screen layer into a scrim. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background-color: rgba(21, 23, 26, 0.6) !important;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	width: auto;
	margin: 0 0 0 auto;
	height: 100%;
	display: flex;
	justify-content: flex-end;
}

/* The drawer itself. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	width: min(88vw, 380px);
	height: 100%;
	padding: 4.75rem 0 0;
	background-color: var(--wp--preset--color--navy-950);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* "MENU" eyebrow, top left of the drawer header. The label comes from a custom
   property set in functions.php so it stays translatable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: var(--hood-menu-label, "MENU");
	position: absolute;
	top: 1.85rem;
	left: 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-500);
}

/* Close control as a bordered square. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.15rem;
	right: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0.5rem;
	color: #ffffff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Content column: full-bleed so the rules span the drawer edge to edge. */
/* Core pads the content by calc(2rem + 24px) to clear its floating close
   button. The drawer has its own header band, so that gap is removed. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content {
	box-sizing: border-box;
	width: 100%;
	padding-top: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	gap: 0;
	align-items: stretch;
	width: 100%;
}

/* One row per item, each with a rule beneath it. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	box-sizing: border-box;
	width: 100%;
	align-items: stretch;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box; /* core only sets border-box on the three wrappers;
	                           without it width:100% + padding overflows left */
	width: 100%;
	padding: 1rem 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	/* Literal rather than a preset: the fluid presets scale with the viewport,
	   but the drawer is a fixed 380px panel, so its type should not. */
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2; /* body is 1.6, which makes the rows too tall for a list */
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* Brand §3: orange as a shape. The arrow is an affordance, not text —
   #FF783D on navy-950 measures 4.85:1, past the 3:1 bar for graphics. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--orange-500);
	-webkit-mask: var(--hood-icon-arrow-right) center / contain no-repeat;
	mask: var(--hood-icon-arrow-right) center / contain no-repeat;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* Primary action. The drawer covers the page when open, so this is the only
   action in view — brand §2 rule 3 is satisfied with the orange fill and ink
   label (6.85:1), which is the pairing §3 prescribes for an orange button. */
.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta {
	width: auto;
	margin: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta .wp-block-button,
.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--orange-500);
	border-color: var(--wp--preset--color--orange-500);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta .wp-block-button__link:hover,
.wp-block-navigation__responsive-container.is-menu-open .hood-nav-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--orange-600);
	border-color: var(--wp--preset--color--orange-600);
	color: var(--wp--preset--color--base);
}

/* Brand §6: the stacked lockup has a 72px minimum width; below it, switch to
   the IQ mark (32px) or the sparkle (16px). Clear space is at least the
   height of the "I" in IQ on every side. */
.hood-badge img {
	min-width: 72px;
	height: auto;
	display: block;
}

.hood-badge {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
 * The two header CTAs
 *
 * Different labels for different room: the drawer gets the full "Schedule a
 * free inspection", the desktop row the compact "Free inspection". Each is
 * removed in the other state, so only one is ever in the accessibility tree.
 * 600px is core's breakpoint for collapsing the navigation.
 * ------------------------------------------------------------------------- */

/* Qualified with .wp-block-buttons: core's layout CSS sets
   `.wp-block-buttons-is-layout-flex{display:flex}` at the same specificity and
   prints after this file, so a bare `.hood-*-cta` selector loses. */
@media (max-width: 599px) {
	.wp-block-buttons.hood-header-cta {
		display: none;
	}
}

@media (min-width: 600px) {
	.wp-block-buttons.hood-nav-cta {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ad landing pages (templates/page-ad-landing.html)
 *
 * The landing header has no utility bar, so the sticky offset that hides the
 * bar must be zero here or the header would pin 44px above the viewport.
 *
 * It also has no navigation, so the quote button is the header's only action
 * at every width: undo the rule above that hides hood-header-cta below 600px
 * (the main header hands that job to the drawer; this one has no drawer).
 * ------------------------------------------------------------------------- */

.page-template-page-ad-landing {
	--hood-topbar-h: 0px;
}

@media (max-width: 599px) {
	.hood-header--landing .wp-block-buttons.hood-header-cta {
		display: flex;
	}
}

/* Quote card on ad landing pages (.hood-quote-card, the block holding #quote).
 *
 * HubSpot's new-editor forms render inside a cross-origin iframe that pads the
 * form by ~40px on every side, and nothing inside that frame can be styled from
 * here. Pull the frame outward by that padding instead, so the fields line up
 * with the card's own heading and the card is not double-padded. If HubSpot
 * changes its inner padding, adjust these values.
 *
 * The card is a constrained-layout group, and core centres its children with
 * `margin-inline: auto !important` and caps them at the content width, so the
 * horizontal pull and the width both need !important to win. */
.hood-quote-card .hs-form-frame {
	margin-top: -28px;
	margin-bottom: -36px;
	margin-left: -40px !important;
	margin-right: -40px !important;
	max-width: none !important;
}

/* ---------------------------------------------------------------------------
 * FAQ list + optional local contact panel
 *
 * Opt-in by class, so existing core/details blocks elsewhere are untouched:
 *   .hood-faq-list   — group around core/details blocks: numbered rows,
 *                      round +/× toggle, orange edge on the open row.
 *   .hood-faq-cols   — columns: .hood-faq-side (sticky) + list.
 *   .hood-faq-contact — navy "Still have questions?" card. Optional; only the
 *                      "FAQ with local contact" pattern uses it.
 * Patterns: hood/faq (list only), hood/faq-local-contact (panel + list).
 * ------------------------------------------------------------------------- */

.hood-faq-list {
	counter-reset: hood-faq;
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

.hood-faq-list > details.wp-block-details {
	counter-increment: hood-faq;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 0;
	transition: background-color 0.2s ease;
}

.hood-faq-list > details.wp-block-details > summary {
	list-style: none;
	display: grid;
	grid-template-columns: 56px 1fr 40px;
	align-items: center;
	gap: 12px;
	padding: 26px 8px 26px 16px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.3125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--navy-950);
}

.hood-faq-list > details.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.hood-faq-list > details.wp-block-details > summary::before {
	content: counter(hood-faq, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--orange-700);
}

.hood-faq-list > details.wp-block-details > summary::after {
	content: "+";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--gray-300);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--navy-800);
	transition: transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.hood-faq-list > details.wp-block-details > summary:hover::after {
	border-color: var(--wp--preset--color--orange-500);
}

.hood-faq-list > details.wp-block-details[open] {
	background: linear-gradient(90deg, #fff4ee, rgba(255, 244, 238, 0));
	box-shadow: inset 3px 0 0 var(--wp--preset--color--orange-500);
}

.hood-faq-list > details.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--orange-500);
	border-color: var(--wp--preset--color--orange-500);
	color: var(--wp--preset--color--base);
}

.hood-faq-list > details.wp-block-details > :not(summary) {
	margin: 0 56px 0 84px;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-700);
}

.hood-faq-list > details.wp-block-details > :last-child {
	padding-bottom: 28px;
}

.hood-faq-cols {
	gap: 64px;
}

.hood-faq-side {
	position: sticky;
	top: 180px;
}

.hood-faq-contact {
	background: var(--wp--preset--color--navy-950);
	color: var(--wp--preset--color--base);
	border-radius: 16px;
	padding: 28px;
}

.hood-faq-contact p {
	margin: 0;
	color: var(--wp--preset--color--gray-100);
	font-size: 1rem;
	line-height: 1.5;
}

.hood-faq-contact .hood-faq-contact__q {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.375rem;
	color: var(--wp--preset--color--base);
	margin-bottom: 6px;
}

.hood-faq-contact__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0 22px;
}

.hood-faq-contact__av {
	display: flex;
}

.hood-faq-contact__av img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--navy-950);
	background: var(--wp--preset--color--base);
}

.hood-faq-contact__av img + img {
	margin-left: -14px;
}

.hood-faq-contact__who span {
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray-300);
}

.hood-faq-contact__who strong {
	display: block;
	color: var(--wp--preset--color--base);
	font-size: 1rem;
}

.hood-faq-contact__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hood-faq-contact__btns a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

/* White on orange by brand decision (Oct 2026), same as the theme button. */
.hood-faq-contact__btns a.is-primary {
	background-color: var(--wp--preset--color--orange-500);
}

.hood-faq-contact__btns a.is-primary:hover {
	background-color: var(--wp--preset--color--orange-600);
}

.hood-faq-contact__btns a.is-secondary {
	border: 1px solid var(--wp--preset--color--navy-500);
}

.hood-faq-contact__btns a.is-secondary:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 781px) {
	.hood-faq-side {
		position: static;
	}

	.hood-faq-list > details.wp-block-details > summary {
		grid-template-columns: 40px 1fr 36px;
		font-size: 1.125rem;
	}

	.hood-faq-list > details.wp-block-details > :not(summary) {
		margin: 0 8px 0 68px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hood-faq-list > details.wp-block-details,
	.hood-faq-list > details.wp-block-details > summary::after {
		transition: none;
	}
}