/*
 * Hot n' Cold Nordhavn — header + mega menu.
 * No JS. CSS-only via :hover and :focus-within. Touch works because tap = focus.
 */

/* ============================================================
   Page frame — single source of truth for horizontal alignment
   Header logo, hero content, and every section's content
   all sit inside this frame and align at the same X.
   ============================================================ */
:root {
	--hncn-header-h: 70px;
	/* Header frame matches section's effective frame:
	   contentSize (1336) + 2 × frame-pad (4rem = 64) = 1464.
	   This lines the logo up with section content's left edge. */
	--hncn-frame-max: 1464px;
	--hncn-frame-pad: 4rem;

	/* Motion scale — three tokens cover everything from micro-feedback
	   (hover color flip) to spatial transitions (carousel snap, slide
	   reveal). Existing values (0.15s, 0.2s, 0.25s) remain valid; new
	   components should prefer these tokens for consistency.
	   Cubic-bezier is iOS-style "ease-out-quad" — fast start, gentle land. */
	--hncn-ease-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
	--hncn-ease-base: 240ms cubic-bezier(0.2, 0, 0, 1);
	--hncn-ease-slow: 450ms cubic-bezier(0.2, 0, 0, 1);

	/* Focus ring — only visible on keyboard navigation (:focus-visible).
	   Baltic chosen so it contrasts both creme (light bg) and ink (dark bg). */
	--hncn-focus-color: var(--wp--preset--color--baltic);
	--hncn-focus-width: 2px;
	--hncn-focus-offset: 3px;

	/* Photo grade — DISABLED.
	   Per-pixel analysis of the Sauna85 reference vs our images showed
	   that the target look uses split-toning (desaturated highlights,
	   rich shadows) which CSS filters cannot replicate. Each photo also
	   needs per-image correction — some have crushed blacks, others have
	   lifted blacks; applying one filter to all of them makes the
	   well-graded ones worse.
	   Set this back to a filter chain if you want a global grade later,
	   e.g.: contrast(1.05) saturate(1.02) hue-rotate(-3deg) */
	--hncn-photo-grade: none;
}

/* Apply the cinematic grade to all photographic imagery.
   Logos, SVG icons and decorative elements are NOT in this list. */
main .wp-block-cover__image-background,
main .wp-block-image img,
main .hncn-carousel__image,
main .hncn-gallery__slide img,
main .hncn-huset__image,
main .hncn-kursus__media img,
main .hncn-imgcard__bg,
main figure.hncn-kursus__media img {
	filter: var(--hncn-photo-grade);
}

/* Reduced-motion users shouldn't need this either, but film-grade is purely
   aesthetic and not motion-related — leave it on by default. */

.wp-site-blocks { padding-block-start: 0 !important; }
.wp-site-blocks > .wp-block-template-part:has(.hncn-header) + main,
.wp-site-blocks > header.wp-block-template-part + main {
	margin-top: 0 !important;
}
.wp-site-blocks > header.wp-block-template-part {
	margin-block-end: 0 !important;
}

/* On pages WITHOUT a hero, push main below the fixed header. */
body:not(.hncn-has-hero) main {
	padding-top: var(--hncn-header-h);
}

/* ---------- Left-align all top-level section content with the logo ----------
   WP's constrained layout auto-centers children at contentSize. That pushes
   content 20px right of the logo when viewport is between contentSize and
   contentSize+padding*2. Force children to left-align instead.
*/
main > .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)),
main > .wp-block-cover.alignfull > .wp-block-cover__inner-container.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}


/* ---------- Skip link (keyboard / screen-reader accessibility) ----------
   Hidden off-screen until focused, then slides in above the fixed header. */
.hncn-skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translateY(-120%);
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.hncn-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--wp--preset--color--brick);
	outline-offset: 2px;
}


/* ---------- Header shell ---------- */
.hncn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--wp--preset--color--creme);
	border-bottom: 1px solid rgba(36, 29, 22, 0.08);
	font-family: var(--wp--preset--font-family--inter);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* WP admin bar (only logged-in users see this) */
.admin-bar .hncn-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .hncn-header { top: 46px; }
	/* On mobile the WP admin bar is position:absolute (it scrolls away with the
	   page), unlike the position:fixed desktop bar. Once scrolled, the bar is
	   gone but the fixed header stayed pinned at top:46px — leaving a 46px strip
	   of page background above it. Snap the header to the very top as soon as
	   the page is scrolled. Admin-only artifact: logged-out visitors have no
	   admin bar, so they never see the gap or this rule's effect. */
	.admin-bar .hncn-header.is-scrolled { top: 0; }
}

/* ============================================================
   Mobile full-bleed sections  (THE fix)
   ============================================================
   ROOT CAUSE of the recurring "creme frame" on mobile:
   theme.json sets `useRootPaddingAwareAlignments: true` with a root
   padding of var(--wp--preset--spacing--30) = 1.5rem. WordPress adds
   that 1.5rem padding to the page wrapper and expects every
   `.alignfull` section to "break out" with a −1.5rem margin so its
   coloured background reaches the viewport edge.

   On desktop that breakout works. On mobile, because the sections are
   nested (post-content > pattern > section) the WP breakout chain does
   NOT propagate the negative margin all the way down — so each coloured
   section sits 1.5rem inside the page, exposing a 1.5rem strip of the
   page's creme background down both sides. THAT is the frame. It was
   never an inner-padding problem, which is why adjusting padding never
   fixed it.

   FIX: force every full-width section to the true viewport width using
   the parent-agnostic full-bleed technique. `calc(50% - 50vw)` pins the
   element's left edge to the viewport's left edge regardless of how
   much padding any ancestor adds, at any nesting depth. Combined with
   `width: 100vw` the section spans exactly the viewport. No persistent
   scrollbar exists at mobile widths, so 100vw == visible width (no
   horizontal scroll).

   Because the section now genuinely reaches both edges, its own inline
   padding becomes COLOURED interior padding (never the page background),
   so we keep a small gutter for text instead of zeroing it. */
@media (max-width: 800px) {
	/* Safety net: clip any horizontal overflow a full-bleed section
	   could introduce (e.g. if an editor nests one full-width group
	   inside another). overflow-x:clip doesn't create a scroll
	   container, so it won't break the fixed header or sticky elements.
	   main is a sibling of the header, so clipping it is safe. */
	main {
		overflow-x: clip;
	}
	.alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	/* Shrink the hard-coded desktop 4rem gutter to a comfortable mobile
	   inset. This padding now sits INSIDE the full-bleed coloured
	   section, so it shows the section's colour — no creme strip. */
	[style*="padding-left:4rem"] { padding-left: 1.25rem !important; }
	[style*="padding-right:4rem"] { padding-right: 1.25rem !important; }

	/* Hero inner containers & the staircase text column don't carry the
	   inline 4rem but still need their text held off the bezel. */
	.hncn-video-hero__content,
	.hncn-hero-full > .wp-block-cover__inner-container,
	.hncn-modtag__text {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

/* ---------- Full-height hero (homepage) ----------
   The core cover block ships min-height:100vh inline. On mobile, 100vh equals the
   *largest* viewport (URL bar hidden), so the hero overshoots the visible area and
   the next section never peeks. dvh tracks the actual visible height. Scoped to the
   homepage hero via .hncn-hero-full so the 50–60vh sub-page heroes are untouched;
   the inline 100vh stays in the markup (keeps the block valid in the editor) and
   this !important wins on top. Desktop is unaffected — there 100dvh == 100vh. */
.hncn-hero-full { min-height: 100dvh !important; }

/* ---------- Square corners everywhere ----------
   No border-radius on any HnC block, image, button or wrapper. Single
   source of truth — overrides any per-pattern inline radii.

   Intentionally EXCLUDED: iframe + details.
   3rd-party embeds (YOGO booking calendar) ship as <iframe> and may have
   their own corner styling we don't want to flatten. The FAQ accordion
   uses <details> and is styled via .hncn-faq__row directly. */
.wp-block-cover,
.wp-block-image,
.wp-block-image img,
.wp-block-button__link,
.wp-block-group,
.wp-block-column,
.hncn-header *,
.hncn-mega__image,
.hncn-book-btn,
img {
	border-radius: 0 !important;
}

/* ----- Transparent state: only on pages with a dark hero behind the header. ----- */
body.hncn-has-hero .hncn-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--wp--preset--color--creme);
}
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand,
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand__name,
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__link,
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__trigger {
	color: var(--wp--preset--color--creme);
}
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand__name em {
	color: var(--wp--preset--color--creme);
}
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-mobile-burger span {
	background: var(--wp--preset--color--creme);
}
/* Hover state over hero — soft brick-orange, more visible than ink */
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__link:hover,
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__trigger:hover {
	color: #AE4A2D;
}

.hncn-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	max-width: var(--hncn-frame-max);
	margin: 0 auto;
	padding-block: 0.9rem;
	padding-inline: var(--hncn-frame-pad);
}

/* ---------- Brand ---------- */
.hncn-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1.05;
	padding: 0.4rem 0; /* extends hit area to ~44pt without changing visual layout */
}
.hncn-brand:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}
.hncn-brand__mark {
	display: block;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}
.hncn-brand__mark svg { display: block; width: 100%; height: 100%; }
.hncn-brand__name {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 900;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
}
.hncn-brand__name em {
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink);
}

/* ---------- Nav list ---------- */
.hncn-nav { justify-self: center; }
.hncn-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
	align-items: center;
}
.hncn-nav__item { position: static; }
/* Min profil only appears inside the off-canvas mobile panel (the desktop
   header already shows it in .hncn-header__cta). Shown again in the ≤880 block. */
.hncn-nav__item--mobile-only { display: none; }
.hncn-nav__link,
.hncn-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* WCAG 2.5.5 / iOS HIG: 44pt min touch target.
	   0.75rem (12px) vertical padding × 2 + 20px line-height = 44px. */
	padding: 0.75rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color var(--hncn-ease-fast);
}
.hncn-nav__link:hover,
.hncn-nav__trigger:hover { color: var(--wp--preset--color--brick); }
.hncn-nav__link:focus-visible,
.hncn-nav__trigger:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}
.hncn-nav__chev { transition: transform 0.2s ease; }
.hncn-nav__item--mega:hover .hncn-nav__chev,
.hncn-nav__item--mega:focus-within .hncn-nav__chev { transform: rotate(180deg); }

/* ---------- Mega menu panel ----------
   Positioned relative to .hncn-header (sticky, which creates a containing block).
   left:0; right:0 makes it span the full header width, not the LI.
*/
.hncn-nav__item--mega { position: static; }

.hncn-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--wp--preset--color--white);
	border-top: 1px solid rgba(36, 29, 22, 0.08);
	box-shadow: 0 24px 40px -16px rgba(36, 29, 22, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	/* On HIDE: wait 200ms before starting fade-out so user has time to move cursor into mega */
	transition: opacity 0.2s ease 0.2s, transform 0.2s ease 0.2s, visibility 0s linear 0.4s;
	z-index: 200;
}
/* Invisible bridge between trigger and dropdown so :hover doesn't break mid-movement */
.hncn-mega::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
.hncn-nav__item--mega:hover .hncn-mega,
.hncn-nav__item--mega:focus-within .hncn-mega,
.hncn-nav__trigger[aria-expanded="true"] + .hncn-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	/* On SHOW: no delay */
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Chevron rotates when expanded — parallels the hover rotation rule above
   so click-open and hover-open look the same. */
.hncn-nav__trigger[aria-expanded="true"] .hncn-nav__chev {
	transform: rotate(180deg);
}

.hncn-mega__inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	padding: 1.5rem 2rem 2rem;
	max-width: 1400px;
	margin: 0 auto;
}

/* ---------- Mega menu tiles ---------- */
.hncn-mega__tile {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform var(--hncn-ease-base);
}
.hncn-mega__tile:hover { transform: translateY(-2px); }
.hncn-mega__tile:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}

.hncn-mega__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background-color: var(--wp--preset--color--ink);
	background-size: cover;
	background-position: center;
	filter: brightness(0.85) saturate(0.9);
	transition: filter 0.25s ease;
}
.hncn-mega__tile:hover .hncn-mega__image {
	filter: brightness(1) saturate(1);
}

.hncn-mega__caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 0.25rem 0;
	font-family: var(--wp--preset--font-family--inter);
	border-bottom: 1px solid rgba(36, 29, 22, 0.15);
	padding-bottom: 0.9rem;
}
.hncn-mega__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}
.hncn-mega__plus {
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink-soft);
	transition: color 0.15s ease, transform 0.2s ease;
}
.hncn-mega__tile:hover .hncn-mega__plus {
	color: var(--wp--preset--color--brick);
	transform: rotate(90deg);
}

/* ---------- Right-side CTA wrapper (Min profil + Book) ---------- */
.hncn-header__cta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ---------- Book CTA (primary, filled) ---------- */
.hncn-book-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.4rem;
	background: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	text-decoration: none;
	transition: background var(--hncn-ease-fast);
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.hncn-book-btn:focus-visible,
.hncn-profile-btn:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}

/* ---------- Min profil CTA (secondary, ghost/outline) ----------
   Matches Book's height + typography so they sit cleanly side-by-side.
   Transparent bg + 1px ink border in default state; inverts on hover.
   The transparent-header state (dark hero pages) flips colors to white. */
.hncn-profile-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.4rem;
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.hncn-profile-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
/* Transparent header state (dark hero pages, not scrolled): invert colors */
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-profile-btn {
	color: #FBF7EE;
	border-color: rgba(251, 247, 238, 0.5);
}
body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-profile-btn:hover {
	background: #FBF7EE;
	color: var(--wp--preset--color--ink);
	border-color: #FBF7EE;
}

/* ---------- Hero CTA buttons (inside the hero cover) ---------- */
main .wp-block-cover .wp-block-button__link {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 13px !important;
	letter-spacing: 0.02em;
	padding: 0.95rem 1.5rem;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Filled (brick) book button → hover baltic. Outline button keeps its own style. */
main .wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--baltic) !important;
	color: var(--wp--preset--color--creme) !important;
}

/* ---------- All section CTAs (arrow links + outlined buttons) ----------
   Single typography baseline shared with the hero buttons.
*/
main a.hncn-cta {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: opacity var(--hncn-ease-fast);
}
main a.hncn-cta:hover { opacity: 0.7; }
main a.hncn-cta:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	opacity: 0.7;
}

main a.hncn-cta-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	padding: 0.95rem 1.5rem;
	transition: background-color var(--hncn-ease-fast), color var(--hncn-ease-fast);
}
main a.hncn-cta-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--creme);
}
main a.hncn-cta-btn:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}

/* ============================================================
   Eyebrow — small all-caps label above (or as) a section heading.
   Single source of truth replaces 20+ inline-styled paragraphs.

   :is(h1,h2,h3,h4,p) lifts specificity so the eyebrow style wins over
   theme.json's per-element h2/h3 typography rules (Instrument Serif,
   xx-large). When applied to an h2 it gives semantic correctness
   (real landmark for screen readers) without visual change.
   ============================================================ */
:is(h1, h2, h3, h4, h5, h6, p).hncn-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hncn-eyebrow-color, var(--wp--preset--color--brick));
	margin: 0 0 var(--wp--preset--spacing--20) 0;
}
:is(h1, h2, h3, h4, h5, h6, p).hncn-eyebrow--sm { font-size: 11px; }
.hncn-eyebrow--sand { --hncn-eyebrow-color: var(--wp--preset--color--sand); }
.hncn-eyebrow--creme { --hncn-eyebrow-color: var(--wp--preset--color--creme); }
.hncn-eyebrow--ink-soft { --hncn-eyebrow-color: var(--wp--preset--color--ink-soft); }
.hncn-eyebrow--baltic { --hncn-eyebrow-color: var(--wp--preset--color--baltic); }
/* Lifted brick — for use on ink/dark backgrounds where the regular
   brick (#AE4A2D) reads too muddy. Same hue, warmer/lighter shade. */
.hncn-eyebrow--brick-light { --hncn-eyebrow-color: #C9603F; }

/* ---------- Kill blockGap between top-level sections ----------
   Sections are full-bleed colour bands that must butt directly together; each
   carries its own internal vertical padding. WordPress otherwise adds
   margin-block-start: var(--wp--preset--spacing--30) (1.5rem) to every section
   after the first — via :where(.wp-block-post-content.is-layout-flow) > * — which
   shows as a thin creme (page-background) strip wherever the band below isn't
   creme (e.g. the white bridge section under the /privat-arrangement hero, or any
   non-creme band boundary further down).

   The FSE template (page-no-title.html) renders sections inside
   .entry-content / .wp-block-post-content, NOT as direct children of <main>, so
   the wrapper-scoped selectors below are what actually do the work — mirroring the
   content-frame rule further down. The bare `main >` lines stay as a defensive
   fallback for any future template that renders sections directly under <main>.
*/
main > .wp-block-group,
main > .wp-block-columns,
main > .wp-block-cover,
main > .wp-block-post-content > *,
main > .entry-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ---------- Unified content frame ----------
   Header is 1400px max with 32px padding → logo sits at
       (100vw - 1400)/2 + 32 from the left.
   Each section is align-full (100vw) with 40px padding and a constrained
   inner content size. For section content to align with the logo:
       (100vw - contentSize) / 2  =  (100vw - 1400) / 2 + 32
   => contentSize = 1336px.

   The override below sets contentSize on every alignfull section without
   touching the patterns themselves. Single source of truth.
*/
main > .alignfull,
main > .wp-block-cover.alignfull > .wp-block-cover__inner-container,
main > .wp-block-post-content > .alignfull,
main > .wp-block-post-content > .alignfull > .wp-block-cover__inner-container,
main > .entry-content > .alignfull,
main > .entry-content > .alignfull > .wp-block-cover__inner-container {
	--wp--style--global--content-size: 1336px;
}

/* ---------- Page hero image cropping ----------
   Default to center-centered cropping (the WordPress default). Specific heroes
   that need a different focal point should set object-position inline on the
   cover block — the global rule here was biasing crops upward and cutting off
   the lower portion of the frame where subjects often sit.
*/

/* Opt-in: portrait source images that look pixelated when stretched into a
   landscape hero. `object-fit: contain` shows the image at native resolution
   (no upscaling), and the cover's overlay color fills the letterbox area. */
.wp-block-cover.alignfull.hncn-hero-fit > .wp-block-cover__image-background {
	object-fit: contain !important;
	object-position: right center;
}

/* ============================================================
   Hero "two ways to use the sauna" — compact 2-pane key-fact
   block that lives inside the /medlemskab hero (was a separate
   .hncn-compare section below the hero before — now condensed
   into the hero so the distinction reads before scroll).
   ============================================================ */
.hncn-hero-twoways {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(251, 247, 238, 0.2);
	max-width: 640px;
}
.hncn-hero-twoways__pane {
	min-width: 0;
}
.hncn-hero-twoways__eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.45rem 0;
}
.hncn-hero-twoways__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	color: #FBF7EE;
	margin: 0 0 0.45rem 0;
}
.hncn-hero-twoways__body {
	font-size: 13px;
	line-height: 1.5;
	color: #EAE1D0;
	opacity: 0.85;
	margin: 0;
}
@media (max-width: 720px) {
	.hncn-hero-twoways {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ============================================================
   Ritualet — horizontal scroll carousel
   ============================================================ */
.hncn-carousel-wrap {
	position: relative;
}
.hncn-carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0 max(2rem, calc((100vw - var(--hncn-frame-max)) / 2 + var(--hncn-frame-pad)));
	scroll-padding-left: max(2rem, calc((100vw - var(--hncn-frame-max)) / 2 + var(--hncn-frame-pad)));
	/* Hide scrollbar — Firefox + IE/Edge + WebKit. Scroll still works via
	   touch, trackpad, mousewheel, keyboard arrows. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hncn-carousel::-webkit-scrollbar { display: none; }

.hncn-carousel:focus { outline: none; }

.hncn-carousel__slide {
	/* 25% — was 32%. Smaller slide footprint so the carousel feels less
	   commanding on desktop. About 4 slides visible at once with the
	   gap; aspect (4/5 portrait) unchanged. */
	flex: 0 0 25%;
	scroll-snap-align: start;
	font-family: var(--wp--preset--font-family--inter);
}
@media (max-width: 1100px) {
	.hncn-carousel__slide { flex: 0 0 36%; }
}
@media (max-width: 700px) {
	.hncn-carousel__slide { flex: 0 0 72%; }
}

.hncn-carousel__image {
	width: 100%;
	/* Portrait 4/5 — matches the gusmestre carousel for visual consistency */
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--ink);
	margin-bottom: 1.5rem;
	filter: saturate(0.95);
}
.hncn-carousel__step {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	margin: 0 0 0.6rem;
}
.hncn-carousel__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: clamp(1rem, 1.3vw, 1.175rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hncn-carousel__body {
	font-size: 13px;
	line-height: 23px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* ---------- Carousel progress dots ----------
   Populated by assets/js/carousel-dots.js. Lives in the .hncn-carousel-wrap
   below the carousel itself, left-aligned with the section content.
   Style mirrors the huset section dots (4px square, active widens to 32px). */
.hncn-carousel__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 1.5rem;
	padding: 0 max(2rem, calc((100vw - var(--hncn-frame-max)) / 2 + var(--hncn-frame-pad)));
	/* Hit area for the row of dots is padded so finger taps don't miss */
	padding-block: 0.5rem;
}

.hncn-carousel__dot {
	position: relative;
	width: 4px;
	height: 4px;
	background: rgba(36, 29, 22, 0.25);
	border: 0;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	transition: width var(--hncn-ease-base), background-color var(--hncn-ease-base);
	flex-shrink: 0;
}

.hncn-carousel__dot.is-active {
	width: 32px;
	background: var(--wp--preset--color--ink);
}

.hncn-carousel__dot:hover:not(.is-active) {
	background: rgba(36, 29, 22, 0.5);
}

.hncn-carousel__dot:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}

/* Dark variant — when carousel sits on ink background */
.hncn-carousel-wrap--dark .hncn-carousel__dot {
	background: rgba(251, 247, 238, 0.25);
}
.hncn-carousel-wrap--dark .hncn-carousel__dot.is-active {
	background: var(--wp--preset--color--creme);
}
.hncn-carousel-wrap--dark .hncn-carousel__dot:hover:not(.is-active) {
	background: rgba(251, 247, 238, 0.5);
}

/* On mobile, the dots row stretches edge-to-edge with the same padding
   as section content for visual alignment. */
@media (max-width: 700px) {
	.hncn-carousel__dots {
		padding-inline: 1.5rem;
	}
}

/* Subtle drag-hint pill, bottom right of the section */
.hncn-carousel__hint {
	position: absolute;
	right: max(2rem, calc((100vw - var(--hncn-frame-max)) / 2 + var(--hncn-frame-pad)));
	bottom: -2.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	pointer-events: none;
}
.hncn-carousel__hint svg { animation: hncn-arrow-nudge 1.8s ease-in-out infinite; }

a.hncn-carousel__hint {
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	transition: color var(--hncn-ease-fast);
	padding: 0.75rem 0; /* ≥44pt tap target */
}
a.hncn-carousel__hint:hover { color: var(--wp--preset--color--brick); }
a.hncn-carousel__hint:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	color: var(--wp--preset--color--brick);
}
@keyframes hncn-arrow-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}
@media (max-width: 700px) {
	.hncn-carousel__hint {
		position: static;
		display: flex;
		justify-content: center;
		margin-top: 0.5rem;
	}
}

/* ---------- Dark variant: when the carousel sits on an ink (dark brown)
   background section. Light copy + softened brick eyebrow for contrast.
   Applied via the wrapper class so we don't need !important. ---------- */
.hncn-carousel-wrap--dark .hncn-carousel__title {
	color: #FBF7EE;
}
.hncn-carousel-wrap--dark .hncn-carousel__step {
	color: #C9603F; /* brick lifted toward warmth so it reads on ink */
}
.hncn-carousel-wrap--dark .hncn-carousel__body {
	color: #EAE1D0;
}
.hncn-carousel-wrap--dark .hncn-carousel__image {
	background-color: #1a140e;
}
.hncn-carousel-wrap--dark .hncn-carousel__hint {
	color: #EAE1D0;
}
.hncn-carousel-wrap--dark a.hncn-carousel__hint:hover {
	color: #FBF7EE;
}
/* Dark-variant scrollbar-track override removed — scrollbar is now hidden globally on .hncn-carousel. */

/* ---------- Image-card grid wrapper ---------- */
.hncn-imgcard-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	/* Cap overall grid width so the cards don't fill the full content
	   frame — was sitting at ~1300px wide (two ~640px cards), now caps
	   at ~960px (two ~470px cards). Aspect (4/5) unchanged. */
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 800px) {
	.hncn-imgcard-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Image-as-card — used in Privat arrangement & gavekort
   ============================================================ */
.hncn-imgcard {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: var(--wp--preset--color--creme);
	text-decoration: none;
	background: var(--wp--preset--color--ink);
}
.hncn-imgcard__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hncn-imgcard:hover .hncn-imgcard__bg { transform: scale(1.04); }
.hncn-imgcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0.4) 45%, rgba(20, 16, 12, 0.05) 85%);
	pointer-events: none;
}
.hncn-imgcard__content {
	position: relative;
	z-index: 1;
	padding: 4rem;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	text-align: center;
}
.hncn-imgcard__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.85;
	text-align: left;
	justify-self: start;
}
.hncn-imgcard__middle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.85rem;
}
.hncn-imgcard__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.005em;
	margin: 0;
	white-space: nowrap;
}
.hncn-imgcard__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 23px;
	opacity: 0.9;
	margin: 0;
	max-width: 38ch;
}
.hncn-imgcard__cta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0.02em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	display: inline-block;
	justify-self: center;
}
/* The 4rem content padding is generous on a two-up desktop grid but eats most
   of a full-width single card on a phone (≤207px of usable width at 375px).
   Ease it off once the grid has collapsed to one column, and let the title wrap. */
@media (max-width: 600px) {
	.hncn-imgcard__content { padding: 2.25rem 1.75rem; }
	.hncn-imgcard__title { white-space: normal; }
}

/* ============================================================
   Next-class card — smoked glass over the hero photo
   ============================================================ */
.hncn-next-card {
	background: rgba(20, 16, 12, 0.22);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	border: 1px solid rgba(251, 247, 238, 0.18);
	padding: 1.75rem 1.75rem 1.5rem;
	color: var(--wp--preset--color--creme);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.hncn-next-card__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(251, 247, 238, 0.6);
	margin: 0;
}
.hncn-next-card__time {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
	margin: 0.15rem 0 0.25rem;
	color: var(--wp--preset--color--creme);
}
.hncn-next-card__sub {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.4;
	color: rgba(251, 247, 238, 0.78);
	margin: 0;
}
.hncn-next-card__avail {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	color: #AE4A2D;
	margin: 0.5rem 0 1.25rem;
}
.hncn-next-card__avail span { margin-right: 0.25rem; }

/* Address line — sits below the time/sub block, above the CTA.
   Subtle link to Google Maps, no underline until hover, italic to read
   as supporting metadata rather than a primary action. */
.hncn-next-card__location {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 1.4;
	font-style: italic;
	color: rgba(251, 247, 238, 0.6);
	margin: 0.5rem 0 1.25rem;
}
.hncn-next-card__location a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color var(--hncn-ease-fast), border-color var(--hncn-ease-fast);
}
.hncn-next-card__location a:hover,
.hncn-next-card__location a:focus-visible {
	color: var(--wp--preset--color--creme);
	border-bottom-color: rgba(251, 247, 238, 0.4);
}
.hncn-next-card__location a:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}
.hncn-next-card__cta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--creme);
	border: 1px solid rgba(251, 247, 238, 0.7);
	padding: 0.95rem 1.5rem;
	display: inline-block;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.hncn-next-card__cta:hover {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--creme);
}
.hncn-book-btn:hover { background: var(--wp--preset--color--baltic); }

/* ---------- Mobile burger (hidden on desktop) ---------- */
.hncn-mobile-toggle { display: none; }
.hncn-mobile-burger { display: none; }

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 880px) {

	.hncn-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 1.25rem;
	}

	.hncn-brand__name { font-size: 0.85rem; }
	.hncn-brand__mark { width: 32px; height: 32px; }

	/* Keep the Book CTA visible on mobile — pinned to the right, just before the
	   burger (brand · Book · burger). Min profil moves into the off-canvas panel
	   as a nav item, so the bar stays uncluttered with the one primary action. */
	.hncn-header__cta {
		display: flex;
		margin-left: auto;
	}
	.hncn-header__cta .hncn-profile-btn { display: none; }
	.hncn-book-btn { padding: 0.85rem 1.1rem; }

	/* Burger appears on mobile, last item in flex row.
	   Visual lines stay 22×16, but padding + negative margin extend the
	   tap target to ≥44×44pt (iOS HIG) without shifting layout. */
	.hncn-mobile-burger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 22px;
		height: 16px;
		padding: 14px 11px;
		margin: -14px -11px;
		box-sizing: content-box;
		cursor: pointer;
		order: 99;
		z-index: 110;
	}
	.hncn-mobile-toggle:focus-visible ~ .hncn-mobile-burger {
		outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
		outline-offset: 2px;
	}
	.hncn-mobile-burger span {
		display: block;
		height: 2px;
		background: var(--wp--preset--color--ink);
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	.hncn-mobile-toggle:checked ~ .hncn-mobile-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.hncn-mobile-toggle:checked ~ .hncn-mobile-burger span:nth-child(2) { opacity: 0; }
	.hncn-mobile-toggle:checked ~ .hncn-mobile-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Header is always opaque on mobile (transparent-over-hero only for desktop) */
	body.hncn-has-hero .hncn-header:not(.is-scrolled) {
		background: var(--wp--preset--color--creme);
		border-bottom-color: rgba(36, 29, 22, 0.08);
		color: var(--wp--preset--color--ink);
	}
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand,
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand__name,
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-brand__name em,
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__link,
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-nav__trigger {
		color: var(--wp--preset--color--ink);
	}
	body.hncn-has-hero .hncn-header:not(.is-scrolled) .hncn-mobile-burger span {
		background: var(--wp--preset--color--ink);
	}

	/* Nav becomes off-canvas slide-in panel */
	.hncn-nav {
		position: fixed !important;
		/* border-box so the 100vw width includes the 1.5rem side padding —
		   otherwise the panel is 48px wider than the viewport and the item
		   separator hairlines run off the right screen edge (asymmetric gutters). */
		box-sizing: border-box;
		top: 56px;
		left: 0 !important;
		width: 100vw !important;
		/* dvh, not vh: on mobile Safari/Chrome the URL bar inflates 100vh past the
		   visible viewport, which would push the bottom of the menu (and its scroll)
		   under the browser chrome. dvh tracks the actual visible height. */
		height: calc(100dvh - 56px);
		max-width: none !important;
		background: var(--wp--preset--color--creme);
		padding: 2rem 1.5rem !important;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 95;
		overflow-y: auto;
		justify-self: stretch !important;
	}
	.hncn-mobile-toggle:checked ~ .hncn-nav { transform: translateX(0); }
	/* When admin bar is showing, offset top by its height */
	.admin-bar .hncn-nav { top: calc(56px + 46px); height: calc(100dvh - 102px); }
	/* Once scrolled, the absolute admin bar is gone and the header is snapped to
	   top:0 — so the panel aligns under a 56px header, no 46px reservation. */
	.admin-bar .hncn-header.is-scrolled .hncn-nav { top: 56px; height: calc(100dvh - 56px); }

	.hncn-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		width: 100%;
	}
	.hncn-nav__item { width: 100%; border-bottom: 1px solid rgba(36, 29, 22, 0.1); padding: 0.5rem 0; }
	.hncn-nav__item--mobile-only { display: block; }
	.hncn-nav__link,
	.hncn-nav__trigger {
		font-size: 1.125rem;
		font-weight: 400;
		line-height: 1.4;
		color: var(--wp--preset--color--ink) !important;
	}

	/* Mega becomes inline accordion */
	.hncn-mega {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		background: transparent;
		box-shadow: none;
		border-top: 0;
		padding: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.hncn-nav__item--mega:focus-within .hncn-mega,
	.hncn-nav__item--mega:hover .hncn-mega { max-height: 800px; transform: none; }

	.hncn-mega__inner {
		grid-template-columns: repeat(2, 1fr);
		padding: 1rem 0 0.5rem;
		gap: 0.75rem;
	}
	.hncn-mega__image { aspect-ratio: 4 / 3; }
	.hncn-mega__caption { padding: 0.5rem 0; font-size: 0.75rem; }
	.hncn-mega__label { font-size: 0.7rem; }
}

/* ---------- Footer-of-mega "View all" link (desktop) ---------- */
@media (min-width: 881px) {
	.hncn-header__inner > .hncn-nav { justify-self: center; }
}

/* ============================================================
   Huset — side-by-side tour (/om-os)
   Squarespace-inspired layout:
   LEFT  → stack of 5 always-visible headlines (active = darker)
        → SHARED copy slot below (5 copies stacked in same grid cell,
          only the active one is opacity 1, others 0 with subtle fade-up)
        → controls (dots + pause) at the bottom
   RIGHT → square (1:1) image stage, images crossfade
   The whole component has a fixed height — no scroll, no fold-out,
   no reflow when switching items.
   ============================================================ */
.hncn-huset {
	font-family: var(--wp--preset--font-family--inter);
}

/* Hide the radio inputs but keep them accessible to keyboard/screen reader */
.hncn-huset > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Two-column layout — matches the 42/58 proportions of the Hvem vi er
   columns directly above so the two sections read as one composition. */
.hncn-huset__layout {
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: var(--wp--preset--spacing--50, 4rem);
	align-items: start;
}

/* LEFT column — header + list + copy-slot (dots live below the grid). */
.hncn-huset__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Optional section header that lives INSIDE the left column (used on
   /gavekort Hvad modtageren får). When present, its top edge defines
   the row's top edge so the image stage on the right aligns to it.
   Spacing-30 below the heading mirrors the natural rhythm between the
   list and any section header above it. */
.hncn-huset__header {
	margin: 0 0 var(--wp--preset--spacing--30) 0;
}
.hncn-huset__heading {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
	/* Zero top margin so the heading's top edge equals the column's top
	   edge — that's the line the image stage aligns to on the right. */
	margin: 0 0 var(--wp--preset--spacing--30) 0;
	max-width: 18ch;
}

/* Headline list — always visible, color changes for active */
.hncn-huset__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.hncn-huset__item {
	display: block;
	cursor: pointer;
	user-select: none;
	padding: 0.1rem 0;
}

.hncn-huset__title {
	display: block;
	font-family: var(--wp--preset--font-family--instrument);
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: rgba(36, 29, 22, 0.32);
	transition: color 0.3s ease;
}

.hncn-huset__item:hover .hncn-huset__title {
	color: rgba(36, 29, 22, 0.7);
}

.hncn-huset__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--baltic);
	outline-offset: 4px;
}

/* Active title: full ink */
#hncn-huset-1:checked ~ .hncn-huset__layout .hncn-huset__item[for="hncn-huset-1"] .hncn-huset__title,
#hncn-huset-2:checked ~ .hncn-huset__layout .hncn-huset__item[for="hncn-huset-2"] .hncn-huset__title,
#hncn-huset-3:checked ~ .hncn-huset__layout .hncn-huset__item[for="hncn-huset-3"] .hncn-huset__title,
#hncn-huset-4:checked ~ .hncn-huset__layout .hncn-huset__item[for="hncn-huset-4"] .hncn-huset__title,
#hncn-huset-5:checked ~ .hncn-huset__layout .hncn-huset__item[for="hncn-huset-5"] .hncn-huset__title {
	color: var(--wp--preset--color--ink);
}

/* Shared copy slot — all 5 copies stacked in same grid cell,
   active fades in with subtle upward motion */
.hncn-huset__copy-slot {
	display: grid;
	grid-template-areas: "stack";
	margin: 1.25rem 0;
	min-height: 4rem; /* body-only height — specs removed */
}

.hncn-huset__copy {
	grid-area: stack;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
}

#hncn-huset-1:checked ~ .hncn-huset__layout .hncn-huset__copy[data-panel="hncn-huset-1"],
#hncn-huset-2:checked ~ .hncn-huset__layout .hncn-huset__copy[data-panel="hncn-huset-2"],
#hncn-huset-3:checked ~ .hncn-huset__layout .hncn-huset__copy[data-panel="hncn-huset-3"],
#hncn-huset-4:checked ~ .hncn-huset__layout .hncn-huset__copy[data-panel="hncn-huset-4"],
#hncn-huset-5:checked ~ .hncn-huset__layout .hncn-huset__copy[data-panel="hncn-huset-5"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.hncn-huset__body {
	font-size: 13px;
	line-height: 23px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	max-width: 42ch;
}

/* RIGHT: image stage — square 1:1 AND capped at ~380px so the image
   reads as an intentional thumbnail next to the list, not a banner that
   dominates the row. Matches the dialled-down image footprint we
   applied to carousels, tiles and imgcards elsewhere. */
.hncn-huset__stage {
	position: relative;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1 / 1;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
	align-self: start;
	justify-self: start;
}

.hncn-huset__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.55s ease;
}

#hncn-huset-1:checked ~ .hncn-huset__layout .hncn-huset__image[data-panel="hncn-huset-1"],
#hncn-huset-2:checked ~ .hncn-huset__layout .hncn-huset__image[data-panel="hncn-huset-2"],
#hncn-huset-3:checked ~ .hncn-huset__layout .hncn-huset__image[data-panel="hncn-huset-3"],
#hncn-huset-4:checked ~ .hncn-huset__layout .hncn-huset__image[data-panel="hncn-huset-4"],
#hncn-huset-5:checked ~ .hncn-huset__layout .hncn-huset__image[data-panel="hncn-huset-5"] {
	opacity: 1;
}

/* Controls: paging dots — sit BELOW the 2-col grid as a separate row.
   Aligned to left so they sit under the facility list (not centered). */
.hncn-huset__controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 1.5rem;
}

.hncn-huset__dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hncn-huset__dot {
	position: relative;
	width: 4px;
	height: 4px;
	background: rgba(36, 29, 22, 0.25);
	border: 0;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	transition: width 0.4s ease, background-color 0.3s ease;
	flex-shrink: 0;
}

.hncn-huset__dot.is-active {
	width: 32px;
	background: rgba(36, 29, 22, 0.15);
}

/* Huset section is click-driven (radio button labels) — no autoplay.
   The active-dot widens to 32px as a static "current step" indicator
   instead of animating a fill. Progress element kept for forward-compat
   if autoplay is reintroduced later, but rendered as a solid fill on
   the active dot rather than animated. */
.hncn-huset__dot-progress {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--hncn-ease-base);
}

.hncn-huset__dot.is-active .hncn-huset__dot-progress {
	transform: scaleX(1);
}

/* Mobile: image stacks above sidebar list, list collapses to clickable rows.
   Bring back aspect-ratio here since stretch has nothing to stretch to in a
   single-column grid (the image would otherwise collapse). */
@media (max-width: 820px) {
	.hncn-huset__layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.hncn-huset__stage {
		aspect-ratio: 4 / 3;
		max-height: 60vh;
		min-height: 0;
		order: -1;
	}
	.hncn-huset__title {
		font-size: 1rem;
	}
	.hncn-huset__content {
		gap: 1.5rem;
	}
}

/* ============================================================
   Image gallery — auto-scrolling infinite marquee
   CSS-only. Slide track is doubled in the markup; we translate
   it by exactly -50% to loop seamlessly. Pauses on hover/focus
   and respects prefers-reduced-motion.
   ============================================================ */
.hncn-gallery {
	width: 100vw;
	overflow: hidden;
	position: relative;
	margin-inline: calc(50% - 50vw);
	/* Subtle fade-out on the edges so slides don't hard-cut at the viewport edge */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.hncn-gallery__track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: hncn-gallery-scroll 60s linear infinite;
}

.hncn-gallery__slide {
	flex: 0 0 320px;
	aspect-ratio: 4 / 5;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
}

.hncn-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes hncn-gallery-scroll {
	from { transform: translateX(0); }
	/* -50% moves exactly one set of slides (since the track contains
	   two identical sets) — produces seamless infinite loop. */
	to   { transform: translateX(calc(-50% - 10px)); }
}

/* Pause on hover or keyboard focus inside the gallery — gives users
   a moment to look at a specific image without it sliding away. */
.hncn-gallery:hover .hncn-gallery__track,
.hncn-gallery:focus-within .hncn-gallery__track {
	animation-play-state: paused;
}

/* Respect reduced-motion preference: stop the animation entirely.
   Users still see the first set of slides as a static row. */
@media (prefers-reduced-motion: reduce) {
	.hncn-gallery__track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Mobile: smaller slides so ~2 fit on screen */
@media (max-width: 700px) {
	.hncn-gallery__slide {
		flex: 0 0 220px;
	}
	.hncn-gallery__track {
		animation-duration: 45s;
	}
}

/* ============================================================
   Footer link lists
   Restrained nav columns (Køb, Om os, Social) — small cream text,
   no underlines, brick on hover.
   ============================================================ */
.hncn-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-footer-list li {
	margin: 0;
}

.hncn-footer-list a {
	color: #EAE1D0; /* creme — aligned with footer body copy + h4 for one consistent footer color (~11:1 on ink, well above WCAG AA) */
	text-decoration: none;
	font-size: 13px;
	line-height: 1.5;
	transition: color var(--hncn-ease-base), border-bottom-color var(--hncn-ease-base);
	border-bottom: 1px solid transparent;
	/* Vertical padding extends tap target to ≥44pt (iOS HIG). */
	padding: 0.6rem 0;
	display: inline-block;
}

.hncn-footer-list a:hover {
	color: #FBF7EE;
	border-bottom-color: rgba(234, 225, 208, 0.4);
}

.hncn-footer-list a:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	color: #FBF7EE;
}

/* ============================================================
   Saunagus weekly schedule (/saunagus · Ugens program)
   Hairline-divided list with day on the left, time on the right —
   matches the Huset spec-list typographic vocabulary.
   ============================================================ */
.hncn-schedule {
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(36, 29, 22, 0.16);
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-schedule__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(36, 29, 22, 0.16);
}

.hncn-schedule__day {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ink);
}

.hncn-schedule__time {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hncn-schedule__note {
	margin: 1.25rem 0 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	line-height: 1.6;
}

/* ============================================================
   Week grid — horizontal calendar of saunagus events (/saunagus)
   Six cells in a row on desktop, wrapping to fewer columns on
   smaller viewports. Each cell shows day name above the time
   range. Hairline borders form a real calendar grid.
   ============================================================ */
.hncn-week-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-top: 1px solid rgba(36, 29, 22, 0.18);
	border-left: 1px solid rgba(36, 29, 22, 0.18);
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-week-grid__cell {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.4rem 1.1rem;
	border-right: 1px solid rgba(36, 29, 22, 0.18);
	border-bottom: 1px solid rgba(36, 29, 22, 0.18);
	min-height: 100px;
}

.hncn-week-grid__day {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
}

.hncn-week-grid__time {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Thin separator between start and end time, sits on the baseline */
.hncn-week-grid__sep {
	display: inline-block;
	margin: 0 0.45rem;
	color: var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.85rem;
	font-weight: 300;
	vertical-align: 2px;
}

.hncn-week-grid__note {
	margin: 1.5rem 0 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	line-height: 1.6;
	font-family: var(--wp--preset--font-family--inter);
}

/* Tablet: 3 columns × 2 rows */
@media (max-width: 1100px) {
	.hncn-week-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: 2 columns × 3 rows */
@media (max-width: 700px) {
	.hncn-week-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hncn-week-grid__cell {
		padding: 1.25rem 1rem;
		min-height: 110px;
	}
	.hncn-week-grid__time {
		font-size: 1.075rem;
	}
}

/* ============================================================
   Kursus — sticky intro left, scrolling cards right (/bliv-gusmester)
   Pattern: the intro column stays in view (position: sticky) while
   the right column scrolls through the course steps. Small contained
   portrait cards — image + heading + one line — not full-bleed.
   ============================================================ */
.hncn-kursus {
	background: var(--wp--preset--color--creme);
	/* border-box so the side padding stays inside the 100vw full-bleed box.
	   Without it, width:100vw + 1.5rem padding renders 48px past the viewport
	   on mobile and the page scrolls horizontally (same fix as .hncn-steps). */
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60) 4rem;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-kursus__inner {
	max-width: 1336px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 5rem;
	align-items: start;
}

/* Sticky intro — stays in view while right column scrolls */
.hncn-kursus__intro {
	position: sticky;
	top: 6rem;
	align-self: start;
	max-width: 440px;
}

.hncn-kursus__eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.hncn-kursus__heading {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: clamp(2.375rem, 4vw, 3.625rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.005em;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
}

.hncn-kursus__lede {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft, #5a5145);
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 38ch;
}

.hncn-kursus__cta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--brick);
	padding-bottom: 0.35rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hncn-kursus__cta:hover,
.hncn-kursus__cta:focus-visible {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ink);
}

/* Scrolling card column */
.hncn-kursus__cards {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.hncn-kursus__card {
	max-width: 360px;
}

/* Alternate horizontal offset for editorial rhythm — even cards push
   right but leave a clear inset so they don't sit flush against the
   section edge. */
.hncn-kursus__card:nth-child(even) {
	margin-left: auto;
	margin-right: 2.5rem;
}

.hncn-kursus__media {
	margin: 0 0 var(--wp--preset--spacing--30);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
}

.hncn-kursus__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hncn-kursus__card:hover .hncn-kursus__media img {
	transform: scale(1.02);
}

.hncn-kursus__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink);
}

.hncn-kursus__body {
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
	color: var(--wp--preset--color--ink-soft, #5a5145);
}

/* Mobile: stack columns, release sticky, shrink gaps */
@media (max-width: 900px) {
	.hncn-kursus {
		padding: var(--wp--preset--spacing--50) 1.5rem;
	}
	.hncn-kursus__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
	.hncn-kursus__intro {
		position: static;
		max-width: none;
	}
	.hncn-kursus__cards {
		gap: 3rem;
	}
	.hncn-kursus__card,
	.hncn-kursus__card:nth-child(even) {
		max-width: none;
		margin-left: 0;
	}
}

/* ============================================================
   FAQ — categorized accordion (Naturligolie-style)
   ============================================================ */
.hncn-faq { font-family: var(--wp--preset--font-family--inter); }

.hncn-faq__cat {
	border-top: 1px solid rgba(36, 29, 22, 0.15);
}
.hncn-faq__cat:last-child {
	border-bottom: 1px solid rgba(36, 29, 22, 0.15);
}

.hncn-faq__row {
	list-style: none;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.4rem 0.25rem;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	transition: color 0.15s ease;
}
.hncn-faq__row::-webkit-details-marker { display: none; }
.hncn-faq__row::marker { display: none; }

.hncn-faq__cat:hover .hncn-faq__row { color: var(--wp--preset--color--brick); }

.hncn-faq__icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink-soft);
}
.hncn-faq__cat[open] .hncn-faq__icon { color: var(--wp--preset--color--brick); }

.hncn-faq__label {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.hncn-faq__chev {
	display: inline-flex;
	color: var(--wp--preset--color--ink-soft);
	transition: transform 0.25s ease;
}
.hncn-faq__cat[open] .hncn-faq__chev { transform: rotate(180deg); }

.hncn-faq__body {
	padding: 0 0.25rem 1.5rem calc(26px + 1.25rem);
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
	line-height: 23px;
}
.hncn-faq__body p { margin: 0 0 0.9rem; }
.hncn-faq__body p:last-child { margin-bottom: 0; }
.hncn-faq__body strong { color: var(--wp--preset--color--ink); font-weight: 600; }

@media (max-width: 700px) {
	.hncn-faq__label { font-size: 1rem; }
	.hncn-faq__body { padding-left: 0; padding-right: 0; font-size: 0.9rem; }
	.hncn-faq__row { padding: 1.1rem 0.15rem; gap: 0.9rem; }
}


/* ---------- Outlined hero CTA buttons: hover fills white, text flips to ink ---------- */
main .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--creme) !important;
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--creme) !important;
}


/* ============================================================
   YOGO calendar widget — brand override (/book page)
   The YOGO WordPress plugin renders its Vue-based booking calendar
   inside `.yogo-calendar`. YOGO ships its own default look (orange
   accents, default Material-ish UI). These rules override that to
   match the Hot n' Cold brand: Instrument Serif on event names,
   brick on action buttons, hairline borders, calmer spacing.
   ============================================================ */
.yogo-calendar {
	font-family: var(--wp--preset--font-family--inter) !important;
	color: var(--wp--preset--color--ink);
	max-width: 1336px;
	margin: 0 auto;
}

/* Outer widget container */
.yogo-calendar .yogo-widget {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
}

.yogo-calendar .theme--frame-box {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Top control row: location dropdown + filters + date nav */
.yogo-calendar label,
.yogo-calendar .calendar__week--nav span {
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	color: var(--wp--preset--color--ink) !important;
}

.yogo-calendar select,
.yogo-calendar input[type="text"]:not(.md-input) {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 13px !important;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid rgba(36, 29, 22, 0.25) !important;
	border-radius: 0 !important;
	padding: 0.65rem 0.85rem !important;
}

/* Week nav arrows */
.yogo-calendar .calendar__week--nav svg {
	stroke: var(--wp--preset--color--ink) !important;
}

.yogo-calendar .calendar__week--nav .disabled svg {
	stroke: rgba(36, 29, 22, 0.3) !important;
}

/* Day group header (sticky day-of-week + date) */
.yogo-calendar .events-group .cal-top {
	background: var(--wp--preset--color--creme) !important;
	padding: 0.75rem 0 !important;
	border-bottom: 1px solid rgba(36, 29, 22, 0.16) !important;
	margin-bottom: 1rem !important;
}

.yogo-calendar .events-group .cal-top > div:first-child {
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--sand) !important;
}

.yogo-calendar .events-group .cal-top .bold {
	font-family: var(--wp--preset--font-family--instrument) !important;
	font-size: 1.375rem !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--ink) !important;
	margin-top: 0.3rem !important;
}

/* Individual event card */
.yogo-calendar .class-item {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid rgba(36, 29, 22, 0.10) !important;
	border-radius: 0 !important;
	padding: 1.25rem !important;
	margin-bottom: 1rem !important;
	transition: border-color 0.2s ease !important;
}

.yogo-calendar .class-item:hover {
	border-color: var(--wp--preset--color--ink) !important;
}

.yogo-calendar .class-item a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
}

/* Color stripe (per-class-type, configured in YOGO admin) */
.yogo-calendar .class-item .class-color {
	width: 32px !important;
	height: 3px !important;
	margin-bottom: 1rem !important;
	border-radius: 0 !important;
}

/* Time */
.yogo-calendar .class-item .mb-1:first-of-type {
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	color: var(--wp--preset--color--ink) !important;
	font-variant-numeric: tabular-nums !important;
}

/* Event name — the big serif title */
.yogo-calendar .class-item .event-name {
	font-family: var(--wp--preset--font-family--instrument) !important;
	font-size: 1.375rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.005em !important;
	text-transform: none !important;
	color: var(--wp--preset--color--ink) !important;
	line-height: 1.1 !important;
	margin: 0.5rem 0 !important;
}

/* Tone label (Relaxing, Uplifting, Afslappende, etc.) */
.yogo-calendar .class-item .event-name + div {
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--sand) !important;
}

/* Location & teacher rows — small, muted */
.yogo-calendar .class-item .bold:not(.event-name),
.yogo-calendar .class-item .small {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--ink-soft, #5a5145) !important;
}

/* Capacity counter (e.g. 20/20, 4/20) */
.yogo-calendar .class-item .justify-end .bold {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Action button: "Sign up" / "Join waitlist" */
.yogo-calendar .yogo-btn-secondary {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--creme) !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	padding: 0.65rem 1rem !important;
	border-radius: 0 !important;
	border: 0 !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: background-color 0.2s ease !important;
}

.yogo-calendar .yogo-btn-secondary:hover {
	background: var(--wp--preset--color--brick) !important;
}

/* "Filters" toggle button at top */
.yogo-calendar .btn.underline {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--brick) !important;
	background: transparent !important;
	border: 0 !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

/* Datepicker popup */
.yogo-calendar .vdp-datepicker__calendar {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid rgba(36, 29, 22, 0.16) !important;
	font-family: var(--wp--preset--font-family--inter) !important;
}

.yogo-calendar .vdp-datepicker__calendar .selected {
	background: var(--wp--preset--color--brick) !important;
	color: var(--wp--preset--color--creme) !important;
}

/* Mobile: tighten paddings */
@media (max-width: 700px) {
	.yogo-calendar .class-item {
		padding: 1rem !important;
	}
	.yogo-calendar .class-item .event-name {
		font-size: 1.125rem !important;
	}
}

/* ---------- Gusmestre carousel: smaller slides than Ritualet ---------- */
.hncn-carousel--gus .hncn-carousel__slide {
	/* 23% — was 30%. Aligned with the global carousel shrink. */
	flex: 0 0 23%;
}
@media (max-width: 1100px) {
	.hncn-carousel--gus .hncn-carousel__slide { flex: 0 0 34%; }
}
@media (max-width: 700px) {
	.hncn-carousel--gus .hncn-carousel__slide { flex: 0 0 72%; }
}

.hncn-gus__name {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	margin: 0 0 0.25rem;
}
.hncn-gus__role {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.6rem;
}
.hncn-gus__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 23px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.hncn-faq-cat {
	padding: 1.75rem 0;
	border-top: 1px solid rgba(36, 29, 22, 0.15);
}
.hncn-faq-cat:last-child {
	border-bottom: 1px solid rgba(36, 29, 22, 0.15);
}
.hncn-faq-cat__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.15;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--ink);
}
.hncn-faq-cat__qa p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.9rem;
}
.hncn-faq-cat__qa p:last-child { margin-bottom: 0; }
.hncn-faq-cat__qa strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}


/* ============================================================
   Kontaktformular
   ============================================================ */
.hncn-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--inter);
}
.hncn-contact-form label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;
	min-width: 0;
}
.hncn-contact-form__row {
	display: flex;
	gap: 1rem;
}
.hncn-contact-form__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
}
.hncn-contact-form input,
.hncn-contact-form select,
.hncn-contact-form textarea {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 23px;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(36, 29, 22, 0.25);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	transition: border-color 0.15s ease;
}
.hncn-contact-form input:focus,
.hncn-contact-form select:focus,
.hncn-contact-form textarea:focus {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	border-color: var(--wp--preset--color--ink);
}
.hncn-contact-form textarea {
	resize: vertical;
	min-height: 88px;
}
/* Mobile: stack the row back to single column */
@media (max-width: 600px) {
	.hncn-contact-form__row {
		flex-direction: column;
		gap: 1rem;
	}
	/* iOS Safari auto-zooms the page when a focused input is under 16px. Bump to
	   16px on phones so tapping a field doesn't jolt the layout. Desktop keeps the
	   13px editorial scale. line-height held so field height is unaffected. */
	.hncn-contact-form input,
	.hncn-contact-form select,
	.hncn-contact-form textarea {
		font-size: 16px;
	}
}
.hncn-contact-form__submit {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--creme);
	background: var(--wp--preset--color--ink);
	padding: 1rem 1.5rem;
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.hncn-contact-form__submit:hover {
	background: var(--wp--preset--color--brick);
}
.hncn-contact-form__note {
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
	margin: 0;
}

/* Honeypot: visually + functionally hidden, but still in the DOM so bots fill it. */
.hncn-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submission status banner (success / error) shown above the form after redirect. */
.hncn-contact-form__status {
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
	padding: 0.75rem 1rem;
	font-size: 14px;
	line-height: 1.4;
	border-left: 3px solid currentColor;
}
.hncn-contact-form__status--ok {
	background: #eef0e9;
	color: #3f4a3a;
}
.hncn-contact-form__status--error {
	background: #f6e7e4;
	color: var(--wp--preset--color--brick, #AE4A2D);
}
.hncn-contact-form__status a {
	color: inherit;
	text-decoration: underline;
}


/* ---------- Inner pages: let alignfull blocks inside post-content fill viewport ----
   WP's post-content block defaults to contentSize (720px) max-width. Pattern blocks
   with align:full inside it inherit that 720px instead of filling the viewport.
   Force post-content to be full width, and use negative-margin trick on alignfull
   children to break out completely.
*/
main > .wp-block-post-content,
main > .entry-content {
	max-width: none !important;
	width: 100%;
	padding-inline: 0 !important;
}
main > .wp-block-post-content > .alignfull,
main > .entry-content > .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Inside the broken-out alignfull, force children to constrain at
   contentSize 1336 + auto-center. Matches the logo's frame (frame-max
   1464 = 1336 contentSize + 2×64 padding). On narrower viewports this
   gracefully degrades to padding-only positioning. */
main > .wp-block-post-content > .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)),
main > .entry-content > .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 1336px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* ---------- Tile hover lifts the filter (subtle brighten) ---------- */
.hncn-mega__tile:hover .hncn-mega__image {
	filter: brightness(1.05) saturate(1.05);
}


/* Gusmestre carousel — empty image placeholder (portrait pending) */
.hncn-carousel__image--empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: 1.5rem;
	background:
		repeating-linear-gradient(135deg,
			var(--wp--preset--color--sage) 0px,
			var(--wp--preset--color--sage) 12px,
			var(--wp--preset--color--creme) 12px,
			var(--wp--preset--color--creme) 24px);
	opacity: 0.4;
}


/* ---------- Kill creme gap between main and footer ----------
   theme.json's blockGap (1.5rem) was adding space between main and footer template-parts,
   showing the body's creme background as a band. Zero that out.
*/
.wp-site-blocks > *,
.wp-site-blocks > main + .wp-block-template-part {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}


/* ---------- Mega menu tile backgrounds (URL-resolved relative to this CSS file) ---------- */
.hncn-mega__image--book        { background-image: url('../images/hncn-wall-sign.jpg'); }
.hncn-mega__image--klippekort  { background-image: url('../images/hncn-sauna-interior-tile.jpg'); }
.hncn-mega__image--medlemskab  { background-image: url('../images/hncn-group-wave-tile.jpg'); }
.hncn-mega__image--gavekort    { background-image: url('../images/hncn-harbor-sunset.jpg'); }
.hncn-mega__image--privat      { background-image: url('../images/hncn-group-on-deck.jpg'); }


/* ============================================================
   Faciliteterne grid — used on /om-os
   ============================================================ */
.hncn-facility-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.hncn-facility-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hncn-facility-grid { grid-template-columns: 1fr; }
}

.hncn-facility {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.hncn-facility__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--ink);
	transition: filter 0.25s ease;
}
.hncn-facility:hover .hncn-facility__image {
	filter: brightness(1.04) saturate(1.05);
}
.hncn-facility__caption {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(36, 29, 22, 0.15);
}

/* ============================================================
   YOGO booking — local-dev fallback
   When the YOGO WordPress plugin is not active, [yogo-calendar]
   would render as literal text. The pattern uses shortcode_exists()
   to swap in this card so the page reads cleanly in wp-now.
   In production the YOGO plugin is active and this never appears.
   ============================================================ */
.hncn-yogo-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 140px;
	padding: 1.5rem 2rem;
	border: 1px dashed rgba(36, 29, 22, 0.22);
	background: rgba(36, 29, 22, 0.02);
	text-align: center;
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-yogo-fallback__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
}

.hncn-yogo-fallback__body {
	margin: 0;
	max-width: 38ch;
	font-size: 13px;
	line-height: 23px;
	color: var(--wp--preset--color--ink-soft);
}

.hncn-yogo-fallback__body span {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--sand);
	font-style: italic;
}

/* ============================================================
   Kontakt — contact info reference card (2×2 grid)
   Sits in the left column of /kontakt, below the intro.
   Replaces the previous stacked list (which used a sage <hr>
   separator + tall vertical spacing). 4 groups arranged as:
     Generelt   |  Saunagus
     Adresse    |  Åbent
   On narrow viewports collapses to a single column.
   ============================================================ */
.hncn-contact-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2.5rem;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-contact-info__group {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hncn-contact-info__label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
}

.hncn-contact-info__value {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.hncn-contact-info__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(36, 29, 22, 0.18);
	transition: border-color 0.2s ease;
}
.hncn-contact-info__value a:hover {
	border-bottom-color: var(--wp--preset--color--brick);
}

@media (max-width: 600px) {
	.hncn-contact-info {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ============================================================
   Cover hero — full-bleed section with image (or video) as bg,
   text overlaid bottom-left. Matches the structure of other
   image heroes (wp:cover with image bg). Class name retains
   "video-hero" for historical reasons but the __media slot
   accepts either <img> or <video>. Used on /klippekort.

   Layout:
     - section: 100vw, min-height 60vh, dark fallback bg (ink)
     - media: position:absolute filling section, object-fit:cover.
       object-position favors the most interesting part of the
       source when the viewport ratio doesn't match.
     - overlay: dark gradient from transparent (top) → 55% ink
       at the bottom so the overlaid white text reads cleanly
     - content: relative, z-index above overlay, max-width 1336px
       centered horizontally, padding matches site frame
   ============================================================ */
.hncn-video-hero {
	position: relative;
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw); /* break out of constrained parent */
	min-height: 60vh;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
}

.hncn-video-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* center 60%: portrait source — visible band is ~15-20% of image
	   height on wide viewports. 60% Y centers the band on the heater's
	   stones + upper body, with the wood wall above visible at the top
	   of the crop. Higher values (75%+) show too much floor and crop
	   the heater top; lower values (50%-) show the windowsill instead. */
	object-position: center 60%;
	display: block;
}

/* Kill the blockGap that wp-block-post-content puts between the hero
   and the next sibling. theme.json declares blockGap: spacing|30 (24px)
   which WordPress applies as margin-block-start to every block after
   the first inside the post-content flow layout. Since this hero
   should sit flush against the next section, neutralize that margin.
   Higher specificity than the WP rule (.wp-block-post-content.is-layout-flow > * + *)
   so no !important needed. Narrow scope: only affects elements that
   directly follow .hncn-video-hero, nothing else on the site. */
.wp-block-post-content.is-layout-flow > .hncn-video-hero + * {
	margin-block-start: 0;
}

/* Dark gradient overlay at the bottom — keeps overlaid text legible
   without darkening the upper portion of the ceiling. */
.hncn-video-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(36, 29, 22, 0.08) 0%,
		rgba(36, 29, 22, 0.0) 30%,
		rgba(36, 29, 22, 0.0) 55%,
		rgba(36, 29, 22, 0.55) 100%
	);
	pointer-events: none;
}

.hncn-video-hero__content {
	position: relative;
	z-index: 1;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	max-width: 1336px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) 4rem;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--inter);
}

.hncn-video-hero__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #EAE1D0;
}

.hncn-video-hero__title {
	margin: 0;
	max-width: 640px;
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 2.6875rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.005em;
	color: #FBF7EE;
}

.hncn-video-hero__lead {
	margin: 0;
	max-width: 56ch;
	font-size: 13px;
	line-height: 23px;
	color: #EAE1D0;
	opacity: 0.9;
}

/* Secondary CTA bottom-right of the hero — small underlined link that
   anchor-scrolls down to a section deeper in the page (e.g. the
   "Det skal du have med" section on /enkeltbillet). Right offset uses
   the same calc as the carousel hint so it aligns with section content. */
.hncn-video-hero__quick-link {
	position: absolute;
	bottom: var(--wp--preset--spacing--50);
	right: max(2rem, calc((100vw - var(--hncn-frame-max)) / 2 + var(--hncn-frame-pad)));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(251, 247, 238, 0.85);
	text-decoration: none;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(251, 247, 238, 0.4);
	transition: color var(--hncn-ease-fast), border-color var(--hncn-ease-fast);
}
.hncn-video-hero__quick-link:hover,
.hncn-video-hero__quick-link:focus-visible {
	color: var(--wp--preset--color--creme);
	border-bottom-color: var(--wp--preset--color--creme);
}
.hncn-video-hero__quick-link:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}
.hncn-video-hero__quick-link svg {
	transition: transform var(--hncn-ease-base);
}
.hncn-video-hero__quick-link:hover svg {
	transform: translateY(2px);
}

@media (max-width: 800px) {
	.hncn-video-hero,
	.hncn-video-hero__content {
		min-height: 55vh;
	}
	/* Top padding = nav height + 1rem breathing room so the hero content
	   doesn't visually touch the fixed nav at initial load. Horizontal
	   padding matches the universal 1rem section gutter. */
	.hncn-video-hero__content {
		padding-top: calc(var(--hncn-header-h) + 1rem);
		padding-right: 1rem;
		padding-bottom: var(--wp--preset--spacing--50);
		padding-left: 1rem;
	}
	.hncn-video-hero__title {
		font-size: 2.125rem;
	}
	/* Same vertical buffer for the homepage hero (wp:cover variant) so
	   its first line of content sits below the fixed nav. Horizontal
	   padding is already handled by the universal 4rem→1rem rule on
	   the outer .hncn-hero-full. */
	.hncn-hero-full > .wp-block-cover__inner-container {
		padding-top: calc(var(--hncn-header-h) + 1rem) !important;
	}
	/* On mobile, the quick-link drops below the content area so it doesn't
	   overlap with the lead paragraph in the narrow viewport. */
	.hncn-video-hero__quick-link {
		position: static;
		display: inline-flex;
		margin: var(--wp--preset--spacing--30) 1rem var(--wp--preset--spacing--40);
	}
}

/* Reduced motion is honored by a small inline script in the markup —
   CSS can't pause <video> elements. */

/* Footer separator full-width handled by WP's alignfull system
   (align:full on the wp:separator block) — no custom CSS needed. */


/* ============================================================
   Language switcher (Polylang) — dropdown variant
   ============================================================
   Sits inside .hncn-header__cta. Uses native <details>/<summary>
   so the dropdown works without JS and is keyboard-accessible.
   Trigger shows the CURRENT language only ("DA" or "EN");
   click/tap reveals a dropdown listing the OTHER available
   languages. Polylang's pll_the_languages() renders <li>.lang-item
   inside the dropdown.
   ============================================================ */
.hncn-lang {
	position: relative;
	display: inline-block;
	margin-right: 0.75rem;
}
.hncn-lang[open] {
	z-index: 60; /* lift above any sticky overlays beneath the header */
}

/* Strip the default disclosure triangle */
.hncn-lang summary {
	list-style: none;
}
.hncn-lang summary::-webkit-details-marker {
	display: none;
}

/* Trigger button: the current language code + chevron */
.hncn-lang__trigger {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink, #241D16);
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: opacity 0.15s ease;
}
.hncn-lang__trigger:hover,
.hncn-lang__trigger:focus-visible {
	outline: none;
	opacity: 0.7;
}

.hncn-lang__current {
	display: inline-block;
	min-width: 1.2em;
	text-align: center;
}

/* Chevron rotates when the dropdown is open. Explicit stroke color
   (don't rely on currentColor inheritance): ink/dark brown when the
   nav has its default creme background, creme when over a dark hero. */
.hncn-lang__chev {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.hncn-lang__chev path {
	stroke: var(--wp--preset--color--ink, #241D16);
}
.hncn-has-hero .hncn-lang__chev path {
	stroke: var(--wp--preset--color--creme, #EAE1D0);
}
.hncn-lang[open] .hncn-lang__chev {
	transform: rotate(180deg);
}

/* Dropdown — expands HORIZONTALLY to the left of the trigger so the
   alternate flags stay on the header line and don't fall into page
   content below. Transparent, borderless, no shadow. */
.hncn-lang__dropdown {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.35rem);
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	white-space: nowrap;
	z-index: 60;
}

.hncn-lang__dropdown li,
.hncn-lang__dropdown .lang-item {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.hncn-lang__dropdown li::marker,
.hncn-lang__dropdown .lang-item::marker {
	content: '';
}

.hncn-lang__dropdown a,
.hncn-lang__dropdown .lang-item a {
	display: block;
	padding: 0.4rem 0.5rem;
	color: var(--wp--preset--color--ink, #241D16);
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.hncn-lang__dropdown a:hover,
.hncn-lang__dropdown a:focus-visible {
	outline: none;
	opacity: 0.7;
}

/* When the header is over a dark hero (.hncn-has-hero on <body>),
   trigger text turns creme so the flag reads on the dark image.
   No border to invert since it's already gone. */
.hncn-has-hero .hncn-lang__trigger {
	color: var(--wp--preset--color--creme, #EAE1D0);
}

/* Mobile tweaks: keep the switcher in the header bar, tighter padding */
@media (max-width: 800px) {
	.hncn-lang {
		margin-right: 0.5rem;
	}
	.hncn-lang__trigger {
		padding: 0.45rem 0.65rem;
		font-size: 10px;
		gap: 0.3rem;
	}
	.hncn-lang__dropdown {
		min-width: 4.5rem;
	}
	/* Hide the desktop "Min profil" text on mobile (lives in the burger
	   menu via .hncn-nav__item--mobile-only). The lang pill takes its slot. */
	.hncn-header__cta .hncn-profile-btn {
		display: none;
	}
}

/* Flag visuals — small radius so the SVG rectangle has soft corners.
   No border or shadow so the flag floats clean against the header. */
.hncn-lang__trigger .hncn-flag,
.hncn-lang__dropdown .hncn-flag {
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	overflow: hidden;
}

/* ============================================================
   Header sticky safety belt (mobile)
   ============================================================
   The .hncn-header rule earlier sets position:fixed, but
   iOS Safari can break fixed positioning when:
   - an ancestor has transform / filter / will-change / perspective
     (any of these creates a new containing block)
   - body has overflow:hidden (common when mobile menus open)
   - WordPress' .wp-site-blocks wrapper has unusual styling

   This block hard-asserts the fixed behavior on touch/mobile
   viewports as a safety belt — !important wins against any
   accidental overrides downstream. It also forces the header
   onto its own compositor layer (will-change: transform) so
   iOS doesn't pause the fixed positioning during inertial scroll.
   ============================================================ */
@media (max-width: 800px) {
	.hncn-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 100 !important;
		will-change: transform;
		-webkit-transform: translateZ(0); /* iOS Safari compositor hint */
		transform: translateZ(0);
	}

	/* On pages WITHOUT a hero, ensure the page top still gets header height
	   pushed so content isn't covered. Re-assert here in case any other
	   rule wiped it. */
	body:not(.hncn-has-hero) main {
		padding-top: var(--hncn-header-h) !important;
	}
}