/* ════════════════════════════════════════════════════════════
   Avløserkortet — Sticky white site header
   ══════════════════════════════════════════════════════════════
   Ported from the design handoff (design_handoff_header_avlk).
   Tokens reuse the canonical brand vars from tokens.css; nothing
   re-declared here. The right-side greeting/pill/auth is the fleet
   [mentorkit_user_menu] shortcode, reskinned via its documented
   --mk-user-menu-* override variables (no plugin / markup changes).
   ──────────────────────────────────────────────────────────── */

/* ── Brand lockup ─────────────────────────────────────────────
   Mark + wordmark are overflow-cropped windows onto the untouched
   logo SVG (sizes set inline in PHP). The tagline is live text —
   the SVG tagline rendered at ~4px and blurred, so it's set in
   Roboto here where it stays crisp and scales with the header. */
.brand-svg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	flex: 0 0 auto;
}
.brand-svg__crop {
	display: block;
	overflow: hidden;
	flex: 0 0 auto;
	/* width + height set inline in PHP from the crop box + scale */
}
.brand-svg__img { display: block; max-width: none; }
.brand-svg__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}
.brand-svg__tagline {
	font-family: var(--font);
	font-size: 8.5px;
	line-height: 1;
	letter-spacing: .005em;
	white-space: nowrap;
	color: var(--color-ink);
}

/* ── The header itself — sticky, white ───────────────────────── */
.hdr {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-paper);
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font);
	transition:
		background 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease,
		padding 220ms cubic-bezier(.4, 0, .2, 1);
}
.hdr.is-scrolled {
	box-shadow: 0 1px 0 var(--color-line), 0 8px 22px rgba(0, 0, 0, .05);
	border-bottom-color: transparent;
}

.hdr__row {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 18px var(--container-gutter);
	display: flex;
	align-items: center;
	gap: 28px;
	transition: padding 220ms cubic-bezier(.4, 0, .2, 1);
}
.hdr.is-scrolled .hdr__row   { padding: 12px var(--container-gutter); }
.hdr.is-scrolled .brand-svg  { transform: scale(.78); transform-origin: left center; }
.hdr.is-scrolled .mk-user-menu__greeting { display: none; }

.hdr .brand-svg { flex: 0 0 auto; margin-right: auto; }

/* Mobile-only hamburger */
.hdr__burger {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: transparent;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
	flex: 0 0 auto;
	padding: 0;
}
.hdr__burger:hover,
.hdr__burger:focus-visible {
	background: var(--color-brand-deep);
	border-color: var(--color-brand-deep);
	color: #fff;
}
/* Open state mirrors the hover fill so the trigger reads as "active". */
.hdr.is-menu-open .hdr__burger {
	background: var(--color-brand-deep);
	border-color: var(--color-brand-deep);
	color: #fff;
}

/* Desktop nav */
.hdr__nav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.hdr__nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
	border-radius: 6px;
	transition: color 160ms ease, background 160ms ease;
}
.hdr__nav a:hover {
	color: var(--color-brand-deep);
	background: var(--color-bg);
}
.hdr__nav a.is-current { color: var(--color-brand-deep); }
/* Underline is always present but collapsed; it grows in on hover and on the
   active link. header.js moves .is-current to the section in view (scrollspy),
   so the underline slides/fills to track scroll position. */
.hdr__nav a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	background: var(--color-brand-deep);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease;
}
.hdr__nav a:hover::after,
.hdr__nav a.is-current::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.hdr__nav a::after { transition: none; }
}

.hdr__right { flex: 0 0 auto; }

/* ── Reskin the fleet [mentorkit_user_menu] right-side ─────────
   Uses the plugin's documented override variables so the shortcode
   matches the handoff without touching plugin code or markup. */
.hdr .mk-user-menu {
	--mk-user-menu-font: var(--font);

	/* Greeting */
	--mk-user-menu-welcome-color: var(--color-ink-mute);
	--mk-user-menu-welcome-opacity: 1;
	--mk-user-menu-welcome-size: 11.5px;
	--mk-user-menu-name-color: var(--color-ink);
	--mk-user-menu-name-size: 13.5px;
	--mk-user-menu-name-weight: 700;

	/* Profile pill (trigger) */
	--mk-user-menu-trigger-bg: var(--color-cta);
	--mk-user-menu-trigger-color: var(--color-ink);
	--mk-user-menu-trigger-hover-bg: var(--color-cta-hover);
	--mk-user-menu-trigger-padding: 0 14px 0 12px;
	--mk-user-menu-trigger-font-weight: 500;

	/* Guest "Create account" pill */
	--mk-user-menu-register-bg: var(--color-cta);
	--mk-user-menu-register-color: var(--color-ink);
	--mk-user-menu-register-hover-bg: var(--color-cta-hover);
	--mk-user-menu-register-padding: 0 18px;

	/* Full-pill radius for both pills */
	--mk-user-menu-radius: 9999px;
}
.hdr .mk-user-menu--logged-in { gap: 14px; }
.hdr .mk-user-menu--guest { gap: 10px; }
.hdr .mk-user-menu__greeting { line-height: 1.15; }

/* Pill height + shadow + lift (not exposed as tokens) */
.hdr .mk-user-menu__trigger {
	height: 40px;
	gap: 8px;
	font-size: 14px;
	box-shadow: 0 3px 12px color-mix(in srgb, var(--color-cta) 22%, transparent);
	transition: background 160ms ease, transform 160ms ease;
}
.hdr .mk-user-menu__trigger:hover { transform: translateY(-1px); }
/* User icon → avatar circle (handoff .av) */
.hdr .mk-user-menu__trigger .mk-user-menu__icon {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-ink) 14%, transparent);
	box-sizing: border-box;
}
.hdr .mk-user-menu__chevron { width: 12px; height: 12px; opacity: .8; }

/* Guest "Logg inn" text link → outline ghost pill */
.hdr .mk-user-menu--guest .mk-user-menu__login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--color-line);
	border-radius: 9999px;
	font-weight: 500;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.hdr .mk-user-menu--guest .mk-user-menu__login:hover {
	background: var(--color-bg);
	border-color: var(--color-ink);
	color: var(--color-ink);
}
/* Guest "Opprett konto" pill — height + lift + lighter weight */
.hdr .mk-user-menu--guest .mk-user-menu__register {
	height: 40px;
	font-weight: 500;
	box-shadow: 0 3px 12px color-mix(in srgb, var(--color-cta) 22%, transparent);
	transition: background 160ms ease, transform 160ms ease;
}
.hdr .mk-user-menu--guest .mk-user-menu__register:hover { transform: translateY(-1px); color: var(--color-ink); }

/* ── Drawer-footer buttons (.hdr__btn rendered in header.php) ── */
.hdr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	height: 40px;
	padding: 0 18px;
	border-radius: 9999px;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background 160ms ease,
		color 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
}
.hdr__btn--ghost {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-line);
}
.hdr__btn--ghost:hover {
	background: var(--color-bg);
	border-color: var(--color-ink);
	color: var(--color-ink); /* pin over Astra's global a:hover color */
}
.hdr__btn--cta {
	background: var(--color-cta);
	color: var(--color-ink);
	border-color: var(--color-cta);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--color-cta) 22%, transparent);
}
.hdr__btn--cta:hover {
	background: var(--color-cta-hover);
	border-color: var(--color-cta-hover);
	color: var(--color-ink); /* pin over Astra's global a:hover color */
	transform: translateY(-1px);
}
.hdr__btn--block { width: 100%; height: 44px; }
.hdr__btn .av {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-ink) 14%, transparent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Mobile drawer ─────────────────────────────────────────── */
.hdr__drawer {
	display: none;
	background: var(--color-paper);
	border-top: 1px solid var(--color-line);
	max-height: 0;
	overflow: hidden;
	transition: max-height 280ms cubic-bezier(.4, 0, .2, 1);
}
.hdr__drawer.is-open { max-height: 600px; }
.hdr__drawer-nav {
	display: flex;
	flex-direction: column;
	padding: 8px 24px 16px;
}
.hdr__drawer-nav a {
	padding: 14px 4px;
	color: var(--color-ink);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid var(--color-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hdr__drawer-nav a:last-child { border-bottom: 0; }
.hdr__drawer-nav a.is-current { color: var(--color-brand-deep); }
.hdr__drawer-nav a.is-current::after {
	content: '●';
	color: var(--color-brand-deep);
	font-size: 8px;
}
.hdr__drawer-foot {
	padding: 16px 24px 24px;
	border-top: 1px solid var(--color-line);
	background: var(--color-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hdr__drawer-greet { display: flex; flex-direction: column; margin-bottom: 6px; }
.hdr__drawer-greet .lbl {
	font-size: 11.5px;
	color: var(--color-ink-mute);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hdr__drawer-greet strong {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-ink);
}
.hdr__signout {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--color-ink-mute);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet ≤980: tighten row, hide greeting (handoff). Also restores the
   full pill in the 721–768 band where the fleet stylesheet would square
   the trigger at its own 768 breakpoint. */
@media (max-width: 980px) {
	.hdr__row { padding: 14px 24px; gap: 18px; }
	.hdr__nav a { padding: 8px 10px; font-size: 14px; }
	.hdr .mk-user-menu__greeting { display: none; }
	.hdr .mk-user-menu__trigger {
		width: auto;
		height: 40px;
		padding: 0 14px 0 12px;
		border-radius: 9999px;
	}
	.hdr .mk-user-menu__trigger .mk-user-menu__label,
	.hdr .mk-user-menu__trigger .mk-user-menu__chevron { display: inline-flex; }
}

/* Mobile ≤720: hamburger + drawer, nav hidden, pill → avatar-only. */
@media (max-width: 720px) {
	.hdr__row {
		padding: 12px 18px;
		gap: 12px;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.hdr__burger { display: inline-flex; }
	.hdr .brand-svg {
		margin-right: 0;
		justify-self: start;
		transform: scale(.82);
		transform-origin: left center;
	}
	/* Drop the descriptor on mobile — mark + wordmark only, to keep the
	   lockup from crowding the burger/avatar in the grid row. */
	.brand-svg__tagline { display: none; }
	.hdr__nav { display: none; }

	/* Logged-in: avatar-only pill */
	.hdr .mk-user-menu__trigger {
		padding: 0;
		width: 38px;
		height: 38px;
		justify-content: center;
		border-radius: 9999px;
	}
	.hdr .mk-user-menu__trigger .mk-user-menu__label,
	.hdr .mk-user-menu__trigger .mk-user-menu__chevron { display: none; }
	.hdr .mk-user-menu__trigger .mk-user-menu__icon { width: 20px; height: 20px; }

	/* Guest: auth lives in the drawer footer on mobile (the fleet login link
	   has no icon, so an icon-only bar button isn't possible — the hamburger
	   is the entry point instead). */
	.hdr .mk-user-menu--guest { display: none; }

	.hdr__drawer { display: block; }

	.hdr.is-scrolled .hdr__row { padding: 8px 18px; }
	.hdr.is-scrolled .brand-svg { transform: scale(.7); }
}