/* ==========================================================================
   ux.css — navigation, tilgængelighed og små hjælpeklasser
   Indlæses EFTER style.css. Ændrer ikke farver/typografi i resten af siden.
   Indhold:
   1. Fokus, skip-link, anker-afstand
   2. Topmenu (desktop): ingen overløb 1081–1280 px, dropdown, touch-mål
   3. Mobil: header-CTA, drawer, hurtigbar
   4. Touch-mål på sider med finger (pointer: coarse)
   5. Formular-hjælp
   6. Accordion
   7. Hjælpeklasser (erstatter inline style)
   ========================================================================== */

/* ---------- 1. Fokus, skip-link, anker-afstand ---------- */
html{scroll-padding-top:96px}
main:focus{outline:0}
.skip:focus,.skip:focus-visible{left:0;top:0;outline:3px solid var(--ink-950);outline-offset:-3px}

/* ---------- 2. Topmenu ---------- */
.nav{gap:1.1rem}
.nav-links{gap:.1rem;flex-wrap:nowrap}
.nav-links>li{flex:0 0 auto}
.nav-links>li>a,
.has-sub>button{
  display:flex;align-items:center;min-height:44px;white-space:nowrap;
  padding-inline:.7rem;font-family:inherit;line-height:1.2;
}
.nav-links>li>a::after{left:.7rem;right:.7rem;bottom:.5rem}

/* Aktivt afsnit: en dropdown-knap markeres med aria-current (erstatter inline style) */
.has-sub>button[aria-current]{color:var(--gold-light)}
.has-sub>button[aria-current]::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.5rem;height:1px;background:var(--gold)}
.has-sub>button{position:relative}

/* Dropdown-pil lidt tydeligere */
.has-sub>button svg{width:12px;height:8px;flex:0 0 auto;opacity:.9}

/* Usynlig bro, så musen kan køre fra knap til menu uden at lukke den */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* Åbning: synlig med det samme (ellers kan fokus ikke flyttes ind i menuen i samme øjeblik, den åbnes) */
.has-sub[data-open="true"] .submenu{transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s}
.submenu a{min-height:44px}
.submenu a:focus-visible{background:rgba(217,164,65,.14);color:var(--gold-light);outline-offset:-2px}

.nav-phone{position:relative;min-height:44px}
.nav-cta .btn-sm{min-height:44px}

/* 1081–1199 px: tættere menu. 1081–1139 px: telefonnummeret bliver en ikon-knap
   (nummeret står stadig i topbaren og i hurtigbaren) */
@media (min-width:1081px) and (max-width:1199px){
  .nav{gap:.8rem}
  .nav-links>li>a,.has-sub>button{padding-inline:.58rem}
  .nav-links>li>a::after,.has-sub>button[aria-current]::after{left:.58rem;right:.58rem}
}
@media (min-width:1081px) and (max-width:1139px){
  .nav-phone{width:44px;height:44px;padding:0;justify-content:center;border-radius:var(--r-btn);
    border:1px solid var(--line-strong);background:rgba(247,241,231,.04)}
  .nav-phone__num{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap}
}

/* ---------- 3. Mobil ---------- */
@media (max-width:1080px){
  .burger{width:48px;height:48px}
}
/* Header-knappen "Få et tilbud" skjules på ≤760 px (style.css): hero-knappen og hurtigbaren nederst dækker.
   Her kun det tættere mellemrum, så logo og burger har plads på de smalleste skærme. */
@media (max-width:560px){
  .nav{gap:.6rem}
  .nav-cta{gap:.5rem}
}

/* Drawer: gruppetitler er ikke links (før var de dublet-links til første underside) */
.drawer-group{
  display:block;padding:1.05rem .2rem .3rem;font-family:var(--font-display);
  font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--cream)}
.drawer>ul>li>a{min-height:48px}
.drawer .sub a{display:flex;align-items:center;min-height:44px}
.drawer a[aria-current="page"]{color:var(--gold-light)}
.drawer{padding-top:calc(48px + 2.4rem)}
/* Tilbud + telefon er altid synlige nederst i menuen, også når listen scroller */
.drawer .btn{font-family:var(--font-body);font-size:var(--fs-base);letter-spacing:-.005em;padding:.85rem 1.2rem;min-height:48px;display:flex}
.drawer-cta{
  position:sticky;bottom:-2rem;margin:1.5rem calc(var(--gutter) * -1) -2rem;
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  background:var(--ink-950);border-top:1px solid var(--line-strong)}

/* Hurtigbaren er først tilgængelig for tastatur/skærmlæser, når den er synlig */
.mobile-bar{visibility:hidden;transition:transform .45s var(--ease-out),visibility 0s linear .45s}
.mobile-bar.show{visibility:visible;transition:transform .45s var(--ease-out),visibility 0s}

/* Brødkrumme: aktuel side */
.crumbs [aria-current="page"]{color:var(--muted)}

/* ---------- 4. Touch-mål (≥ 44 px) på enheder med finger ---------- */
@media (pointer:coarse){
  .topbar a{display:inline-block;padding-block:.8rem;margin-block:-.8rem}
  /* .crumbs: touch-mål ligger i style.css som usynligt ::before (padding her skubbede teksten ud af linje) */
  .site-footer ul{gap:0}
  .site-footer li a{display:flex;align-items:center;min-height:44px}
  .site-footer address a{display:inline-block;padding-block:.62rem}
  .footer-bottom a{display:inline-block;padding:.8rem .65rem;margin:-.8rem -.65rem}
  .site-footer .footer-bottom .footer-links a{display:inline-flex;min-height:44px;padding:0;margin:0}
  .link-arrow{display:inline-flex;align-items:center;min-height:44px}
  .footer-credit a{display:inline-block;padding-block:.8rem;margin-block:-.8rem}
  .site-footer .chip{min-height:44px}
  .socials a{width:44px;height:44px}
  .gal-filter button{min-height:44px}
}

/* ---------- 5. Formular ---------- */
.req{color:var(--gold-light);margin-left:.15em}
.form-req-note{margin:0 0 1rem;font-size:var(--fs-xs);line-height:1.5;color:var(--muted-2)}

/* ---------- 6. Accordion ---------- */
/* Lukkede svar er ikke tabbare og læses ikke op (grid-animationen skjuler dem kun visuelt) */
.acc-item[data-open="false"] .acc-panel>div{visibility:hidden;transition:visibility 0s linear .45s}
.acc-item[data-open="true"] .acc-panel>div{visibility:visible;transition:visibility 0s}
.acc-item>h2,.acc-item>h3{margin:0}
.acc-btn{min-height:44px}

/* ---------- 7. Hjælpeklasser (erstatter inline style) ---------- */
.sw-title{display:block;font-weight:600;font-size:.9375rem;line-height:1.4;color:var(--cream)}
.sw-hint{display:block;margin-top:.15rem;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.warn-text{color:#F6A995}
.site-footer .foot-h{
  font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.4;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;font-weight:600;text-wrap:wrap}
/* afstandsklasser på footer-overskrifter (erstatter inline style) */
.site-footer .foot-h.mt-2{margin-top:var(--sp-5)}

/* Formularfejl: felter må ikke gemme sig under den faste header */
:is(input,select,textarea){scroll-margin-top:120px}