/*
Theme Name: Kabdalis 2
Theme URI: https://kabdalis.com
Author: Kabdalis
Author URI: https://kabdalis.com
Description: Modern Kabdalis ski resort theme — fast, fluid, image-led. Warm/crisp/minimal directions, full-screen hero, mega menu, conditions strip and widget-friendly layouts. Built fresh, no dependency on the legacy theme or plugins.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kabdalis2
Tags: ski, resort, full-width-template, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/* Design system — single source of truth.
   tokens.css        — colour/type/radius/shadow tokens (direction-scoped).
   widget-frame.css  — .b-* primitives + layout/animation foundations.
   block-patterns.css — per-pattern selectors (.b-info, .b-quote, .b-cabin, etc.)
                        used by inc/block-patterns.php registrations.

   These were previously pulled in here via @import, which serialized the
   load (this file had to download + parse before the imports were even
   discovered). They are now enqueued as separate handles in functions.php
   (kabdalis2_enqueue_assets) so all four stylesheets download in parallel,
   printed in tokens → widget-frame → block-patterns → style order so the
   cascade is unchanged. The block editor loads the same chain via
   add_editor_style(). */

/* =====================================================================
   TABLE OF CONTENTS  (search "==============================  NAME" to jump)
   ---------------------------------------------------------------------
   BASE · BUTTONS · HEADER · LOGO (v2) · HD NAV / MEGA · LANG SWITCHER ·
   HEADER ACCOUNT · BURGER / SHEET · HERO · PAGE-HERO + VARIANTS ·
   CONDITIONS · INTRO · FEATURE SPLIT · EAT · NEWS · LIFTS / SLOPES ·
   SEARCH (stay) · CABINS · CTA BAND · CONTACT · FOOTER (v2) · HOME WIDGETS ·
   BOENDE FILTERS · SIGNATURE DETAILS · MOTION · DELIGHT + CUSTOMIZE ·
   SPACING DENSITY · SUNLIGHT · CAMPAIGN · WEEKEND · FORECAST · WEBCAM ·
   LIFT PASS · GALLERY · INSTAGRAM · FAMILJÄR / WARMTH · MOBILE POLISH ·
   RESPONSIVE · BREADCRUMBS · SCREEN-READER · PAGINATION / NAV ·
   COMMENTS · STICKY HOVER GUARD · SCROLL-TO-TOP · BOOKING CTA · 404 · PRINT

   This file is the theme's composition layer; the design SYSTEM lives in
   tokens.css / widget-frame.css / block-patterns.css (loaded first). Add new
   primitives there, not here. See TOKENS.md.
   ===================================================================== */

/* ============================== BASE ============================== */
*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* anchor links land below the fixed header (.hd) instead of behind it */
  scroll-padding-top:calc(var(--hd-h) + 12px);
}
body.admin-bar{ scroll-padding-top:calc(var(--hd-h) + 32px + 12px); }

/* Selection color follows the brand accent — feels intentional rather than OS-default blue */
::selection{ background:color-mix(in srgb, var(--accent) 28%, transparent); color:var(--ink); }

/* Focus rings — scoped to keyboard nav so mouse clicks stay clean */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}
/* Buttons and inputs already have their own focus rings — don't double up */
.btn:focus-visible, .b-input:focus-visible, .b-select:focus-visible, .b-textarea:focus-visible{
  outline-offset:2px;
}
/* On dark contexts (header before it turns solid, overlay/accent heroes, the
   accent CTA/campaign bands) the dark-red accent ring is low-contrast — switch
   it to white so keyboard focus stays visible over photos and accent fills.
   Outline (not box-shadow) so overflow:hidden cards can't clip the ring. */
.hd:not(.hd--solid):not(.hd--mega):not(.hd--open) :focus-visible,
.hero__scroll:focus-visible,
.phero--overlay :focus-visible, .phero--overlay-center :focus-visible, .phero--accent :focus-visible,
.band--ctaband :focus-visible, .band--campaign :focus-visible{
  outline-color:#fff;
}

/* Skip-to-content — visible only when keyboard-focused, lands the user at <main> */
.skip-link{
  position:fixed; z-index:1000;
  top:8px; left:8px;
  padding:10px 16px;
  background:var(--accent); color:var(--on-accent);
  font-weight:600; font-size:.92rem;
  border-radius:var(--radius-sm);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transform:translateY(-200%);
  transition:transform .2s ease;
}
.skip-link:focus, .skip-link:focus-visible{
  transform:translateY(0);
  outline:none;
}
/* The skip link sends focus to <main> (tabindex=-1). Don't ring the whole
   container — the user's reading position has moved; the next Tab reveals the
   first real control with its own focus style. */
#kab2-main:focus{ outline:none; }

/* Anchor offset for in-page headings (h2/h3 with id) so deep-links land cleanly */
:is(h1, h2, h3, h4)[id]{ scroll-margin-top:calc(var(--hd-h) + 16px); }

/* No visited-link recolour — visited links should look identical to unvisited.
   Kills the UA :visited purple for content anchors. Plain content links inherit
   (ink on light prose); prose links keep their accent colour (matching their
   unvisited rule below). Buttons are excluded — they carry their own :visited
   rules so the dark hover fills don't turn the text dark. */
.page-content a:not(.btn):visited{ color:inherit; }
.page-content :is(p,li,blockquote) a:not(.btn):visited{ color:var(--accent); }
body{
  margin:0;
  background-color:var(--bg, #f2efe9);
  color:var(--ink, #25211b);
  font-family:var(--font-body);
  line-height:1.6;
  /* Reset Gutenberg's default root padding — the theme controls spacing
     via .wrap/.band, and the editor inherits this stylesheet so we need
     to zero the WP padding vars here too. */
  --wp--style--root--padding-top:0px;
  --wp--style--root--padding-right:0px;
  --wp--style--root--padding-bottom:0px;
  --wp--style--root--padding-left:0px;
}
img{max-width:100%; display:block;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none; padding:0;}
input{font:inherit;}
a{color:inherit; text-decoration:none;}

.app{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .45s ease, color .45s ease;
}
/* .wrap / .band / .display / .eyebrow / .eyebrow--light / .reveal* / .photo*
   are design-system primitives owned by widget-frame.css (loaded first). They
   used to be re-declared here verbatim — removed to avoid drift. Only the
   theme-specific additions below remain. */
.main{ display:block; }
.screen{ display:block; }

/* Reduced motion also disables the smooth scroll-behavior the base sets on
   <html>. The .reveal neutraliser itself lives in widget-frame.css. */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ============================== BUTTONS ============================== */
/* .btn primitives + variants are owned by widget-frame.css (imported above) —
   the rules there cover every site that consumes the design system. Only
   theme-direction-specific overrides live here. */
[data-dir="minimal"] .btn{ border-radius:2px; font-weight:500; }

/* .link-arrow lives in widget-frame.css (identical rules) — not re-declared here. */

/* ============================== HEADER ============================== */
.hd{ position:fixed; top:0; left:0; right:0; z-index:60; transition:box-shadow .3s ease; color:#fff; }
/* soft top veil keeps white header text legible over bright hero photos (header strip only) */
.hd::before{ content:''; position:absolute; left:0; right:0; top:0; height:160%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,16,22,.44) 0%, rgba(12,16,22,.16) 45%, rgba(12,16,22,0) 100%);
  opacity:1; transition:opacity .3s ease; }
.hd.hd--solid::before, .hd.hd--open::before, .hd.hd--mega::before{ opacity:0; }
.hd__bar{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; height:var(--hd-h); padding-inline:clamp(14px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hd.hd--solid, .hd.hd--mega{ background:color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); color:var(--ink); box-shadow:0 1px 0 var(--line); }

/* ============================== LOGO (v2 lockup) ==============================
   Flake (13-part Kåbdalis snowflake) + wordmark mask. The wordmark is a CSS
   mask painted with currentColor, so it auto-tints with the header state —
   white over the hero photo, ink when solid, snow-white in the pine footer.
   Logo is pinned: it must never compress below its natural width. When the
   menu can't fit alongside it, JS flips the nav to the burger
   (.hd--menu-overflow) rather than squeezing the logo or wrapping the bar. */
.logo{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.logo .flake{
  width:21px; height:21px; flex:none; color:#fff;
  transition:transform .6s var(--ease), color .35s;
  position:relative; top:2px;
}
.logo .wm{
  height:19px; aspect-ratio:943/281; background:currentColor;
  -webkit-mask:url('assets/img/wordmark.svg') center/contain no-repeat;
          mask:url('assets/img/wordmark.svg') center/contain no-repeat;
  flex:0 0 auto;
}
/* Header logo runs a touch larger than the base lockup (footer keeps its
   own sizes). Both parts scale together so the proportions hold. */
.hd .logo{ gap:10px; }
.hd .logo .flake{ width:27px; height:27px; top:3px; }
.hd .logo .wm{ height:24px; }
/* Solid / opened / no-hero header → falu flake (wordmark follows the
   header's ink color via currentColor automatically). */
.hd--solid .logo .flake,
.hd--mega .logo .flake,
.hd--open .logo .flake,
.kab2-no-hero .logo .flake,
.kab2-hd-flat .logo .flake{ color:var(--falu); }

/* flake quarter-spin on hover (4-fold symmetry: lands in the same pose) */
@media (prefers-reduced-motion: no-preference){
  .logo:hover .flake{ transform:rotate(90deg); }
}

/* ---------- exploded snowflake (13 parts, injected into .kbf-mount) ---------- */
.kbf{ width:100%; height:100%; display:block; overflow:visible; }
.kbf path{ fill:currentColor; }
.kbf-core, .kbf-arm, .kbf-li, .kbf-lo{ transform-box:view-box; transform-origin:center; }

@media (prefers-reduced-motion: no-preference){
  /* header logo: crystallize on page load */
  .hd .logo .kbf-core{ animation:kbfCoreIn .5s var(--ease) both; animation-delay:.15s; }
  .hd .logo .kbf-arm{ animation:kbfArmIn .55s var(--ease) both; animation-delay:calc(.34s + var(--i)*.07s); }
  .hd .logo .kbf-li{ animation:kbfLeafIn .5s var(--ease) both; animation-delay:calc(.62s + var(--i)*.05s); }
  .hd .logo .kbf-lo{ animation:kbfLeafIn .5s var(--ease) both; animation-delay:calc(.74s + var(--i)*.05s); }

  @keyframes kbfCoreIn{ from{ transform:scale(0) rotate(135deg); opacity:0; } to{ opacity:1; } }
  @keyframes kbfArmIn{ from{ transform:scaleY(0); opacity:0; } to{ opacity:1; } }
  @keyframes kbfLeafIn{ from{ transform:translate(-130px,130px) scale(.55); opacity:0; } to{ opacity:1; } }

  /* Season cycle keyframes — flake crystallizes, rests, melts, repeats.
     Used by flake-season-cta (12s rhythm) and flake-loader (4s rhythm via
     animation-duration override on the block). Lives at theme level
     (alongside the intro keyframes) so blocks reference them without
     redeclaring — same pattern the header logo uses for kbfCoreIn etc. */
  @keyframes kbfCycleCore{
    0%{ transform:scale(0) rotate(135deg); opacity:0; }
    5%{ transform:none; opacity:1; }
    76%{ transform:none; opacity:1; }
    84%, 100%{ transform:scale(0) rotate(-135deg); opacity:0; }
  }
  @keyframes kbfCycleArm{
    0%, 2%{ transform:scaleY(0); opacity:0; }
    9%{ transform:none; opacity:1; }
    74%{ transform:none; opacity:1; }
    81%, 100%{ transform:scaleY(0); opacity:0; }
  }
  @keyframes kbfCycleLeaf{
    0%, 5%{ transform:translate(-130px,130px) scale(.55); opacity:0; }
    13%{ transform:none; opacity:1; }
    71%{ transform:none; opacity:1; }
    78%, 100%{ transform:translate(-115px,115px) scale(.5); opacity:0; }
  }
}

/* .rv / .irv reveal-on-view primitives live in widget-frame.css (also
   reaches the editor iframe via the plugin's enqueue_block_assets path)
   so blocks animate identically in admin and on the frontend. */

/* Content-aware nav fallback. When the desktop menu would overflow the bar
   (measured live by theme.js — works at ANY width, independent of the
   760px breakpoint), switch the entire nav to the burger/sheet. Higher
   specificity than the responsive media query so it wins without !important.
   The mobile sheet already lists every item, so nothing is lost or grouped. */
.hd--menu-overflow .hd__nav{ display:none; }
.hd--menu-overflow .burger{ display:grid; }

.hd__nav{ display:none; }
.hd__link{ display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:600; letter-spacing:.035em; text-transform:uppercase; opacity:.85; position:relative; padding:.45em 1px; transition:opacity .2s; }
.hd__link:hover, .hd__link.is-open{ opacity:1; }
.hd__chev{ display:inline-flex; transition:transform .2s; opacity:.7; }
.hd__link.is-open .hd__chev{ transform:rotate(180deg); }
/* Underline marker — lives on .hd__label (the text span) so its width
   always matches the label exactly, chevron excluded. Directional sweep:
   resting origin is RIGHT (so it exits stage right when you leave),
   hover origin is LEFT (so it draws in from the left). The asymmetry is
   what makes it feel alive while staying a strict 2px hairline. */
.hd__label{ position:relative; display:inline-block; }
.hd__label::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .34s cubic-bezier(.66,0,.18,1);
}
.hd__link:hover .hd__label::after,
.hd__link.is-open .hd__label::after,
.hd__link.is-active .hd__label::after{
  transform:scaleX(1); transform-origin:left center;
}
/* Active page keeps a calmer, persistent marker — slightly transparent so
   hover/open still reads as the "louder" state. */
.hd__link.is-active:not(:hover):not(.is-open) .hd__label::after{
  background:color-mix(in srgb, var(--accent) 65%, transparent);
}
/* Over the hero photo the header text is white — let the underline follow
   currentColor there so it never drowns against dark photos. Once the
   header turns solid (scroll/mega/no-hero) it returns to accent. */
.hd:not(.hd--solid):not(.hd--mega):not(.hd--open) .hd__label::after{
  background:currentColor;
}
/* Over the photo, the active (but not hovered/open) link keeps a calmer marker
   so it still reads quieter than a hover — mirroring the solid-header treatment
   above, which only applied once the header turned solid. */
.hd:not(.hd--solid):not(.hd--mega):not(.hd--open) .hd__link.is-active:not(:hover):not(.is-open) .hd__label::after{
  background:rgba(255,255,255,.6);
}
@media (prefers-reduced-motion: reduce){
  .hd__label::after{ transition:none; }
}

/* desktop mega-menu */
.hd__mega{ position:absolute; top:100%; left:0; right:0; z-index:65; background:var(--surface); color:var(--ink); border-top:1px solid var(--line); box-shadow:var(--shadow); }
.hd__mega[hidden]{ display:none; }
@media (max-width:759px){ .hd__mega{ display:none !important; } }
.mega__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(20px,2.5vw,30px) clamp(18px,5vw,40px); display:grid; grid-template-columns:1fr 300px; gap:clamp(24px,4vw,52px); }
.mega__links{ display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; align-content:start; }
.mega__link{ display:flex; flex-direction:column; gap:2px; padding:11px 12px; border-radius:var(--radius-sm); text-align:left; transition:background .15s; }
.mega__link:hover{ background:var(--surface2); }
.mega__l-top{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.98rem; transition:color .15s; }
.mega__l-top svg{ color:var(--accent); opacity:0; transform:translateX(-5px); transition:.18s; }
.mega__link:hover .mega__l-top{ color:var(--accent); }
.mega__link:hover .mega__l-top svg{ opacity:1; transform:none; }
.mega__l-desc{ font-size:.82rem; color:var(--muted); }
.mega__feature{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:190px; display:flex; align-items:flex-end; text-align:left; color:#fff; }
.mega__feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega__feat-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,11,15,.08), rgba(8,11,15,.74)); }
.mega__feat-body{ position:relative; z-index:1; padding:18px; display:flex; flex-direction:column; gap:3px; }
.mega__feat-kicker{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; opacity:.92; }
.mega__feat-title{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.2rem; letter-spacing:var(--display-ls); line-height:1.15; }
.mega__feat-cta{ display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; font-weight:600; margin-top:7px; transition:gap .2s; }
.mega__feature:hover .mega__feat-cta{ gap:.75em; }
.sheet__sub-l{ display:flex; flex-direction:column; gap:1px; }
.sheet__sub-l em{ font-style:normal; font-size:.78rem; color:var(--muted); }

.hd__right{ display:flex; align-items:center; gap:10px; }

/* Discrete language switcher — small text "SV ▾" that reveals a tiny dropdown
   with the alternative language(s). Sits in the top-right corner without
   competing with the primary nav. */
.lang{ position:relative; display:inline-flex; align-items:center; }
.lang__cur{ display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-weight:600; letter-spacing:.06em; opacity:.6; padding:.35em .15em; transition:opacity .15s ease; }
.lang__cur:hover, .lang__cur.is-open{ opacity:1; }
.lang__cur svg{ opacity:.7; transition:transform .2s ease; }
.lang__cur.is-open svg{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:120px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:4px; z-index:70; }
.lang__menu[hidden]{ display:none; }
.lang__opt{ display:block; padding:.55em .75em; font-size:.82rem; font-weight:500; color:var(--ink); border-radius:calc(var(--radius-sm) - 2px); transition:background .15s ease, color .15s ease; }
.lang__opt:hover{ background:var(--surface2); color:var(--accent); }
.hd__cta{ display:none; }

/* Header account control — login button (logged-out) / account menu
   (logged-in). Uses currentColor so it adapts to the hero (white) and solid
   (ink) header states the same way the burger / lang switcher do. */
.hd__account{ position:relative; display:inline-flex; align-items:center; }
.hd__login{ display:inline-flex; align-items:center; gap:.4em; font:inherit; font-size:.78rem; font-weight:600; letter-spacing:.02em; color:currentColor; background:transparent; border:1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius:999px; padding:.45em .9em; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.hd__login:hover{ background:color-mix(in srgb, currentColor 12%, transparent); border-color:currentColor; }
.hd__login[hidden]{ display:none; }
.hd__acctmenu{ position:relative; display:inline-flex; align-items:center; }
.hd__acctmenu[hidden]{ display:none; }
.hd__accttrigger{ display:inline-flex; align-items:center; gap:.4em; font:inherit; font-size:.8rem; font-weight:600; color:currentColor; background:transparent; border:0; cursor:pointer; padding:.35em .2em; opacity:.85; transition:opacity .15s ease; }
.hd__accttrigger:hover{ opacity:1; }
.hd__accttrigger svg:last-child{ transition:transform .2s ease; }
.hd__accttrigger[aria-expanded="true"] svg:last-child{ transform:rotate(180deg); }
.hd__acctname{ max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hd__acctdrop{ position:absolute; top:calc(100% + 6px); right:0; min-width:160px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:4px; z-index:70; display:flex; flex-direction:column; }
.hd__acctdrop[hidden]{ display:none; }
.hd__acctitem{ display:block; width:100%; text-align:left; padding:.55em .75em; font:inherit; font-size:.82rem; font-weight:500; color:var(--ink); background:transparent; border:0; border-radius:calc(var(--radius-sm) - 2px); cursor:pointer; transition:background .15s ease, color .15s ease; text-decoration:none; }
.hd__acctitem:hover{ background:var(--surface2); color:var(--accent); }

/* Mobile sheet account block — a self-contained card so the signed-in state
   reads as an intentional account header rather than melting into the nav. */
.sheet__account{ display:flex; flex-direction:column; gap:10px; margin:2px 0 22px; }
.sheet__login{ width:100%; justify-content:center; }
.sheet__login[hidden]{ display:none; }
.sheet__acctmenu{ display:flex; flex-direction:column; gap:10px; }
.sheet__acctmenu[hidden]{ display:none; }

/* Identity card — avatar initial + name, set apart on surface2 */
.sheet__acctcard{
  display:flex; align-items:center; gap:13px;
  padding:13px 14px;
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.sheet__acctavatar{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1;
}
.sheet__acctmeta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sheet__acctkicker{
  font-family:var(--font-mono); font-size:.64rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}
.sheet__acctname{
  font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Action rows — same scale + accent interaction as the .sheet__sub nav links */
.sheet__acctactions{ display:flex; flex-direction:column; gap:2px; }
.sheet__acctlink, .sheet__acctlogout{
  display:flex; align-items:center; gap:.65em;
  width:100%; padding:11px 14px;
  font:inherit; font-size:1.02rem; font-weight:500;
  color:var(--ink); background:transparent; border:0; border-radius:var(--radius-sm);
  cursor:pointer; text-align:left; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.sheet__acctlink svg, .sheet__acctlogout svg{ flex:0 0 auto; color:var(--muted); transition:color .15s ease; }
.sheet__acctlink:hover, .sheet__acctlink:active{ background:color-mix(in srgb, var(--accent) 7%, transparent); color:var(--accent); }
.sheet__acctlink:hover svg, .sheet__acctlink:active svg{ color:var(--accent); }
.sheet__acctlogout{ color:var(--no); }
.sheet__acctlogout:hover, .sheet__acctlogout:active{ background:color-mix(in srgb, var(--no) 8%, transparent); }
.sheet__acctlogout svg{ color:var(--no); }

.burger{ position:relative; width:44px; height:44px; display:grid; gap:5px; align-content:center; justify-items:center; }
/* Discreet "signed in" indicator — a small accent dot on the burger, ringed in
   the header surface so it reads over both the hero photo and the solid bar.
   Visible whenever a member session is active and the menu is collapsed. */
.kab-signed-in .burger::after{
  content:''; position:absolute; top:1px; right:1px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px var(--surface);
}
.kab-signed-in .burger--x::after{ display:none; } /* sheet open → account card visible, dot redundant */
.burger span{ width:21px; height:2px; background:currentColor; border-radius:2px; transition:transform .28s, opacity .2s; }
.burger--x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger--x span:nth-child(2){ opacity:0; }
.burger--x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hd__sheet{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:1; background:var(--surface); color:var(--ink); overflow:hidden; }
.hd__sheet[hidden]{ display:none; }
.sheet__scroll{ height:100%; overflow-y:auto; padding:calc(var(--hd-h) + 10px) clamp(16px,5vw,40px) 48px; -webkit-overflow-scrolling:touch; }
/* When the WP admin bar is present it offsets the header (.hd top:32/46px), so
   the sheet's first items would slide under the now-lower header bar. Add the
   admin-bar height to the scroll padding so the menu top stays clear — mirrors
   the .hd-spacer admin-bar handling. */
body.admin-bar .sheet__scroll{ padding-top:calc(var(--hd-h) + 32px + 10px); }
@media screen and (max-width:782px){
  body.admin-bar .sheet__scroll{ padding-top:calc(var(--hd-h) + 46px + 10px); }
}
.hd.hd--open{ background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:none; backdrop-filter:none; }
.hd--open .hd__bar{ background:var(--surface); }

/* Sheet links — kill the iOS/Android default tap-highlight (blue/grey flash)
   and define a proper :active state so taps feel intentional. */
.sheet__gh, .sheet__sub{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.sheet__group{ padding:14px 0; border-bottom:1px solid var(--line); }
.sheet__gh{
  display:block; width:100%;
  padding:2px 0 12px;
  font-family:var(--font-display); font-weight:var(--display-w);
  letter-spacing:var(--display-ls); font-size:1.45rem;
  text-align:left; color:var(--ink);
  text-decoration:none;
  transition:color .15s ease;
}
.sheet__gh:hover{ color:var(--accent); }
.sheet__gh:active{ color:var(--accent); }
.sheet__gh.is-active{ color:var(--accent); }
.sheet__gh--static{ cursor:default; }
.sheet__gh--static:hover, .sheet__gh--static:active{ color:var(--ink); }

.sheet__subs{ display:flex; flex-direction:column; gap:2px; }
.sheet__sub{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 0 11px 16px;
  font-size:1.02rem; color:var(--ink-soft);
  border-left:2px solid var(--line); margin-left:2px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  text-align:left;
  text-decoration:none;
}
.sheet__sub:hover{ color:var(--accent); border-color:var(--accent); }
.sheet__sub:active{
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-color:var(--accent);
  color:var(--accent);
}
.sheet__sub.is-active{
  color:var(--accent); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.sheet__sub svg{ color:var(--muted); transition:transform .15s ease, color .15s ease; }
.sheet__sub:hover svg, .sheet__sub.is-active svg{ color:var(--accent); transform:translateX(2px); }

/* ============================== HERO ============================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute !important; inset:0; aspect-ratio:auto !important; border-radius:0 !important; z-index:0; }
.hero__bg image-slot{ border-radius:0; }
/* Photo must cover the full hero box. Without object-fit the img keeps its
   intrinsic aspect ratio and the .photo fallback bg (surface2, grey) bleeds
   through at the bottom on tall viewports. Same fix on .phero__bg. */
.hero__bg img,
.phero__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* Optional ambient hero video — layered over the featured-image poster inside
   .hero__bg (same z:0 layer, later in DOM → paints above the img). theme.js
   attaches the source + plays only when on-screen and motion is allowed; until
   then (and under reduced-motion / no-JS) the img beneath is the poster. */
.hero__video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; z-index:0; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } }
/* faint, neutral grounding wash at the very bottom — keeps the photo bright, no heavy darkening */
.hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(15,18,22,.14) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; display:flex;
  padding:0 clamp(18px,5vw,40px) clamp(64px,12vh,118px); box-sizing:border-box; }
.hero__card{ width:min(600px,100%);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--surface) 55%, rgba(255,255,255,.5));
  border-radius:var(--radius); color:var(--ink);
  box-shadow:0 34px 80px -40px rgba(12,16,24,.6), inset 0 1px 0 rgba(255,255,255,.45);
  padding:clamp(24px,3.2vw,40px); }
.hero__title{ font-family:var(--font-display); font-weight:var(--display-w); letter-spacing:var(--display-ls);
  line-height:1.03; font-size:clamp(2.3rem, 6vw, 4.2rem); margin:.3em 0 0; text-wrap:balance; color:var(--ink); }
.hero__lead{ margin-top:1em; max-width:48ch; }
.hero__lead p{ margin:0; font-size:clamp(1rem,2.2vw,1.16rem); line-height:1.55; color:var(--ink-soft); }
.hero__sign{ margin-top:1.1em; }
.sign{ font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--ink-soft); }
[data-dir="minimal"] .sign, [data-dir="crisp"] .sign{ font-style:normal; font-weight:500; }
.contact .sign, .app:not([data-dir]) .sign{ color:var(--muted); }
.hero__cta{ margin-top:1.6em; display:flex; flex-wrap:wrap; gap:12px; }
/* Scroll-cue — a single pulsating chevron-down sitting bottom-center.
   Soft drop-shadow keeps it legible over bright snow photos; the bob+fade
   animation invites scroll without shouting. Reduced-motion just shows a
   static arrow. Mobile (≤600px) hides it entirely since the hero already
   ends with a clear card edge. */
.hero__scroll{
  position:absolute; z-index:2;
  bottom:clamp(18px, 3vh, 32px); left:50%;
  width:48px; height:48px;
  display:grid; place-items:center;
  color:#fff;
  background:transparent;
  border-radius:999px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
  transform:translateX(-50%);
  animation:heroScrollBob 2.2s ease-in-out infinite;
  transition:filter .2s ease;
}
.hero__scroll:hover{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
  animation-play-state:paused;
}
.hero__scroll svg{
  display:block;
  stroke-width:2.2;
  animation:heroScrollFade 2.2s ease-in-out infinite;
}
@keyframes heroScrollBob{
  0%, 100%{ transform:translate(-50%, 0); }
  50%{ transform:translate(-50%, 8px); }
}
@keyframes heroScrollFade{
  0%, 100%{ opacity:.55; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll, .hero__scroll svg{ animation:none; }
  .hero__scroll svg{ opacity:.85; }
}

/* mobile hero — split layout: full photo on top, text on a solid panel below.
   Snow photos are too high-contrast to write on directly, so we never overlay text. */
@media (max-width:600px){
  .hero{ min-height:0; display:flex; flex-direction:column; }
  .hero__bg{ position:relative !important; inset:auto !important; width:100%; height:50svh; flex:0 0 auto; }
  .hero::after{ display:none; }            /* no overlay — text isn't on the photo */
  .hero__inner{ position:relative; z-index:2; max-width:none; margin:0; display:block;
    background:var(--surface); padding:24px clamp(18px,5vw,26px) 28px; }
  .hero__card{ width:100%; background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; color:var(--ink); }
  .hero__card .eyebrow{ color:var(--accent); text-shadow:none; }
  .hero__title{ color:var(--ink); text-shadow:none; font-size:clamp(2rem,8.5vw,2.7rem); line-height:1.06; margin-top:.3em; }
  .hero__lead{ display:block; margin-top:.7em; }
  .hero__lead p{ font-size:1rem; line-height:1.5; color:var(--ink-soft); }
  .hero__card .sign{ color:var(--accent); text-shadow:none; font-size:1.5rem; }
  .hero__sign{ margin-top:.85em; }
  .hero__cta{ margin-top:1.2em; gap:9px; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .hero__scroll{ display:none; }
}

/* page hero (sub-pages) */
.phero{ position:relative; min-height:58svh; display:flex; align-items:flex-end; overflow:hidden; }
.phero__bg{ position:absolute !important; inset:0; aspect-ratio:auto !important; border-radius:0 !important; z-index:0; }
.phero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 74%, rgba(15,18,22,.13) 100%); }
.phero__inner{ position:relative; z-index:2; padding-bottom:clamp(32px,6vh,60px); width:100%; display:flex; }
.phero__card{ width:min(640px,100%);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter:blur(15px) saturate(1.25); backdrop-filter:blur(15px) saturate(1.25);
  border:1px solid color-mix(in srgb, var(--surface) 55%, rgba(255,255,255,.5));
  border-radius:var(--radius); color:var(--ink);
  box-shadow:0 28px 64px -36px rgba(12,16,24,.55), inset 0 1px 0 rgba(255,255,255,.45);
  padding:clamp(20px,2.6vw,32px); }
.phero__title{ font-family:var(--font-display); font-weight:var(--display-w); letter-spacing:var(--display-ls); line-height:1.04; font-size:clamp(1.9rem,5vw,3.2rem); margin:.28em 0 0; color:var(--ink); text-wrap:balance; }
.phero__lead{ margin-top:.7em; max-width:48ch; }
.phero__lead p{ margin:0; font-size:clamp(1rem,2vw,1.14rem); color:var(--ink-soft); }
@media (max-width:600px){
  .phero{ min-height:52svh; }
  /* Lighter backdrop blur on phones (15px → 6px is far cheaper to composite on
     low-end GPUs); a more opaque card keeps the text legible over the photo. */
  .phero__card{ width:100%; background:color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter:blur(6px) saturate(1.15); backdrop-filter:blur(6px) saturate(1.15);
    padding:16px 16px 18px; }
  .phero__title{ font-size:clamp(1.7rem,7.5vw,2.3rem); }
  .phero__lead p{ font-size:1rem; }
  .phero::after{ background:linear-gradient(180deg, rgba(15,18,22,.05) 0%, rgba(255,255,255,0) 45%, rgba(15,18,22,.2) 100%); }
}

/* ============================== GTRANSLATE FLAGS ============================
   The gtranslate plugin renders its flag links as display:block, so they
   stack vertically. Force them side-by-side (the two <a class="glink"> are
   direct children of .gt_switcher_wrapper). Applies on all viewports. */
.gt_switcher_wrapper a.glink{
  display:inline-flex !important;
  float:none !important;
  vertical-align:middle;
  margin:0 2px !important;
}
.gt_switcher_wrapper a.glink img{ display:block; border-radius:3px; }

/* Mobile: the plugin floats the switcher fixed at top:15px/right:15px via
   INLINE styles — that lands on top of the burger. Keep the flags at the top
   but nudge them LEFT of the burger, vertically centred in the header bar.
   Desktop keeps the plugin's default top-right placement. The burger sits at
   the header's right padding edge and is 34px wide, so we clear it:
   padding + 34 + a 12px gap. */
@media (max-width:759px){
  .gt_switcher_wrapper{
    top:0 !important;                                       /* span the bar from its top edge… */
    height:var(--hd-h) !important;                          /* …and flex-centre, so the flags line up with the
                                                              logo + burger regardless of the flag image height
                                                              (the old (--hd-h - 24px)/2 assumed exactly 24px) */
    display:flex !important;
    align-items:center !important;
    right:calc(clamp(14px,5vw,40px) + 56px) !important;     /* left of the 44px burger + 12px gap */
    left:auto !important;
  }
  body.admin-bar .gt_switcher_wrapper{
    top:46px !important;                                    /* drop below the 46px mobile admin bar; height keeps it centred */
  }
}

/* ============================== LANG SWITCHER ==============================
   The theme renders its own switcher: the compact .lang dropdown in the
   header bar on desktop, and the .sheet__langbar pill row at the top of the
   mobile sheet. Polylang (and similar plugins) ALSO inject language items
   directly into nav menus via wp_get_nav_menu_items — those render as
   <li class="menu-item menu-item-language lang-item-XX">; hide them so the
   theme's switcher stays the single SV/EN UI in the header. */
.hd .menu-item-language,
.hd li[class*="lang-item"],
.hd__nav li[class*="lang"]{
  display:none !important;
}

/* Mobile: the sheet owns language switching AND login — hide the header-bar
   dropdown + the account/login control so they don't crowd the burger button
   or collide with the GTranslate flags (which are pinned just left of the
   burger above). On mobile, login lives in the burger sheet (.sheet__account). */
@media (max-width:759px){
  .hd__right .lang{ display:none; }
  .hd__right .hd__account{ display:none; }
}

/* Pill row at the very top of the mobile sheet. Reuses .sheet__lang-label
   (mono uppercase label) from the GTranslate slot styles above. */
.sheet__langbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.sheet__langbtns{ display:flex; gap:8px; }
.sheet__langbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:7px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.86rem; font-weight:600; color:var(--ink-soft);
  text-decoration:none;
}
.sheet__langbtn.is-active{
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ============================== LEGACY CSS COMPAT ==============================
   The wp-content `gutenberg-page-styles` plugin enqueues a stylesheet that
   targets `body.gutenberg-page a { color: var(--color-accent) }` with its
   own (blue) default for --color-accent. We can't edit that file from
   the theme, so we:
     1) Map --color-accent to the theme accent so the legacy rule paints
        in the brand color instead of the plugin's default blue.
     2) Reset link color in places where the theme controls colour
        contextually (header, buttons) so the broad `a {}` rule doesn't
        repaint them. */
body{ --color-accent: var(--accent); }

/* Header — links inherit the header's contextual text color (white over
   hero photo, var(--ink) when .hd--solid / .kab2-no-hero). */
.hd a{ color:inherit; }

/* Buttons — explicit colours per variant. Specificity bumped via .app
   ancestor so external `a {}` rules can't override. */
/* Anchor color cascade — these rules add specificity over a generic `a {}`
   reset, but use :not(:hover) so the primitive's own :hover color-flip
   (widget-frame.css `.btn--outline:hover{ color:var(--bg) }` etc.) can still
   win on interaction. Adding a separate `.app a.btn--*:hover` rule would
   couple anchor styling to primitive hover state — fragile. The :not(:hover)
   pattern keeps the primitive as the single source of truth for hover. */
.app a.btn:not(:hover){ color:inherit; }
.app a.btn--primary:not(:hover){ color:var(--on-accent); }
.app a.btn--outline:not(:hover){ color:var(--ink); }

/* Button-styled anchors must look identical visited or not, in EVERY state —
   including the dark :hover fills. Plain colour/:hover rules don't feed the
   visited cascade (the UA visited colour would win), so each button colour is
   re-stated for :visited. The hover line matters: without it a visited outline
   button loses its white text on its black hover background. */
a.btn:visited{ color:inherit; }
a.btn--primary:visited, a.btn--falu:visited{ color:var(--on-accent); }
a.btn--outline:visited{ color:var(--ink); }
a.btn--outline:visited:hover{ color:var(--bg); }
a.btn--ghost:visited{ color:inherit; }
.band--ctaband a.btn--primary:visited,
.band--campaign a.btn--primary:visited{ color:var(--accent); }

/* ============================== BLOCK ALIGNMENT ==============================
   theme.json declares contentSize:760px and wideSize:1140px. The page
   templates wrap the_content() in `.band > .wrap > .page-content`, which
   constrains everything to --maxw (1140px). Editors opt blocks out via
   Gutenberg's block-alignment toolbar:

     • (no alignment) — fits content area, max wideSize/--maxw (1140px)
     • Wide (alignwide) — same as default for us (--maxw already 1140px)
     • Full width (alignfull) — breaks out of .wrap to viewport edges

   The escape uses negative margins to span 100vw. `.app` has overflow-x:
   hidden so the bleed doesn't add a horizontal scrollbar.

   Editors can also add `alignfull` / `alignwide` via Advanced → Additional
   CSS class on any block (incl. <!-- wp:html --> patterns where the
   toolbar doesn't show the alignment options). */
.page-content > .alignfull,
.page-content > .wp-block-group.alignfull,
.wrap > .alignfull{
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
}
.page-content > .alignwide,
.page-content > .wp-block-group.alignwide,
.wrap > .alignwide{
  /* On our theme contentSize and wideSize are both ≤ --maxw, so alignwide
     visually equals "no alignment" inside .wrap. Kept as a no-op selector
     so editors who explicitly pick "Wide" don't see jumpy resizing later. */
  width:100%;
  max-width:none;
  margin-inline:0;
}

/* When a full-width block has its OWN inner constraint (cover blocks,
   announcement bands), the inner content needs a wrap too — wrap that
   inside the block via `.wrap` or by setting the block's "Inner blocks
   use content width" toggle in Gutenberg. */

/* ============================== PAGE-CONTENT FLOW ==============================
   In the prototype, every major section is its own <section class="band"> with
   padding-block:var(--band-pad) — the inter-section gap is built into the
   bands themselves. In WP, editors compose pages with Gutenberg blocks
   (kabdalis-blocks-2 widgets, .b-* patterns, native blocks) that all sit as
   siblings inside ONE <article class="page-content"> inside ONE outer .band.
   The outer band gives top/bottom breathing room for the whole section, but
   the children would otherwise stack edge-to-edge.

   Restore vertical rhythm with a sibling-margin on direct children of
   .page-content. Smaller than --band-pad because that's section-level
   spacing — between inner blocks we want generous-but-tight. After a
   heading (h2/h3), tighten further because the heading "owns" the block
   it introduces. */
/* Full-width landing template — content column spans the viewport (keeps the
   .wrap side padding); raw paragraphs still cap via the .page-content > p rule
   below, and alignfull blocks bleed edge-to-edge as usual. */
.wrap--full{ max-width:none; }

.page-content > * + *{ margin-top:clamp(28px, 4vw, 56px); }
.page-content > h2 + *,
.page-content > h3 + *,
.page-content > h4 + *{ margin-top:clamp(12px, 1.6vw, 20px); }

/* Double-padding guard. The templates already wrap content in .band > .wrap
   (one layer of horizontal padding). Some blocks — notably the
   kabdalis-content-wrapper block — ALSO carry the `.wrap` class to fetch that
   padding when used standalone. Nested inside .page-content that doubles the
   side padding (the homepage symptom: ~2× inset on mobile vs other pages).
   Drop the inner padding so the single template padding wins.
   Full/wide-aligned blocks keep their inner padding — there the .wrap is the
   only thing keeping full-bleed content off the screen edges. */
.page-content .wrap:not(.alignfull):not(.alignwide){ padding-inline:0; }

/* ============================== CONTENT TYPOGRAPHY (prose) ====================
   Raw the_content() — headings + paragraphs an editor types without reaching
   for a block pattern. Heading family/size/weight come from theme.json
   styles.elements (so the editor preview matches the frontend). This block adds
   what theme.json can't express for a classic the_content() template:
     • a readable measure (line length) on top-level text — otherwise prose runs
       the full --maxw (1140px) column and reads as one endless line;
     • crisp rhythm — zero the UA block margins so the .page-content owl-margin
       above is the single source of vertical spacing;
     • list / blockquote / rule / inline-link styling.
   Scoped to top-level children (`>`) so nested groups/columns/full-width bands
   keep managing their own width. */

/* Rhythm — UA margins off; owl above owns the gaps. First child hugs the band's
   top padding. */
.page-content > :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,pre,table,dl){ margin-bottom:0; }
.page-content > :first-child{ margin-top:0; }

/* Readable measure on top-level text. Headings stay free (they're short and use
   text-wrap:balance); media + nested blocks are untouched. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > dl,
.page-content > blockquote{ max-width:68ch; }
.page-content > p{ line-height:1.7; }
.page-content > :where(h1,h2,h3,h4,h5,h6){ text-wrap:balance; }

/* Lists */
.page-content ul,
.page-content ol{ padding-left:1.35em; }
.page-content ul{ list-style:disc; }
.page-content ol{ list-style:decimal; }
.page-content li + li{ margin-top:.4em; }
.page-content li{ line-height:1.65; }
.page-content li::marker{ color:var(--accent); }

/* Inline prose links — accent with a soft underline that firms up on hover.
   Scoped to text containers so .btn and block-level links are untouched. */
.page-content :is(p,li,blockquote) a:not(.btn){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--accent) 38%, transparent);
  transition:text-decoration-color .2s ease;
}
.page-content :is(p,li,blockquote) a:not(.btn):hover{ text-decoration-color:var(--accent); }

/* Blockquote — accent rule + quieter ink, on a slightly narrower measure. */
.page-content blockquote{
  border-left:3px solid var(--accent);
  padding-left:clamp(14px, 2vw, 22px);
  font-style:italic;
  color:var(--ink-soft);
}
.page-content blockquote > p{ max-width:60ch; }

/* Horizontal rule — hairline in the line token. */
.page-content hr{ border:0; height:1px; background:var(--line); }

/* ============================== HD SPACER ==============================
   Pushes the first content section below the fixed header (.hd) when a
   page has hero variant = 'none'. Mirrors --hd-h so it always matches. */
.hd-spacer{ height:var(--hd-h); }
body.admin-bar .hd-spacer{ height:calc(var(--hd-h) + 32px); }
@media screen and (max-width:782px){
  body.admin-bar .hd-spacer{ height:calc(var(--hd-h) + 46px); }
}

/* ============================== HD — NO-HERO / FLAT MODE =======================
   When a page opts out of the hero (variant=none, body.kab2-no-hero) OR uses a
   photoless *light* hero variant (bar/compact/center/minimal → body.kab2-hd-flat),
   the header has no photo behind it, so the dark gradient veil + white text
   reads as a tinted blob. Force a quiet solid bar instead: surface bg,
   ink text, hairline bottom border, no gradient.
   ('accent' is photoless but sits on a dark band — it keeps the default white
   header, so it is intentionally NOT in this group.) */
.kab2-no-hero .hd,
.kab2-hd-flat .hd{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  /* no backdrop-filter — bg is fully opaque already */
}
.kab2-no-hero .hd::before,
.kab2-hd-flat .hd::before{ display:none; }

/* ============================== PAGE-HERO VARIANTS ============================== */
/* Sidhuvud-varianter (start 2026-06-09, utökat 2026-06-13) — kompletterar bas
   .phero. Alla återanvänder .phero__card-markup; bara modifierare.

   Foto-i-bakgrund:  overlay, overlay-center (rubrik DIREKT på foto, inget kort),
                     banner (foto + kort), split (2-kol).
   Kompakta/luftiga:  bar, compact, minimal, center, accent (ingen foto).

   Vilka som målar fotot styrs av kabdalis2_hero_variant_has_photo() (PHP) —
   "fotolös" är den kanoniska mängden, allt annat (inkl. bas .phero) får foto. */

/* .phero--bar — superkompakt enkelrad, ingen foto */
.phero--bar{
    min-height:auto;
    background:var(--surface);
    border-bottom:1px solid var(--line);
}
.phero--bar .phero__bg{ display:none; }
.phero--bar::after{ display:none; }
.phero--bar .phero__inner{
    padding-top:calc(var(--hd-h) + 14px);
    padding-bottom:14px;
}
.phero--bar .phero__card{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; box-shadow:none;
    padding:0; width:100%;
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.phero--bar .phero__title{
    font-size:clamp(1.1rem, 2.4vw, 1.5rem);
    margin:0;
}
.phero--bar .phero__lead{ margin:0; flex:1; min-width:0; }
.phero--bar .phero__lead p{ font-size:.92rem; }
@media (max-width:720px){
    .phero--bar .phero__lead{ display:none; }
}

/* .phero--compact — låg, ingen foto, för funktionssidor */
.phero--compact{
    min-height:auto;
    background:var(--surface2);
    border-bottom:1px solid var(--line);
}
.phero--compact .phero__bg{ display:none; }
.phero--compact::after{ display:none; }
.phero--compact .phero__inner{
    padding-top:calc(var(--hd-h) + clamp(24px, 4vw, 40px));
    padding-bottom:clamp(20px, 3vw, 32px);
}
.phero--compact .phero__card{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; box-shadow:none;
    padding:0; width:min(720px, 100%);
}
.phero--compact .phero__title{
    font-size:clamp(1.5rem, 3.6vw, 2.2rem);
}

/* .phero--center — mellan, centrerad accent-wash, kampanj/landning */
.phero--center{
    min-height:auto;
    background:color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-bottom:1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.phero--center .phero__bg{ display:none; }
.phero--center::after{ display:none; }
.phero--center .phero__inner{
    padding-top:calc(var(--hd-h) + clamp(32px, 5vw, 60px));
    padding-bottom:clamp(28px, 4vw, 48px);
    justify-content:center;
}
.phero--center .phero__card{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; box-shadow:none;
    padding:0; width:min(760px, 100%);
    text-align:center;
}
.phero--center .phero__lead{ margin-inline:auto; }

/* .phero--split — mellan, 2-kol (text vänster, foto höger), för förhållanden/status */
.phero--split{
    min-height:auto;
    background:var(--surface);
    overflow:hidden;
}
.phero--split::after{ display:none; }
.phero--split .phero__bg{
    position:absolute !important;
    inset:0 0 0 50% !important;
    z-index:0;
}
.phero--split .phero__inner{
    padding-top:calc(var(--hd-h) + clamp(24px, 4vw, 48px));
    padding-bottom:clamp(24px, 4vw, 48px);
    max-width:50%;
    align-items:center;
}
.phero--split .phero__card{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; box-shadow:none;
    padding:0; width:100%;
}
@media (max-width:760px){
    .phero--split .phero__bg{
        position:relative !important; inset:auto !important;
        height:200px;
    }
    .phero--split .phero__inner{ max-width:100%; padding-inline:clamp(18px, 5vw, 40px); }
}

/* .phero--banner — mellan (lägre än bas), bg-foto, för evenemang */
.phero--banner{
    min-height:max(38svh, calc(var(--hd-h) + 230px));
}
.phero--banner::after{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 15%, transparent) 0%,
        color-mix(in srgb, var(--ink) 55%, transparent) 100%);
}
.phero--banner .phero__inner{
    padding-top:var(--hd-h);
    padding-bottom:clamp(28px, 4vw, 48px);
}
.phero--banner .phero__card{
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    padding:clamp(18px, 2.4vw, 26px);
}

/* .phero--overlay / .phero--overlay-center — rubrik DIREKT på fotot, ingen
   platta ("rund vit ruta"). En botten-tyngd scrim + text-shadow håller texten
   läsbar mot ljusa snöfoton. overlay = nere till vänster, overlay-center =
   centrerad. Scrimmen byggs på var(--ink) så den följer riktningstemat. */
.phero--overlay,
.phero--overlay-center{
    min-height:max(56svh, calc(var(--hd-h) + 340px));
    color:#fff;
}
.phero--overlay .phero__inner,
.phero--overlay-center .phero__inner{
    padding-top:var(--hd-h);
    padding-bottom:clamp(28px, 5vw, 56px);
}
.phero--overlay .phero__card,
.phero--overlay-center .phero__card{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
    border:0; box-shadow:none; padding:0;
    width:min(780px, 100%);
    color:#fff;
    text-shadow:0 1px 22px rgba(8,12,18,.55), 0 1px 4px rgba(8,12,18,.45);
}
.phero--overlay .phero__title,
.phero--overlay-center .phero__title{ color:#fff; }
.phero--overlay .phero__lead p,
.phero--overlay-center .phero__lead p{ color:rgba(255,255,255,.92); }
.phero--overlay .eyebrow,
.phero--overlay-center .eyebrow{ color:rgba(255,255,255,.92); }

/* overlay — bottom-left, scrim weighted to the bottom where the text sits */
.phero--overlay::after{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 4%, transparent) 0%,
        rgba(0,0,0,0) 34%,
        color-mix(in srgb, var(--ink) 64%, transparent) 100%);
}

/* overlay-center — text vertically + horizontally centred, even scrim so the
   whole frame darkens slightly behind the centred copy */
.phero--overlay-center{ align-items:center; }
.phero--overlay-center::after{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 34%, transparent) 0%,
        color-mix(in srgb, var(--ink) 20%, transparent) 48%,
        color-mix(in srgb, var(--ink) 46%, transparent) 100%);
}
.phero--overlay-center .phero__inner{ justify-content:center; }
.phero--overlay-center .phero__card{ text-align:center; }
.phero--overlay-center .phero__lead{ margin-inline:auto; }
.phero--overlay-center .eyebrow{ justify-content:center; }

/* .phero--minimal — luftig sidrubrik utan platta och utan bakgrundston. Ett
   tunt accent-streck före eyebrow ger struktur i stället för en box. */
.phero--minimal{
    min-height:auto;
    background:transparent;
}
.phero--minimal .phero__bg{ display:none; }
.phero--minimal::after{ display:none; }
.phero--minimal .phero__inner{
    padding-top:calc(var(--hd-h) + clamp(28px, 4.5vw, 56px));
    padding-bottom:clamp(20px, 3vw, 36px);
}
.phero--minimal .phero__card{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
    border:0; box-shadow:none; padding:0;
    width:min(780px, 100%);
}
.phero--minimal .phero__title{ font-size:clamp(1.7rem, 4vw, 2.7rem); }
.phero--minimal .eyebrow::before{
    content:''; width:26px; height:1.5px; flex:0 0 auto;
    background:var(--accent); border-radius:2px; opacity:.85;
}

/* .phero--accent — färgad helbredds-platta med on-accent text. Bold kampanj-/
   säsongsrubrik utan foto. Bandet fyller även bakom den fixerade headern, där
   den vita default-headertexten landar fint (därför INGEN kab2-hd-flat). */
.phero--accent{
    min-height:auto;
    background:var(--accent);
    color:var(--on-accent);
}
.phero--accent .phero__bg{ display:none; }
.phero--accent::after{ display:none; }
.phero--accent .phero__inner{
    padding-top:calc(var(--hd-h) + clamp(28px, 4.5vw, 56px));
    padding-bottom:clamp(24px, 4vw, 44px);
}
.phero--accent .phero__card{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
    border:0; box-shadow:none; padding:0;
    width:min(780px, 100%);
    color:var(--on-accent);
}
.phero--accent .phero__title{ color:var(--on-accent); }
.phero--accent .phero__lead p{ color:color-mix(in srgb, var(--on-accent) 86%, transparent); }
.phero--accent .eyebrow{ color:color-mix(in srgb, var(--on-accent) 80%, transparent); }

/* Mobile — snow photos are too bright to write on directly, so the cardless
   overlay variants deepen the scrim instead of splitting to a panel (the way
   the base .hero does). Slightly shorter min-height keeps them from dominating
   small viewports. */
@media (max-width:600px){
    .phero--overlay,
    .phero--overlay-center{ min-height:max(50svh, calc(var(--hd-h) + 280px)); }
    .phero--overlay::after{
        background:linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 12%, transparent) 0%,
            color-mix(in srgb, var(--ink) 30%, transparent) 45%,
            color-mix(in srgb, var(--ink) 72%, transparent) 100%);
    }
    .phero--overlay-center::after{
        background:linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 46%, transparent) 0%,
            color-mix(in srgb, var(--ink) 34%, transparent) 50%,
            color-mix(in srgb, var(--ink) 58%, transparent) 100%);
    }
}

/* ============================== POST-HERO BAND TIGHTENING ====================
   The .hero / .phero already ends with generous internal padding-bottom (so
   the hero card sits comfortably above the bottom edge). When a .band sits
   directly after a hero, its full padding-block:var(--band-pad) compounds
   with that hero bottom space and the gap reads as doubled (up to ~208px).
   Tighten the first content band's TOP padding so the rhythm matches the
   prototype's intent without compounding.

   --band-pad-tight is exposed as a token so editors can override per-site
   in Customize → Additional CSS or via inline style on a specific band. */
:root{ --band-pad-tight: clamp(24px, 3.5vw, 48px); }

.hero + .band,
.hero + #kab2-after-hero + .band,
.phero + .band,
.band--cond + .band:not(.band--cond){
  padding-top:var(--band-pad-tight);
}

/* ============================== CONDITIONS ============================== */
.band--cond{ padding:0; }
.app .band--cond .wrap{ margin-top:-44px; position:relative; z-index:20; }
.phero + .band--cond .wrap, .band--cond.compact .wrap{ margin-top:0; }
.cond{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px clamp(16px,3vw,26px); }
.cond--compact{ box-shadow:none; }
.cond__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cond__live{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); }
.cond__pulse{ width:8px; height:8px; border-radius:50%; background:var(--live); --pulse-c:color-mix(in srgb, var(--live) 50%, transparent); box-shadow:0 0 0 0 var(--pulse-c); animation:b-pulse 2s infinite; }
/* Shared "live" ping — colour via --pulse-c (the live-dot status indicators). */
@keyframes b-pulse{ 0%{box-shadow:0 0 0 0 var(--pulse-c)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@media (prefers-reduced-motion: reduce){ .cond__pulse{ animation:none; } }
.cond__updated{ font-size:.74rem; color:var(--muted); }
.cond__rail{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -4px; padding:0 4px 2px; scrollbar-width:none; }
.cond__rail::-webkit-scrollbar{ display:none; }
.cond__cell{ flex:0 0 auto; min-width:96px; scroll-snap-align:start; padding:10px 16px 10px 0; border-right:1px solid var(--line); }
.cond__cell:last-child{ border-right:none; }
.cond__val{ font-family:var(--font-mono); font-size:1.7rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.cond__unit{ font-size:.78rem; font-weight:400; color:var(--muted); margin-left:3px; }
.cond__lbl{ margin-top:7px; font-size:.74rem; color:var(--muted); }

/* ============================== INTRO ============================== */
.intro{ max-width:760px; }
.intro__title{ font-size:clamp(1.6rem,5vw,2.6rem); margin:.45em 0 0; text-wrap:balance; }
.intro__body{ margin-top:1.1em; }
.intro__body p{ margin:0; font-size:clamp(1.02rem,2.4vw,1.18rem); color:var(--ink-soft); max-width:60ch; }

/* ============================== FEATURE SPLIT ============================== */
.feature{ display:grid; gap:clamp(24px,5vw,56px); align-items:center; }
.feature__title{ font-size:clamp(1.7rem,5.5vw,2.8rem); margin:.3em 0 0; text-wrap:balance; }
.feature__text{ margin-top:1em; }
.feature__text p{ margin:0; color:var(--ink-soft); font-size:1.05rem; max-width:46ch; }
.feature__body .link-arrow{ margin-top:1.4em; }
.feature__media .photo{ box-shadow:var(--shadow); }

.collage{ position:relative; }
.collage__b{ position:absolute; width:46%; right:-6%; bottom:-9%; border:5px solid var(--surface); box-shadow:var(--shadow); }
@media (max-width:560px){ .collage__b{ width:42%; right:0; bottom:-7%; border-width:4px; } }

.statline{ display:flex; flex-wrap:wrap; gap:24px 30px; margin-top:1.4em; }
.stat__n{ font-family:var(--font-display); font-weight:var(--display-w); font-size:clamp(1.9rem,6vw,2.7rem); line-height:1; letter-spacing:-.02em; }
[data-dir="minimal"] .stat__n{ font-weight:400; }
.stat__l{ margin-top:6px; font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:1.3em; }
.chip{ font-size:.82rem; font-weight:600; padding:.5em .9em; border-radius:999px; background:var(--surface2); border:1px solid var(--line); color:var(--ink-soft); }
[data-dir="minimal"] .chip{ border-radius:2px; background:transparent; }

/* the_tags() outputs bare <a> links inside .entry-tags.chips — give each tag the
   .chip pill look (the tag links can't carry the .chip class themselves). */
.entry-tags a{ display:inline-flex; align-items:center; font-size:.82rem; font-weight:600; padding:.5em .9em;
  border-radius:999px; background:var(--surface2); border:1px solid var(--line); color:var(--ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.entry-tags a:hover{ border-color:var(--accent); color:var(--accent); }
[data-dir="minimal"] .entry-tags a{ border-radius:2px; background:transparent; }

/* ============================== EAT ============================== */
/* .sec-head / .sec-head h2 live in widget-frame.css. */
.eat-grid{ display:grid; gap:clamp(18px,3vw,30px); }
.eat-card__body{ padding-top:18px; }
.eat-card__kind{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.eat-card h3{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.5rem; margin:.4em 0 .3em; letter-spacing:var(--display-ls); }
.eat-card p{ margin:0; color:var(--ink-soft); max-width:48ch; }

/* ============================== NEWS ============================== */
.band--news{ background:var(--news-bg); }
.news{ display:grid; gap:24px; }
.news__text h2{ font-size:clamp(1.6rem,5vw,2.4rem); margin:.3em 0 .4em; }
.news__text p{ margin:0; color:var(--ink-soft); max-width:46ch; }
.news__form form{ display:flex; gap:10px; flex-wrap:wrap; }
.news__form input{ flex:1 1 220px; min-width:0; padding:.95em 1.1em; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
/* Shared focus affordance — the same accent ring the .b-input primitive uses,
   so every themed text field (pill search/news, boxed boende search, footer)
   focuses identically. */
.news__form input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
[data-dir="minimal"] .news__form input{ border-radius:2px; }

/* ============================== LIFTS / SLOPES ============================== */
.lift-list{ display:grid; gap:0; }
.lift{ display:grid; grid-template-columns:auto 1fr auto; gap:16px 18px; align-items:start; padding:22px 0; border-top:1px solid var(--line); }
.lift:last-child{ border-bottom:1px solid var(--line); }
.lift__no{ font-family:var(--font-mono); font-size:.9rem; color:var(--muted); padding-top:4px; }
.lift__name{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.4rem; letter-spacing:var(--display-ls); }
.lift__type{ font-size:.82rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.lift__desc{ margin:.6em 0 0; color:var(--ink-soft); max-width:42ch; }
.lift__status{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
/* .dot / .dot--on live in widget-frame.css. */

.grade-row{ display:flex; flex-wrap:wrap; gap:18px 22px; margin:.3em 0 0; }
.grade{ display:inline-flex; align-items:baseline; gap:8px; }
.grade__dot{ width:11px; height:11px; border-radius:50%; align-self:center; }
.grade__n{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.5rem; }
.grade__l{ font-size:.86rem; color:var(--muted); }
.facts{ list-style:none; padding:0; margin:1.5em 0 0; display:grid; gap:12px; }
.facts li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft); }
.facts li svg{ color:var(--accent); margin-top:4px; flex:0 0 auto; }
.hours{ margin-top:1.6em; display:inline-flex; flex-direction:column; gap:3px; padding:14px 18px; background:var(--surface2); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hours__lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.hours__val{ font-weight:600; }

/* ============================== SEARCH (stay) ============================== */
.band--search{ padding-top:clamp(20px,3vw,28px); padding-bottom:0; }
.search{ display:grid; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.search__field{ display:flex; flex-direction:column; gap:6px; }
.search__field span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.search__field input{ padding:.8em .9em; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface2); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
.search__field input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.search__btn{ justify-content:center; }

/* ============================== CABINS ============================== */
.stack{ display:grid; gap:clamp(20px,4vw,34px); }
.cabin{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:grid; }
.cabin__media{ border-radius:0; }
.cabin__media image-slot{ border-radius:0; }
.cabin__body{ padding:clamp(20px,4vw,30px); }
.cabin__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cabin__top h3{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.6rem; margin:0; letter-spacing:var(--display-ls); }
.cabin__tag{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); padding:.45em .8em; border-radius:999px; white-space:nowrap; }
[data-dir="minimal"] .cabin__tag{ border-radius:2px; }
.cabin__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 0; color:var(--muted); font-size:.92rem; }
.cabin__meta b{ color:var(--ink); font-weight:700; }
.cabin__meta .sep{ width:4px; height:4px; border-radius:50%; background:var(--line); }
.cabin__desc{ margin:14px 0 20px; color:var(--ink-soft); max-width:56ch; }

/* ============================== CTA BAND ============================== */
.band--ctaband{ background:var(--accent); color:var(--on-accent); }
.ctaband{ text-align:center; display:grid; gap:20px; justify-items:center; }
.ctaband h2{ font-size:clamp(1.7rem,5.5vw,2.7rem); margin:0; text-wrap:balance; }
.ctaband p{ margin:0; max-width:42ch; opacity:.9; font-size:1.08rem; }
.band--ctaband .btn--primary{ background:#fff; color:var(--accent); }
.band--ctaband .btn--primary:hover{ filter:none; background:rgba(255,255,255,.9); }

/* ============================== CONTACT ============================== */
.band--contact{ padding-top:calc(var(--hd-h) + clamp(40px,8vw,80px)); }
.contact{ display:grid; gap:clamp(28px,5vw,56px); }
.contact__title{ font-size:clamp(2rem,6vw,3.2rem); margin:.3em 0 0; text-wrap:balance; }
.contact__rows{ margin-top:1.8em; display:grid; gap:0; }
.crow{ display:flex; flex-direction:column; gap:4px; padding:18px 0; border-top:1px solid var(--line); }
.crow:last-child{ border-bottom:1px solid var(--line); }
.crow__k{ font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.crow__v{ font-size:1.25rem; font-weight:600; }
a.crow:hover .crow__v{ color:var(--accent); }
.contact__sign{ margin-top:1.6em; }

/* ============================== FOOTER (v2 — norrsken) ==============================
   Pine-deep footer with a faint animated aurora glow (two blurred radial
   blobs drifting behind the content). 4-column grid: brand+blurb / Hitta
   hit / Genvägar / newsletter. From Claude Design files2/Kåbdalis2.html. */
.ft{ background:var(--foot-bg); color:var(--foot-ink); margin-top:clamp(72px,10vw,120px); position:relative; overflow:hidden;
  /* Skip rendering + aurora compositing until the footer is scrolled near —
     it's always below the fold. contain-intrinsic-size reserves a sensible box
     so the scrollbar doesn't jump (and stores the real size after first paint).
     Scoped to the footer; applying this to every .band would risk find-in-page
     / anchor-scroll quirks. */
  content-visibility:auto; contain-intrinsic-size:auto 640px; }
.ft::before, .ft::after{ content:""; position:absolute; pointer-events:none; top:-170px; height:400px; border-radius:50%; filter:blur(44px); opacity:.8; }
.ft::before{ left:-6%; width:64%; background:
  radial-gradient(ellipse 52% 58% at 38% 55%, rgba(98,238,158,.52), transparent 70%),
  radial-gradient(ellipse 42% 50% at 72% 38%, rgba(118,226,198,.34), transparent 72%); }
.ft::after{ right:-6%; width:58%; background:
  radial-gradient(ellipse 52% 58% at 58% 50%, rgba(172,118,240,.46), transparent 70%),
  radial-gradient(ellipse 40% 48% at 28% 62%, rgba(216,122,214,.3), transparent 72%); }
@media (prefers-reduced-motion: no-preference){
  .ft::before{ animation:aur1 14s ease-in-out infinite alternate; }
  .ft::after{ animation:aur2 18s ease-in-out infinite alternate; }
  @keyframes aur1{ from{ transform:translateX(-5%) skewX(-12deg) scaleY(.92);} to{ transform:translateX(14%) skewX(9deg) scaleY(1.1);} }
  @keyframes aur2{ from{ transform:translateX(9%) skewX(11deg) scaleY(1.08);} to{ transform:translateX(-11%) skewX(-7deg) scaleY(.9);} }
}
.ft__main, .ft__bottom{ position:relative; z-index:2; }
.ft a{ text-decoration:none; }
.ft__main{
  max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,90px) clamp(20px,4vw,44px) 36px;
  display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:clamp(28px,4vw,56px);
}
/* Footer logo lockup — bigger flake tinted aurora-green, snow-white wordmark */
.ft .logo{ color:#fdfdf8; }
.ft .logo .wm{ height:22px; }
.ft .logo .flake{ color:var(--aurora-flake); width:28px; height:28px; top:2px; }
.ft__blurb{ margin-top:14px; font-size:15px; color:var(--foot-blurb); max-width:30ch; }

/* Social row under the brand blurb — pill links in the design vocabulary */
.ft__social{ margin-top:18px; }
.ft__social ul{ display:flex; flex-wrap:wrap; gap:9px; }
.ft__social a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
  color:var(--foot-ink); opacity:.92; font-size:14px; font-weight:600;
  transition:opacity .2s ease, border-color .2s ease, background .2s ease;
}
.ft__social a:hover{ opacity:1; border-color:var(--aurora-flake); background:rgba(255,255,255,.1); text-decoration:none; }
.ft h4{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--foot-muted); margin:0 0 14px; font-weight:600; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15.5px; }
.ft ul a{ color:var(--foot-ink); opacity:.9; transition:opacity .2s ease; }
.ft ul a:hover{ opacity:1; text-decoration:underline; }
.ft__news p{ font-size:15px; color:var(--foot-blurb); margin:0 0 14px; }
.ft__form{ display:flex; gap:8px; }
.ft__form input{
  flex:1; min-width:0; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
  border-radius:999px; padding:12px 18px; color:#fff; font:500 15px var(--font-body); outline:none;
}
.ft__form input::placeholder{ color:#93a596; }
.ft__form input:focus{ border-color:var(--aurora-flake); }
.ft__form button{ padding:12px 20px; font-size:14.5px; }
.btn--falu{ background:var(--falu); color:var(--on-accent); box-shadow:0 14px 30px -14px var(--falu); }
.btn--falu:hover{ background:var(--falu-deep); }
.ft__bottom{
  border-top:1px solid var(--foot-line);
  max-width:var(--maxw); margin:0 auto; padding:22px clamp(20px,4vw,44px) 30px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--foot-muted);
}
@media (max-width:860px){ .ft__main{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ft__main{ grid-template-columns:1fr; } }

/* ============================== HOME WIDGETS ============================== */
/* .sec-head--row (+ its mobile rule) live in widget-frame.css. */
.ow{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(18px,3vw,28px); display:grid; gap:18px 44px; }
.ow__h{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ow__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.ow__row:last-child{ border-bottom:none; }
.ow__name{ display:inline-flex; align-items:center; gap:10px; font-weight:600; }
.ow__time{ font-family:var(--font-mono); font-size:.95rem; color:var(--ink-soft); white-space:nowrap; }
.ow__note{ grid-column:1 / -1; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; }

.band--events{ background:var(--bg2); }
.ev-grid{ display:grid; gap:14px; margin-top:6px; }
.evcard{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; transition:transform .18s ease, box-shadow .18s ease; }
.evcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.evcard__date{ flex:0 0 auto; width:56px; height:62px; border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.evcard__d{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.5rem; line-height:1; }
.evcard__m{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; margin-top:3px; opacity:.92; }
.evcard__body{ min-width:0; }
.evcard__tag{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
.evcard h3{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.12rem; margin:.32em 0 .3em; letter-spacing:var(--display-ls); text-wrap:balance; }
.evcard__meta{ font-size:.86rem; color:var(--muted); }
.evcard__more{ margin-top:11px; display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:600; color:var(--accent); }
.evcard__more svg{ transition:transform .2s; }
.evcard__more:hover svg{ transform:translateX(3px); }
.ev-foot{ margin-top:22px; display:flex; justify-content:center; }

.posts{ display:grid; gap:clamp(20px,3vw,28px); margin-top:6px; }
.post{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.post__media{ border-radius:0; }
.post__media image-slot, .post__media img{ border-radius:0; }
.post__body{ padding:clamp(18px,3vw,26px); }
.post__meta{ display:flex; align-items:center; gap:10px; }
.post__cat{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
.post__date{ font-size:.78rem; color:var(--muted); }
.post__date::before{ content:'\00b7'; margin-right:10px; color:var(--muted); }
.post h3{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.35rem; margin:.45em 0 .35em; letter-spacing:var(--display-ls); text-wrap:balance; }
.post p{ margin:0 0 16px; color:var(--ink-soft); }

/* ============================== BOENDE FILTERS ============================== */
.stay-layout{ display:grid; gap:clamp(18px,3vw,36px); align-items:start; }

.filters__toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-weight:600; box-shadow:var(--shadow); transition:transform .12s ease; }
.filters__toggle:active{ transform:scale(.99); }
.filters__toggle-l{ display:inline-flex; align-items:center; gap:9px; }
.filters__toggle-chev{ transition:transform .25s ease; color:var(--muted); display:flex; }
.filters.is-open .filters__toggle-chev{ transform:rotate(180deg); }
.filters__count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; }

.filters__body{ display:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px clamp(16px,2.5vw,22px) 20px; box-shadow:var(--shadow); margin-top:12px; }
.filters.is-open .filters__body{ display:block; }
.filters__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.filters__head > span{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.2rem; letter-spacing:var(--display-ls); }
.filters__reset{ font-size:.82rem; font-weight:600; color:var(--accent); }
.filters__reset:hover{ text-decoration:underline; }

.filt{ margin-bottom:16px; }
.filt__label{ font-weight:600; font-size:.92rem; margin-bottom:9px; }
.filt-sep{ height:1px; background:var(--line); margin:18px 0; }

.rng{ position:relative; height:20px; margin:4px 0 28px; }
.rng__track{ position:absolute; top:8px; left:9px; right:9px; height:4px; border-radius:3px; background:var(--line); }
.rng__fill{ position:absolute; top:0; bottom:0; background:var(--accent); border-radius:3px; }
.rng__in{ position:absolute; top:0; left:0; width:100%; height:20px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.rng__in::-webkit-slider-runnable-track{ background:transparent; border:none; }
.rng__in::-moz-range-track{ background:transparent; border:none; }
.rng__in::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:none; box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.22); cursor:pointer; transition:transform .12s ease; margin-top:1px; }
.rng__in::-webkit-slider-thumb:hover{ transform:scale(1.1); }
.rng__in::-webkit-slider-thumb:active{ transform:scale(1.18); box-shadow:0 0 0 1px var(--accent), 0 2px 8px rgba(0,0,0,.28); }
.rng__in::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 2px 6px rgba(0,0,0,.22); cursor:pointer; }
.rng__cap{ position:absolute; top:24px; left:0; font-size:.82rem; color:var(--muted); white-space:nowrap; }

.pick{ position:relative; }
.pick select{ width:100%; -webkit-appearance:none; appearance:none; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:.72em 2.4em .72em .9em; font:inherit; color:var(--ink); cursor:pointer; transition:border-color .18s ease; }
.pick select:focus{ outline:none; border-color:var(--accent); }
.pick__chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); display:flex; }

.chk-row{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.chk{ display:flex; align-items:center; gap:11px; padding:8px 2px; font-size:.96rem; font-weight:500; color:var(--ink); text-align:left; }
.chk__box{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line); display:grid; place-items:center; color:#fff; background:var(--surface); transition:background .15s ease, border-color .15s ease; flex:0 0 auto; }
.chk__box svg{ opacity:0; transform:scale(.5); transition:.16s var(--ease-spring); }
.chk.is-on .chk__box{ background:var(--accent); border-color:var(--accent); }
.chk.is-on .chk__box svg{ opacity:1; transform:none; }
[data-dir="minimal"] .chk__box{ border-radius:2px; }

.results__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.results__count{ font-size:1.02rem; color:var(--ink-soft); }
.results__count b{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.3rem; color:var(--ink); margin-right:3px; }
.results__clear{ font-size:.85rem; font-weight:600; color:var(--muted); display:inline-flex; gap:6px; align-items:center; transition:color .15s ease; }
.results__clear:hover{ color:var(--accent); }
.results__clear .x{ font-size:1.1rem; line-height:1; }
.results__none{ text-align:center; padding:54px 20px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:14px; }
.results__none svg{ color:var(--accent); opacity:.55; }
.results__none p{ margin:0; }

.cabin__amen{ display:flex; flex-wrap:wrap; gap:7px; margin:13px 0 0; }
.amen{ font-size:.74rem; font-weight:600; color:var(--ink-soft); background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:.35em .75em; }
[data-dir="minimal"] .amen{ border-radius:2px; }

/* ============================== SIGNATURE DETAILS ============================== */
/* scroll-progress hairline */
.sprog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none; transition:opacity .15s ease; }
.sprog__bar{ display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
/* During a page navigation the .navload bar owns the top edge — hide the
   reading-progress hairline so the two don't stack (set by theme.js). */
body.is-navloading .sprog{ opacity:0; }

/* navigation loader — instant top-bar feedback on page change.
   Plain multi-page loads have a "time to first byte" gap where the old page
   still shows and a click feels unregistered/stuck. On a qualifying link click
   or form submit, theme.js shows this bar trickling toward ~90%, then completes
   as the new page takes over. Element is injected by theme.js. Sits above the
   header; offset under the WP admin bar to match .hd. */
.navload{ position:fixed; top:0; left:0; right:0; height:3px; z-index:90; pointer-events:none;
  opacity:0; transition:opacity .25s ease .15s; }
.navload.is-active{ opacity:1; transition:opacity .12s ease; }
.navload__bar{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), var(--falu));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 4px color-mix(in srgb, var(--falu) 60%, transparent);
  transition:transform .2s cubic-bezier(.2,.7,.3,1); }
body.admin-bar .navload{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .navload{ top:46px; } }
@media (prefers-reduced-motion: reduce){ .navload__bar{ transition:transform .05s linear; } }

/* marquee strip */
.marq{ overflow:hidden; white-space:nowrap; --marq-bg:var(--accent); background:var(--marq-bg); color:var(--on-accent);
  border-block:1px solid color-mix(in srgb, var(--marq-bg) 78%, #000); }
.marq--ink{ --marq-bg:var(--foot-bg); color:var(--foot-ink); }
.marq__track{ display:inline-flex; align-items:center; gap:0; animation:marqRun 34s linear infinite; }
.marq__item{ display:inline-flex; align-items:center; gap:18px; padding:13px 0; }
.marq__txt{ font-family:var(--font-display); font-weight:var(--display-w); letter-spacing:.005em; font-size:clamp(1.05rem,2.4vw,1.5rem); padding:0 26px; }
.marq__star{ display:inline-flex; opacity:.7; }
.marq:hover .marq__track{ animation-play-state:paused; }
@keyframes marqRun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marq__track{ animation:none; } .marq{ overflow-x:auto; } }

/* magnetic button wrap */
.mag{ display:inline-block; transition:transform .35s var(--ease-out); }

/* editorial leading-line on section eyebrows (not on hero) — selector lives in
   widget-frame.css alongside the other .sec-head/.eyebrow primitives. */

/* (logo hover spin lives in the LOGO v2 block — quarter-turn on .flake) */

/* (hero scroll-cue now lives in the .hero__scroll block above — chevron+bob
   animation replaced the old text-and-line treatment.) */

/* ============================== MOTION ============================== */
/* hover / press micro-interactions (transitions — always safe, settle to end state) */
.btn{ transition:transform var(--t-fast) ease, filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.btn:active{ transform:scale(.96); }
.link-arrow:active, .evcard__more:active{ transform:translateY(1px); }

.photo img{ transition:transform .6s var(--ease-out); }
.eat-card:hover .photo img, .post:hover .post__media img, .cabin:hover .cabin__media img, .mega__feature:hover img{ transform:scale(1.05); }

.post, .cabin{ transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease; }
.post:hover, .cabin:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(40,30,15,.45); }
.eat-card{ transition:transform .26s var(--ease-out); }
.eat-card .photo{ transition:box-shadow .3s ease, transform .26s var(--ease-out); }
.eat-card:hover .photo{ transform:translateY(-5px); box-shadow:0 22px 46px -26px rgba(40,30,15,.4); }
.eat-card .photo, .post__media, .cabin__media{ overflow:hidden; }

.mega__link, .sheet__sub, .sheet__gh{ transition:background .15s ease, color .15s ease, transform .12s ease; }
.mega__link:active, .sheet__sub:active{ transform:scale(.99); }
.burger:active{ transform:scale(.92); }
.logo{ transition:opacity .2s ease; }
.logo:active{ transform:scale(.97); }
.cond__cell{ transition:transform .2s ease; }

@media (prefers-reduced-motion: no-preference){
  /* ambient hero — slow ken-burns, content stays readable */
  .hero__bg img, .phero__bg img{ animation:kenburns 26s ease-in-out infinite alternate; transform-origin:50% 45%; }
  @keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.09); } }

  /* route / screen entrance — transform-led so content is never hidden if it doesn't run */
  .main > .screen{ animation:screenIn .5s cubic-bezier(.2,.72,.28,1) both; }
  @keyframes screenIn{ from{ transform:translateY(12px); } to{ transform:none; } }

  /* mega-menu entrance + staggered items */
  .hd__mega:not([hidden]){ animation:megaIn .22s var(--ease-spring) both; }
  @keyframes megaIn{ from{ opacity:0; transform:translateY(-9px); } to{ opacity:1; transform:none; } }
  .hd__mega:not([hidden]) .mega__link{ animation:popItem .34s var(--ease-out) both; }
  .hd__mega:not([hidden]) .mega__feature{ animation:popItem .4s var(--ease-out) .06s both; }
  .mega__link:nth-child(1){ animation-delay:.03s; } .mega__link:nth-child(2){ animation-delay:.06s; }
  .mega__link:nth-child(3){ animation-delay:.09s; } .mega__link:nth-child(4){ animation-delay:.12s; }
  .mega__link:nth-child(5){ animation-delay:.15s; } .mega__link:nth-child(6){ animation-delay:.18s; }
  .mega__link:nth-child(7){ animation-delay:.21s; }
  @keyframes popItem{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

  /* mobile sheet entrance + staggered groups */
  .hd__sheet:not([hidden]){ animation:fadeIn .24s ease both; }
  .hd__sheet:not([hidden]) .sheet__group{ animation:popItem .42s var(--ease-out) both; }
  .sheet__group:nth-child(1){ animation-delay:.05s; } .sheet__group:nth-child(2){ animation-delay:.1s; }
  .sheet__group:nth-child(3){ animation-delay:.15s; } .sheet__group:nth-child(4){ animation-delay:.2s; }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
}

/* ============================== DELIGHT + CUSTOMIZE ============================== */
.snow{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.cond__val, .stat__n{ font-variant-numeric:tabular-nums; }

/* The runtime Customize FAB/panel (.cz / .cz-fab / .cz-panel / .cz-seg /
   .cz-swatch / .cz-toggle / .cz-range / .cz-sub …) from the design prototype is
   not rendered on the site — direction/density/signature/accent are applied
   server-side from WP Customize (functions.php → kabdalis2_body_open_attrs),
   and the only runtime layer is the headless window.kab2Customize JS API, which
   needs no panel CSS. ~60 lines of dead styles removed. */

/* ============================== SPACING DENSITY ============================== */
/* The --band-pad token overrides for [data-density] live in tokens.css —
   here we only adjust component-level spacing that isn't a pure token. */
[data-density="cozy"] .sec-head{ margin-bottom:clamp(18px,3vw,28px); }
[data-density="compact"] .sec-head{ margin-bottom:clamp(12px,2vw,20px); }
[data-density="cozy"] .feature{ gap:clamp(22px,4vw,42px); }
[data-density="compact"] .feature{ gap:clamp(18px,3vw,32px); }
[data-density="compact"] .intro__body, [data-density="compact"] .feature__text{ margin-top:.8em; }
[data-density="compact"] .hero__inner{ padding-bottom:clamp(72px,12vh,120px); }
[data-density="compact"] .eat-grid, [data-density="compact"] .posts{ gap:clamp(14px,2vw,20px); }
[data-density="compact"] .stack{ gap:clamp(16px,2.6vw,22px); }
[data-density="compact"] .wknd__cols, [data-density="compact"] .mtn-row{ gap:clamp(12px,2vw,18px); }

/* ============================== SUNLIGHT EFFECT ============================== */
/* NOTE: prototype "delight" overlay that nothing currently renders (.sunfx
   appears only in this file). Kept for seasonal opt-in; the reduced-motion
   guard below already stops the animation, and the small-screen rule disables
   the continuous blurred-disc compositing on phones so it can never drain
   battery there if a future block does render it. */
@media (max-width:600px){ .sunfx{ display:none; } }
.sunfx{ position:fixed; inset:0; z-index:39; pointer-events:none; overflow:hidden;
  --sun-op:0.32; --sun-core:rgba(255,234,198,1); --sun-streak:rgba(255,238,210,1); }
.sunfx__disc, .sunfx__sweep{ position:absolute; will-change:transform, opacity; mix-blend-mode:soft-light; }
.sunfx__disc{ border-radius:50%; background:radial-gradient(circle at 50% 50%, var(--sun-core) 0%, transparent 62%); filter:blur(10px); }
.sunfx__disc--a{ width:80vmax; height:80vmax; top:-32vmax; left:-26vmax; opacity:calc(var(--sun-op) * .62);
  animation:sunDriftA 47s ease-in-out infinite alternate; }
.sunfx__disc--b{ width:58vmax; height:58vmax; top:-12vmax; right:-24vmax;
  background:radial-gradient(circle at 50% 50%, var(--sun-core) 0%, transparent 58%); opacity:calc(var(--sun-op) * .34);
  animation:sunDriftB 63s ease-in-out infinite alternate; }
.sunfx__sweep{ inset:-30% -50%; opacity:calc(var(--sun-op) * .5);
  background:linear-gradient(108deg, transparent 42%, var(--sun-streak) 50%, transparent 58%);
  animation:sunSweep 39s ease-in-out infinite alternate; }
/* multi-stop, asymmetric paths so the drift feels organic, not metronomic */
@keyframes sunDriftA{
  0%{ transform:translate(-5vw,-3vh) scale(1); }
  28%{ transform:translate(14vw,9vh) scale(1.07); }
  55%{ transform:translate(31vw,4vh) scale(1.12); }
  78%{ transform:translate(22vw,16vh) scale(1.06); }
  100%{ transform:translate(40vw,11vh) scale(1.1); }
}
@keyframes sunDriftB{
  0%{ transform:translate(8vw,3vh) scale(1.05); }
  40%{ transform:translate(-10vw,15vh) scale(1.14); }
  72%{ transform:translate(-20vw,6vh) scale(1.04); }
  100%{ transform:translate(-3vw,18vh) scale(1.1); }
}
@keyframes sunSweep{ 0%{ transform:translateX(-26%); } 100%{ transform:translateX(24%); } }
@media (prefers-reduced-motion: reduce){ .sunfx__disc, .sunfx__sweep{ animation:none; } }

/* ============================== CAMPAIGN BAND ============================== */
.band--campaign{ padding-block:clamp(28px,4vw,52px); }
.camp{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,32px); align-items:center;
  background:var(--accent); color:var(--on-accent); border-radius:var(--radius); padding:clamp(22px,3.6vw,40px); box-shadow:var(--shadow); overflow:hidden; }
.camp::after{ content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.07); }
.camp__badge{ position:relative; z-index:1; display:grid; place-items:center; width:clamp(78px,11vw,116px); height:clamp(78px,11vw,116px); border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.5); }
.camp__badge span{ font-family:var(--font-display); font-weight:var(--display-w); font-size:clamp(1.4rem,3.4vw,2.1rem); letter-spacing:-.02em; }
.camp__body{ position:relative; z-index:1; }
.camp__title{ font-size:clamp(1.5rem,4vw,2.3rem); margin:.32em 0 0; text-wrap:balance; }
.camp__text{ margin:.7em 0 0; max-width:56ch; opacity:.94; }
.camp__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:1.35em; }
.camp__code{ font-size:.86rem; opacity:.92; } .camp__code b{ font-family:var(--font-mono); letter-spacing:.04em; }
.band--campaign .btn--primary{ background:#fff; color:var(--accent); }
.band--campaign .btn--primary:hover{ background:rgba(255,255,255,.9); filter:none; }
@media (max-width:540px){ .camp{ grid-template-columns:1fr; } }

/* ============================== WEEKEND ARTICLE ============================== */
.band--weekend{ background:var(--bg2); }
.wknd__head{ max-width:760px; }
.wknd__title{ font-size:clamp(1.7rem,5vw,2.6rem); margin:.3em 0 0; text-wrap:balance; }
.wknd__byline{ display:flex; align-items:center; gap:12px; margin-top:.9em; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.wknd__dot{ width:4px; height:4px; border-radius:50%; background:var(--muted); }
.wknd__intro{ margin:1.05em 0 0; font-size:clamp(1.02rem,2.2vw,1.16rem); color:var(--ink-soft); max-width:62ch; }
.wknd__cols{ display:grid; gap:clamp(16px,3vw,26px); margin-top:clamp(24px,4vw,40px); }
.sched{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,2.6vw,24px); box-shadow:var(--shadow); }
.sched__head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.sched__ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--accent); flex:0 0 auto; }
.sched__head strong{ display:block; font-family:var(--font-display); font-weight:var(--display-w); font-size:1.2rem; letter-spacing:var(--display-ls); }
.sched__head em{ font-style:normal; font-size:.82rem; color:var(--muted); }
.sched__list{ list-style:none; margin:0; padding:0; }
.sched__row{ display:grid; grid-template-columns:42px 60px 1fr auto; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.sched__row:last-child{ border-bottom:none; }
.sched__day{ font-family:var(--font-mono); font-size:.76rem; font-weight:700; text-transform:uppercase; color:var(--accent); }
.sched__time{ font-family:var(--font-mono); font-size:.84rem; color:var(--ink-soft); }
.sched__name{ font-weight:600; min-width:0; }
.sched__tag{ font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface2); border:1px solid var(--line); padding:.3em .6em; border-radius:999px; white-space:nowrap; }
[data-dir="minimal"] .sched__tag{ border-radius:2px; }
.wknd__cta{ margin-top:1.6em; }

/* ============================== FORECAST ============================== */
.fc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(16px,2.4vw,22px); container-type:inline-size; }
/* Container-query refinement (reference pattern for the card widgets): the
   forecast collapses its 5-up grid based on ITS OWN column width, so it stays
   readable when placed in a narrow widget column on desktop — not just at a
   narrow viewport. Purely additive; the @media(max-width:600px) rule below
   remains the row-layout fallback for phones. */
@container (max-width:440px){ .fc__grid{ grid-template-columns:repeat(2,1fr); } }
@container (max-width:240px){ .fc__grid{ grid-template-columns:1fr; } }
.fc__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.fc__head .ow__h{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.fc__note{ font-size:.75rem; color:var(--muted); }
.fc__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.fc__day{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 4px; border-radius:var(--radius-sm); background:var(--surface2); border:1px solid transparent; }
.fc__day.is-today{ border-color:color-mix(in srgb,var(--accent) 40%, var(--line)); background:color-mix(in srgb,var(--accent) 7%, var(--surface2)); }
.fc__dname{ font-weight:700; font-size:.82rem; }
.fc__icon{ color:var(--accent); }
.fc__hi{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.3rem; line-height:1; }
.fc__lo{ font-size:.82rem; color:var(--muted); }
.fc__snow{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); margin-top:2px; white-space:nowrap; }
.fc__snow svg{ color:var(--accent); }

/* ============================== WEBCAM ============================== */
.mtn-row{ display:grid; gap:clamp(14px,2.4vw,22px); }
.wcam{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.wcam__frame{ position:relative; }
.wcam__photo{ border-radius:0; }
.wcam__live{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:#fff; background:rgba(10,12,14,.55); padding:.4em .7em; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.wcam__pulse{ width:8px; height:8px; border-radius:50%; background:#ff5a4d; --pulse-c:rgba(255,90,77,.5); box-shadow:0 0 0 0 var(--pulse-c); animation:b-pulse 1.8s infinite; }
@media (prefers-reduced-motion: reduce){ .wcam__pulse{ animation:none; } }
.wcam__loc{ position:absolute; bottom:12px; left:12px; color:#fff; font-weight:600; font-size:.92rem; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.wcam__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; flex-wrap:wrap; }
.wcam__tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.wcam__tab{ font-size:.78rem; font-weight:600; color:var(--ink-soft); padding:.4em .8em; border-radius:999px; border:1px solid var(--line); transition:background .16s, color .16s, border-color .16s; }
.wcam__tab:hover{ color:var(--ink); }
.wcam__tab.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
[data-dir="minimal"] .wcam__tab{ border-radius:2px; }
.wcam__upd{ font-size:.74rem; color:var(--muted); }

/* ============================== LIFT PASS ============================== */
.lp{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(16px,2.4vw,22px); }
.lp__cols{ display:grid; grid-template-columns:1fr auto auto; gap:8px 18px; align-items:center; }
.lp__cols--head{ padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:2px; }
.lp__ch{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:right; min-width:52px; }
.lp__row{ padding:11px 0; border-bottom:1px solid var(--line-soft); }
.lp__row:last-of-type{ border-bottom:none; }
.lp__row.is-pop{ background:color-mix(in srgb,var(--accent) 6%, transparent); border-radius:var(--radius-sm); margin:2px -10px; padding-inline:10px; }
.lp__name{ font-weight:600; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lp__pop{ font-style:normal; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--accent); padding:.25em .55em; border-radius:999px; }
[data-dir="minimal"] .lp__pop{ border-radius:2px; }
.lp__price{ text-align:right; font-family:var(--font-mono); color:var(--ink-soft); min-width:52px; }
.lp__price b{ font-weight:700; color:var(--ink); }
.lp__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.lp__note{ font-size:.78rem; color:var(--muted); max-width:32ch; }

/* ============================== GALLERY ============================== */
/* NOTE: prototype styles for a gallery/lightbox widget that isn't wired yet —
   no markup in the theme or kabdalis-blocks-2 plugin emits .gal-mosaic /
   .gal-strip / .lbx, and there is no lightbox JS. Kept (vs. deleted like the
   dead .cz panel) because a gallery block is a likely near-term widget and the
   lightbox interaction is non-trivial to rebuild. When that block ships it must
   also enqueue a lightbox script that opens/keys the .lbx overlay. */
.gal__lead{ margin:.55em 0 0; color:var(--ink-soft); max-width:48ch; }
.gal-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:152px; gap:12px; grid-auto-flow:dense; }
.gal-mosaic__item, .gal-strip__item{ position:relative; overflow:hidden; border-radius:var(--radius-sm); cursor:pointer; }
.gal-mosaic__item img, .gal-strip__item img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease-out); display:block; }
.gal-mosaic__item:hover img, .gal-strip__item:hover img{ transform:scale(1.06); }
.gal-mosaic .gm-0{ grid-column:span 2; grid-row:span 2; }
.gal-mosaic .gm-3{ grid-row:span 2; }
.gal-mosaic .gm-5{ grid-column:span 2; }
.gal-mosaic__cap, .gal-strip__cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 13px 11px; color:#fff; font-size:.84rem; font-weight:600;
  background:linear-gradient(transparent, rgba(8,11,15,.74)); opacity:0; transform:translateY(6px); transition:opacity .24s, transform .24s; }
.gal-mosaic__item:hover .gal-mosaic__cap, .gal-strip__item:hover .gal-strip__cap{ opacity:1; transform:none; }
.gal__zoom{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(10,12,14,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transform:scale(.8); transition:.2s; }
.gal-mosaic__item:hover .gal__zoom, .gal-strip__item:hover .gal__zoom{ opacity:1; transform:none; }
[data-dir="minimal"] .gal-mosaic__item, [data-dir="minimal"] .gal-strip__item{ border-radius:2px; }
.gal-strip{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px;
  margin-inline:calc(-1*clamp(18px,5vw,40px)); padding-inline:clamp(18px,5vw,40px); scrollbar-width:thin; }
.gal-strip__item{ flex:0 0 auto; width:min(80vw,440px); aspect-ratio:4/3; scroll-snap-align:start; box-shadow:var(--shadow); }
@media (max-width:720px){
  .gal-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:128px; }
  .gal-mosaic .gm-3, .gal-mosaic .gm-5{ grid-column:auto; grid-row:auto; }
}

/* lightbox */
.lbx{ position:fixed; inset:0; z-index:200; background:rgba(8,10,12,.92); display:grid; place-items:center; padding:20px; animation:fadeIn .2s ease; }
.lbx__fig{ margin:0; max-width:min(1100px,92vw); display:flex; flex-direction:column; gap:10px; }
.lbx__fig img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; }
.lbx__cap{ display:flex; align-items:center; justify-content:space-between; gap:16px; color:rgba(255,255,255,.9); font-size:.9rem; }
.lbx__count{ font-family:var(--font-mono); color:rgba(255,255,255,.6); }
.lbx__close{ position:absolute; top:14px; right:18px; color:#fff; font-size:2rem; line-height:1; width:44px; height:44px; opacity:.85; }
.lbx__close:hover{ opacity:1; }
.lbx__nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:2.6rem; line-height:1; width:56px; height:56px; display:grid; place-items:center; opacity:.78; transition:opacity .16s; }
.lbx__nav:hover{ opacity:1; }
.lbx__prev{ left:8px; } .lbx__next{ right:8px; }
@media (max-width:560px){ .lbx__nav{ font-size:2rem; width:44px; } }

/* ============================== INSTAGRAM ============================== */
.band--ig{ background:var(--bg2); }
.ig__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(18px,3vw,28px); }
.ig__id{ display:flex; align-items:center; gap:14px; }
.ig__avatar{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#feda75,#d62976 52%,#4f5bd5); flex:0 0 auto; box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
.ig__handle{ font-family:var(--font-display); font-weight:var(--display-w); font-size:1.3rem; letter-spacing:var(--display-ls); display:block; }
.ig__sub{ font-size:.84rem; color:var(--muted); }
.ig__follow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; padding:.7em 1.2em; border-radius:999px; background:var(--accent); color:#fff; transition:filter .16s, transform .15s; }
.ig__follow:hover{ filter:brightness(1.07); }
.ig__follow:active{ transform:scale(.97); }
[data-dir="minimal"] .ig__follow{ border-radius:2px; }
.ig__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,14px); }
.ig__cell{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--radius-sm); }
.ig__cell img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.ig__cell:hover img{ transform:scale(1.07); }
.ig__hover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:18px; color:#fff; font-weight:700; font-size:.92rem; background:rgba(8,11,15,.44); opacity:0; transition:opacity .2s; }
.ig__cell:hover .ig__hover{ opacity:1; }
.ig__stat{ display:inline-flex; align-items:center; gap:6px; }
[data-dir="minimal"] .ig__cell{ border-radius:2px; }

/* ============================== FAMILJÄR / WARMTH ============================== */
:root{ --sami-r:#b3433a; --sami-b:#2f6f9e; --sami-y:#d8a23a; --sami-g:#2f7d54; --frame:#fffdf8; }
[data-dir="crisp"]{ --frame:#ffffff; }

/* personal-touch lettering — handwriting/calligraphy/italic/caps, chosen in Customize via data-sign */
.hand{ line-height:1; }
.sign{ font-weight:600; font-size:1.6rem; letter-spacing:.01em; }
.hero__card .sign{ font-size:1.7rem; color:var(--accent); }
.kicker.hand{ display:inline-block; font-size:1.65rem; color:var(--accent); transform:rotate(-2.5deg); margin:0 0 .15em 2px; }

/* hand (Caveat) — the default casual handwriting */
[data-sign="hand"] .hand, [data-sign="hand"] .sign{ font-family:'Caveat','Segoe Script',cursive; font-weight:700; font-style:normal; }
/* calligraphy (Dancing Script) — flowing, elegant */
[data-sign="script"] .hand, [data-sign="script"] .sign{ font-family:'Dancing Script',cursive; font-weight:600; font-style:normal; letter-spacing:.005em; }
/* italic (Newsreader) — warm, editorial */
[data-sign="italic"] .hand, [data-sign="italic"] .sign{ font-family:'Newsreader',Georgia,serif; font-weight:500; font-style:italic; letter-spacing:0; }
[data-sign="italic"] .sign{ font-size:1.3rem; } [data-sign="italic"] .hero__card .sign{ font-size:1.35rem; }
[data-sign="italic"] .kicker.hand{ font-size:1.25rem; transform:rotate(-1.5deg); }
[data-sign="italic"] .polaroid__cap{ font-size:1.15rem; }
/* refined display serif (Instrument Serif italic) */
[data-sign="serif"] .hand, [data-sign="serif"] .sign{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-style:italic; letter-spacing:0; }
[data-sign="serif"] .sign{ font-size:1.55rem; }
/* caps (Space Grotesk) — modern, understated label */
[data-sign="caps"] .hand, [data-sign="caps"] .sign{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-style:normal; text-transform:uppercase; letter-spacing:.16em; }
[data-sign="caps"] .sign{ font-size:1.02rem; } [data-sign="caps"] .hero__card .sign{ font-size:1.02rem; }
[data-sign="caps"] .kicker.hand{ font-size:.86rem; transform:none; }
[data-sign="caps"] .polaroid__cap{ font-size:.92rem; letter-spacing:.14em; }

/* Sámi-inspired woven ribbon — abstract, simple colour bands */
.sami-band{ display:block; height:13px; border-radius:7px; overflow:hidden;
  background:repeating-linear-gradient(90deg,
    var(--sami-r) 0 9px, var(--frame) 9px 11px,
    var(--sami-b) 11px 20px, var(--frame) 20px 22px,
    var(--sami-y) 22px 31px, var(--frame) 31px 33px,
    var(--sami-g) 33px 42px, var(--frame) 42px 44px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }

/* family-album photo treatment: white frame, gentle tilt, straightens on hover */
.polaroid{ background:var(--frame); padding:12px 12px 0; border-radius:5px;
  box-shadow:0 22px 50px -24px rgba(40,30,15,.5), 0 2px 8px -4px rgba(40,30,15,.3); }
.polaroid .photo{ border-radius:3px; }
.polaroid__cap{ display:block; text-align:center; padding:9px 6px 12px; font-size:1.55rem; color:var(--ink-soft); }
.polaroid--tilt{ transform:rotate(-2.4deg); transition:transform .4s var(--ease-out); }
.polaroid--tilt:hover{ transform:rotate(0) translateY(-3px); }
[data-dir="minimal"] .polaroid{ border-radius:2px; } [data-dir="minimal"] .polaroid .photo{ border-radius:1px; }

/* warm intro with a host portrait */
.intro-warm{ display:grid; gap:clamp(26px,5vw,60px); align-items:center; }
.intro__col{ min-width:0; }
.intro__sign{ margin-top:1.3em; }
.intro__portrait{ position:relative; justify-self:center; width:100%; max-width:340px; }
.intro__sami{ position:absolute; left:8%; right:8%; bottom:-18px; width:auto; transform:rotate(1.5deg); }
@media (min-width:860px){ .intro-warm{ grid-template-columns:1.15fr .85fr; } }

/* scrapbook tilt on eat cards (album feel, removes the odd boxy shadow) */
.eat-card .photo{ border:7px solid var(--frame); box-shadow:0 16px 38px -20px rgba(40,30,15,.42); transition:transform .35s var(--ease-out), box-shadow .3s ease; }
.eat-card:nth-child(odd) .photo{ transform:rotate(-1.3deg); }
.eat-card:nth-child(even) .photo{ transform:rotate(1.3deg); }
.eat-card:hover .photo{ transform:rotate(0) translateY(-5px); box-shadow:0 26px 52px -24px rgba(40,30,15,.5); }

/* playful tilt on the gallery filmstrip */
.gal-strip__item{ border:6px solid var(--frame); transition:transform .35s var(--ease-out); }
.gal-strip__item:nth-child(odd){ transform:rotate(-1.5deg); }
.gal-strip__item:nth-child(even){ transform:rotate(1.5deg); }
.gal-strip__item:hover{ transform:rotate(0) translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .eat-card .photo, .eat-card:nth-child(odd) .photo, .eat-card:nth-child(even) .photo,
  .gal-strip__item, .gal-strip__item:nth-child(odd), .gal-strip__item:nth-child(even),
  .polaroid--tilt{ transform:none; }
}

/* ============================== MOBILE WIDGET POLISH (≤600px) ============================== */
@media (max-width:600px){
  /* FORECAST — 5 cramped columns become a clean vertical list */
  .fc__grid{ grid-template-columns:1fr; gap:0; }
  .fc__day{ flex-direction:row; align-items:center; gap:0; padding:13px 4px; border-radius:0;
    background:none !important; border:none; border-bottom:1px solid color-mix(in srgb,var(--line) 60%, transparent); }
  .fc__day:last-child{ border-bottom:none; }
  .fc__day.is-today{ border-bottom:1px solid color-mix(in srgb,var(--accent) 35%, var(--line)); }
  .fc__dname{ width:44px; flex:0 0 auto; font-size:.95rem; }
  .fc__icon{ flex:0 0 auto; }
  .fc__hi{ font-size:1.25rem; margin-left:20px; }
  .fc__lo{ margin-left:8px; }
  .fc__snow{ margin-top:0; margin-left:auto; }

  /* WEEKEND SCHEDULE — day on the left, name above a small time line, tag on the right */
  .sched__row{ grid-template-columns:42px 1fr auto; grid-template-areas:"day name tag" "day time tag";
    column-gap:12px; row-gap:1px; align-items:center; padding:13px 0; }
  .sched__day{ grid-area:day; }
  .sched__name{ grid-area:name; align-self:end; }
  .sched__time{ grid-area:time; align-self:start; font-size:.78rem; }
  .sched__tag{ grid-area:tag; }

  /* LIFT PASS — tighter columns, stacked footer with a full-width button */
  .lp__cols{ column-gap:12px; }
  .lp__foot{ flex-direction:column; align-items:stretch; gap:12px; }
  .lp__foot .btn{ justify-content:center; }
  .lp__note{ max-width:none; }

  /* CAMPAIGN — full-width actions, centred code line */
  .camp__actions .btn{ flex:1 1 100%; justify-content:center; }
  .camp__code{ flex:1 1 100%; text-align:center; margin-top:2px; }

  /* WEBCAM — tabs on their own row above the caption */
  .wcam__foot{ flex-direction:column; align-items:flex-start; gap:9px; }
  .wcam__tab{ font-size:.82rem; }

  /* GALLERY header — link sits under the heading, left-aligned */
  .sec-head--row{ align-items:flex-start; }

  /* INSTAGRAM — slightly larger avatar/handle balance */
  .ig__head{ gap:12px; }

  /* STATS — tighten wrap so two fit per row comfortably */
  .statline{ gap:18px 26px; }
}

/* ============================== RESPONSIVE ============================== */
@media (min-width:760px){
  .wknd__cols{ grid-template-columns:1fr 1fr; }
  .ig__grid{ grid-template-columns:repeat(6,1fr); }
  .hd__nav{ display:flex; gap:18px; }
  .hd__cta{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:.7em 1.1em; border-radius:999px; background:var(--accent); color:var(--on-accent); }
  .hd:not(.hd--solid):not(.hd--mega) .hd__cta{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); }
  .burger{ display:none; }
  .feature{ grid-template-columns:1fr 1fr; }
  .feature--rev .feature__media{ order:2; }
  .eat-grid{ grid-template-columns:1fr 1fr; }
  .ow{ grid-template-columns:1fr 1fr; }
  .ev-grid{ grid-template-columns:1fr 1fr; }
  .posts{ grid-template-columns:1fr 1fr; }
  .news{ grid-template-columns:1fr 1fr; align-items:center; }
  .search{ grid-template-columns:1fr 1fr auto; align-items:end; }
  .cabin{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch; }
  .cabin__media{ height:100%; }
  .contact{ grid-template-columns:1.2fr 1fr; align-items:start; }
}
@media (min-width:980px){
  .feature{ gap:72px; }
  .mtn-row{ grid-template-columns:1.25fr 1fr; align-items:start; }
  .feature__media .photo{ max-width:520px; }
  .feature--rev .feature__media .photo{ margin-left:auto; }
  .stay-layout{ grid-template-columns:300px 1fr; }
  .filters__toggle{ display:none; }
  .filters__body{ display:block; position:sticky; top:84px; margin-top:0; }
}

/* ============================== POLISH FIXES ==============================
   Issues fixed here (kept at bottom of file so they're easy to find/iterate):
   1. WP admin bar pushed hero 32px down. Now header offset + hero unchanged.
   2. .hd__nav wrapped menu items onto two lines. Force single line.
   3. .hero__scroll had an ugly glassy pill background. Made minimal.
   ============================================================================ */

/* 1) Admin bar — WP injects html{margin-top:32px}, which pushes the fixed
      header AND the hero 32px down. Cancel the html margin (the hero is what
      visitors care about) and offset the header instead so it sits below
      the admin bar for the logged-in editor. Logged-out visitors are
      unaffected. */
body.admin-bar .hd            { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .hd          { top: 46px; }
}
html[lang]                    { margin-top: 0 !important; }
body.admin-bar #wpadminbar    { z-index: 100; } /* stay above the header */

/* 1b) Darkening top-veil on the HERO itself (not bound to the header).
       The original .hd::before only covers the header area, which leaves the
       very top of the photo unveiled when the header is offset by the
       admin-bar. This gradient lives on the hero and always reaches viewport
       top, regardless of header position. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;          /* top + full width, no bottom */
  height: 200px;
  z-index: 1;                  /* above .hero__bg (z:0), below .hero__inner (z:2) */
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12,16,22,.48) 0%,
    rgba(12,16,22,.24) 35%,
    rgba(12,16,22,0)   100%);
  transition: opacity .3s ease;
}
/* When the header turns solid on scroll, the page no longer needs the hero
   top-veil — the solid header bar provides its own contrast. */
.hd--solid ~ * .hero::before,
.hd--solid ~ .screen .hero::before { opacity: 0; }

/* 2) Top nav — links must stay on a single line even when there are 5–6
      groups. Without nowrap the flex wraps when the viewport gets tight.
      Plus visual separation of SV/EN from the nav so they don't flow into
      each other. */
.hd__nav                      { flex-wrap: nowrap; white-space: nowrap; }
.hd__link                     { white-space: nowrap; }

.hd__bar                      { gap: 18px; }
.hd__right                    { gap: 10px; }

/* 3) Hero scroll cue lives in its own block higher in this file — a single
      pulsating chevron-down (no text, no glassy pill). */

/* ============================== SCROLL-TO-TOP =============================
   Floating button bottom-right (under .cz panel which lives at z:120). Fades
   in after the user has scrolled past one viewport; JS toggles .is-visible. */
.kab2-top{
  position:fixed; z-index:80;
  right:clamp(12px, 2.5vw, 24px);
  bottom:clamp(18px, 3vh, 28px);  /* sits in the corner (the .cz fab it used to clear is gone) */
  width:46px; height:46px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.3);
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
.kab2-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
@media (hover: hover){
  .kab2-top:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
}
.kab2-top:active{ transform:translateY(0) scale(.94); }
@media print{ .kab2-top{ display:none !important; } }

/* ============================== STICKY MOBILE BOOKING CTA =================
   Persistent "Boka" entry point at the bottom of the viewport on phones. Off
   on desktop (the header/hero CTAs cover it) and on the booking page itself
   (handled in PHP). The body gets a .has-kab2-bookbar class so its bottom
   padding clears the bar and the scroll-top button lifts above it. */
.kab2-bookbar{ display:none; }
@media (max-width:760px){
  body.has-kab2-bookbar{ padding-bottom:64px; }
  .kab2-bookbar{
    position:fixed; left:0; right:0; bottom:0; z-index:75;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px clamp(14px,4vw,20px);
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
    border-top:1px solid var(--line); box-shadow:0 -6px 20px -12px rgba(0,0,0,.3);
  }
  .kab2-bookbar__note{ font-size:.88rem; font-weight:600; color:var(--ink-soft); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kab2-bookbar__btn{ flex:0 0 auto; }
  body.has-kab2-bookbar .kab2-top{ bottom:calc(64px + clamp(12px,3vh,20px)); }
}
@media print{ .kab2-bookbar{ display:none !important; } }

/* ============================== 404 PAGE =================================
   Clean centered actions after the centered hero variant. Search field
   styled to match the rest of the form vocabulary (.b-input is used by
   searchform.php). */
.kab2-404{ display:flex; flex-direction:column; align-items:center; gap:clamp(28px, 4vw, 48px); text-align:center; }
.kab2-404__actions{ display:flex; justify-content:center; }
.kab2-404__search{ width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.kab2-404__search .b-kicker{ display:block; }
.kab2-404__suggest{ width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.kab2-404__suggest .b-kicker{ display:block; }
.kab2-404__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; }
.kab2-404__links .link-arrow{ font-size:.95rem; }

/* ============================== CORE BLOCK STYLES =========================
   register_block_style() variations (functions.php) so native core blocks pick
   up the theme look. --sami-* / --frame come from the FAMILJÄR :root block. */
.wp-block-button.is-style-kab-outline .wp-block-button__link{
  background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px;
  transition:background var(--t-fast) ease, color var(--t-fast) ease; }
.wp-block-button.is-style-kab-outline .wp-block-button__link:hover{ background:var(--ink); color:var(--bg); }
.wp-block-button.is-style-kab-ghost .wp-block-button__link{
  background:color-mix(in srgb, currentColor 12%, transparent); color:inherit;
  border:1.5px solid color-mix(in srgb, currentColor 55%, transparent); border-radius:999px; }
[data-dir="minimal"] .wp-block-button.is-style-kab-outline .wp-block-button__link,
[data-dir="minimal"] .wp-block-button.is-style-kab-ghost .wp-block-button__link{ border-radius:2px; }

.wp-block-quote.is-style-kab{ border-left:3px solid var(--accent); padding-left:clamp(14px,2vw,22px);
  font-style:italic; color:var(--ink-soft); }
.wp-block-quote.is-style-kab cite{ font-style:normal; color:var(--muted); }

.wp-block-pullquote.is-style-kab{ border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(24px,4vw,40px) 0; text-align:center; }
.wp-block-pullquote.is-style-kab p{ font-family:var(--font-display); font-weight:var(--display-w);
  letter-spacing:var(--display-ls); font-size:clamp(1.4rem,3.5vw,2rem); line-height:1.2; color:var(--ink); }
.wp-block-pullquote.is-style-kab cite{ font-family:var(--font-body); font-size:.86rem; color:var(--muted); font-style:normal; }

.wp-block-separator.is-style-kab-sami{ border:0; height:13px; max-width:none; opacity:1; border-radius:7px; overflow:hidden;
  background:repeating-linear-gradient(90deg,
    var(--sami-r) 0 9px, var(--frame) 9px 11px, var(--sami-b) 11px 20px, var(--frame) 20px 22px,
    var(--sami-y) 22px 31px, var(--frame) 31px 33px, var(--sami-g) 33px 42px, var(--frame) 42px 44px); }

.wp-block-table.is-style-kab-lined table{ border-collapse:collapse; width:100%; }
.wp-block-table.is-style-kab-lined td, .wp-block-table.is-style-kab-lined th{
  border:0; border-bottom:1px solid var(--line); padding:.7em .9em; text-align:left; }
.wp-block-table.is-style-kab-lined th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); }

/* ============================== ON THIS PAGE (TOC) ========================
   Filled by theme.js from the page's H2/H3 headings (the "Table of contents"
   pattern drops the [data-kab-toc] placeholder). Empty until JS populates it. */
.kab2-toc{ margin:0 0 clamp(20px,3vw,32px); padding:16px 18px; background:var(--surface2);
  border:1px solid var(--line); border-radius:var(--radius); }
.kab2-toc:empty{ display:none; }
.kab2-toc__title{ display:block; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); margin-bottom:10px; }
.kab2-toc__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.kab2-toc__item--h3{ padding-inline-start:14px; }
.kab2-toc__link{ color:var(--ink-soft); text-decoration:none; font-weight:500; transition:color .15s ease; }
.kab2-toc__link:hover{ color:var(--accent); }

/* ============================== SCREEN-READER UTILITY =====================
   WordPress core emits .screen-reader-text for visually-hidden labels — the
   pagination heading ("Inläggsnavigering"), the default "Search for:" label,
   comment-form notes, etc. Without this utility those render as visible text.
   Standard WP recipe (clip + 1px box), with a focusable variant so skip-style
   links become visible when tabbed to. */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); -webkit-clip-path:inset(50%); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; overflow:hidden;
  position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--surface); color:var(--accent);
  clip:auto !important; -webkit-clip-path:none; clip-path:none;
  display:block; height:auto; width:auto; left:8px; top:8px;
  padding:12px 18px; font-size:.9rem; font-weight:600;
  border-radius:var(--radius-sm); box-shadow:var(--shadow); z-index:1000;
}

/* ============================== PAGINATION / NAV LINKS ====================
   the_posts_pagination(), the_post_navigation() and wp_link_pages() ship raw
   browser-default markup. Theme them in the site vocabulary: pill page numbers,
   accent "current", arrow-led prev/next. */
.pagination .nav-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.page-numbers{
  display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 13px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-weight:600; font-size:.92rem; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }
.page-numbers.current{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.page-numbers.dots{ border:0; background:none; min-width:auto; color:var(--muted); }
.page-numbers svg{ display:block; }
[data-dir="minimal"] .page-numbers{ border-radius:2px; }

/* wp_link_pages — split (multi-page) post links. */
.page-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:clamp(24px,4vw,40px); font-size:.92rem; color:var(--muted); }
.page-links a{
  display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 9px;
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-soft); font-weight:600;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.page-links a:hover{ border-color:var(--accent); color:var(--accent); }
[data-dir="minimal"] .page-links a{ border-radius:2px; }

/* the_post_navigation — prev/next on a single post. */
.post-navigation{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.post-navigation .nav-links{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.post-navigation .nav-previous, .post-navigation .nav-next{ max-width:48%; min-width:0; }
.post-navigation .nav-next{ margin-left:auto; text-align:right; }
.post-navigation a{ display:inline-flex; flex-direction:column; gap:3px; color:var(--ink);
  font-family:var(--font-display); font-weight:var(--display-w); font-size:1.1rem; line-height:1.2;
  letter-spacing:var(--display-ls); transition:color .15s ease; }
.post-navigation a:hover{ color:var(--accent); }
@media (max-width:560px){
  .post-navigation .nav-previous, .post-navigation .nav-next{ max-width:100%; }
}

/* ============================== COMMENTS ==================================
   comments.php only styled the submit button; the default comment list +
   comment_form() fields fell back to browser chrome. Bring them into the form
   vocabulary (same field treatment as the .b-input primitives). */
.comments-area{ margin-top:clamp(32px,5vw,56px); }
.comment-list{ list-style:none; margin:0 0 32px; padding:0; }
.comment-list ol.children{ list-style:none; margin:0 0 0 clamp(16px,4vw,40px); padding:0; }
.comment-body{ padding:18px 0; border-bottom:1px solid var(--line); }
.comment-author{ display:flex; align-items:center; gap:10px; }
.comment-author .avatar{ border-radius:50%; }
.comment-author .fn{ font-weight:700; font-style:normal; }
.comment-metadata{ font-size:.78rem; color:var(--muted); margin-top:2px; }
.comment-metadata a{ color:var(--muted); }
.comment-content{ margin-top:10px; color:var(--ink-soft); }
.comment-content p{ margin:0 0 .6em; }
.reply a, .comment-reply-link{ display:inline-flex; font-size:.82rem; font-weight:600; color:var(--accent); margin-top:8px; }
.comment-respond{ margin-top:8px; }
.comment-form{ display:grid; gap:14px; }
.comment-form p{ margin:0; display:flex; flex-direction:column; gap:6px; }
.comment-form label{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; padding:.7em .85em; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font:inherit; font-size:.94rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.comment-form textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.comment-form input:focus, .comment-form textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:var(--focus-ring); }
.comment-form .comment-form-cookies-consent{ flex-direction:row; align-items:center; gap:9px; }
.comment-notes, .comment-form-cookies-consent label{ font-size:.82rem; color:var(--muted);
  text-transform:none; letter-spacing:0; font-family:var(--font-body); }
.comment-form .form-submit{ margin:0; }

/* ============================== STICKY HOVER GUARD ========================
   Hover states that involve movement / transform feel awkward on touch
   devices because the :hover state lingers after tap. Scope the most
   movement-heavy ones to actual hover-capable pointers. (Color-only hovers
   are left alone — they show up briefly on tap but are not jarring.) */
@media (hover: none){
  .post:hover, .cabin:hover, .eat-card:hover .photo{ transform:none; box-shadow:var(--shadow); }
  .eat-card:hover .photo img, .post:hover .post__media img,
  .cabin:hover .cabin__media img, .mega__feature:hover img{ transform:none; }
  .b-cta-grid__card:hover{ transform:none; }
}

/* ============================== FORCED COLORS (Windows High Contrast) =====
   In forced-colors mode the OS overrides colours; backdrop-blur glass panels
   and color-mix borders can disappear. Give the chrome explicit system-colour
   borders, drop the blur, hide purely-decorative effects, and keep focus loud. */
@media (forced-colors: active){
  .hero__card, .phero__card, .hd.hd--solid, .hd.hd--mega, .hd--open,
  .cond, .b-card, .post, .cabin, .fc, .lp, .ow, .search, .filters__body,
  .hd__mega, .hd__acctdrop, .lang__menu, .kab2-top, .kab2-bookbar{
    border:1px solid CanvasText !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .btn{ border:1px solid currentColor; }
  :focus-visible{ outline:2px solid Highlight !important; outline-offset:2px; }
  .sunfx, .snow, .ft::before, .ft::after, .hero::before, .hero::after, .phero::after{ display:none !important; }
  .hd__label::after, .sprog__bar, .navload__bar{ background:CanvasText !important; }
}

/* ============================== HIGHER CONTRAST (prefers-contrast: more) ===
   Users who ask the OS for more contrast get firmer hairlines and a darker
   secondary text token so muted labels/dates read more strongly. */
@media (prefers-contrast: more){
  [data-dir]{
    --muted:var(--ink-soft);
    --line:color-mix(in srgb, var(--ink) 32%, var(--surface));
  }
  .hero__card, .phero__card, .cond, .b-card{ border-color:color-mix(in srgb, var(--ink) 25%, transparent); }
  .page-content :is(p,li,blockquote) a:not(.btn){ text-decoration-color:var(--accent); }
}

/* ============================== REDUCED DATA ==============================
   Visitors on a metered/Save-Data connection get the lightest experience: kill
   the continuous hero ken-burns + ambient overlays (they only cost bandwidth/
   battery). Progressive — ignored where unsupported. */
@media (prefers-reduced-data: reduce){
  .hero__bg img, .phero__bg img{ animation:none !important; }
  .sunfx, .snow{ display:none !important; }
  .ft::before, .ft::after{ display:none !important; }
}

/* ============================== PRINT =====================================
   Strip site chrome and overlays so printed pages contain just the content.
   Anchor URLs get appended in parens so a printed page is still useful. */
@media print{
  *{ background:transparent !important; color:#111 !important; box-shadow:none !important; text-shadow:none !important; }
  .hd, .hd__sheet, .marq, .sprog, .navload, .hero__scroll, .kab2-top,
  .sunfx, .snow{ display:none !important; }
  /* Don't print loading shimmers (a member/account widget mid-fetch). */
  .b-skeleton::after{ display:none !important; }
  .hero, .phero{ min-height:auto !important; }
  .hero::after, .hero::before, .phero::after{ display:none !important; }
  .hero__bg, .phero__bg{ position:relative !important; inset:auto !important; }
  .hero__card, .phero__card{ background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; backdrop-filter:none !important; }
  .ft{ background:#fff !important; color:#111 !important; padding-top:14px !important; }
  .band{ padding-block:14px !important; }
  a[href]:not([href^="#"]):not([href^="javascript"]):not(.btn):not(.skip-link)::after{
    content:" (" attr(href) ")";
    font-size:.85em; color:#555;
  }
  /* avoid breaks inside cards */
  .b-card, .post, .cabin, .b-cabin, .eat-card{ page-break-inside:avoid; break-inside:avoid; }
}