/**
 * Site Header — two variants.
 *
 * `default`               : standalone bar (service pages, Figma 1920x137).
 * `transparent-over-hero` : nested inside the hero banner on the homepage
 *                           (Figma "Header" 1440x137, transparent).
 *
 * The transparent variant stays in normal document flow but subtracts its own
 * height with a negative bottom margin, so the hero starts at the header's top
 * edge and the header paints over it. That keeps it correct whether or not the
 * top strip is present, with no positioning ancestor required.
 */

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

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	min-height: var(--header-height);
}

/* --- default (solid) ---------------------------------------------
 * Figma "Header Section" (Residential Roofing node 1092:19399 sibling,
 * 1920x137) is #010101 with white 18/500 nav links and the current branch in
 * green — verified against the 1:1 export, which reads #010101 clean across
 * the band at y=68.
 *
 * This was built white on the homepage-only pass, where the variant is never
 * exercised: the homepage uses transparent-over-hero. White also made the
 * logo — a white-on-transparent PNG — invisible on every inner page.
 * ------------------------------------------------------------------- */
.site-header--default {
	background-color: var(--primary-black);
}

/* --- transparent over hero --------------------------------------- */
.site-header--transparent-over-hero {
	margin-bottom: calc(-1 * var(--header-height));
	background-color: transparent;
	transition: background-color 200ms ease;
}

/* Pinned, it is no longer over the hero — it is over whatever section has
 * scrolled under it, and the logo and nav are both white. Transparent there
 * means an invisible header sitting on top of white body copy, so it takes the
 * solid variant's background as soon as it sticks. `is-stuck` is set in
 * kerrigan.js; CSS alone cannot detect a stuck sticky element. */
.site-header--transparent-over-hero.is-stuck {
	background-color: var(--primary-black);
}

@media (prefers-reduced-motion: reduce) {

	.site-header--transparent-over-hero {
		transition: none;
	}
}

/* --- brand ------------------------------------------------------- */
.site-header__brand {
	flex: 0 0 auto;
}

.site-header__logo-link {
	display: block;
}

/* Figma places the logo in a 229.83 x 137.29 frame with a FILL paint, so the
 * 1536x1024 source was scaled to cover and cropped — the frame was mostly the
 * source's own whitespace, and the MARK that actually shows is 165 x 97, inset
 * 33 from the container edge and sitting 11 from the header top (measured off
 * the 1:1 export).
 *
 * The asset has since been re-cut with that whitespace removed, so cropping it
 * again to a 230x137 frame would blow the mark up and clip its edges. It is
 * sized to the mark instead: 165 wide, its own aspect, and offset to where the
 * design draws it. */
.site-header__logo {
	width: 165px;
	height: auto;
	margin-left: 33px;
	object-fit: contain;
}

.site-header__title {
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-24);
	font-weight: 800;
}

/* --- navigation -------------------------------------------------- */
.site-header__nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-40);
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu li {
	position: relative;
}

.site-header__menu > li > a {
	display: block;
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 500;
	line-height: var(--lh-18-20);
	white-space: nowrap;
}

/* The ancestor classes matter as much as the current-item ones: every service
 * and location page is a CHILD of a top-level menu entry, so on
 * /services/residential-roofing/ the only thing WordPress marks is
 * `current-menu-ancestor` on Services — without it no top-level item lit up on
 * the majority of the site's pages. */
.site-header__menu > li > a:hover,
.site-header__menu > li > a:focus-visible,
.site-header__menu > li.current-menu-item > a,
.site-header__menu > li.current_page_item > a,
.site-header__menu > li.current-menu-ancestor > a,
.site-header__menu > li.current-menu-parent > a,
.site-header__menu > li.current-page-ancestor > a,
.site-header__menu > li.current_page_ancestor > a,
.site-header__menu > li.current_page_parent > a {
	color: var(--primary-green);
}

/* Parent items carry a caret in the design. */
.site-header__menu > li.menu-item-has-children > a::after {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.5em;
	transform: translateY(-0.15em) rotate(45deg);
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	content: "";
}

/* Sub menus — white panel at both levels; green arrives on hover.
 * No padding on the panel: the hover fill is the full-width row, so any
 * vertical padding would leave an unfillable white band at the top and bottom
 * of the list. The rows carry their own 10/20 padding instead. */
.site-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	visibility: hidden;
	min-width: 220px;
	padding: 0;
	background-color: var(--white);
	opacity: 0;
	transition: var(--transition);
}

/* The design opens the first dropdown clear of the header row. A plain offset
 * would leave dead space that closes the panel as the pointer crosses it, so
 * the panel carries an invisible bridge over the gap and stays hovered. */
.site-header__menu > li > .sub-menu {
	top: calc(100% + var(--space-20));
}

.site-header__menu > li > .sub-menu::before {
	position: absolute;
	top: calc(var(--space-20) * -1);
	right: 0;
	left: 0;
	height: var(--space-20);
	content: "";
}

.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

/* Third level flies out to the side. `top: 100%` is right for the first
 * dropdown but would drop a nested panel underneath its own parent row and
 * cover the rest of the list. */
.site-header__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* A caret on nested parents too, rotated to point at where the panel opens. */
.site-header__menu .sub-menu > li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
}

.site-header__menu .sub-menu > li.menu-item-has-children > a::after {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	content: "";
}

.site-header__menu .sub-menu a {
	display: block;
	padding: var(--space-10) var(--space-20);
	color: var(--primary-black);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 500;
}

/* The hovered row goes green, label reversed to white to stay legible. */
/* The current page — and any sub-menu entry that is an ancestor of it — wears
 * the same green plate as hover, so the open dropdown says where you are. On
 * /services/residential-roofing/ the entry IS the current item; on its children
 * (Roof Replacement and the rest) it is the ancestor. */
.site-header__menu .sub-menu a:hover,
.site-header__menu .sub-menu a:focus-visible,
.site-header__menu .sub-menu > li.current-menu-item > a,
.site-header__menu .sub-menu > li.current_page_item > a,
.site-header__menu .sub-menu > li.current-menu-ancestor > a,
.site-header__menu .sub-menu > li.current-page-ancestor > a,
.site-header__menu .sub-menu > li.current_page_ancestor > a {
	background-color: var(--primary-green);
	color: var(--white);
}

/* Third level overlaps the panel it opens from, so it needs an edge. */
.site-header__menu .sub-menu .sub-menu {
	box-shadow: 0 0 0 1px var(--mid-green);
}

/* --- CTA (appearance comes from the global button system) -------- */
.site-header__cta {
	flex: 0 0 auto;
}

/* The panel's copy of the button. Hidden everywhere except the phone block at
 * the foot of this file — on desktop the nav is in normal flow, so left visible
 * it would render a second button in the bar beside the menu. */
.site-header__cta--panel {
	display: none;
}

/* The stacked nav's controls. Desktop opens sub-menus on hover and never shows
 * the panel, so neither of these has anything to do there — and left in flow
 * the close button pushed the header 1px past the viewport at 992. The top
 * strip carries the notices above 991, so the panel's copy of them is off too. */
.site-header__submenu-toggle,
.site-header__nav-close,
.site-header__nav-notices {
	display: none;
}

/* --- mobile toggle ----------------------------------------------- */
.site-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--white);
	cursor: pointer;
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background-color: currentcolor;
	transition: var(--transition);
	content: "";
}

.site-header__toggle-bar {
	top: 21px;
}

.site-header__toggle-bar::before {
	top: -7px;
	left: 0;
}

.site-header__toggle-bar::after {
	top: 7px;
	left: 0;
}

/* The burger inherits white from the base rule now that the solid header is
 * black — a black-on-black toggle would be invisible. */

/* The menu labels are --fs-18, which now holds its full 18px down to 1200
 * instead of dropping to 16 — so the row needs more width than it used to and
 * ran past the viewport below about 1259 at the 40px desktop gaps. Tightened
 * from 1300 with room to spare; the 1199 band below repeats the 25 and also
 * shrinks the logo, and 1050 goes tighter still. */
@media (max-width: 1300px) {

	.site-header__inner,
	.site-header__nav,
	.site-header__menu {
		gap: var(--space-25);
	}
}

@media (max-width: 1199px) {

	.site-header__inner,
	.site-header__nav,
	.site-header__menu {
		gap: var(--space-25);
	}

	/* The 33px inset reproduces the Figma frame's own whitespace at the design
	 * width. Below 1199 the container's padding is doing that job, so the
	 * offset only pushes the mark off the line the rest of the header sits on.
	 * 0 at the developer's instruction. */
	.site-header__logo {
		width: 130px;
		margin-left: 0;
	}
}

/* The 1050 gap-slack block that used to sit here is gone: it bought the desktop
 * menu 40px so it could survive down to 992, and the toggle now takes over at
 * 1199 instead, so there is no narrow band left for it to rescue. */

/* 1199, not 991: the full menu is eight items plus two levels of submenu, and
 * on an iPad it was crushed against the CTA long before it collapsed. The
 * hamburger takes over as soon as the container stops being full width. */
@media (max-width: 1199px) {

	.site-header__toggle {
		display: block;
	}

	/* A full-screen panel that slides in from the right.
	 *
	 * `inset: 0` puts it over the top strip and the header row as well, so the
	 * logo and the hamburger are covered rather than sitting on top of the menu
	 * — the panel carries its own close button instead. It stays in the layout
	 * while closed (a `display: none` element cannot transform), held
	 * off-screen and out of the accessibility tree by `visibility`, which is
	 * delayed to the end of the slide on close so the links do not vanish
	 * mid-animation. */
	.site-header__nav {
		display: flex;
		position: fixed;
		z-index: 100;
		inset: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--space-20);
		width: 100%;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		padding: 84px var(--container-pad) var(--space-30);
		transform: translateX(100%);
		background-color: var(--primary-black);
		transition:
			transform 0.35s ease,
			visibility 0s linear 0.35s;
		-webkit-overflow-scrolling: touch;
	}

	.site-header.is-nav-open .site-header__nav {
		visibility: visible;
		transform: translateX(0);
		transition:
			transform 0.35s ease,
			visibility 0s;
	}

	/* The top strip's notices, pushed to the foot of the panel. `margin-top:
	 * auto` puts them against the bottom edge however short the menu is, and
	 * the rule above separates them from the CTA. */
	.site-header__nav-notices {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		margin-top: auto;
		padding-top: var(--space-25);
		border-top: 1px solid rgb(255 255 255 / 25%);
	}

	.site-header__nav-notice {
		margin: 0;
		color: var(--white);
		font-family: var(--font-body);
		font-size: var(--fs-16);
		font-weight: 400;
		line-height: var(--lh-body);
	}

	.site-header__nav-notice strong,
	.site-header__nav-notice b {
		font-weight: 700;
	}

	/* The panel is its own surface now, so it carries its own dismiss. */
	.site-header__nav-close {
		display: flex;
		position: absolute;
		top: var(--space-25);
		right: var(--container-pad);
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--white);
		cursor: pointer;
	}

	.site-header__nav-close::before,
	.site-header__nav-close::after {
		position: absolute;
		width: 22px;
		height: 2px;
		background-color: currentcolor;
		content: "";
	}

	.site-header__nav-close::before {
		transform: rotate(45deg);
	}

	.site-header__nav-close::after {
		transform: rotate(-45deg);
	}

	.site-header__nav-close:hover,
	.site-header__nav-close:focus-visible {
		color: var(--primary-green);
	}

	@media (prefers-reduced-motion: reduce) {

		.site-header__nav,
		.site-header.is-nav-open .site-header__nav {
			transition: none;
		}
	}

	/* The panel owns the screen while it is open. */
	body.has-nav-open {
		overflow: hidden;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: stretch;
		/* Every row now carries its own 44px tap height, so the old 16 between
		 * them would double the rhythm. 4 keeps the same overall pitch. */
		gap: 4px;
	}

	/* One row height for every item, with or without a disclosure button.
	 * The button used to set the height of the rows it was in — 54 against 19
	 * for a plain link — which read as uneven spacing down the list. */
	.site-header__menu li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 44px;
	}

	.site-header__menu li > .sub-menu {
		grid-column: 1 / -1;
	}

	/* Closed by default now, and opened by the disclosure button beside the
	 * link. Stacked, these used to be permanently visible, which put every
	 * third-level page on screen at once.
	 *
	 * Height is animated in pixels and driven from JavaScript, the same way the
	 * FAQ accordion does it and for the same reason: `display` cannot be
	 * transitioned, and a `grid-template-rows: 0fr -> 1fr` swap does not
	 * interpolate reliably here. `visibility` is what keeps a closed sub-menu
	 * out of tab order and the accessibility tree — switched instantly on open
	 * and delayed to the end of the transition on close, so the links never
	 * vanish mid-collapse. */
	.site-header__menu .sub-menu {
		position: static;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		/* No vertical padding: with `box-sizing: border-box` a closed panel at
		 * height 0 is still as tall as its padding, and that 10px was adding
		 * itself to every parent row — the rows with a disclosure button
		 * measured 54 against 44 for a plain link. The indent stays; the rows
		 * inside carry their own height. */
		padding: 0 0 0 var(--space-20);
		background: transparent;
		opacity: 1;
		transition:
			height 0.3s ease,
			visibility 0s linear 0.3s;
	}

	/* The desktop hover rule is not inside a media query and matches at
	 * (0,3,0) — higher than the closed state above — so a sub-menu stayed
	 * `visible` here the moment its own disclosure button took focus, leaving
	 * a collapsed panel's links in tab order and the accessibility tree.
	 * Stacked, the menu opens on click; hover and focus-within have no say. */
	.site-header__menu li:hover > .sub-menu,
	.site-header__menu li:focus-within > .sub-menu {
		visibility: hidden;
	}

	.site-header__menu li.is-submenu-open > .sub-menu,
	.site-header__menu li.is-submenu-open:hover > .sub-menu,
	.site-header__menu li.is-submenu-open:focus-within > .sub-menu {
		visibility: visible;
		transition:
			height 0.3s ease,
			visibility 0s;
	}

	@media (prefers-reduced-motion: reduce) {

		.site-header__menu .sub-menu,
		.site-header__menu li.is-submenu-open > .sub-menu {
			transition: none;
		}
	}

	.site-header__submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--white);
		cursor: pointer;
	}

	.site-header__submenu-toggle::after {
		width: 8px;
		height: 8px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: translateY(-2px) rotate(45deg);
		transition: var(--transition);
		content: "";
	}

	.site-header__submenu-toggle:hover,
	.site-header__submenu-toggle:focus-visible {
		color: var(--primary-green);
	}

	.site-header__menu li.is-submenu-open > .site-header__submenu-toggle::after {
		transform: translateY(2px) rotate(225deg);
	}

	/* The carets baked into the links are the desktop affordance; the button
	 * is the one that does something here. */
	.site-header__menu > li.menu-item-has-children > a::after,
	.site-header__menu .sub-menu > li.menu-item-has-children > a::after {
		display: none;
	}

	.site-header__menu .sub-menu a {
		padding: 6px 0;
		color: var(--white);
	}

	/* The stacked nav has no panel, so the hover plate would float loose — and
	 * the current item follows the same treatment for the same reason. */
	.site-header__menu .sub-menu a:hover,
	.site-header__menu .sub-menu a:focus-visible,
	.site-header__menu .sub-menu > li.current-menu-item > a,
	.site-header__menu .sub-menu > li.current_page_item > a,
	.site-header__menu .sub-menu > li.current-menu-ancestor > a,
	.site-header__menu .sub-menu > li.current-page-ancestor > a,
	.site-header__menu .sub-menu > li.current_page_ancestor > a {
		background-color: transparent;
		color: var(--primary-green);
	}

	.site-header__menu .sub-menu .sub-menu {
		box-shadow: none;
	}

	/* Both controls sit together at the right-hand end. The CTA takes the single
	 * auto margin that pushes the group over; the toggle gives its own up, or the
	 * two autos split the free space between them and left the button stranded
	 * mid-bar. `order` puts the button ahead of the hamburger — in source order
	 * it follows the nav, which is what keeps the desktop layout correct. */
	.site-header__cta {
		order: 1;
		margin-left: auto;
	}

	.site-header__toggle {
		order: 2;
		margin-left: 0;
	}

	.site-header.is-nav-open .site-header__toggle-bar {
		background-color: transparent;
	}

	.site-header.is-nav-open .site-header__toggle-bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	.site-header.is-nav-open .site-header__toggle-bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
}

@media (max-width: 767px) {

	.site-header__logo {
		width: 140px;
	}

	/* Swap the pair on phones: the bar is logo and hamburger only, and the button
	 * goes back inside the menu panel where it started, full width under the
	 * links as it was before the bar copy existed. */
	.site-header__cta--bar {
		display: none;
	}

	.site-header__cta--panel {
		display: block;
		order: 0;
		margin-left: 0;
	}

	.site-header__cta--panel .btn {
		width: 100%;
	}

	/* With the button gone the toggle has to take the auto margin back, or there
	 * is nothing left pushing the group right and the hamburger sits against the
	 * logo. */
	.site-header__toggle {
		margin-left: auto;
	}
}