/* ==========================================================================
   HDL Commerce V3 — chrome
   Announcement bar, boxed mega header, mega panel, section subnav, footer.

   Source: base-2026.css 24-76 (header + mega), 320-347 (footer),
           391-396 (subnav), 433 (mobile tap targets).
   The `.site-header` / `.nav` / `.dropdown` / `.site-footer` chrome in
   styles.css is superseded by this and is not ported — see css-port-notes.md.

   --gutter (clamp(20px, 5vw, 56px)) is the header inset. It is NOT the content
   inset; `.wrap` uses --content-inset (40px). Do not unify them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.mh {
	position: fixed;
	inset: 0 0 auto;
	z-index: 200;
	color: var( --on-dark );
}

/* announcement bar */
/* Deep green ground, light text — the one place emerald is deliberately NOT
   used as a surface. With an emerald "Boka demo" in the same bar, two bright
   green surfaces competed for the eye. Also the only way this bar keeps
   readable text: white on #00d08f is 1.7:1. */
.mh-ann {
	background: #04231b;
	color: var( --wp--preset--color--contrast );
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 0 16px 0 var( --wp--custom--gutter );
	min-height: var( --wp--custom--announcement-height );
}

.mh-ann a {
	grid-column: 1;
	justify-self: center;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 400;
	padding: 11px 0;
	text-align: center;
}

.mh-ann a:hover {
	color: var( --wp--preset--color--contrast );
	text-decoration: underline;
}

.mh-ann button {
	appearance: none;
	background: none;
	border: 0;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	opacity: 0.75;
}

.mh-ann button:hover {
	opacity: 1;
}

.mh[ data-ann="off" ] .mh-ann {
	display: none;
}

.mh-shell {
	position: relative;
	max-width: var( --wp--custom--header-shell-width );
	margin-inline: auto;
	padding-inline: var( --wp--custom--gutter );
}

.mh-bar {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--custom--hairline );
	height: var( --wp--custom--header-bar-height );
	display: flex;
	align-items: stretch;
	gap: clamp( 14px, 2.4vw, 40px );
}

/* The brand and the action cluster are equal-width flex tracks (flex-basis 0,
   grow 1) so the nav between them lands on the BAR's centre line rather than
   the centre of whatever space happens to be left over. With `flex: none` on
   both sides — the earlier shape — `.mh-nav { margin-inline: auto }` centres
   the nav between brand and actions instead, which sits off true centre by
   half the difference in their widths. The CTA block is the wider of the two,
   so the nav read visibly left of centre. Equal tracks make that difference
   zero at every width, and it degrades correctly below 1080px where .mh-nav
   is hidden: brand and actions simply split the bar and stay pinned to their
   own edges. */
.mh-brand {
	display: flex;
	align-items: center;
	color: var( --wp--preset--color--contrast );
	flex: 1 1 0;
	min-width: 0;
}

/* The logo's left inset is a margin on the mark itself, not padding on the
   bar or on the brand track. Padding on the bar made the flex content box
   asymmetric (inset left, flush right where the CTA meets the border), and
   padding on the brand track widened that track past its equal-width partner
   — a `flex-basis: 0` item still carries its padding on top of the space it
   is granted. Either way the centred nav drifted by half the inset. As a
   margin on the mark it shifts only the mark, leaving both tracks exactly
   equal so the nav centres on the bar. */
.mh-brand svg,
.mh-brand img {
	height: var( --wp--custom--header-logo-height );
	width: auto;
	display: block;
	margin-left: clamp( 18px, 2.4vw, 34px );
}

.mh-nav {
	display: flex;
	align-items: center;
	gap: clamp( 4px, 1.4vw, 22px );
	flex: none;
}

.mh-tab {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 400;
	color: #eef2ef;
	padding: 0 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	white-space: nowrap;
}

.mh-tab .pm {
	width: 26px;
	height: 26px;
	flex: none;
	display: grid;
	place-items: center;
	background: var( --wp--custom--hairline );
	color: #eef2ef;
	font-size: 15px;
	line-height: 1;
	transition: background 0.2s, color 0.2s;
}

.mh-tab:hover .pm {
	background: rgba( 255, 255, 255, 0.14 );
}

.mh-tab[ aria-expanded="true" ] .pm {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
}

.mh-tab[ aria-expanded="true" ] {
	color: var( --wp--preset--color--contrast );
}

/* Equal-width partner to .mh-brand — see the note there. justify-content
   keeps the CTA pinned to the bar's right edge now that the track is wider
   than its contents (margin-left:auto no longer does that job, since the
   track itself already grows). */
.mh-act {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 0;
	flex: 1 1 0;
	min-width: 0;
}

.mh-act .lang {
	font-family: var( --font-mono );
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: rgba( 238, 242, 239, 0.45 );
	display: grid;
	place-items: center;
	padding-inline: 16px;
}

/*
 * Live switcher, in the slot the static SV label used to occupy. It inherits
 * the type treatment above; only the list needs resetting. The current
 * language keeps the muted colour the design used, and the other one lifts to
 * full contrast on hover so it reads as the actionable item.
 */
.mh-act .lang-switch .hdl-language-switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-act .lang-switch a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.mh-act .lang-switch li.current a {
	color: var( --wp--preset--color--contrast );
}

.mh-act .lang-switch a:hover,
.mh-act .lang-switch a:focus-visible {
	color: var( --wp--preset--color--contrast );
}

.mh-cta {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
	text-decoration: none;
	font-size: 0.98rem;
	font-weight: 500;
	display: grid;
	place-items: center;
	padding-inline: clamp( 20px, 2.4vw, 34px );
	transition: background 0.2s;
}

.mh-cta:hover {
	background: var( --wp--preset--color--accent-hover );
	color: var( --wp--preset--color--contrast );
}

.mh-burger {
	display: none;
	appearance: none;
	background: rgba( 255, 255, 255, 0.06 );
	border-left: 1px solid rgba( 255, 255, 255, 0.08 );
	color: var( --wp--preset--color--contrast );
	width: 56px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mega panel — a bordered cell grid attached to the header box.
   The 1px gap over a hairline parent background is what draws the cell seams.
   -------------------------------------------------------------------------- */
.mega {
	position: absolute;
	top: 100%;
	left: var( --wp--custom--gutter );
	right: var( --wp--custom--gutter );
	max-height: calc( 100svh - 132px );
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var( --wp--custom--hairline );
	border: 1px solid var( --wp--custom--hairline );
	border-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity 0.2s, transform 0.26s, visibility 0.2s;
}

.mega[ data-open="true" ] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mega-in {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1px;
}

.mega-col {
	background: var( --wp--preset--color--surface );
	display: flex;
	flex-direction: column;
	min-height: 280px;
}

.mega-col > h4 {
	font-family: var( --font-mono );
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --on-dark-mut );
	font-weight: 400;
	background: rgba( 255, 255, 255, 0.045 );
	padding: 11px clamp( 14px, 1.6vw, 22px );
	margin: 0;
}

.mega-col > h4::after {
	content: "/";
	color: rgba( 255, 255, 255, 0.28 );
	margin-left: 2px;
}

.mega-col a {
	display: block;
	padding: 14px clamp( 14px, 1.6vw, 22px );
	color: #eef2ef;
	text-decoration: none;
	transition: background 0.18s;
}

.mega-col a:first-of-type {
	padding-top: 20px;
}

.mega-col a:hover {
	background: var( --wp--custom--wash--soft );
}

.mega-col a b {
	display: block;
	font-weight: 400;
	font-size: 1rem;
}

.mega-col a span {
	display: block;
	font-size: 0.82rem;
	color: var( --on-dark-mut );
	margin-top: 3px;
	line-height: 1.45;
}

.mega-col a:hover b {
	color: var( --wp--preset--color--accent-bright );
}

.mega-note {
	background: var( --wp--preset--color--surface );
	padding: clamp( 16px, 1.8vw, 24px );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 280px;
}

.mega-note p {
	font-size: 0.88rem;
	color: var( --on-dark-mut );
	margin: 12px 0 auto;
	line-height: 1.5;
}

.mega-note .btn {
	margin-top: 18px;
}

/* ADDITION — replaces an inline style on the second promo button */
.mega-note .btn + .btn {
	margin-top: 8px;
}

.mh-sheet {
	display: contents;
}

.mega-t,
.mega-priser {
	display: none;
}

/* --------------------------------------------------------------------------
   No-JS fallback — accessibility requirement, not a nicety.
   The mega panels are server-rendered but start hidden, so without JS the
   nav is present and not operable. `<html class="no-js">` is set server-side
   and swapped to `js` by an inline script in wp_head.
   -------------------------------------------------------------------------- */
html.no-js .mega {
	position: static;
	max-height: none;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	border: 0;
}

html.no-js .mh-sheet {
	display: block;
}

@media ( min-width: 1081px ) and ( max-width: 1240px ) {
	.mh-tab {
		font-size: 0.9rem;
		gap: 7px;
	}

	.mh-tab .pm {
		width: 22px;
		height: 22px;
		font-size: 13px;
	}
}

@media ( max-width: 1080px ) {
	.mh-nav,
	.mh-act .lang {
		display: none;
	}

	.mh-burger {
		display: flex;
	}

	.mh-bar {
		height: var( --wp--custom--header-bar-height-compact );
	}

	.mh-sheet {
		display: none;
		position: absolute;
		left: var( --wp--custom--gutter );
		right: var( --wp--custom--gutter );
		top: 100%;
		max-height: calc( 100svh - 120px );
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var( --wp--preset--color--surface );
		border: 1px solid var( --wp--custom--hairline );
		border-top: 0;
	}

	.mh-sheet[ data-open="true" ],
	html.no-js .mh-sheet {
		display: block;
	}

	.mega {
		position: static;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border: 0;
	}

	.mega-in {
		grid-template-columns: 1fr;
		gap: 1px;
	}

	.mega-col,
	.mega-note {
		min-height: 0;
	}

	.mega-t {
		display: block;
		font-family: var( --font-mono );
		font-size: 0.7rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var( --wp--preset--color--contrast );
		padding: 18px clamp( 14px, 4vw, 22px ) 10px;
		background: var( --wp--preset--color--surface );
	}

	.mega-priser {
		display: block;
		padding: 20px clamp( 14px, 4vw, 22px );
		border-top: 1px solid var( --wp--custom--hairline );
		color: var( --wp--preset--color--contrast );
		text-decoration: none;
		font-size: 1rem;
		background: var( --wp--preset--color--surface );
	}

	.mh-ann button {
		width: 40px;
		height: 40px;
	}
}

/* --------------------------------------------------------------------------
   Section subnav — base-2026.css 391-396
   -------------------------------------------------------------------------- */
.mh-sub {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--custom--hairline );
	border-top: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 12px, 2.2vw, 30px );
	justify-content: center;
	padding: 13px var( --wp--custom--gutter );
}

.mh-sub a {
	font-size: 0.94rem;
	font-weight: 400;
	color: #b6bcc4;
	text-decoration: none;
	padding: 2px;
}

.mh-sub a:hover {
	color: var( --wp--preset--color--contrast );
}

.mh-sub a[ aria-current="page" ] {
	color: var( --wp--preset--color--accent );
}

@media ( max-width: 1080px ) {
	.mh-sub {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block: 11px;
	}

	.mh-sub::-webkit-scrollbar {
		display: none;
	}

	.mh-sub a {
		white-space: nowrap;
		font-size: 0.88rem;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		padding-inline: 2px;
	}
}

/* --------------------------------------------------------------------------
   Footer — base-2026.css 320-347
   -------------------------------------------------------------------------- */
.ft {
	position: relative;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	overflow: clip;
	padding-top: clamp( 56px, 7vw, 104px );
}

/*
 * Footer wordmark, above the link columns. Sized off the same token as the
 * header mark so the two never drift apart; no margin-left here because the
 * header's inset exists to centre the nav track, which the footer has no
 * equivalent of.
 */
.ft-brand {
	margin-bottom: clamp( 28px, 3.4vw, 48px );
}

.ft-brand svg,
.ft-brand img {
	height: var( --wp--custom--header-logo-height );
	width: auto;
	display: block;
}

.ft-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 24px, 3vw, 44px );
}

@media ( max-width: 900px ) {
	.ft-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 560px ) {
	.ft-grid {
		grid-template-columns: 1fr;
	}
}

.ft-col h4 {
	font-family: var( --font-mono );
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7a828c;
	font-weight: 400;
	margin: 0 0 14px;
}

.ft-col h4::after {
	content: "/";
	color: #3d444d;
	margin-left: 1px;
}

.ft-col h4 + h4,
.ft-col h4:not( :first-child ) {
	margin-top: 34px;
}

.ft-col a {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 9px;
	align-items: baseline;
	font-family: var( --font-mono );
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	color: #b6bcc4;
	text-decoration: none;
	padding: 5px 0;
}

.ft-col a::before {
	content: "\2514\2500";
	color: #3d444d;
}

.ft-col a:hover {
	color: var( --wp--preset--color--contrast );
}

.ft-col a:hover::before {
	color: var( --wp--preset--color--accent );
}

.ft-social {
	display: flex;
	gap: 8px;
	margin-top: clamp( 46px, 6vw, 86px );
}

.ft-social a {
	width: 36px;
	height: 36px;
	background: #16181c;
	color: #cfd4da;
	display: grid;
	place-items: center;
	font-family: var( --font-mono );
	font-size: 0.74rem;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.ft-social a:hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
}

.ft-copy {
	font-family: var( --font-mono );
	font-size: 0.76rem;
	color: #7a828c;
	margin: 26px 0 0;
}

/* the blue bloom under the footer */
.ft-glow {
	position: relative;
	height: clamp( 260px, 32vw, 440px );
	margin-top: clamp( 30px, 4vw, 54px );
}

.ft-bloom,
.ft-bloom2 {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -14%;
	height: 150%;
	will-change: transform, opacity;
}

.ft-bloom {
	background: radial-gradient(
		64% 82% at 48% 116%,
		#eaf4ff 0%,
		#b6f0f3 12%,
		var( --wp--preset--color--accent-hover ) 30%,
		var( --wp--preset--color--accent ) 46%,
		rgba( 0, 194, 203, 0.45 ) 62%,
		rgba( 10, 107, 112, 0.18 ) 76%,
		transparent 88%
	);
}

.ft-bloom2 {
	background: radial-gradient(
		46% 60% at 68% 126%,
		rgba( 111, 228, 234, 0.7 ) 0%,
		rgba( 0, 194, 203, 0.45 ) 34%,
		transparent 72%
	);
	mix-blend-mode: screen;
}

.ft-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient( circle, rgba( 255, 255, 255, 0.42 ) 0.9px, transparent 1px );
	background-size: clamp( 118px, 10vw, 196px ) 15px;
	mask-image: linear-gradient( 180deg, transparent, #000 30%, #000 78%, rgba( 0, 0, 0, 0.3 ) );
	-webkit-mask-image: linear-gradient( 180deg, transparent, #000 30%, #000 78%, rgba( 0, 0, 0, 0.3 ) );
}

.ft-lava {
	position: absolute;
	inset: 0;
	filter: contrast( 1.32 ) saturate( 1.06 );
	mask-image: linear-gradient( 180deg, transparent 0, #000 42% );
	-webkit-mask-image: linear-gradient( 180deg, transparent 0, #000 42% );
}

.ft-glow .grain {
	opacity: 0.1;
}

@media ( prefers-reduced-motion: no-preference ) {
	.ft-bloom {
		animation: bloomA 16s ease-in-out infinite alternate;
	}

	.ft-bloom2 {
		animation: bloomB 11s ease-in-out infinite alternate;
	}
}

@keyframes bloomA {
	0% {
		transform: translate( -3%, 4% ) scale( 1 );
		opacity: 0.9;
	}

	50% {
		transform: translate( 2%, -2% ) scale( 1.12 );
		opacity: 1;
	}

	100% {
		transform: translate( 4%, 3% ) scale( 1.04 );
		opacity: 0.86;
	}
}

@keyframes bloomB {
	0% {
		transform: translate( 6%, 6% ) scale( 0.94 );
		opacity: 0.55;
	}

	100% {
		transform: translate( -8%, -3% ) scale( 1.18 );
		opacity: 0.9;
	}
}

/*
 * OWNER CHANGE 2026-08-14 — the footer flare belongs behind the footer.
 *
 * .ft-glow is the last child of <footer class="ft"> (patterns/footer.php:190)
 * and was a normal-flow block clamp(260px,32vw,440px) tall, so the bloom sat
 * in a band BELOW the copyright rather than behind anything — the page ended
 * with 260-440px of glow and the copyright floating above it, not at the
 * bottom.
 *
 * Taking it out of flow and anchoring it to the footer's own bottom edge puts
 * the light behind the menu columns, where it was meant to be, and makes the
 * copyright the last thing on the page. `isolation: isolate` keeps the
 * negative z-index inside the footer instead of sliding under the page.
 */
.ft {
	position: relative;
	isolation: isolate;
}

.ft-glow {
	position: absolute;
	inset: 0;
	height: auto;
	margin-top: 0;
	z-index: -1;
	pointer-events: none;
}

/*
 * OWNER PASS 2026-08-14 — footer headings, and the band where the bloom
 * meets the ground.
 *
 * The column headings were 0.72rem in #7a828c, which read as a caption
 * rather than a heading over a 20-item list. White, a step larger, and the
 * trailing "/" keeps its dimmer tone so it stays a mark, not a letter.
 *
 * The banding: .ft is pure #000 and the bloom's outermost stops are a very
 * dark blue, so the gradient's tail arrived at a flat black ground and the
 * step between them read as a hard line across the footer. Rather than
 * lighten the whole footer — which would just move the seam to the footer's
 * top edge, where it meets a black page — the ground itself ramps: black at
 * the top, the lava's own dark blue by the bottom, so the bloom emerges out
 * of a tone it already matches. surface-raised is the existing token for
 * that colour; nothing new is invented.
 */
.ft-col h4 {
	font-size: 0.86rem;
	color: var( --wp--preset--color--contrast );
}

/*
 * Second pass on the banding. The gradient below was not enough because the
 * step was not the ground — it was .ft-glow's own top edge. The box had a
 * fixed clamp(260px,32vw,440px) height, so its children's gradients started
 * abruptly partway up the footer and that boundary read as a line across the
 * full width. Spanning the whole footer (inset: 0 above) leaves no edge to
 * see: the bloom's own radial falloff does the fading, which is what it was
 * drawn to do. The ground still ramps to the lava's tone so the two meet on
 * the same colour rather than against flat black.
 *
 * The footer also owed the copyright some room. It never had a bottom padding
 * — .ft-glow used to sit under it as a normal-flow block and provided the
 * space by accident. Taking it out of flow took that with it.
 */
.ft {
	background: linear-gradient(
		180deg,
		var( --wp--preset--color--base ) 0%,
		var( --wp--preset--color--base ) 38%,
		var( --wp--custom--surface-raised ) 100%
	);
	padding-bottom: clamp( 40px, 5vw, 72px );
}