/* ══════════════════════════════════════════════════════════════════
   shared.css — site-wide header, mobile drawer and footer.
   Loaded LAST on every inner page so it overrides the legacy
   red theme in main.css. Keeps every page identical to the homepage.
   ══════════════════════════════════════════════════════════════════ */

/* ── Design tokens (sky/amber, matching the homepage) ── */
:root{
  --slate-950:#0b1120;--slate-900:#0f172a;--slate-800:#1e293b;--slate-700:#334155;
  --slate-600:#475569;--slate-500:#64748b;--slate-400:#94a3b8;--slate-300:#cbd5e1;
  --slate-200:#e2e8f0;--slate-100:#f1f5f9;--slate-50:#f8fafc;
  --sky-800:#075985;--sky-700:#0369a1;--sky-600:#0284c7;--sky-500:#0ea5e9;
  --sky-400:#38bdf8;--sky-300:#7dd3fc;--sky-100:#e0f2fe;--sky-50:#f0f9ff;
  --red-600:#dc2626;--red-warm:#c2302e;
  --amber-500:#f59e0b;--amber-400:#fbbf24;
  --green-600:#16a34a;--green-500:#22c55e;
  --bg:#f6f8fb;--card:#ffffff;--border:#e8ecf2;--border-light:#f0f3f7;
  --text:#0f172a;--text-2:#334155;--text-3:#64748b;--text-4:#94a3b8;
  --r:14px;--r-lg:18px;--r-xl:24px;
  --shadow:0 1px 3px rgba(15,23,42,.04),0 0 0 1px rgba(15,23,42,.03);
  --shadow-md:0 4px 16px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.03);
  --shadow-lg:0 12px 40px rgba(15,23,42,.08);
}
body{background:var(--bg);color:var(--text)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Header ── */
.nav,.site-header{background:#fff;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(15,23,42,.03)}
.nav::before,.site-header::before{content:none}
.nav-inner,.hdr-inner{max-width:1120px;margin:0 auto;padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);border-right:none;padding-right:0}
.nav-brand .brand-flag{width:36px;height:28px;border-radius:3px;overflow:visible;flex-shrink:0}
.nav-brand .brand-flag svg{display:block;width:36px;height:28px}
.nav-brand .brand-text{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--text)}
.nav-brand .brand-text em{font-style:normal;font-weight:800;color:var(--red-warm)}

.nav-links{display:flex;gap:1px;list-style:none;align-items:center}
.nav-links a{font-size:13px;font-weight:500;color:var(--text-3);text-decoration:none;padding:7px 10px;border-radius:6px;transition:all .15s;letter-spacing:.1px;border-bottom:2px solid transparent;background:none}
.nav-links a:hover{color:var(--text);background:var(--slate-100)}
.nav-links a.active{color:var(--red-warm);font-weight:600;background:none;border-bottom:2px solid var(--red-warm)}
.nav-links a:focus-visible,.nav-brand:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px;border-radius:4px}

/* Områder dropdown */
.hdr-dropdown{position:relative}
.hdr-dropdown>a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.hdr-dropdown>a svg{opacity:.5;flex-shrink:0}
.hdr-dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:220px;background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:50}
.hdr-dropdown:hover .hdr-dropdown-menu,.hdr-dropdown:focus-within .hdr-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hdr-dd-item{display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--text-2);
  text-decoration:none;padding:8px 10px;border-radius:8px;background:var(--slate-50);border:1px solid var(--border);min-height:36px}
.hdr-dd-item:hover{color:var(--sky-600);background:var(--sky-50);border-color:var(--sky-300)}
.hdr-dd-all{grid-column:1/-1;font-weight:600;color:var(--sky-600)}
.hdr-dd-sep{grid-column:1/-1;height:1px;background:var(--border);margin:4px 0}

.nav-right{display:flex;align-items:center;gap:10px}
.nav-temp{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);background:var(--sky-100);border:1px solid rgba(2,132,199,.12);padding:6px 12px 6px 10px;border-radius:20px}
.nav-temp .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--text);font-size:14.5px}
.nav-temp .nc{color:var(--text-3);white-space:nowrap}
.nav-temp svg{width:17px;height:17px;stroke:var(--amber-500);flex-shrink:0}
.unit-toggle{display:flex;align-items:center;gap:1px;background:var(--slate-100);border-radius:14px;padding:2px}
.unit-btn{background:transparent;border:none;color:var(--text-3);font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;cursor:pointer;font-family:inherit}
.unit-btn.on,.unit-btn[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.unit-btn:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}
.nav-search{width:32px;height:32px;border-radius:8px;background:var(--slate-100);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0}
.nav-search:hover{background:var(--slate-200)}
.nav-search svg{width:15px;height:15px;stroke:var(--text-3)}

.hamburger{display:none;width:40px;height:40px;border-radius:10px;background:var(--slate-100);border:1px solid var(--border);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;position:relative;z-index:201}
.hamburger:hover{background:var(--slate-200)}
.hamburger .bar{display:block;width:18px;height:2px;background:var(--text-2);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;left:50%;transform:translateX(-50%)}
.hamburger .bar:first-child{top:12px}.hamburger .bar:nth-child(2){top:19px}.hamburger .bar:nth-child(3){top:26px}
.hamburger.open .bar:first-child{top:19px;transform:translateX(-50%) rotate(45deg)}
.hamburger.open .bar:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(0)}
.hamburger.open .bar:nth-child(3){top:19px;transform:translateX(-50%) rotate(-45deg)}
.hamburger:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}

/* ── Mobile drawer (must sit ABOVE the sticky nav, z-index:1000) ── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:1500;opacity:0;transition:opacity .3s}
.mobile-overlay.show{display:block;opacity:1}
.mobile-drawer{position:fixed;top:0;right:-320px;width:300px;max-width:85vw;height:100%;background:#fff;
  z-index:1600;transition:right .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;
  box-shadow:-10px 0 40px rgba(15,23,42,.18);border-left:1px solid var(--border)}
.mobile-drawer.open{right:0}

.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.drawer-header .drawer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.drawer-header .drawer-brand svg{width:26px;height:20px;border-radius:2px}
.drawer-header .drawer-brand span{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text)}
.drawer-header .drawer-brand span em{font-style:normal;font-weight:800;color:var(--red-warm)}
.drawer-close{width:40px;height:40px;border-radius:10px;background:var(--slate-100);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.drawer-close:hover{background:var(--slate-200)}
.drawer-close svg{width:18px;height:18px;stroke:var(--text-2)}
.drawer-close:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}

.drawer-weather{padding:16px 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--sky-50) 0%,#eaf6fd 100%)}
.drawer-weather .dw-temp{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;color:var(--text);line-height:1}
.drawer-weather .dw-cond{font-size:13px;color:var(--text-3);margin-top:2px}
.dw-icon svg{width:44px;height:44px}

.drawer-nav{padding:10px 0}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;min-height:44px;
  font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none;transition:all .15s;border-left:3px solid transparent}
.drawer-nav a:hover{color:var(--text);background:var(--slate-50)}
.drawer-nav a.active{color:var(--sky-600);font-weight:600;background:var(--sky-50);border-left-color:var(--sky-600)}
.drawer-nav a svg{width:14px;height:14px;stroke:var(--text-4);flex-shrink:0}
.drawer-nav a:focus-visible{outline:2px solid var(--sky-500);outline-offset:-2px}

.drawer-divider{height:1px;background:var(--border);margin:6px 18px}
.drawer-section{padding:6px 0}
.drawer-section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 18px;min-height:44px;
  font-size:15px;font-weight:500;color:var(--text-2);background:none;border:none;cursor:pointer;font-family:inherit;
  border-left:3px solid transparent;transition:all .15s}
.drawer-section-toggle:hover{color:var(--text);background:var(--slate-50)}
.drawer-section-toggle .toggle-arrow{width:14px;height:14px;stroke:var(--text-4);transition:transform .2s}
.drawer-section-toggle.open .toggle-arrow{transform:rotate(180deg)}
.drawer-section-toggle:focus-visible{outline:2px solid var(--sky-500);outline-offset:-2px}
.drawer-section-body{padding:4px 18px 8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.drawer-section-body a{font-size:13px;color:var(--text-3);text-decoration:none;padding:9px 12px;min-height:38px;
  border-radius:9px;background:var(--slate-50);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;transition:all .15s}
.drawer-section-body a:hover{color:var(--sky-600);background:var(--sky-50);border-color:var(--sky-300)}
.drawer-area-all{grid-column:1/-1;color:var(--sky-600)!important;font-weight:600}
.drawer-nav-secondary{border-top:0}
.drawer-footer{padding:16px 18px;border-top:1px solid var(--border);margin-top:10px}
.drawer-footer a{font-size:12.5px;color:var(--text-4);text-decoration:none;margin-right:14px}
.drawer-footer a:hover{color:var(--sky-600)}

@media(max-width:840px){.nav-links{display:none}.hamburger{display:flex}}
@media(max-width:520px){.nav-inner,.hdr-inner{padding:0 12px}.nav-temp .nc{display:none}}

/* ── Footer (dark navy, identical to the homepage) ── */
.footer{background:var(--slate-900);color:var(--slate-300);padding:40px 28px 0;margin-top:8px}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-bottom:32px}
.footer-brand{display:flex;align-items:center;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:10px}
.footer-brand em{font-style:normal;color:#ff6b6b}
.footer-desc{font-size:12.5px;line-height:1.6;color:var(--slate-400);margin-bottom:14px}
.footer-socials{display:flex;gap:8px}
.footer-socials a{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .15s}
.footer-socials a:hover{background:rgba(255,255,255,.15)}
.footer-socials svg{width:15px;height:15px;stroke:var(--slate-300)}
.footer-col h4{font-family:'Bricolage Grotesque',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--slate-400);margin-bottom:13px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:8px}
.footer-col a{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate-300);text-decoration:none;transition:color .15s}
.footer-col a::before{content:'›';color:var(--slate-600);font-size:13px;line-height:1}
.footer-col a:hover{color:#fff}
.footer-col a:focus-visible,.footer-socials a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.footer-bottom{max-width:1120px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding:16px 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--slate-500)}
.footer-bottom a{color:var(--slate-400);text-decoration:none}
.footer-bottom a:hover{color:#fff;text-decoration:underline}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:520px){.footer{padding:32px 16px 0}.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}

/* ── Cookie banner ── */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1400;max-width:560px;margin:0 auto;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cookie-banner.hidden{display:none}
.cookie-text{font-size:12.5px;color:var(--text-3);flex:1 1 240px}
.cookie-text a{color:var(--sky-600)}
.cookie-actions{display:flex;gap:8px}
.btn-cookie-accept,.btn-cookie-decline{font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 16px;min-height:40px;border-radius:9px;cursor:pointer;border:1px solid var(--border)}
.btn-cookie-accept{background:var(--sky-600);color:#fff;border-color:var(--sky-600)}
.btn-cookie-accept:hover{background:var(--sky-700)}
.btn-cookie-decline{background:#fff;color:var(--text-2)}
.btn-cookie-decline:hover{background:var(--slate-100)}
.btn-cookie-accept:focus-visible,.btn-cookie-decline:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}

/* ── Scroll to top ── */
#scroll-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);cursor:pointer;
  display:none;align-items:center;justify-content:center;z-index:1300;color:var(--text-2)}
#scroll-to-top.show{display:flex}
#scroll-to-top:hover{background:var(--slate-50)}
#scroll-to-top:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Footer brand flag (was an inline style in footer.html) */
.footer-brand svg{vertical-align:middle;margin-right:6px}

/* Nav links must never wrap mid-label ("I dag" -> "I" / "dag") */
.nav-links a{white-space:nowrap}
.nav-links li{flex-shrink:0}
@media(max-width:1180px){.nav-links a{padding:7px 8px;font-size:12.5px}}
@media(max-width:1000px){.nav-links a{padding:7px 6px;font-size:12px;letter-spacing:0}}

/* Breathing room between the logo and the first nav item */
.nav-inner,.hdr-inner{gap:18px}
.nav-links{margin-left:6px}
@media(max-width:1180px){.nav-inner,.hdr-inner{gap:12px}}

/* ══ Menu rebuild ═══════════════════════════════════════════════════════
   Every link is inline-flex and full bar height. Previously .nav-links a
   was display:inline (vertical padding ignored -> 24px tall) while the
   dropdown trigger was inline-flex (36px), so "Områder" sat 6px higher
   than its siblings and the dropdown opened inside the header.
   ══════════════════════════════════════════════════════════════════════ */
.nav-links{height:100%;align-items:stretch;gap:2px}
.nav-links>li{display:flex;align-items:center;height:100%;flex-shrink:0}
.nav-links>li>a{display:inline-flex;align-items:center;height:34px;padding:0 10px;
  border-radius:8px;border-bottom:0;line-height:1;white-space:nowrap}
.nav-links>li>a:hover{background:var(--slate-100);color:var(--text)}

/* Active item: pill + underline that sits under the text, not the bar */
.nav-links>li>a.active{position:relative;color:var(--red-warm);font-weight:600;background:transparent;border-bottom:0}
.nav-links>li>a.active::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;
  height:2px;border-radius:2px;background:var(--red-warm)}

/* Dropdown trigger matches its siblings exactly */
.hdr-dropdown{height:100%;display:flex;align-items:center;position:relative}
.hdr-dropdown>a{gap:5px}
.hdr-dropdown>a svg{width:9px;height:6px;opacity:.5;flex-shrink:0}
.hdr-dropdown:hover>a,.hdr-dropdown:focus-within>a{background:var(--slate-100);color:var(--text)}

/* Menu now clears the full 56px bar instead of opening inside it */
.hdr-dropdown-menu{top:calc(100% + 4px);min-width:264px;padding:10px}
.hdr-dropdown:hover .hdr-dropdown-menu,
.hdr-dropdown:focus-within .hdr-dropdown-menu{transform:translateX(-50%) translateY(0)}
.hdr-dd-item{min-height:38px}

/* Specificity fix: the dropdown links live inside .nav-links, so the generic
   `.nav-links a` rule (0,1,1) was overriding `.hdr-dd-item` (0,1,0) and
   stripping their background and colour. Qualify the selectors. */
.hdr-dropdown-menu a.hdr-dd-item{display:flex;align-items:center;justify-content:center;
  height:auto;min-height:38px;padding:9px 10px;border-radius:8px;
  font-size:12.5px;font-weight:500;color:var(--text-2);
  background:var(--slate-50);border:1px solid var(--border);white-space:nowrap}
.hdr-dropdown-menu a.hdr-dd-item:hover{color:var(--sky-600);background:var(--sky-50);border-color:var(--sky-300)}
.hdr-dropdown-menu a.hdr-dd-item:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}
.hdr-dropdown-menu a.hdr-dd-all{grid-column:1/-1;font-weight:600;color:var(--sky-600);
  background:var(--sky-50);border-color:var(--sky-300)}
.hdr-dropdown-menu a.hdr-dd-all:hover{background:var(--sky-100)}