/*
 * header.css — fixed site header with three states:
 *   solid (default, on inner pages) · overlay (transparent over the hero) ·
 *   overlay.is-solid (solidifies on scroll). Desktop nav >=1060px (compact
 *   between 1060 and 1279); below 1060 a full-screen mobile drawer. Colour
 *   flips via the --hdr-fg custom property.
 */

/* Default (inner pages, and the front page after scrolling past the hero):
   a frosted near-white glass bar. */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	isolation: isolate;
	--hdr-fg: var(--ink);
	color: var(--hdr-fg);
	background: rgba(251, 252, 250, 0.72);
	-webkit-backdrop-filter: blur(12px) saturate(1.08);
	backdrop-filter: blur(12px) saturate(1.08);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 8px 26px -20px rgba(21, 36, 27, 0.40);
	transition:
		background-color 0.35s var(--ease),
		border-color 0.35s var(--ease),
		box-shadow 0.35s var(--ease),
		-webkit-backdrop-filter 0.35s var(--ease),
		backdrop-filter 0.35s var(--ease);
}

/* Top-down dark scrim — only shown in the transparent-over-hero state so the
   white nav stays legible over busy video. Fades out as the bar frosts. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(16, 28, 20, 0.58) 0%, rgba(16, 28, 20, 0.12) 55%, rgba(16, 28, 20, 0) 100%);
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

/* Transparent over the hero: no glass, white text, scrim on, faint hairline. */
.site-header--overlay:not(.is-solid) {
	--hdr-fg: #fff;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

.site-header--overlay:not(.is-solid)::before {
	opacity: 1;
}

.site-header__inner {
	position: relative;
	z-index: 1; /* above the scrim ::before */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	min-height: 104px; /* generous, matching the client's original header */
	padding-block: var(--s-3);
}

/* ---- Logo ---- */
.site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo__lockup {
	height: 84px;
	width: auto;
	display: block;
}

/* Default (frosted / inner pages) shows the ink lockup; the white lockup shows
   only over the hero. */
.site-logo__lockup--light {
	display: none;
}

.site-header--overlay:not(.is-solid) .site-logo__lockup--light {
	display: block;
}

.site-header--overlay:not(.is-solid) .site-logo__lockup--dark {
	display: none;
}

/* ---- Primary nav (desktop) ---- */
.primary-nav {
	display: flex;
	align-items: center;
	/* Air between the links and the CTA pair — modest at ~1024, generous on wide
	   screens so the CTAs never crowd the right edge. */
	gap: clamp(var(--s-6), 3vw, var(--s-12));
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
	/*
	 * Never let the list shrink. Its labels are nowrap, so a shrunken box does
	 * not reflow — the text simply spills out of the box and collides with the
	 * CTA pills, which is invisible to both an overflow check (the spill stays
	 * inside the viewport) and a box-overlap check (the boxes merely touch).
	 * Holding the natural width means "does it fit" is decided by the media
	 * query below, where it can actually be reasoned about.
	 */
	flex: 0 0 auto;
}

.nav-item {
	position: relative;
	margin: 0;
}

.nav-item__link {
	display: inline-block;
	padding: var(--s-2) 0;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--hdr-fg);
	text-decoration: none;
	white-space: nowrap;
}

.nav-item__link:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	color: var(--hdr-fg);
}

/* Dropdown toggle chevron */
.nav-item__sub-toggle {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2);
	margin-left: -4px;
	background: none;
	border: 0;
	color: var(--hdr-fg);
	cursor: pointer;
}

.nav-chevron {
	transition: transform var(--dur-fast) var(--ease);
}

/* ---- Submenu ---- */
.nav-sub {
	list-style: none;
	margin: 0;
	padding: var(--s-3);
	max-width: none;
}

@media (min-width: 1060px) {
	/* Keep the label + chevron on one line. */
	.nav-item--has-sub {
		display: inline-flex;
		align-items: center;
		gap: 2px;
	}

	.nav-sub {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		min-width: 220px;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow-soft);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
	}

	.nav-item--has-sub:hover .nav-sub,
	.nav-item--has-sub:focus-within .nav-sub,
	.nav-item--has-sub[data-open] .nav-sub {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.nav-sub a {
	display: block;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-btn);
	color: var(--ink);
	text-decoration: none;
}

.nav-sub a:hover {
	background: var(--paper);
	color: var(--koivu-dark);
}

/* ---- Header CTAs ---- */
.primary-nav__cta {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex: 0 0 auto; /* Same reason as the list: the buttons are nowrap. */
}

.btn--sm {
	min-height: 48px;
	padding: var(--s-3) var(--s-6);
	font-size: var(--fs-body);
}

/* Ghost button must stay legible on the transparent (dark) header. */
.site-header--overlay:not(.is-solid) .btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.site-header--overlay:not(.is-solid) .btn--ghost:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

/* ---- Hamburger (hidden on desktop) ---- */
.nav-toggle {
	display: none;
}

.nav-toggle__box {
	position: relative;
	display: block;
	width: 26px;
	height: 18px;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--hdr-fg);
	border-radius: 2px;
	transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bar {
	top: 50%;
	transform: translateY(-50%);
}

.nav-toggle__bar::before {
	content: "";
	top: -8px;
}

.nav-toggle__bar::after {
	content: "";
	top: 8px;
}

/* ---- Mobile / small tablet: drawer (below 1060px the nav genuinely needs a
   comfortable desktop row) ---- */
/*
 * Compact desktop nav for laptops (1060–1279px).
 *
 * The full-size nav needs ~1223px to lay out. Everything below that used to
 * fall back to the burger drawer, which meant a normal laptop — or any
 * non-maximised window — showed a mobile menu on a wide screen. The client
 * reviews on a ~1074px laptop, so that was the state they saw most.
 *
 * Rather than move the cliff by 40px, this band trims the three things that
 * cost width (logo height, nav type + gaps, button padding) so a real nav
 * fits from 1060px up. Measured at 1060: content ~1007px inside a 1020px
 * container. Below 1060 the drawer is genuinely the right answer.
 */
@media (min-width: 1060px) and (max-width: 1279.98px) {
	/*
	 * Drop the ghost "Kirjaudu" pill in this band and keep only the green CTA.
	 *
	 * This is what actually buys the room: measured at 1279 the two-button
	 * header left exactly 0px between the last nav link and the pills, so
	 * "Yhteystiedot" collided with "Kirjaudu". Trimming type and gaps alone
	 * could not close a ~150px shortfall.
	 *
	 * The client's own site does the same thing — one button in the header —
	 * and the portal stays one click away here via the Palvelumme dropdown,
	 * the self-service panel and the footer, so nothing is lost.
	 */
	.primary-nav__cta .btn--ghost {
		display: none;
	}

	.site-logo__lockup {
		height: 64px;
	}

	/*
	 * NOTE: the spacing scale has no --s-5 (it runs 4, 6, 8, 12...). Using a
	 * token that does not exist makes the whole declaration invalid, and `gap`
	 * silently falls back to `normal` (0) — which pushed the last nav link
	 * flush against the CTA. Only use tokens that exist in tokens.css.
	 */
	.primary-nav {
		gap: var(--s-6);
	}

	.primary-nav__list {
		gap: var(--s-4);
	}

	.nav-item__link {
		font-size: 1rem;
	}

	.primary-nav__cta {
		gap: var(--s-3);
	}

	.btn--sm {
		min-height: 44px;
		padding: var(--s-2) var(--s-4);
		font-size: 0.9375rem;
	}
}

@media (max-width: 1059.98px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--s-2);
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--hdr-fg);
		z-index: 2;
	}

	.site-logo__lockup {
		height: 60px;
	}

	.primary-nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--s-8);
		padding: calc(72px + var(--s-8)) var(--container-pad) var(--s-12);
		background: var(--birch-white);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur) var(--ease), visibility var(--dur);
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-2);
	}

	.nav-item__link {
		--hdr-fg: var(--ink);
		font-size: var(--fs-h3);
		font-family: var(--font-display);
	}

	.nav-item__sub-toggle {
		--hdr-fg: var(--ink);
		position: absolute;
		right: 0;
		top: 6px;
	}

	.nav-sub {
		padding: var(--s-2) 0 var(--s-4) var(--s-4);
		display: none;
	}

	.nav-item--has-sub[data-open] .nav-sub {
		display: block;
	}

	.primary-nav__cta {
		flex-direction: column;
		align-items: stretch;
		margin-top: var(--s-4);
	}

	.primary-nav__cta .btn {
		width: 100%;
	}

	/* Open state: drawer slides in, header text goes dark over the light panel. */
	body.nav-open .primary-nav {
		transform: translateX(0);
		visibility: visible;
	}

	body.nav-open {
		overflow: hidden;
	}

	body.nav-open .site-header {
		--hdr-fg: var(--ink);
		background: var(--birch-white);
	}

	/* No hero scrim behind the open (light) drawer; show the ink lockup. */
	body.nav-open .site-header--overlay::before {
		opacity: 0;
	}

	body.nav-open .site-logo__lockup--light {
		display: none;
	}

	body.nav-open .site-logo__lockup--dark {
		display: block;
	}

	/* In the open drawer (light panel) the ghost CTA must read as dark, not the
	   white treatment used over the hero. Higher specificity to beat that rule. */
	body.nav-open .site-header--overlay .btn--ghost {
		color: var(--ink);
		border-color: var(--ink);
	}

	body.nav-open .nav-toggle__bar {
		background: transparent;
	}

	body.nav-open .nav-toggle__bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	body.nav-open .nav-toggle__bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
}