/*
 * Header. Figma desktop/navigationbar 719:8662: "desktop" (transparent, on the
 * hero, 32px top padding + 61px bar) and "scroll" (solid white, 93px, bar centred).
 * Dropdown panels 2512:71147 / 71145 / 71146 / 71144: white card 8px under the pill.
 * mobile/navigationbar 1256:25696: 56px, logo 99x20, 40px menu button.
 * Mobile menu mobile/hamburger/2..4 (1275:20759, 1795:40782, 1275:20827):
 * full-screen purple sheet, 18px links with dividers 20px apart, drill-down submenus.
 * The menu collapses into the menu button below 1024px (the pill needs ~560px).
 * Scrolled (.is-scrolled, set by header.js): the bar is fixed to the top as the
 * "scroll" variant 1981:54370 (white 93px bar, dark logo, pill at y=16, no shadow);
 * on mobile a white 56px bar with the dark logo and menu icon.
 */

/* Keep anchors and sticky bars clear of the fixed header. */
:root {
	--page-nav-top: var(--header-h);
	scroll-padding-top: var(--header-h);
}

.site-header {
	position: relative;
	z-index: 1010;                        /* above map panes (Leaflet controls use 1000) */
	height: var(--header-h);
}

.site-header__wrap { height: 100%; }

.site-header.is-scrolled .site-header__wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-h);
	background: var(--c-bg-white);
	animation: site-header-in .2s ease;
}

@keyframes site-header-in {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header.is-scrolled .site-header__wrap { animation: none; }
}

/* Transparent and light: overlap the first section by the header's height (the section leaves room for it). */
.site-header--transparent,
.site-header--light { margin-bottom: calc(-1 * var(--header-h)); }

.site-header--solid {
	background: var(--c-bg-white);
	box-shadow: 0 1px 0 var(--c-bg-segment);
}

.site-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	height: 100%;
	padding-top: 32px;
}

.site-header--solid .site-header__bar,
.site-header.is-scrolled .site-header__bar { padding-block: 16px; }

/* ---------- Logo (logo w/name 139x28) ---------- */
.site-logo {
	--logo-h: 28px;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--logo-h) * .271);
	justify-self: start;
	height: var(--logo-h);
}

.site-logo__mark {
	width: calc(var(--logo-h) * 1.017);
	height: var(--logo-h);
	color: var(--c-primary);
}

.site-logo__name {
	width: calc(var(--logo-h) * 3.66);
	height: var(--logo-h);
	color: var(--c-text-dark);
}

.site-header--transparent:not(.is-scrolled) .site-header__logo .site-logo__mark,
.site-header--transparent:not(.is-scrolled) .site-header__logo .site-logo__name { color: var(--c-text-white); }

/* ---------- Menu pill (dekstop/menu 232:1465) ---------- */
.site-header__nav {
	grid-column: 2;
	padding: 18.5px 30.5px;               /* 20/32 minus the 1.5px border */
	border: 1.5px solid rgba(216, 216, 216, .3);   /* #D8D8D8 at 30% (renders #F4F4F4); 1547:39646, 1981:54370 */
	border-radius: var(--r-pill);
	background: var(--c-bg-white);
}

/* Over a hero: solid white pill, shadow 4/8 blur 16 at 15% (2010:59700). */
.site-header--transparent:not(.is-scrolled) .site-header__nav {
	border-color: rgba(255, 255, 255, .4);
	box-shadow: 4px 8px 16px rgba(0, 0, 0, .15);
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-header__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 21px;
}

.site-header__link {
	--icon-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: var(--f-subtitle-l);
	color: var(--c-text-dark);
	white-space: nowrap;
	transition: color .15s ease;
}

.site-header__link:hover,
.site-header__item.is-open > .site-header__link { color: var(--c-primary); }

/* 13px caret, 1.5px stroke, #4B0BDD; flips up while open (nav/link "selected hover" 2057:49903). */
.site-header__caret {
	color: var(--c-primary);
	transition: transform .15s ease;
}

.site-header__item.is-open .site-header__caret { transform: rotate(180deg); }

/* Caret as its own button when the label links to a hub page: 13px icon, bigger hit area. */
.site-header__caret-btn {
	--icon-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: -8px -8px -8px -4px;
	padding: 8px 8px 8px 4px;
	border-radius: var(--r-xs);
}

/* ---------- Dropdown panel (desktop/navigationbar planning 2512:71147 …) ---------- */
.site-header__dropdown {
	position: absolute;
	top: calc(100% + 28px);           /* 20px pill padding + 8px gap */
	left: -2px;
	z-index: 2;
	padding: 23px;                    /* 24 minus the 1px border */
	border: 1px solid var(--c-bg-grey);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	box-shadow: 4px 8px 16px rgba(0, 0, 0, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

/* Keeps the hover alive across the gap between the pill and the panel. */
.site-header__dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 30px;
}

.site-header__item.is-instant > .site-header__dropdown { transition: none; }

.site-header__item.is-open > .site-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}

.site-header__sub {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-header__sub-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font: var(--f-subtitle-l);
	color: var(--c-text-dark);
	white-space: nowrap;
	transition: color .15s ease;
}

.site-header__sub-link:hover { color: var(--c-primary); }

/* icon area: 24px purple tile, 20px icon */
.site-header__sub-icon {
	--icon-size: 20px;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--c-bg-purple);
	color: var(--c-primary);
}

/* ---------- Button + menu toggle ---------- */
.site-header__button { grid-column: 3; justify-self: end; }

.site-header__toggle {
	--icon-size: 40px;                    /* menu icon: 30px lines in a 40px box (1275:20554) */
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-text-dark);
}

.site-header--transparent:not(.is-scrolled) .site-header__toggle { color: var(--c-text-white); }

/* ---------- Mobile menu (mobile/hamburger/2..4) ---------- */
.has-site-menu,
.has-site-menu body { overflow: hidden; }

.site-header__drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-bg-purple);
	color: var(--c-text-dark);
}

.site-header__drawer[hidden],
.site-header__panel[hidden] { display: none; }

.site-header__panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.site-header__m-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	height: 56px;
	padding: 8px var(--gutter);
}

.site-header__m-logo { --logo-h: 20px; }

.site-header__close {
	--icon-size: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	color: var(--c-text-dark);
}

.site-header__back {
	--icon-size: 28px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 40px;
	font: var(--f-subtitle-l);
	color: var(--c-text-dark);
}

.site-header__m-nav {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px var(--gutter) 0;
}

.site-header__m-title { font: var(--f-header-s); color: var(--c-text-dark); }

.site-header__m-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-header__m-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 23px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-border-light);
}

.site-header__m-link {
	--icon-size: 20px;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	font: var(--f-subtitle-xl);
	color: var(--c-text-dark);
	text-align: left;
}

.site-header__m-link:hover { color: var(--c-primary); }

.site-header__m-tag {
	flex: none;
	padding: 8px 10px;
	border: 0;
	background: var(--c-secondary);
}

.site-header__m-buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* banner: cost calculator strip with the diamond grid pattern (shader in Figma) */
.site-header__m-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	margin-top: auto;
	padding: 32px var(--gutter);
	background-color: #ede7fc;
	background-image:
		repeating-linear-gradient(45deg, #e1d5ff 0 1px, transparent 1px 29px),
		repeating-linear-gradient(-45deg, #e1d5ff 0 1px, transparent 1px 29px);
}

.site-header__panel[data-panel="main"] .site-header__m-nav { padding-bottom: 84px; }

.site-header__m-banner-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.site-header__m-banner-title { font: var(--f-header-xs); }

@media (max-width: 1023px) {
	.site-header__bar { display: flex; justify-content: space-between; gap: 16px; }
	.site-header__nav { display: none; }
	.site-header__button { margin-left: auto; }
	.site-header__toggle { display: inline-flex; }
}

@media (min-width: 1024px) {
	.site-header__drawer { display: none; }
}

@media (max-width: 767px) {
	.site-header__bar,
	.site-header--solid .site-header__bar,
	.site-header.is-scrolled .site-header__bar { padding-block: 8px; }
	.site-header__logo { --logo-h: 20px; }
	.site-header__button { display: none; }
}