/* FAKTIVE navigation 2026: menuen læser siden.
   Tre tilstande, styret af assets/nav-2026.js via klasser på <nav>:
   - toppen (ingen klasse): massiv aubergine-bjælke i fuld højde, flugter med heroen
   - .is-scrolled: bjælken letter og bliver en svævende, kompakt "pille" med glas
   - .on-light: pillen skifter til creme, når den ligger over en lys sektion
   Kun transform og opacity animeres; farveskift sker én gang ved sektionsskift, ikke pr. frame.
   Indlæses efter mobile-2026.css. */

html{scroll-padding-top:96px}

nav{
  --nav-ease:cubic-bezier(.16,1,.3,1);
  --nav-dur:520ms;
  --nav-fast:220ms;
  --nav-ink:#F2E7DC;
  --nav-link:#E0C9B8;
  --nav-link-hover:#FFFFFF;
  --nav-pill-x:16px;
  --nav-pill-y:10px;
  background:transparent !important;
  pointer-events:none;
  isolation:isolate;
}
nav .nav-in,nav .nav-panel{pointer-events:auto}

/* lag 1: bjælken i toppen. Massiv som standard; ligger der en hero lige under,
   er den i stedet en blød toning oven på videoen, så menuen er en del af baggrunden */
nav::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:#3C2A44;
  transition:opacity var(--nav-dur) var(--nav-ease);
}
/* over en hero med creme i venstre side: ingen mørk toning, og mørk skrift i menuen,
   så logo og links kan læses på cremen */
nav:has(+ .hero)::before{background:none}
nav:has(+ .hero):not(.is-scrolled):not(.open){
  --nav-ink:#3C2A44;
  --nav-link:#5C4F48;
  --nav-link-hover:#3C2A44;
}
nav.is-scrolled::before{opacity:0}
nav.open:not(.is-scrolled)::before{background:#3C2A44;bottom:0;opacity:1}

/* heroen trækkes op bag menuen, så videoen fylder helt op til toppen af skærmen.
   Indholdet flyttes ned igen med samme mål, så teksten står hvor den plejer */
:root{--nav-h:83px}
nav + .hero{
  margin-top:calc(-1 * var(--nav-h));
  padding-top:var(--nav-h) !important;
  min-height:100svh !important;
}
@media (max-width:900px){
  nav + .hero{padding-top:calc(88px + var(--nav-h)) !important;min-height:0 !important}
}
@media (max-width:700px){:root{--nav-h:62px}}

/* lag 2 og 3: pillen, en mørk og en lys flade der krydstones (rack focus) */
nav .nav-in::before,nav .nav-in::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:var(--nav-pill-y) var(--nav-pill-x);
  border-radius:14px;
  opacity:0;transform:translateY(-6px) scale(.985);
  transition:opacity var(--nav-dur) var(--nav-ease),transform var(--nav-dur) var(--nav-ease);
}
nav .nav-in::before{
  /* over en mørk sektion med egen farve sætter nav-2026.js fladen til sektionens farve, helt
     dækkende; over heroens video står den halvgennemsigtige standard */
  background:var(--nav-mork-flade,rgba(46,32,54,.80));
  transition:opacity var(--nav-dur) var(--nav-ease),transform var(--nav-dur) var(--nav-ease),background-color .5s ease;
  border:1px solid rgba(242,231,220,.10);
  box-shadow:0 14px 40px rgba(24,16,28,.32);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
nav .nav-in::after{
  /* flade sættes af nav-2026.js efter den sektion, pillen ligger over */
  /* helt dækkende, så indhold der ruller forbi nedenunder ikke farver den */
  background:var(--nav-lys-flade,#FAF4EE);
  transition:opacity var(--nav-dur) var(--nav-ease),transform var(--nav-dur) var(--nav-ease),background-color .5s ease;
  border:1px solid rgba(60,42,68,.10);
  box-shadow:0 14px 40px rgba(60,42,68,.12);
}
nav.is-scrolled .nav-in::before{opacity:1;transform:none}
nav.is-scrolled.on-light .nav-in::before{opacity:0}
nav.is-scrolled.on-light .nav-in::after{opacity:1;transform:none}

/* lyst tema: blæk skifter til aubergine */
nav.on-light{
  --nav-ink:#3C2A44;
  --nav-link:#5C4F48;
  --nav-link-hover:#3C2A44;
}
nav.open{--nav-ink:#F2E7DC;--nav-link:#E0C9B8;--nav-link-hover:#FFFFFF}
nav.open.is-scrolled .nav-in::before{opacity:1;transform:none}
nav.open .nav-in::after{opacity:0 !important}

/* logo: skrumper roligt, og de lyse bogstaver følger temaet (kobber-A'et bliver) */
nav .logo-w{transform-origin:left center;transition:transform var(--nav-dur) var(--nav-ease)}
nav .logo-w [fill="#F2E7DC"]{fill:var(--nav-ink);transition:fill var(--nav-fast) linear}
nav.is-scrolled .logo-w{transform:scale(.74)}

/* links: understregning tegnes fra venstre */
nav .nav-links a{
  position:relative;color:var(--nav-link);
  transition:color var(--nav-fast) var(--nav-ease);
}
nav .nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:#E45724;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--nav-fast) var(--nav-ease);
}
nav .nav-links a:hover{color:var(--nav-link-hover)}
nav .nav-links a:hover::after,nav .nav-links a.on::after{transform:scaleX(1)}
nav .nav-links a.on{color:var(--nav-link-hover);border-bottom:0 !important;padding-bottom:0 !important}

nav .nav-cta{transition:transform var(--nav-fast) var(--nav-ease),background-color var(--nav-fast) linear}
/* samme skrift som knapperne i prissektionen: Mona Sans, normal bredde, vægt 500 (før fed 700) */
nav .nav-cta{font-family:var(--font-text) !important;font-stretch:100% !important;font-weight:500 !important;letter-spacing:.01em !important}
nav .nav-cta:hover{background:#C9471A !important}
nav .nav-cta:active{transform:scale(.97)}
/* bunden af siden: måleren er fuld, og knappen slår som et hjerteslag (to slag og en pause),
   med en blød orange ring, der breder sig ud ved hvert slag */
@keyframes nav-cta-dunk{
  0%,40%,100%{transform:scale(1)}
  10%{transform:scale(1.09)}
  20%{transform:scale(1)}
  28%{transform:scale(1.06)}}
@keyframes nav-cta-ring{
  0%{box-shadow:0 0 0 0 rgba(228,87,36,.5)}
  45%,100%{box-shadow:0 0 0 12px rgba(228,87,36,0)}}
nav .nav-cta.nav-cta-dunk{animation:nav-cta-dunk 1.5s cubic-bezier(.3,0,.3,1) infinite,nav-cta-ring 1.5s ease-out infinite}
@media (prefers-reduced-motion:reduce){nav .nav-cta.nav-cta-dunk{animation:none}}

nav a:focus-visible,nav button:focus-visible{outline:2px solid #E45724;outline-offset:4px;border-radius:6px}
/* logoet er skaleret med transform, så ringen tegnes om selve logoet og ikke om den uskalerede boks */
nav .nav-in > a[aria-label]:focus-visible{outline:none}
nav .nav-in > a[aria-label]:focus-visible .logo-w{outline:2px solid #E45724;outline-offset:6px;border-radius:4px}

/* kapitel-mærke: hvor på siden man er (kun bred skærm, kun når pillen er fremme) */
nav .nav-chapter{
  display:none;align-items:center;gap:10px;min-width:0;
  margin-left:-96px;padding-left:18px;
  border-left:1px solid color-mix(in srgb,var(--nav-ink) 22%,transparent);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--nav-link);
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--nav-dur) var(--nav-ease),transform var(--nav-dur) var(--nav-ease),color var(--nav-fast) linear,border-color var(--nav-fast) linear;
}
nav .nav-chapter-in{display:flex;align-items:center;gap:10px;min-width:0}
nav .nav-chapter i{font-style:normal;color:#E45724;font-variant-numeric:tabular-nums;letter-spacing:.08em}
nav .nav-chapter b{font-weight:500;overflow:hidden;text-overflow:ellipsis;max-width:220px}
nav.is-scrolled.has-chapter .nav-chapter{opacity:1;transform:none}
@media (min-width:1180px){nav .nav-chapter{display:flex}}

/* fremskridtslinje: følger pillens underkant */
nav #ptrack{display:none}
nav #progress{
  width:auto !important;height:2px;border-radius:2px;
  left:max(calc(var(--nav-pill-x) + 14px),calc((100% - 1200px)/2 + var(--nav-pill-x) + 14px));
  right:max(calc(var(--nav-pill-x) + 14px),calc((100% - 1200px)/2 + var(--nav-pill-x) + 14px));
  bottom:calc(var(--nav-pill-y) + 1px);
  transform:scaleX(0);transform-origin:left center;
  opacity:0;transition:opacity var(--nav-dur) var(--nav-ease);
}
nav.is-scrolled #progress{opacity:1}

/* tablet (701-1000 px): links og knap kan ikke være på én linje, så burger-menuen overtager.
   Samme opbygning som mobil-laget i mobile-2026.css, som kun gælder under 700 px.
   (I originalen blev "Book demo" skubbet ud af skærmen i dette interval.) */
@media (min-width:701px) and (max-width:1000px){
  nav .nav-in{gap:14px}
  nav .logo-w{height:36px}
  nav .nav-links{display:none !important}
  nav .nav-cta{margin-left:auto;white-space:nowrap}
  nav .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1px solid color-mix(in srgb,var(--nav-ink) 28%,transparent);border-radius:8px;background:transparent;cursor:pointer;flex:0 0 auto}
  nav .nav-burger span{display:block;height:2px;background:var(--nav-ink);border-radius:2px;transition:transform .2s,opacity .2s,background-color var(--nav-fast) linear}
  nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .nav-burger span:nth-child(2){opacity:0}
  nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav .nav-panel{position:absolute;top:calc(100% - var(--nav-pill-y));left:var(--nav-pill-x);right:var(--nav-pill-x);background:#3C2A44;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 14px 14px;padding:10px 32px 24px;box-shadow:0 30px 60px rgba(42,27,48,.35);z-index:60}
  nav:not(.is-scrolled) .nav-panel{top:100%;left:0;right:0;border-radius:0}
  nav.open .nav-panel{display:block}
  nav .nav-panel a{display:block;padding:16px 4px;font-size:20px;font-weight:500;color:#F2E7DC;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
  nav .nav-panel .np-phone{margin-top:14px;font-size:15px;color:#E0C9B8;border:0;padding:8px 4px}
  nav .nav-panel .np-phone b{color:#fff;font-weight:500}
  body.nav-lock{overflow:visible !important;overflow-x:clip !important}
  html:has(body.nav-lock){overflow:hidden}
}

/* mobil */
@media (max-width:700px){
  nav{--nav-pill-x:8px;--nav-pill-y:5px}
  nav .nav-in::before,nav .nav-in::after{border-radius:12px}
  nav.is-scrolled .logo-w{transform:none}
  nav .nav-burger{border-color:color-mix(in srgb,var(--nav-ink) 28%,transparent)}
  nav .nav-burger span{background:var(--nav-ink);transition:transform .2s,opacity .2s,background-color var(--nav-fast) linear}
  nav .nav-panel{top:calc(100% - var(--nav-pill-y));left:var(--nav-pill-x);right:var(--nav-pill-x);border-radius:0 0 12px 12px}
  nav:not(.is-scrolled) .nav-panel{top:100%;left:0;right:0;border-radius:0}
  /* scroll-lås på <html> i stedet for <body>: overflow:hidden på body gør body til scroll-container,
     så sticky-menuen rullede væk, når man åbnede den længere nede på siden (fejl i originalen) */
  body.nav-lock{overflow:visible !important;overflow-x:clip !important}
  html:has(body.nav-lock){overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  nav::before,nav .nav-in::before,nav .nav-in::after,nav .logo-w,nav .nav-chapter,nav #progress,
  nav .nav-links a,nav .nav-links a::after,nav .logo-w [fill="#F2E7DC"]{transition:none !important}
  nav .nav-in::before,nav .nav-in::after,nav .nav-chapter{transform:none !important}
}

/* telefonnummeret i burger-menuen følger sidens mono-skrift */
nav .nav-panel .np-phone{font-family:var(--font-mono,'Roboto Mono',monospace) !important}