/* =========================================================================
   Site header — fixed navbar + megameny + mobilmeny.
   Figma: navbar 616:4292 (1920), megameny 1048:6247, mobilmeny 1397:4256,
   mobil-stängd bar 1362:24403.

   Scroll-/menybeteendet (fixed, göms efter 120px ACKUMULERAD nedscroll,
   cream-bakgrund + kompakt −10 % padding vid scroll, länk-hover, transitions,
   megamenyns nedfällningsanimation) är uttryckligen användarbegärt (avsteg
   från no-effects-policyn). Megamenyns skugga och rundade bottenhörn FINNS
   i Figma-noden → replikeras.

   Brytpunkten 1100/1101 definieras på TRE ställen: två media queries här
   + matchMedia('(min-width: 1101px)') i assets/js/header.js — håll i synk!
   ========================================================================= */

:root {
	--header-h: 134px;       /* Figma 616:4292: pt 40 + innehåll 54 + pb 40 (symmetri verifieras i diff) */
	--header-pad-y: 40px;
	--header-ink: #262626;   /* Megameny/mobilmeny-text — rå hex i Figma (ej variabelbunden, utanför tokens-paletten) */
}
@media (max-width: 1100px) {
	:root {
		--header-h: 83px;        /* Figma 1362:24403: pt 24 + innehåll 35 + pb 24 */
		--header-pad-y: 24px;
	}
}

/* Kompensation: headern är ur flödet → första blocket på varje sida börjar
   under den (användarkrav 1). Alltid topplägeshöjden — kompaktläget gäller
   bara när headern redan ligger ovanpå scrollat innehåll. */
body {
	padding-top: var(--header-h);
}

/* Ankare/TOC-mål hamnar annars under den fixerade headern vid upp-scroll
   (funktionellt krav, ej kosmetik). single-article.css skärper för artiklar. */
[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Admin-bar: WP sätter variabeln (32px desktop / 46px ≤782px). Känt undantag:
   ≤600px är #wpadminbar position:absolute (scrollar bort) → 46px-glapp för
   inloggade på mobil — accepterad begränsning. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Overlayn likaså — annars täcker admin-baren stängknappen för inloggade
   (≤600px är #wpadminbar absolute och scrollar bort → litet glapp då; ok). */
.admin-bar .site-header__mobile {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* --- Header-skalet ------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100; /* blockskalan maxar 4; mobil-overlay 110 */
	background-color: transparent; /* toppläge: sidans bakgrund syns igenom */
	/* Användarbegärda transitions (hide/show + vit bg vid scroll). */
	transition: transform 0.3s ease, background-color 0.2s ease;
}
.site-header.is-scrolled {
	/* Användarbeslut 2026-06-11: samma cream som megamenyn (ersätter vitt). */
	background-color: var(--color-neutral-100);
}
.site-header.is-hidden {
	transform: translateY(-100%); /* användarkrav 2: göms efter 50px nedscroll */
}
.site-header.no-transition {
	transition: none; /* init-frame vid load mitt på sidan: snap utan animation */
}

.site-header__bar {
	position: relative; /* megapanelens ankare */
	padding-block: var(--header-pad-y);
	transition: padding 0.2s ease; /* användarbegärd (kompaktläges-övergång) */
}
.is-scrolled .site-header__bar {
	padding-block: calc(var(--header-pad-y) * 0.9); /* −10 % (användarbeslut) */
}

/* Inre container: Figma x=126 @1920 → 1920 − 2×126 = 1668 (footer-main-mönstret). */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: calc(1668px + 2 * var(--container-gutter));
	min-height: 54px; /* Figma innehållshöjd (CTA-pillen styr) — låser --header-h-matten */
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.site-header__brand {
	display: inline-flex;
	align-items: center;
	color: var(--color-neutral-900);
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
}
.site-header__logo {
	display: block;
	width: auto;
	height: 40px; /* Figma 159.31×40 */
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 40px; /* Figma gap-40 (länkrad ↔ hamburgare ↔ CTA) */
}

.site-header__nav {
	display: block;
}
.site-header__menu {
	display: flex;
	align-items: center;
	gap: 40px; /* Figma gap-40 mellan länkar */
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__link {
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold); /* Inter Tight ExtraBold 16 */
	font-size: 1rem;
	line-height: 1;
	color: var(--color-neutral-900);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease; /* användarbegärd hover */
}

/* Chevron på desktop-poster med megameny (indikerar utfällning). Ärver
   länkfärgen (currentColor) → följer coral-hover + ljus-header. */
.site-header__item--mega .site-header__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.site-header__link-chevron {
	flex: none;
	width: 18px;
	height: 18px;
}
/* Tjockare streck (användarbegärt "fetare") — överrider SVG:ns stroke-width 1.5.
   Scoped till nav-chevronen → delade nav-arrow-down (mobil-accordion m.fl.) oförändrad. */
.site-header__link-chevron path {
	stroke-width: 2.5;
}
/* Roterar nedåt → uppåt när megamenyn är öppen. Ingen transition (användarbeslut). */
.site-header__link[aria-expanded="true"] .site-header__link-chevron {
	transform: rotate(180deg);
}

/* Hamburgare/stäng-toggle: 32px ikon (Figma 616:4313). Båda SVG:erna renderas;
   aria-expanded växlar menu ↔ xmark. */
.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-neutral-900);
	cursor: pointer;
}
.site-header__toggle svg {
	display: block;
	width: 32px;
	height: 32px;
}
.site-header__toggle .site-header__toggle-close {
	display: none;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open {
	display: none;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
	display: block;
}

/* Hamburgaren visas bara på mobil (≤1100); desktop använder per-post hover-megameny. */
@media (min-width: 1101px) {
	.site-header__toggle {
		display: none;
	}
}

/* Navbar-CTA: Figma-avvikelser mot .btn--tertiary (border 2px, text 18). */
.btn.site-header__cta {
	padding: 14px 22px; /* 2px border-komp → bevarar 56px-höjdsparitet */
	border-width: 2px;
	font-size: 1.125rem;
}

/* --- Ljus navbar i toppläget (body.has-light-header: 404 + enskilda
   artiklar — sunbird_has_light_header i inc/helpers.php) -----------------
   Cream text/logga över sidans mörka hero-media; flippar till mörkt när
   headern får cream-bakgrund (is-scrolled). :not(.is-scrolled) räcker:
   is-hidden kan bara inträffa när is-scrolled redan gäller (header.js
   sätter is-scrolled vid y>0). Mobil-OVERLAYN är SYSKON till .site-header
   → träffas inte (förblir cream bg + mörk text). Hamburgar-SVG:erna
   (stroke: currentColor) och CTA-bordern (border-color: currentColor)
   följer med färgen automatiskt. */
.has-light-header .site-header:not(.is-scrolled) .site-header__brand,
.has-light-header .site-header:not(.is-scrolled) .site-header__link,
.has-light-header .site-header:not(.is-scrolled) .site-header__toggle,
.has-light-header .site-header:not(.is-scrolled) .btn.site-header__cta {
	color: var(--color-neutral-100);
}

/* CTA-hover i ljust läge: vit fylld pill + mörk text (användarbegärd
   2026-06-12) — ersätter tertiary-defaultens mörka fyllning här. Bordern
   sätts vit (osynlig mot fyllningen) → ren pill som 404-herons vita knapp
   (användarval). Mörka/scrollade läget behåller default-hovern. */
.has-light-header .site-header:not(.is-scrolled) .btn.site-header__cta:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-neutral-900);
}

/* Logo-swap: ljus logga (renderas FÖRE den mörka, endast i ljus-header-DOM —
   site-header.php) visas i toppläget; vid scroll göms den och den mörka
   visas igen. Syskon-kombinatorn gömmer den mörka ENDAST när en ljus ligger
   före = guard utan :has() (ingen ljus uppladdad → mörk kvar). */
.has-light-header .site-header__logo--light {
	display: none;
}
.has-light-header .site-header:not(.is-scrolled) .site-header__logo--light {
	display: block;
}
.has-light-header .site-header:not(.is-scrolled) .site-header__logo--light + .site-header__logo {
	display: none;
}

/* Hover på ljusa navbarens länkar: underline som animeras in från vänster
   (uttryckligen användarbegärd 2026-06-12 — ej i Figma). */
.has-light-header .site-header:not(.is-scrolled) .site-header__link {
	position: relative;
}
.has-light-header .site-header:not(.is-scrolled) .site-header__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.has-light-header .site-header:not(.is-scrolled) .site-header__link:hover::after,
.has-light-header .site-header:not(.is-scrolled) .site-header__link:focus-visible::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.has-light-header .site-header:not(.is-scrolled) .site-header__link::after {
		transition: none;
	}
}

/* --- Megameny (desktop) -------------------------------------------------
   Ligger INUTI headern (absolute under baren) → följer hide-transformen.
   Skugga + rundade bottenhörn enligt Figma-noden 1048:6247. -------------- */
.site-header__mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-inline: auto;
	/* Användarbeslut: alltid ≥20px inset från skärmkanten, max navbar-
	   innehållets bredd (1668 + gutters), centrerad. */
	width: min(100% - 40px, calc(1668px + 2 * var(--container-gutter)));
	background-color: var(--color-neutral-100);
	border-radius: 0 0 40px 40px;
	box-shadow: 0 13px 28px rgba(38, 38, 38, 0.03), 0 50px 50px rgba(38, 38, 38, 0.03), 0 113px 68px rgba(38, 38, 38, 0.02);
	/* Användarbegärd nedfällningsanimation — max-height-mönstret (samma som
	   mobil-accordionen; JS sätter målhöjden, se header.js). */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.site-header__mega[hidden] {
	display: none;
}

/* Figma-geometri @1920: promo 418 + gap 71 + huvudkolumn 813 = 1302, ~centrerad
   (X 319 ≈ (1920−1302)/2 = 309 — kalibreras i diff); pt 80, pb 83. */
.site-header__mega-inner {
	display: flex;
	gap: 71px;
	max-width: calc(1302px + 2 * var(--container-gutter));
	margin-inline: auto;
	padding: 80px var(--container-gutter) 83px;
}

.site-header__mega-promo {
	position: relative;
	flex: none;
	width: 418px;
	height: 359px;
	overflow: hidden;
}
.site-header__mega-promo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.site-header__mega-promo-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3); /* Figma-overlay */
}
.site-header__mega-promo-content {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 36px 40px 44px; /* Figma: rubrik y+36, text slutar 44 från botten */
}
.site-header__mega-promo-heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
	font-size: 2.25rem; /* 36 */
	line-height: 1.5;
	color: var(--color-neutral-100);
}
.site-header__mega-promo-text {
	margin: auto 0 0; /* trycks mot kortets botten */
	font-family: var(--font-heading);
	font-weight: var(--fw-medium);
	font-size: 1.5rem; /* 24 */
	line-height: 1.25;
	color: var(--color-neutral-100);
}

.site-header__mega-main {
	flex: 1;
	min-width: 0;
}
.site-header__mega-cols {
	display: flex;
	flex-wrap: wrap; /* 1101–~1370 är trångt → kolumnerna får bryta rad */
	gap: 32px 80px; /* Figma kolumn-gap 80 */
}
.site-header__group-heading {
	display: inline-block;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
	font-size: 1.5rem; /* 24 */
	line-height: 1;
	color: var(--header-ink);
	/* Understrykning endast på länk-varianten (användarbeslut 2026-06-11;
	   Figma visar underline men rubriken kan även vara ren text). */
	text-decoration: none;
}
a.site-header__group-heading {
	text-decoration: underline;
	transition: color 0.15s ease; /* användarbegärd hover */
}
.site-header__group-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__group-links li {
	margin-top: 32px; /* Figma: radpitch 52 = radhöjd 20 + gap 32 */
}
.site-header__group-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--header-ink);
	text-decoration: none;
}
.site-header__group-icon {
	flex: none;
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain; /* uppladdad ikonbild */
}
.site-header__group-label {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold); /* 18 SemiBold */
	font-size: 1.125rem;
	line-height: 1;
	white-space: nowrap;
}
/* Hover-state: endast understrykning. Användarbeslut: ingen fet text vid
   hover (avsteg från Figmas Bold+underline). Spökkopian i ::after behålls
   och håller kvar den nuvarande kolumnbredden → oförändrad layout. */
.site-header__group-label::after {
	content: attr(data-bold);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: var(--fw-bold);
}
.site-header__group-link:hover .site-header__group-label {
	text-decoration: underline;
}

.site-header__mega-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 100px; /* användarbeslut 2026-06-11 (Figma: 122) */
}
.site-header__mega-text {
	margin: 0;
	max-width: 463px; /* Figma textbredd */
	font-family: var(--font-heading);
	font-size: 1.125rem; /* 18 */
	line-height: 1.5;
	color: #000; /* Figma: svart (ej neutral-token) */
}
.site-header__mega-text strong {
	font-weight: var(--fw-bold);
}
.site-header__mega-text span {
	font-weight: var(--fw-regular);
}
/* Megameny-CTA: Figma-avvikelse mot .btn--primary (px32 py24, Bold). */
.btn.site-header__mega-cta {
	padding: 24px 32px;
	font-weight: var(--fw-bold);
	font-size: 1rem;
}

/* --- ≤1100: mobilbar (länkraden göms; CTA + hamburgaren visas; hamburgaren öppnar overlayn) --- */
@media (max-width: 1100px) {
	.site-header__nav {
		display: none;
	}
	/* Navbar-CTA syns nu på mobil (Figma 1362:24403 / 1382:44349: logo + CTA + hamburgare,
	   även i öppen meny). Kompakt variant (Figma 126×35): 16px text, 1px border, py-8 px-16.
	   Desktop-overriden (.btn.site-header__cta = 18px/2px/14·22) gäller bara ≥1101. Samma
	   kompakta stil i mobil-overlayns topp (.site-header__mobile-cta). */
	.btn.site-header__cta,
	.btn.site-header__mobile-cta {
		padding: 7px 16px; /* Figma py-8: −1px komp. för 1px-bordern → 35px höjd (bevarar barens 35px), jfr .btn--tertiary */
		border-width: 1px;
		font-size: 1rem; /* 16px */
	}
	.site-header__right {
		gap: 16px; /* Figma: CTA ↔ hamburgare (desktop 40px mellan länkrad ↔ CTA) */
	}
	.site-header__mega {
		display: none !important; /* säkerhetsbälte — JS använder overlayn här */
	}
	.site-header__inner {
		min-height: 35px; /* Figma 1362:24403 innehållshöjd */
	}
	.site-header__logo {
		height: 30px; /* användarbegärd större mobil-logga: 30px (Figma anger 95.6×24) */
	}
}

/* --- Mobil-overlay (Figma 1397:4256) ------------------------------------
   SYSKON till headern (fixed; får inte ligga i transformerad förfader). --- */
.site-header__mobile {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Horisontell padding = samma container-gutter som stängda baren
	   (.site-header__inner). 20px @375 (= Figma) men växer med guttern >500px →
	   logga/kryss ligger kvar i linje med stängd bar (ingen hop vid öppna/stäng). */
	padding: 24px var(--container-gutter);
	background-color: var(--color-neutral-100);
	overflow-y: auto;
}
.site-header__mobile[hidden] {
	display: none;
}
body.menu-open {
	overflow: hidden; /* scroll-lock medan overlayn är öppen */
}

.site-header__mobile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
}
/* Höger-grupp i overlayns topp: CTA + stäng-kryss (Figma 1382:44349 toppbar). */
.site-header__mobile-top-actions {
	display: flex;
	align-items: center;
	gap: 16px; /* Figma: CTA ↔ stäng-kryss */
}
.site-header__brand--mobile .site-header__logo {
	height: 30px; /* matchar stängda barens mobil-logga (användarbegärd 30px) */
}
.site-header__mobile-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--header-ink);
	cursor: pointer;
}
.site-header__mobile-close-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.site-header__mobile-body {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	padding-top: 40px; /* Figma pt-40 */
}
.site-header__mobile-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* CTA-pillen ska krympa till sitt innehåll */
	gap: 32px; /* Figma: lista → CTA */
}
.site-header__mobile-nav {
	width: 100%; /* listan/accordion-korten spänner hela overlay-bredden */
}
.site-header__mobile-list {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma list-gap */
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 8px 0; /* Figma py-8 */
	border: 0;
	background: none;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold); /* Inter Tight Bold 40 */
	font-size: 2.5rem;
	line-height: 1;
	color: var(--header-ink);
	text-decoration: none;
	cursor: pointer;
}
.site-header__mobile-acc-icon {
	flex: none;
	width: 24px;
	height: 24px;
}
.site-header__mobile-acc[aria-expanded="true"] .site-header__mobile-acc-icon {
	transform: rotate(180deg); /* nav-arrow-down → upp (samma geometri som up-ikonen) */
}

/* Accordion: max-height-transition (Chrome117-grid-rows-fällan, CLAUDE.md).
   Användarbegärd interaktion (mobilmenyns utfällning). */
.site-header__sub {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.site-header__sub-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
}
.site-header__sub-card {
	display: flex;
	flex-direction: column;
	gap: 32px; /* Figma kort-gap */
	padding: 24px 20px;
	background-color: var(--color-neutral-200); /* #f2f2ea */
}
.site-header__sub-card-heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 1.5rem; /* 24 */
	line-height: 1;
	color: var(--color-neutral-900);
	text-decoration: underline;
}
.site-header__sub-card-links {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__sub-card-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--header-ink);
	text-decoration: none;
}
.site-header__sub-card-icon {
	flex: none;
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain; /* uppladdad ikonbild */
}
.site-header__sub-card-label {
	flex: 1;
	font-family: var(--font-heading);
	font-weight: var(--fw-medium); /* 24 Medium */
	font-size: 1.5rem;
	line-height: 1;
}
.site-header__sub-card-arrow {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Global mobil-botten (Figma 1397:4308): EN text + CTA längst ner i mobil-overlayn.
   margin-top:auto pinnar blocket mot overlayns botten (.site-header__mobile-body är
   flex-kolumn, flex:1 0 auto). Ersätter den tidigare per-post-bottnen i accordionet
   (som annars staplades en gång per megameny). */
.site-header__mobile-bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px; /* Figma: text → knapp */
}
.site-header__mobile-bottom-text {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 1.125rem; /* 18 */
	line-height: 1.5;
	color: #000; /* Figma: svart */
}

/* --- Hover på menylänkar (användarbegärd; temats korall-mönster) --------- */
@media (hover: hover) {
	.site-header__link:hover {
		color: var(--color-coral-600);
	}
	.site-header__mobile-link:hover {
		color: var(--color-coral-600);
	}
	a.site-header__group-heading:hover {
		color: var(--color-coral-600);
	}
}

/* --- Aktivt topp-val (användarbegärt 2026-06-26; ej i Figma) -------------
   Korall text på det topp-val vars länk är aktuell sida ELLER som har en
   megameny-undersida som är aktuell sida (PHP sätter .site-header__link--active).
   Endast färg (inget extra streck), och endast desktop-navet — mobilmenyn är
   medvetet omarkerad. Andra selektorn matchar ljus-headerns höga specificitet
   (.has-light-header … :not(.is-scrolled)) så active vinner i toppläget också. */
.site-header__link--active,
.has-light-header .site-header:not(.is-scrolled) .site-header__link--active {
	color: var(--color-coral-600);
}

/* --- Reducerad rörelse: funktionerna kvar, animationerna snappas --------- */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__bar,
	.site-header__mega,
	.site-header__sub {
		transition: none;
	}
}