/* =========================================================
   Kaggis.se — premium cinematic theme
   Single stylesheet, organized by concern. No frameworks.
   ========================================================= */

:root{
  /* palette */
  --bg-0:#06080a;
  --bg-1:#0a0d10;
  --ink-0:#f3f6f4;
  --ink-1:#c8cfcb;
  --ink-2:#8a938e;
  --line: rgba(255,255,255,.08);
  --green:#58e1a0;       /* subtle accent */
  --green-soft:#7af0b7;
  --green-glow: 0 0 18px rgba(88,225,160,.55), 0 0 42px rgba(88,225,160,.25);

  /* type */
  --serif:"Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* metrics */
  --maxw: 1280px;
  --pad-x: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
  --footer-h: 44px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* fonts (loaded from Google with display swap; degrade gracefully) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.map-active{
  height:100dvh;
  overflow:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- Cinematic background ---------- */
.bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:#000;
}
.bg__img, .bg__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.bg__video{ opacity:0; transition: opacity 1.2s var(--ease); }
.bg__video.is-ready{ opacity:1; }
.bg__veil{
  position:absolute; inset:0;
  /* ── Justera dessa värden för ljusare/mörkare bakgrund ──────────────
     0 = helt transparent (ingen mörkläggning)  1 = helt svart
     Nuvarande: .30 / .55  (mellannivå, ganska ljust)                  */
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.25) 100%),
    linear-gradient(180deg, rgba(6,8,10,.30), rgba(6,8,10,.55));
}
.bg__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows: var(--nav-h) auto;
  align-items:center;
  column-gap:24px;
  padding: 0 var(--pad-x);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  background: linear-gradient(180deg, rgba(6,8,10,.30), rgba(6,8,10,.06));
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav__brand{
  display:inline-flex; align-items:center; gap:10px;
  letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--ink-0);
}
.nav__mark{
  width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:var(--green-glow);
}
.nav__name{ font-weight:500; }

.nav__menu ul{
  display:flex; justify-content:center; gap:clamp(18px, 3vw, 40px);
  list-style:none; margin:0; padding:0;
}
/* [hidden]-attributet kan tystas av display-regler med samma specificitet (se CLAUDE.md) —
   [data-nav-hidden] har redan !important nedan, men refreshNavAuth() (nav.js) sätter det
   native hidden-attributet för data-auth-styrda poster ("Konto & Bricka" m.fl.) och saknade
   motsvarande skydd. */
#nav-list li[hidden] { display: none !important; }
.nav__menu a{
  position:relative;
  display:inline-block;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-1);
  padding:8px 2px;
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--green); transform:scaleX(0); transform-origin:left;
  transition: transform .45s var(--ease); box-shadow:var(--green-glow);
}
.nav__menu a:hover,
.nav__menu a:focus-visible,
.nav__menu a.is-active{
  color:var(--green-soft);
  text-shadow: 0 0 12px rgba(88,225,160,.45);
  outline:none;
}
.nav__menu a:hover::after,
.nav__menu a:focus-visible::after,
.nav__menu a.is-active::after{ transform:scaleX(1); }

.nav__menu a .ext{
  display:inline-block; margin-left:6px; font-size:10px; opacity:.7;
  transform:translateY(-1px);
}
[data-nav-hidden]{ display:none !important; }

/* live readouts */
.nav__live{ display:flex; gap:14px; }
.live{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background: rgba(255,255,255,.02);
}
.live__dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:var(--green-glow); }
.live--air .live__dot{ background:var(--green); box-shadow:var(--green-glow); }
.live--sauna .live__dot{ background:var(--green); box-shadow:var(--green-glow); }
.live__value{ color:var(--ink-0); font-weight:500; letter-spacing:.05em; }
.live.is-stale .live__dot,
.live--water.is-stale .live__dot,
.live--air.is-stale .live__dot,
.live--sauna.is-stale .live__dot{ background:rgba(220,70,70,.9); box-shadow:0 0 8px rgba(220,70,70,.4); }

/* Temperature display grid on home page */
.home-announcements {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ann-item {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: .93rem;
  line-height: 1.5;
  border: 1px solid;
}
.ann-item--info    { background: rgba(60,120,200,.15); border-color: rgba(80,160,255,.25); color: #a8cfff; }
.ann-item--warning { background: rgba(200,140,0,.15);  border-color: rgba(255,180,0,.3);   color: #ffd97a; }
.ann-item--alert   { background: rgba(200,40,40,.15);  border-color: rgba(255,80,80,.3);   color: #ffaaaa; }
.ann-item--success { background: rgba(0,140,70,.15);   border-color: rgba(0,220,120,.25);  color: #7fffcc; }

.section-title{
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-2);
  margin: 64px 0 32px;
}
.temp-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 680px;
  margin: 0 auto 80px;
  padding: 0 var(--pad-x);
}
.temp-card{
  background: rgba(6,10,8,.70);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  padding: 24px 16px 20px;
  text-align: center;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.temp-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.02) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.temp-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.temp-card:hover::before{ opacity: 1; }
.temp-card__icon{
  font-size: 48px;
  margin-bottom: 16px;
  filter: grayscale(0.3);
  transition: filter .4s var(--ease);
}
.temp-card:hover .temp-card__icon{ filter: grayscale(0); }
.temp-card h3{
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.temp-card__value{
  font-size: 50px;
  font-weight: 200;
  color: var(--ink-0);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.temp-card__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,180,80,.12);
  border: 1px solid rgba(0,220,120,.25);
  transition: background .3s, border-color .3s;
}
.temp-card__status.is-stale{
  background: rgba(200,50,50,.15);
  border: 1px solid rgba(220,70,70,.35);
}
.temp-card__label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  font-weight: 500;
}
.temp-card__timestamp{
  font-size: clamp(7px, 1.1vw, 10px);
  color: var(--ink-2);
  margin-top: 10px;
  opacity: 0.7;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.temp-card--water:hover{ border-color: rgba(155,209,255,.3); }
.temp-card--air:hover{ border-color: rgba(88,225,160,.3); }
.temp-card--sauna:hover{ border-color: rgba(255,155,90,.3); }

@media (max-width: 768px){
  .temp-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 60px;
    padding: 0;
  }
  .temp-card{ padding: 16px 8px 14px; min-width: 0; }
  .temp-card__status{ max-width:100%; }
  .temp-card__timestamp{ font-size: clamp(6px, 2.2vw, 9px); }
  .temp-card__icon{ font-size: 28px; margin-bottom: 6px; }
  .temp-card h3{ font-size: 10px; margin-bottom: 10px; }
  .temp-card__value{ font-size: clamp(18px, 5.5vw, 30px); margin-bottom: 10px; white-space: nowrap; }
  .temp-card__status{ padding: 4px 8px; }
  .temp-card__label{ font-size: 9px; }
  .temp-card__timestamp{ font-size: 8px; margin-top: 6px; }
  .section-title{ margin: 48px 0 24px; font-size: 13px; }
}
@media (min-width: 769px) and (max-width: 1024px){
  .temp-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ── PERMANENT SÖKFÄLT ──────────────────────────────────────────── */
:root{ --search-bar-h: 0px; }
.site-search-bar{
  grid-column:1 / -1; grid-row:2; position:relative;
  border-top:1px solid rgba(255,255,255,.06);
  padding:0 var(--pad-x);
  height:var(--search-bar-h); display:flex; flex-direction:column; justify-content:center;
}
.site-search-bar[hidden],
body.map-active .site-search-bar{ display:none !important; }
.ssb-inner{
  display:flex; align-items:center; gap:10px;
  max-width:620px; width:100%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:0 16px; height:34px;
  transition:border-color .2s;
}
.ssb-inner:focus-within{ border-color:rgba(88,225,160,.45); background:rgba(255,255,255,.08); }
.ssb-icon{ width:14px; height:14px; flex-shrink:0; color:var(--ink-2); }
.ssb-input{
  flex:1; background:none; border:none; outline:none;
  font-size:1rem; color:var(--ink-0); font-family:inherit;
}
.ssb-input::placeholder{ color:var(--ink-2); }
.ssb-results{
  position:fixed; top:calc(var(--nav-h,76px) + var(--search-bar-h,52px));
  left:50%; transform:translateX(-50%);
  width:min(620px, calc(100% - 2 * var(--pad-x,1.25rem)));
  background:rgba(6,8,10,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); border-radius:0 0 14px 14px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  list-style:none; margin:0; padding:6px 0 8px;
  z-index:1200;
}
.ssr-item + .ssr-item{ border-top:1px solid rgba(255,255,255,.05); }
.ssr-link{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 16px; border-radius:6px; color:inherit;
  transition:background .12s, padding-left .12s;
}
.ssr-link:hover{ background:rgba(255,255,255,.05); padding-left:12px; }
.ssr-title{ font-size:.87rem; color:var(--ink-0); font-weight:500; white-space:nowrap; }
.ssr-sub{ font-size:.74rem; color:var(--ink-2); }
.ssr-empty{ font-size:.82rem; color:var(--ink-2); padding:10px 6px; }

/* ── NAV: hamburgare / nav__end ─────────────────────────────────── */
.nav__menu{ grid-column:2; grid-row:1; }
.nav__end{
  grid-column:3; grid-row:1; height:var(--nav-h);
  display:flex; align-items:center; gap:8px;
}
.nav__toggle{
  display:none;
  flex-direction:row; align-items:center; gap:7px;
  padding:6px 12px; height:36px;
  border-radius:8px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition: background .2s, border-color .2s;
}
.nav__toggle:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); }
.nav__icon{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:16px; }
.nav__icon span{ width:16px; height:1.5px; background:var(--ink-0); display:block; border-radius:1px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__label{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-0); line-height:1; font-weight:500; transition:opacity .2s; }
.nav__toggle[aria-expanded="true"] .nav__icon span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__icon span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] .nav__icon span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav__toggle[aria-expanded="true"] .nav__label{ opacity:0; }

/* ── Hamburgare → left-side drawer (gäller SPA + portal) ─────── */
/* Hårt golv: skärmar ≤480px får alltid drawer via CSS */
@media (max-width: 480px) {
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; z-index:400; }
  .nav__live{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:fixed; top:0; left:0; bottom:0; width:min(280px,85vw);
    background:rgba(10,16,12,.97);
    border-right:1px solid var(--border,rgba(255,255,255,.08));
    border-bottom:none;
    transform:translateX(-110%); opacity:1; pointer-events:none; visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    z-index:350; overflow-y:auto; display:flex; flex-direction:column;
    padding-top:var(--nav-h);
  }
  .nav__menu.is-open{
    transform:translateX(0); pointer-events:auto; visibility:visible;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  }
  .nav__menu ul{ flex-direction:column; gap:0; padding:.5rem 0 2.5rem; align-items:stretch; list-style:none; margin:0; }
  .nav__menu li a{
    display:flex; align-items:center; gap:.6rem;
    padding:.75rem 1.25rem; font-size:.88rem;
    color:var(--ink-1,rgba(255,255,255,.7));
    text-transform:none; letter-spacing:normal;
    transition:background .14s, color .14s;
    text-decoration:none;
  }
  .nav__menu li a:hover{ background:rgba(88,225,160,.07); color:var(--ink-0,#fff); }
  .nav__menu li a.active{ color:var(--green,#58e1a0); background:rgba(88,225,160,.08); }
}

/* Bredare än 480px: desktop-beteende som default (JS tar över med nav--cramped vid behov) */
@media (min-width: 481px) {
  .nav__toggle{ display:none; }
  .nav__menu{ display:block; }
}

/* JS-driven overflow-detection: läggs till av nav.js när länkarna inte ryms */
.nav--cramped{ backdrop-filter:none; -webkit-backdrop-filter:none; z-index:400; }
.nav--cramped .nav__live{ display:none; }
.nav--cramped .nav__toggle{ display:inline-flex !important; }
.nav--cramped .nav__menu{
  position:fixed !important; top:0; left:0; bottom:0; width:min(280px,85vw);
  background:rgba(10,16,12,.97);
  border-right:1px solid var(--border,rgba(255,255,255,.08));
  border-bottom:none;
  transform:translateX(-110%); opacity:1; pointer-events:none; visibility:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
  z-index:350; overflow-y:auto; display:flex !important; flex-direction:column;
  padding-top:var(--nav-h);
}
.nav--cramped .nav__menu.is-open{
  transform:translateX(0); pointer-events:auto; visibility:visible;
  transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.nav--cramped .nav__menu ul{ flex-direction:column; gap:0; padding:.5rem 0 2.5rem; align-items:stretch; list-style:none; margin:0; }
.nav--cramped .nav__menu li a{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1.25rem; font-size:.88rem;
  color:var(--ink-1,rgba(255,255,255,.7));
  text-transform:none; letter-spacing:normal;
  transition:background .14s, color .14s;
  text-decoration:none;
}
.nav--cramped .nav__menu li a:hover{ background:rgba(88,225,160,.07); color:var(--ink-0,#fff); }
.nav--cramped .nav__menu li a.active{ color:var(--green,#58e1a0); background:rgba(88,225,160,.08); }

/* Overlay som täcker sidan när drawern är öppen */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:349; display:none; cursor:pointer;
}
.nav-overlay.visible{ display:block; }

/* ---------- View / pages ---------- */
.view{
  flex:1;
  min-height:0;
  min-width:0;
  width:100%;
  overflow-y:visible;
  padding: clamp(40px, 8vh, 96px) var(--pad-x) calc(var(--footer-h) + 12px);
  padding-top: calc(var(--nav-h) + var(--search-bar-h) + clamp(40px, 8vh, 96px));
  max-width: var(--maxw); margin: 0 auto;
  outline:none;
}
/* bokningssidan ska fylla hela bredden utan padding */
.view:has(.iframe-page){
  padding:0;
  max-width:100%;
  min-height:0;
}
/* kartsidan ska fylla hela viewporten utan padding */
.view:has(.km-wrap){
  padding:0;
  max-width:100%;
  min-height:0;
  overflow:hidden;
  position:relative;
}
/* kartsidan: ingen transform/filter i enter-animation (bryter absolute children) */
.view:has(.km-wrap).is-entering{
  animation: enter-map .35s var(--ease) both;
}
@keyframes enter-map{
  from{ opacity:0; }
  to  { opacity:1; }
}
.view.is-leaving{ opacity:0; transform: translateY(6px); }
.view.is-entering:not(:has(.km-wrap)){ animation: enter .55s var(--ease) both; }
@keyframes enter{
  from{ opacity:0; transform: translateY(10px); filter: blur(4px); }
  to  { opacity:1; transform: translateY(0);    filter: blur(0); }
}

/* hero */
.hero{ max-width: 900px; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom: 28px;
}
.hero__eyebrow::before{ content:""; width:28px; height:1px; background:var(--green); box-shadow:var(--green-glow); }
.hero h1{
  font-family: var(--serif);
  font-weight:300;
  font-size: clamp(40px, 7vw, 92px);
  line-height:1.02; letter-spacing:-0.01em;
  margin: 0 0 24px;
}
.hero h1 em{ font-style:italic; color:var(--green-soft); }
.hero p, .hero__sub { color:var(--ink-1); max-width: 56ch; font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 28px; }

/* Officiell föreningssida-länk */
.hero__official-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(6,10,8,.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
  margin-top: 8px;
  white-space: nowrap;
}
.hero__official-link:hover {
  border-color: rgba(88,225,160,.3);
  color: var(--ink-1);
  background: rgba(88,225,160,.04);
}
.hero__official-link__url {
  color: var(--green);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Responsiv: minska textstorlek på små skärmar istället för att bryta rad */
@media (max-width: 480px) {
  .hero__official-link {
    font-size: 11px;
    gap: 6px;
    padding: 8px 12px;
  }
  .hero__official-link__url {
    font-size: 10px;
  }
}

.cta-row{ margin-top: 40px; display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border:1px solid var(--line);
  border-radius: 2px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-0); background: rgba(255,255,255,.02);
  transition: border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover{
  color:var(--green-soft);
  border-color: rgba(88,225,160,.5);
  box-shadow: var(--green-glow);
}

/* generic content */
.section{ margin-top: 64px; }
.section h2{
  font-family:var(--serif); font-weight:300; font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing:-.01em; margin: 0 0 18px;
}
.section p{ color:var(--ink-1); max-width: 64ch; }

.grid{
  display:grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 28px;
}
.card{
  padding: 26px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  border-radius: 2px;
  transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{
  border-color: rgba(88,225,160,.35);
  box-shadow: 0 24px 60px -30px rgba(88,225,160,.4);
  transform: translateY(-2px);
}
.card h3{
  font-family:var(--serif); font-weight:400; font-size: 22px; margin:0 0 8px;
}
.card p{ color:var(--ink-2); font-size: 14px; margin:0; }
.card .num{
  display:block; font-size:11px; letter-spacing:.3em; color:var(--green); margin-bottom:14px;
}

/* loading state */
.skeleton{
  height: 60vh; border:1px solid var(--line); border-radius:2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer{ from{background-position: 200% 0;} to{background-position:-200% 0;} }

.error{
  padding: 18px 22px; border:1px solid rgba(255,120,120,.3);
  border-radius: 2px; color:#ffd2d2; background:rgba(255,80,80,.06);
}

/* ---------- footer ---------- */
.foot{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  padding: 8px var(--pad-x);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-2); font-size: 12px; letter-spacing:.18em; text-transform:uppercase;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6,8,10,0), rgba(6,8,10,.45));
  text-align:center;
  z-index:40;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .bg__video{ display:none; }
}

/* ── iframe embed ──────────────────────────────────────── */
.iframe-page{
  display:flex;
  flex-direction:column;
  height:calc(100dvh - var(--nav-h));
  padding:0;
}
.iframe-page iframe{
  flex:1;
  width:100%;
  border:none;
  display:block;
  background:var(--bg-1);
}/* .view override for iframe pages */
.view:has(.iframe-page){
  padding:0;
  max-width:100%;
  min-height:0;
}

/* ── booking modal ───────────────────────────────── */
.modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,8,10,.75);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.modal-backdrop.is-open{
  opacity:1; pointer-events:all;
}
.modal{
  position:relative;
  width:min(480px, 92vw);
  height:min(680px, 88dvh);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  border:1px solid var(--line);
  transform:translateY(16px) scale(.97);
  transition:transform .35s var(--ease);
}
.modal-backdrop.is-open .modal{
  transform:translateY(0) scale(1);
}
.modal iframe{
  width:100%; height:100%; border:none; display:block;
  background:#fff;
}
.modal__close{
  position:absolute; top:10px; right:10px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid var(--line);
  color:var(--ink-0); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
  transition:background .2s;
}
.modal__close:hover{ background:rgba(0,0,0,.8); }

/* =========================================================
   Portal-länkarna i hamburgaren (mobil-only)
   På desktop är sidebaren synlig — portal-länkarna behövs inte
   i hamburger-menyn. På mobil är sidebaren dold → visas här.
   ========================================================= */

/* Dölja på desktop — syns bara när hamburgare är aktiv */
.nav__portal-sep,
.nav__portal-link-item {
  display: none !important;
}

/* Mobil portrait ≤900px + allmänt ≤768px + landscape ≤600px */
@media (max-width: 768px),
       (orientation: portrait) and (max-width: 900px),
       (orientation: landscape) and (max-width: 600px) {
  .nav__portal-sep {
    display: list-item !important;
    height: 1px;
    background: rgba(255,255,255,.12);
    margin: 6px 0 2px;
    list-style: none;
  }
  .nav__portal-link-item {
    display: list-item !important;
  }
  .nav__portal-link {
    opacity: .75;
    font-size: 13px !important;
    padding: 11px 0 !important;
  }
  .nav__portal-link::before {
    content: '›  ';
    opacity: .5;
  }
}

/* =========================================================
   Portal-sidebar inloggad på SPA-sidor
   Portal.css laddas dynamiskt av app.js när inloggad.
   Dessa regler hanterar layout-skiftet.
   ========================================================= */

/* ── Portal-sidebar SPA-layout ───────────────────────────────────
   portal.css laddas dynamiskt och sätter .p-sidebar-positionering.
   Dessa regler hanterar bara margin på #view.
   --sidebar-w definieras av portal.css (:root { --sidebar-w:230px })
   ---------------------------------------------------------------- */
body.has-portal-sidebar #view {
  /* Centrera i ytan HÖGER om sidebaren; på riktigt stora skärmar = samma
     centrering som utloggat läge. max() förhindrar att vyn glider in under
     sidebaren på mellanstora skärmar. */
  width: calc(100% - var(--sidebar-w, 230px));
  max-width: var(--maxw);
  margin-left: max(var(--sidebar-w, 230px), calc((100% - var(--maxw)) / 2));
  margin-right: auto;
  transition: margin-left .2s ease;
}

/* Karta: dölj sidebar (map-active sätts av router.js) */
body.has-portal-sidebar.map-active .spa-sidebar,
body.has-portal-sidebar.map-active #spa-p-sidebar {
  display: none !important;
}
body.has-portal-sidebar.map-active #view {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Mobil: dölj sidebar */
@media (max-width: 768px) {
  .spa-sidebar,
  #spa-p-sidebar { display: none !important; }
  body.has-portal-sidebar #view { margin-left: 0 !important; width: 100% !important; }
}

/* =========================================================
   Ljust tema — sol-läge, hög kontrast för starkt dagsljus
   Aktiveras med body.light-mode (sparas i localStorage)
   ========================================================= */
html.light-mode,
body.light-mode {
  --bg-0:    #f4f9f6;
  --bg-1:    #eaf2ed;
  --ink-0:   #091810;
  --ink-1:   #1e3028;
  --ink-2:   #456054;
  --line:    rgba(16,72,44,.14);
  --green:   #197d49;
  --green-soft: #1d9a5a;
  --green-glow: 0 0 12px rgba(25,125,73,.4), 0 0 28px rgba(25,125,73,.18);
}

/* Bakgrund: täck den mörka filmiska bakgrunden */
html.light-mode .bg__veil,
body.light-mode .bg__veil {
  background: linear-gradient(180deg,rgba(215,230,220,.93),rgba(225,238,228,.97)) !important;
}
html.light-mode .bg__img,
body.light-mode .bg__img,
html.light-mode .bg__video,
body.light-mode .bg__video { opacity: 1 !important; }
html.light-mode .bg__grain,
body.light-mode .bg__grain { opacity: 0 !important; }
html.light-mode .bg,
body.light-mode .bg { background: #e9f2ed !important; }

/* Navigering */
body.light-mode .nav {
  background: linear-gradient(180deg,rgba(252,255,253,.97),rgba(244,250,247,.94));
  border-bottom-color: rgba(21,122,71,.16);
  box-shadow: 0 1px 14px rgba(20,90,55,.08);
}
body.light-mode .nav__brand { color: var(--ink-0); }
body.light-mode .nav__menu a { color: var(--ink-1); }
body.light-mode .nav__menu a:hover,
body.light-mode .nav__menu a.is-active { color: var(--ink-0); text-shadow: none; }
body.light-mode .nav__toggle {
  border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.05);
}
body.light-mode .nav__toggle:hover { background: rgba(0,0,0,.09); }
body.light-mode .nav__icon span { background: var(--ink-0); }
body.light-mode .nav__label { color: var(--ink-0); }
body.light-mode .nav__menu { /* mobil */
  background: rgba(232,242,236,.98); border-color: rgba(0,0,0,.08);
}
body.light-mode .nav__portal-sep { background: rgba(0,0,0,.1) !important; }

/* Live-tempmätare i nav */
body.light-mode .live {
  border-color: rgba(21,122,71,.22); background: rgba(21,122,71,.07); color: var(--ink-1);
}
body.light-mode .live__value { color: var(--ink-0); font-weight: 600; }

/* Temperaturkort */
body.light-mode .temp-card {
  background: rgba(255,255,255,.94);
  border-color: rgba(21,122,71,.16);
  box-shadow: 0 6px 24px rgba(20,90,55,.10);
}
body.light-mode .temp-card h3 { color: var(--ink-2); }
body.light-mode .temp-card__value { color: var(--ink-0); font-weight: 300; }
body.light-mode .temp-card__label { color: var(--ink-2); }
body.light-mode .temp-card__timestamp { color: var(--ink-2); }
body.light-mode .temp-card__status {
  background: rgba(26,140,82,.12); border-color: rgba(26,140,82,.3);
}
body.light-mode .temp-card__status.is-stale {
  background: rgba(180,40,40,.12); border-color: rgba(200,50,50,.3);
}

/* Meddelanden / announcements */
body.light-mode .ann-item--info    { background:rgba(30,80,200,.09);  border-color:rgba(40,100,240,.3);  color:#152870; }
body.light-mode .ann-item--warning { background:rgba(160,90,0,.09);   border-color:rgba(190,120,0,.35);  color:#6a3c00; }
body.light-mode .ann-item--alert   { background:rgba(170,20,20,.09);  border-color:rgba(200,40,40,.35);  color:#6a0e0e; }
body.light-mode .ann-item--success { background:rgba(0,110,55,.09);   border-color:rgba(0,150,70,.3);    color:#003d20; }

/* Generiska kort och sektioner */
body.light-mode .card {
  background: rgba(255,255,255,.94);
  border-color: rgba(21,122,71,.13);
  box-shadow: 0 4px 20px rgba(20,90,55,.08);
}
body.light-mode .card p { color: var(--ink-1); }
body.light-mode .card h3 { color: var(--ink-0); font-weight: 600; }
body.light-mode .section-title { color: var(--green); }
body.light-mode .section h2 { color: var(--ink-0); }
body.light-mode .section p { color: var(--ink-1); }
body.light-mode .btn {
  color: #0d5c35; border-color: rgba(21,122,71,.35); background: rgba(21,122,71,.07);
}
body.light-mode .hero h1 { color: var(--ink-0); }
body.light-mode .hero p,
body.light-mode .hero__sub { color: var(--ink-1); }
body.light-mode .hero__eyebrow { color: var(--green); }

/* Info-sida (inline styles i info.html) */
body.light-mode .info-card {
  background: rgba(255,255,255,.93) !important;
  border-color: rgba(21,122,71,.14) !important;
  color: var(--ink-1) !important;
}
body.light-mode .info-card h2 {
  color: var(--ink-0) !important;
  border-bottom-color: rgba(21,122,71,.22) !important;
}
body.light-mode .info-card h3 { color: var(--green) !important; }
body.light-mode .info-card p { color: var(--ink-1) !important; }
body.light-mode .info-fact-row {
  background: rgba(21,122,71,.055) !important;
  border-color: rgba(21,122,71,.13) !important;
}
body.light-mode .info-fact__label { color: var(--ink-2) !important; }
body.light-mode .info-fact__val   { color: var(--ink-0) !important; }
body.light-mode .info-list li     { color: var(--ink-1) !important; }
body.light-mode .info-note        { color: var(--ink-2) !important; }
body.light-mode .info-title       { color: var(--ink-0) !important; }
body.light-mode .info-subtitle    { color: var(--ink-2) !important; }
body.light-mode .info-badge--blue   { background:rgba(30,80,200,.1)!important; color:#1a3a8a!important; border-color:rgba(40,100,240,.25)!important; }
body.light-mode .info-badge--orange { background:rgba(160,90,0,.1)!important;  color:#7a4000!important; border-color:rgba(190,120,0,.3)!important; }
body.light-mode .info-toc {
  background: rgba(21,122,71,.06) !important; border-color: rgba(21,122,71,.14) !important;
}
body.light-mode .info-toc a { color: var(--green) !important; }
body.light-mode .info-table th { color: var(--ink-2) !important; border-color: rgba(0,0,0,.08) !important; }
body.light-mode .info-table td { color: var(--ink-1) !important; border-color: rgba(0,0,0,.05) !important; }
body.light-mode .info-table__highlight { background: rgba(26,140,82,.08) !important; }
body.light-mode .info-link { color: var(--green) !important; }

/* Hamnen-sida */
body.light-mode .hamnen-card {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(21,122,71,.14) !important;
  color: var(--ink-0) !important;
}
body.light-mode .hamnen-card:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(26,140,82,.35) !important;
}
body.light-mode .hamnen-card__desc  { color: var(--ink-2) !important; }
body.light-mode .hamnen-subtitle    { color: var(--ink-2) !important; }
body.light-mode .hamnen-kontakt {
  background: rgba(21,122,71,.055) !important;
  border-color: rgba(21,122,71,.13) !important;
}
body.light-mode .hamnen-kontakt h3 { color: var(--ink-0) !important; }
body.light-mode .hamnen-kontakt p  { color: var(--ink-1) !important; }

/* Sökfält */
body.light-mode .site-search-bar {
  background: rgba(246,252,249,.96); border-bottom-color: rgba(21,122,71,.14);
}
body.light-mode .ssb-inner { background: #fff; border-color: rgba(21,122,71,.22); }
body.light-mode .ssb-input { color: var(--ink-0); }
body.light-mode .ssb-input::placeholder { color: var(--ink-2); }
body.light-mode .ssb-icon { color: var(--ink-2); }
body.light-mode .ssb-results { background: rgba(230,240,234,.99); border-color: rgba(0,0,0,.06); }
body.light-mode .ssr-link:hover { background: rgba(0,0,0,.04); }
body.light-mode .ssr-title { color: var(--ink-0); }
body.light-mode .ssr-sub { color: var(--ink-2); }

/* Footer */
body.light-mode .foot {
  background: linear-gradient(180deg,rgba(235,246,240,0),rgba(233,244,238,.9));
  border-top-color: rgba(21,122,71,.14); color: var(--ink-2);
}

/* Laddningsskelett */
body.light-mode .skeleton {
  background: linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.09),rgba(0,0,0,.04));
  border-color: rgba(0,0,0,.08);
}
body.light-mode .error { border-color:rgba(180,40,40,.3); color:#7a1a1a; background:rgba(180,40,40,.06); }

/* ── Tema-växlare ────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: calc(var(--footer-h, 44px) + 10px);
  left: 12px;
  z-index: 199;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(8,14,10,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s, border-color .2s;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  opacity: .55;
}
.theme-toggle:hover { transform: scale(1.12); opacity: 1; }
body.light-mode .theme-toggle {
  background: rgba(242,248,244,.9);
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

/* ── Ljust tema — förbättrad palett och estetik ──────────────────── */
/* Bakgrundston: luftig grön-vit i stället för tung gradient */
html.light-mode .bg__veil,
body.light-mode .bg__veil {
  background: linear-gradient(175deg,rgba(247,252,249,.72) 0%,rgba(240,248,243,.84) 55%,rgba(235,245,240,.90) 100%) !important;
}

/* Ansökningsformulär (hamnen/ansok.html) */
body.light-mode .ansok-page {
  background: rgba(255,255,255,.92) !important;
  color: var(--ink-0) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.09) !important;
}
body.light-mode .ansok-page h1 { color: var(--ink-0) !important; }
body.light-mode .ansok-page .hsp-ingress { color: var(--ink-1) !important; }
body.light-mode .ansok-page .hsp-back a { color: var(--green) !important; }
body.light-mode .ansok-page .hsp-info { color: var(--ink-2) !important; border-top-color: rgba(0,0,0,.08) !important; }
body.light-mode .ansok-page .hsp-info a { color: var(--green) !important; }
body.light-mode .ansok-page fieldset {
  border-color: rgba(0,0,0,.1) !important;
  background: rgba(0,0,0,.015) !important;
}
body.light-mode .ansok-page legend { color: var(--ink-2) !important; }
body.light-mode .ansok-page label { color: var(--ink-2) !important; }
body.light-mode .ansok-page .ansok-tab {
  background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.1) !important; color: var(--ink-2) !important;
}
body.light-mode .ansok-page .ansok-tab--active {
  background: rgba(26,140,82,.13) !important; border-color: rgba(26,140,82,.35) !important; color: var(--green) !important;
}
body.light-mode .ansok-page input[type="text"],
body.light-mode .ansok-page input[type="email"],
body.light-mode .ansok-page input[type="tel"],
body.light-mode .ansok-page input[type="datetime-local"],
body.light-mode .ansok-page textarea,
body.light-mode .ansok-page .ak-sel {
  background: #fff !important;
  border-color: rgba(0,0,0,.18) !important;
  color: var(--ink-0) !important;
}
body.light-mode .ansok-page input:focus,
body.light-mode .ansok-page textarea:focus,
body.light-mode .ansok-page .ak-sel:focus { border-color: var(--green) !important; }
body.light-mode .ansok-page input::placeholder,
body.light-mode .ansok-page textarea::placeholder { color: var(--ink-2) !important; opacity: .7; }
body.light-mode .ansok-page .radio-group label { color: var(--ink-1) !important; }
body.light-mode .ansok-page .brick-option {
  background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.09) !important;
}
body.light-mode .ansok-page .brick-option:hover { background: rgba(0,0,0,.08) !important; }
body.light-mode .ansok-page .brick-option label { color: var(--ink-1) !important; }
body.light-mode .ansok-page .brick-option label::before { border-color: rgba(0,0,0,.3) !important; background: #fff !important; }
body.light-mode .ansok-page .sub-brick { border-color: rgba(0,0,0,.09) !important; }
body.light-mode .ansok-page .sub-opt { background: rgba(0,0,0,.02) !important; }
body.light-mode .ansok-page .form-note { color: var(--ink-2) !important; }
body.light-mode .ansok-page .form-check label { color: var(--ink-1) !important; }
body.light-mode .ansok-page .form-check a { color: var(--green) !important; }
body.light-mode .ansok-page .addr-dropdown {
  background: #fff !important; border-color: rgba(0,0,0,.13) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
body.light-mode .ansok-page .addr-dropdown li {
  color: var(--ink-1) !important; border-bottom-color: rgba(0,0,0,.05) !important;
}
body.light-mode .ansok-page .addr-dropdown li:hover,
body.light-mode .ansok-page .addr-dropdown li.active {
  background: rgba(26,140,82,.09) !important; color: var(--green) !important;
}
body.light-mode .ansok-page .lot-chip { color: var(--green) !important; }
body.light-mode .ansok-page .has-br-info {
  background: rgba(26,140,82,.08) !important; border-color: rgba(26,140,82,.22) !important;
}
body.light-mode .ansok-page .has-br-info p { color: var(--ink-1) !important; }
body.light-mode .ansok-page .prefill-banner { color: var(--green) !important; }
body.light-mode .ansok-page .btn--primary { background: var(--green) !important; color: #fff !important; }
body.light-mode .ansok-page .btn--secondary {
  background: rgba(0,0,0,.06) !important; color: var(--ink-0) !important; border-color: rgba(0,0,0,.16) !important;
}
body.light-mode .ansok-page .form-msg--error { background:rgba(180,40,40,.08)!important; border-color:rgba(180,40,40,.25)!important; color:#7a1a1a!important; }
body.light-mode .ansok-page .form-msg--success { background:rgba(26,140,82,.1)!important; border-color:rgba(26,140,82,.3)!important; color:var(--green)!important; }
body.light-mode .ansok-page #ak-err { color:#a84040 !important; }
body.light-mode .ansok-page .ak-sel option { background:#fff; color:var(--ink-0); }

/* ── Hamnen under-sidor (grinden, regler, miljopolicy) ─────── */
body.light-mode .hamnen-sub-page {
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.07) !important;
}
body.light-mode .hamnen-sub-page h1 { color: var(--ink-0) !important; }
body.light-mode .hsp-prose h2 {
  color: var(--ink-0) !important;
  border-bottom-color: rgba(21,122,71,.22) !important;
}
body.light-mode .hsp-prose p,
body.light-mode .hsp-prose li { color: var(--ink-1) !important; }
body.light-mode .hsp-meta { color: var(--ink-2) !important; }
body.light-mode .hsp-kontakt { border-top-color: rgba(0,0,0,.08) !important; }
body.light-mode .hsp-warning {
  background: rgba(200,40,40,.07) !important;
  border-color: rgba(200,40,40,.22) !important;
  border-left-color: rgba(200,40,40,.55) !important;
}
body.light-mode .hsp-warning__title { color: #8b1a1a !important; }
body.light-mode .hsp-warning p:not(.hsp-warning__title) { color: #6b2222 !important; }

/* ── Startsidan — officiell föreningssida-länk ──────────────── */
body.light-mode .hero__official-link {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: var(--ink-1) !important;
}
body.light-mode .hero__official-link:hover {
  background: rgba(26,140,82,.07) !important;
  border-color: rgba(26,140,82,.25) !important;
}
/* =========================================================
   Breda skärmar — innehållssidor får mer yta (2026-07-03d)
   #view i selektorn ger högre specificitet än sidornas
   inline-<style> så reglerna vinner utan !important.
   ========================================================= */
@media (min-width: 1200px) {
  #view .info-page,
  #view .hamnen-page,
  #view .fort-page      { max-width: 1200px; }
  #view .hamnen-sub-page { max-width: 960px; }  /* textsidor: lagom radlängd */
  #view .ansok-page      { max-width: 900px; }
  #view .kf              { max-width: 1000px; }
  #view .home-announcements,
  #view .temp-grid       { max-width: 900px; }
}

/* ── Ljust tema: dropdown-meny (stilar injiceras av nav.js) ─────── */
body.light-mode .nav__dropdown .nav__submenu {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,122,71,.18);
  box-shadow: 0 12px 32px rgba(20,90,55,.16);
}
body.light-mode .nav__submenu a { color: var(--ink-1); }
body.light-mode .nav__submenu a:hover { background: rgba(21,122,71,.08); color: var(--ink-0); }
@media (max-width: 900px) {
  body.light-mode .nav__dropdown .nav__submenu {
    background: rgba(0,0,0,.03);
    border: none; box-shadow: none;
    border-left: 2px solid rgba(21,122,71,.25);
  }
}
body.light-mode .nav--cramped .nav__dropdown .nav__submenu {
  background: rgba(0,0,0,.03); border: none; box-shadow: none;
  border-left: 2px solid rgba(21,122,71,.25);
}