/* NMD-04 (A): header is position:fixed at every breakpoint/template now (was position:relative, with
   an absolute/transparent ".wa-header--overlay" modifier doing the actual "float over the hero" job).
   At scroll 0 the look/layout stays identical to pre-NMD-04: the old `top: var(--wp--custom--header--offset)`
   absolute offset becomes `padding-top` on the fixed box itself (same 36px gap above the logo/nav row,
   same 72px inner row height below it — see .wa-header__inner — so the header's total visual height,
   36+72=108px, is unchanged and still matches --wa-header-space in assets/css/global.css). Horizontal
   padding/background are unchanged; isolation:isolate scopes the header's own stacking context (no
   negative z-index lives here, kept for safety/consistency with the Γ rule). will-change is limited to
   the one property that actually animates (background-color) — the iOS "flicker on fixed+backdrop-filter
   scroll" issue (Γ) is otherwise addressed by transform:translateZ(0) below, not by overpromising
   will-change on properties that never change (e.g. transform).
   NMD-04b (2): padding-top is now ALSO part of the scrolled transition (.is-scrolled drops it to 0,
   see below) — added to the transition list, ~250ms per the brief (was 220ms, background-only). */
.wa-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	padding: var(--wp--custom--header--offset, 36px) 50px 0;
	background: var(--wa-darker);
	color: #fff;
	box-sizing: border-box;
	isolation: isolate;
	transform: translateZ(0);
	will-change: background-color, padding-top;
	transition: background-color .25s ease, padding-top .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}
@media (prefers-reduced-motion: reduce) {
	.wa-header { transition: none; }
}
.wa-header--overlay { background: transparent; }
/* NMD-04b (2+3): "scrolled" state shrinks the header instead of just tinting it — padding-top drops to
   0, so the box's total height goes from offset+innerH down to just innerH (.wa-header__inner is
   untouched, so the logo/nav row itself never resizes — align-items:center on it does the rest for
   free: with padding-top:0 the header's box top/bottom now coincide with the inner row's top/bottom,
   so the already-centered logo automatically gets an EQUAL visible gap above and below it — no
   separate top/bottom literals to keep in sync, same formula at every breakpoint (72px row desktop,
   44px row ≤767, see the ≤767 override below). The header is `position:fixed` so this never reflows
   page content (B/2). Opacity is controlled ONLY by --wa-header-scrolled-opacity (declared in
   assets/css/global.css, value 0.4 per the brief) — never hardcode a different alpha here. */
.wa-header.is-scrolled {
	padding-top: 0;
	background: rgba(6, 18, 32, var(--wa-header-scrolled-opacity, 0.4));
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
@supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) {
	.wa-header.is-scrolled {
		background: rgba(6, 18, 32, .9);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
/* Logged-in admin bar: WP normally compensates via `html{margin-top}` (doc-flow), which a fixed element
   never inherits — offset the header itself instead, same 32px/46px(≤782) WP core already uses for
   #wpadminbar, so the header never slides under/over it. */
body.admin-bar .wa-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .wa-header { top: 46px; }
}
.wa-header__inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--wp--custom--header--height, 72px); }
.wa-header__brand { margin-right: auto; color: inherit; text-decoration: none; font-size: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; flex: 0 0 auto; line-height: 0; }
/* Logo always scales proportionally (wordmark + "By Eliophotou", Figma ratio 353:48) — never a fixed
   height with width:auto inside a flex row, which lets the flex item shrink in width only and
   distorts the mark (R: header-session, found at 375/390/414/1280). Width-driven + height:auto + a
   locked aspect-ratio + flex-shrink:0 keeps the ratio at every breakpoint. */
.wa-header__brand img { display: block; width: 353px; height: auto; aspect-ratio: 353 / 48; flex-shrink: 0; }
.wa-nav__list { display: flex; gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.wa-nav__list li { flex: 0 0 auto; }
/* A. A multi-word item ("Road Freight", "Trade Lanes", "Why Nomadica") wrapped onto two lines at
   1280 once rendered with the real webfont (QA, found with fonts loaded) — nowrap keeps every label
   on one line; it only shows ≥1280 anyway (burger breakpoint below). */
.wa-nav__list a { display: inline-block; white-space: nowrap; color: inherit; text-decoration: none; font-size: var(--wp--preset--font-size--eyebrow); line-height: 20px; font-weight: 700; letter-spacing: .14px; text-transform: uppercase; }
.wa-nav__list a:hover, .wa-nav__list .current-menu-item > a { color: var(--wa-accent); }
.wa-header__search { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
/* A. Search icon morphs into an X in the same spot when the overlay is open (same control
   opens/closes it, like the burger) — no separate close button inside the overlay any more. */
.wa-header__search-icon--close { display: none; }
.wa-header__search[aria-expanded="true"] .wa-header__search-icon--search { display: none; }
.wa-header__search[aria-expanded="true"] .wa-header__search-icon--close { display: block; }
.wa-header__cta { flex: 0 0 auto; }
.wa-header__cta .wa-btn { white-space: nowrap; }
.wa-header__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; }
.wa-header__toggle span, .wa-header__toggle span::before, .wa-header__toggle span::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; content: ""; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.wa-header__toggle span::before { position: absolute; top: -7px; }
.wa-header__toggle span::after { position: absolute; top: 7px; }
/* Burger → X while the mobile menu overlay is open (same button opens and closes it). */
.wa-header__toggle[aria-expanded="true"] span { background: transparent; }
.wa-header__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.wa-header__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --- B. Header paddings / height per tier: ≤1023 → 20px · 1024–1279 → 24px (όπως τα sections) · ≥1280 → 50px (Figma).
   Only the inline (horizontal) padding changes per tier — top padding keeps the shared
   --wp--custom--header--offset token (36px) down to 768px; NMD-04/Δ gives ≤767 its own smaller value
   below, instead of here, so 768–1023 is untouched. */
@media (max-width: 1279px) {
	.wa-header { padding-left: 24px; padding-right: 24px; }
	/* Logo 1024–1279: clamp(240px, 24vw, 353px). */
	.wa-header__brand img { width: clamp(240px, 24vw, 353px); }
}
@media (max-width: 1023px) {
	.wa-header { padding-left: 20px; padding-right: 20px; }
	/* Logo ≤1023: clamp(180px, 50vw, 260px) (≈190px @375). */
	.wa-header__brand img { width: clamp(180px, 50vw, 260px); }
}
/* NMD-04b (1): "30px" is the VISIBLE gap from the viewport top to the logo's own visible bounding box
   at scroll 0 ≤767 — not the header's padding-top in isolation. The logo is vertically centered inside
   .wa-header__inner (align-items:center), so that visible gap = padding-top + (innerH - logoH) / 2.
   At 375px the logo is clamp(180px,50vw,260px) wide → 187.5px → 187.5 × 48/353 = 25.49px tall (Figma
   ratio, blocks/site-header/style.css logo rule above). NMD-04 only shrank padding-top (36→30px) and
   left the 72px row alone, which left (72-25.49)/2 ≈ 23px of *extra* centering gap on top of the 30px
   padding — ≈53px total, the "still looks big" the reviewer saw. Fix: shrink the row itself to 44px
   (the smallest it can go without clipping the 44×44 burger/search buttons — Β already relies on this
   same 44px becoming the *scrolled* row height, see .is-scrolled above) and reduce padding-top to 21px,
   so 21 + (44-25.49)/2 ≈ 30.3px — within the ±2px tolerance at every ≤767 width (logo height only grows
   towards 768, same direction the gap moves). Burger/search stay perfectly centered with the logo —
   same flex row, same align-items:center, nothing about their own position changes. */
@media (max-width: 767px) {
	.wa-header { padding-top: var(--wa-header-offset-mobile, 21px); }
	.wa-header__inner { height: var(--wa-header-inner-h-mobile, 44px); }
}
:root { --wa-header-h: 72px; }
/* A. Burger breakpoint: logo + nav + search + CTA were checked at 1024/1100/1180/1280 (brief). With
   nowrap labels (fixing the two-line wrap defect) the full desktop row (brand 353 + 6 nav items +
   search + CTA + 50px side padding) only clears the viewport from 1280px even at the nav's own minimum
   gap — below that it overflowed and caused horizontal scroll. Per the brief's escalation path ("αν
   πάλι δεν χωράνε, ανέβασε το breakpoint του burger μέχρι 1279") the burger now covers the whole ≤1279
   range; only ≥1280 shows the inline nav/CTA. NOTE: the header/nav gap is clamp(16px, 2vw, 32px) — at
   exactly 1280–1439px this is slightly tighter (25.6–28.7px) than the pre-session fixed 32px/28px, the
   smallest change that keeps every label on one line without overflow; from ~1600px up it reaches the
   original 32px again. Documented in the session report as a disclosed, minimal deviation. */
@media (max-width: 1279px) {
	.wa-header__toggle { display: grid; place-items: center; }
	.wa-header__nav { display: none; }
	.wa-header__cta { display: none; }
}
@media (min-width: 1280px) {
	:root { --wa-header-h: var(--wp--custom--header--height, 72px); }
}

/* --- D/E. Full-screen overlays (mobile menu + search), shared base. --- */
.wa-overlay {
	position: fixed;
	inset: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	z-index: 70;
	background: #061220;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding-bottom: env(safe-area-inset-bottom);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity .3s ease, transform .3s ease;
}
.wa-overlay[hidden] { display: none; }
.wa-overlay.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.wa-overlay { transition: none; }
}

/* D. Mobile menu overlay content */
.wa-overlay__inner {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: calc(var(--wa-header-h, 72px) + 48px) 20px 48px;
	box-sizing: border-box;
}
.wa-overlay__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.wa-overlay__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: #fff;
	text-decoration: none;
	font-family: "Afacad", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(28px, 7.5vw, 34px);
	line-height: 1.2;
}
.wa-overlay__list a:hover,
.wa-overlay__list .current-menu-item > a { color: var(--wa-accent); }
.wa-overlay__cta { margin-top: 40px; }
.wa-overlay__cta .wa-btn { width: 100%; max-width: 360px; justify-content: center; }

/* E. Search overlay content (shared .wa-overlay base) */
.wa-overlay--search .wa-overlay__inner,
.wa-overlay--search { align-items: center; }
.wa-overlay__search-form {
	width: 100%;
	max-width: 900px;
	margin: auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
}
.wa-overlay__search-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-family: "Afacad", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.2;
	padding: 8px 0;
}
.wa-overlay__search-input::placeholder { color: rgba(255, 255, 255, .6); }
.wa-overlay__search-input:focus { outline: 0; }
.wa-overlay__search-submit {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--wa-accent);
	cursor: pointer;
}

@media (min-width: 1280px) {
	/* Desktop: menu overlay never opens (no burger ≥1280), only the search overlay is reachable. */
	.wa-overlay--menu { display: none; }
}