/* SPOR 2030 · mobilmenu (godkendt af Martin 20. okt. 2026). Kun under 1121 px.
   Header: logo til venstre, hamburgerikon til højre; på telefon står den primære knap kun nederst i menuen.
   Øverst: computermenuens undermenu under «Det gør SPOR» (Martin 23. okt. 2026). Linket fører til salgssiden; pilen åbner undermenuen. */
.nav-spor{position:relative;display:inline-flex;align-items:center}
.nav-spor-t{display:inline-flex;align-items:center;justify-content:center;width:30px;height:44px;margin:0 -10px 0 4px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.nav-spor-t svg{transition:transform .2s var(--ease)}
.nav-spor-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-spor-t:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.nav-spor-p a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nav-spor-p{position:absolute;top:calc(100% + 4px);left:-16px;z-index:70;width:320px;padding:8px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--hair),0 24px 48px -24px rgba(31,34,26,.35)}
.nav-spor-p[hidden]{display:none}
.nav-spor-p::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav .links .nav-spor-p a{position:relative;display:grid;gap:3px;min-height:0;padding:12px 14px 12px 38px;border-radius:10px;background:none;color:var(--ink)}
.nav-spor-p a::before{content:"";position:absolute;left:16px;top:18px;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.8px var(--red)}
.nav .links .nav-spor-p a:hover,.nav .links .nav-spor-p a[aria-current="page"]{background:var(--stone)}
.nav-spor-p b{font-weight:500;font-size:15px}
.nav-spor-p span{font-size:13.5px;line-height:1.4;color:var(--ink-2)}

.hb{display:none;position:relative;flex:none;width:48px;height:48px;margin-right:-10px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink);cursor:pointer;transition:transform .16s var(--ease)}
.hb i{position:absolute;left:12px;right:12px;height:1.8px;border-radius:2px;background:currentColor}
.hb i:nth-child(1){top:18px}.hb i:nth-child(2){top:24px}.hb i:nth-child(3){top:30px}
.hb:focus-visible,.drw-x:focus-visible,.drw a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.hb:active{transform:scale(.94)}
@media (max-width:1120px){.hb{display:inline-block}}
@media (max-width:640px){.nav>.btn{display:none}}

.drw[hidden]{display:none}
.drw{position:fixed;inset:0;z-index:60}
.drw-bg{position:absolute;inset:0;background:rgba(31,34,26,.34);opacity:0;transition:opacity .3s var(--ease)}
.drw-p{--pad:clamp(20px,5.8vw,32px);position:absolute;top:0;right:0;width:min(100%,460px);height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--paper);box-shadow:-30px 0 60px -30px rgba(31,34,26,.35);transform:translateX(100%);transition:transform .36s cubic-bezier(.32,.72,0,1)}
.drw.open .drw-bg{opacity:1}
.drw.open .drw-p{transform:none}
.drw.closing .drw-p{transition-duration:.22s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.drw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(var(--pad) + env(safe-area-inset-right)) 0 var(--pad);border-bottom:1px solid var(--hair)}
.drw-top .brand{margin:0;min-height:46px}
.drw-x{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-right:-8px;padding:0 8px;border:0;border-radius:12px;background:none;font:500 15px/1 var(--text);color:var(--ink);cursor:pointer}
.drw-x svg{flex:none}
.drw-nav{overflow-y:auto;overscroll-behavior:contain;padding:28px calc(var(--pad) + env(safe-area-inset-right)) 24px var(--pad)}
.drw-nav ul{list-style:none;margin:0;padding:0}
.drw-nav a{color:var(--ink);text-decoration:none}
.drw-spor{padding-bottom:22px;border-bottom:1px solid var(--hair)}
.drw-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:56px}
.drw-main b{font:400 46px/1 var(--disp)}
.drw-main span{font:500 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
/* Den røde tråd binder SPOR og afsnittene på SPOR-siden sammen */
.drw-sub{position:relative;margin-top:6px!important;padding-left:26px!important}
.drw-sub::before{content:"";position:absolute;left:4.2px;top:0;bottom:24px;width:1.6px;background:var(--red)}
.drw-sub a{position:relative;display:flex;align-items:center;min-height:48px;font-size:17px}
.drw-sub a::before{content:"";position:absolute;left:-26px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.8px var(--red)}
.drw-list a{display:flex;align-items:center;min-height:58px;border-bottom:1px solid var(--hair);font:400 30px/1.1 var(--disp)}
.drw-list [aria-current="page"]::after,.drw-main[aria-current="page"] b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--red);vertical-align:middle}
.drw-main[aria-current="page"] b::after{width:9px;height:9px;margin-left:4px;vertical-align:baseline}
/* Knappen står i sin egen række under listen og dækker aldrig menupunkterne; listen ruller, hvis pladsen er lille */
.drw-foot{display:grid;gap:10px;padding:16px calc(var(--pad) + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) var(--pad);border-top:1px solid var(--hair);background:var(--paper)}
.drw-foot .btn{justify-content:center;width:100%;min-height:54px;font-size:16px}
.drw-foot p{margin:0;font-size:13.5px;color:var(--ink-2);text-align:center}
/* Indgang: indholdet kommer frem lige efter panelet; linkene kan bruges med det samme */
.drw-in{opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .38s var(--ease)}
.drw.open .drw-in{opacity:1;transform:none;transition-delay:calc(70ms + var(--i,0) * 40ms)}
@media (max-height:700px){.drw-main b{font-size:36px}.drw-main{min-height:48px}.drw-sub a{min-height:46px;font-size:16px}.drw-list a{min-height:48px;font-size:24px}.drw-nav{padding-top:14px}.drw-spor{padding-bottom:12px}.drw-foot{padding-top:12px}}
@media (max-height:520px){.drw-top{height:calc(56px + env(safe-area-inset-top))}.drw-foot p{display:none}.drw-foot .btn{min-height:48px}.drw-foot{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}}
/* Uden JavaScript (Martin 23. okt. 2026): «Menu» er et link, der åbner den samme menu med :target, og «Luk» fører tilbage til siden */
.hb-nojs,.drw-x-nojs{display:none}
html:not(.js) .hb,html:not(.js) .drw-x{display:none!important}
@media (max-width:1120px){html:not(.js) .hb-nojs{display:inline-flex;align-items:center;min-height:48px;margin-right:-4px;padding:0 4px;font:500 15px/1 var(--text);color:var(--ink);text-decoration:none}}
html:not(.js) .drw:target{display:block!important} /* slår undersidernes [hidden]{display:none!important}, kun for menuen, der er valgt med linket */
html:not(.js) .drw:target .drw-p{transform:none}
html:not(.js) .drw:target .drw-bg,html:not(.js) .drw:target .drw-in{opacity:1;transform:none}
html:not(.js) .drw-x-nojs{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font:500 15px/1 var(--text);color:var(--ink);text-decoration:none}
@media (prefers-reduced-motion:reduce){
  .drw-p,.drw.closing .drw-p{transform:none;opacity:0;transition:opacity .15s linear}
  .drw.open .drw-p{opacity:1}
  .drw-in,.drw.open .drw-in{opacity:1;transform:none;transition:none}
  .hb,.nav-spor-t svg{transition:none}
}