/* ------------------------------------------------------------
   Behandlingsnett header – lys, stram, ingen JS.

   Flyttet ut av Elementor uten at uttrykket er endret. Tre ting er nye,
   og alle tre fordi de hørte hjemme i en fil og ikke i en sidebygger:

     1. Fagområdene har et tall bak seg. De kommer fra basen nå, og da
        koster tallet ingenting.
     2. Den gamle .elementor-sticky--effects-varianten er beholdt. Den
        virker bare når Elementor faktisk er i bruk, og da skal den
        virke – vi rydder ett lag om gangen, ikke alle samtidig.
     3. Alt som het «position:fixed» på skuffen ligger urørt. Den var
        riktig, og en omskriving hadde bare vært en ny sjanse til å ta
        feil.
   ------------------------------------------------------------ */

.bnh{
  --h-ink:#14241d;
  --h-ink-2:#4a5a52;
  --h-muted:#5f6f67;
  --h-line:#e6e8e6;
  --h-soft:#f4f6f4;
  --h-green:#388051;
  --h-green-dark:#2f7048;

  /*
   * Sticky, ikke relative.
   *
   * Da headeren laa i Elementor, var det Elementors sticky-beholder som
   * holdt den fast. Vi flyttet headeren ut til wp_body_open, og da forsvant
   * den festningen uten at noen la merke til det – baren rullet bort.
   *
   * Tre ting maa holdes i hodet her:
   *
   *  1. `position:sticky` lager IKKE en containing block for `position:fixed`.
   *     Skuffen og sloeret inni headeren ligger derfor fortsatt over hele
   *     vinduet, slik de gjorde.
   *  2. z-index:99990 staar i bnett-design.css og gjoer .bnh til en egen
   *     stablingskontekst. Det var allerede tilfelle, saa skuffens 999999
   *     betyr det samme som foer.
   *  3. Sticky dør stille hvis en forelder har overflow:hidden. Derfor er
   *     `overflow-x: clip` brukt overalt i stilarkene vaare – clip klipper
   *     uten aa lage en rulleboks. Setter temaet overflow:hidden paa body,
   *     staar headeren stille igjen; det er det ene stedet aa se etter.
   */
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--h-line);
  font-family:var(--bnett-font-body,"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
}
.bnh *{ box-sizing:border-box; }

/* Hopp-til-innhold: synlig kun ved tastaturfokus */
/*
 * «Hopp til innhold».
 *
 * Laa paa left:-9999px. Det er den gamle maaten aa gjemme noe paa, og den
 * plasserer elementet ti tusen piksler utenfor skjermen – akkurat samme
 * slag som skuffen, bare til venstre. Venstre side gir ikke rulling i en
 * venstre-til-hoeyre-side, saa den var ufarlig i praksis, men den er
 * ufarlig ved et uhell.
 *
 * Den moderne maaten klipper elementet bort der det staar. Ingenting
 * havner utenfor kanten, og testen kan vaere streng.
 */
a.bnh-skip{
  position:absolute; left:12px; top:12px; z-index:1000000;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:#fff; color:#14241d; padding:0;
  /* Ingen ramme i ro: med 1px paa hver side blir boksen 3x3 i stedet for
     1x1, og «usynlig» boer vaere usynlig ogsaa naar noen maaler det. */
  border:0; border-radius:4px; font-size:15px; font-weight:600;
  text-decoration:none;
}
a.bnh-skip:focus{
  width:auto; height:auto; overflow:visible;
  clip-path:none; padding:12px 18px;
  border:1px solid #e6e8e6;
  outline:2px solid #388051; outline-offset:2px;
}

.bnh .bnh__toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; }

.bnh__bar{
  max-width:1160px; margin:0 auto; padding:14px 24px; min-height:70px;
  display:flex; align-items:center; gap:8px;
  transition:min-height .18s ease, padding .18s ease;
}
/*
 * Logoen står i furugrønn, ikke i brødtekstsvart.
 *
 * Hele filen tegnes med `currentColor`, så fargen her gjelder både bladet
 * og ordmerket. #133731 er målt ut av forbildet Stian sendte, og er det
 * samme som `--bnett-pine`. Mot #14241d er forskjellen liten, men den er
 * der: merket blir grønt i stedet for grått-svart, og det binder headeren
 * til resten av fargene.
 */
.bnh a.bnh__logo{
  display:flex; align-items:center; flex:none; line-height:0;
  color:var(--bnett-pine, #133731); margin-right:auto;
  transition:color .25s ease;
}
.bnh a.bnh__logo svg{ height:21px; width:auto; display:block; color:inherit; transition:height .18s ease; }
.bnh a.bnh__logo:focus-visible{ outline:2px solid var(--h-green); outline-offset:4px; border-radius:3px; }
/* Reserve naar SVG-filen ikke kan leses. */
.bnh .bnh__logotekst{
  font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1; color:inherit;
}

/* ---- meny ---- */
.bnh__nav{ display:flex; align-items:center; }
.bnh__menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.bnh__item{ position:relative; margin:0; }
.bnh a.bnh__link{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--h-ink-2); text-decoration:none; font-weight:500; font-size:15px;
  padding:9px 13px; border-radius:4px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.bnh a.bnh__link:hover{ background:var(--h-soft); color:var(--h-ink); }
.bnh a.bnh__link:focus-visible{ outline:2px solid var(--h-green); outline-offset:2px; }
.bnh__chev{ transition:transform .18s ease; opacity:.6; }

/* ---- nedtrekk: apnes pa hover OG tastaturfokus, lukkes av seg selv ---- */
.bnh__sub{
  position:absolute; top:calc(100% + 9px); left:0; z-index:100;
  min-width:460px; background:#fff;
  border:1px solid var(--h-line); border-radius:5px;
  padding:16px 16px 12px;
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.bnh__item--sub:hover .bnh__sub,
.bnh__item--sub:focus-within .bnh__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.bnh__item--sub:hover .bnh__chev,
.bnh__item--sub:focus-within .bnh__chev{ transform:rotate(180deg); }
/* Usynlig bro, slik at musa ikke mister nedtrekket i mellomrommet */
.bnh__item--sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:11px; }

.bnh__sub-label{
  margin:0 0 10px; font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--h-muted);
}
.bnh__sub-list{
  list-style:none; margin:0; padding:0;
  /* minmax(0,1fr), ikke 1fr. Et rutenettspor har min-width:auto som
     standard, og med et tall ved siden av navnet klarte ikke sporet aa
     krympe – listen ble bredere enn nedtrekket. */
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px 14px;
}
.bnh .bnh__sub-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:7px 9px; border-radius:3px;
  color:var(--h-ink-2); text-decoration:none; font-size:14.5px;
  transition:background .12s, color .12s;
}
.bnh .bnh__sub-list a:hover{ background:var(--h-soft); color:var(--h-ink); }
.bnh .bnh__sub-list a:focus-visible{ outline:2px solid var(--h-green); outline-offset:-2px; }

/* Tallet skal leses som en opplysning, ikke som en del av navnet. */
.bnh .bnh__fagtall{
  flex:none;
  font-size:12px; font-weight:500; color:var(--h-muted);
  font-variant-numeric:tabular-nums;
}
.bnh .bnh__fagnavn{ min-width:0; overflow-wrap:anywhere; }

.bnh a.bnh__sub-all{
  display:inline-block; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--h-line); width:100%;
  color:var(--h-green-dark); text-decoration:none; font-size:14px; font-weight:600;
}
.bnh a.bnh__sub-all:hover{ text-decoration:underline; }

/* ---- Logg inn / Min side ----
   Rolig lenke, ikke en knapp. To knapper ved siden av hverandre gjoer at
   ingen av dem betyr noe, og det er «Er du behandler?» som skal selge.
   Denne skal bare vaere lett aa finne for den som alt er kunde.
   Fargene staar som tall i hver tilstand – temaets Kit setter farge paa
   a:hover, og en lenke uten egen :hover-farge ble usynlig paa forsiden. */
.bnh a.bnh__minside{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 12px;
  margin-left:2px;
  border-radius:4px;
  color:#3a4a42; background:transparent;
  font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .15s, color .15s;
}
.bnh a.bnh__minside:hover,
.bnh a.bnh__minside:focus,
.bnh a.bnh__minside:active{ background:#f0f3f0; color:#14241d; }
.bnh a.bnh__minside:focus-visible{ outline:2px solid var(--h-green); outline-offset:2px; }
.bnh .bnh__minside-ikon{ color:#5f6f67; flex:none; }
.bnh a.bnh__minside:hover .bnh__minside-ikon{ color:#2f7048; }
/* Her sto `.er-inne`, som farget ikonet groent naar behandleren var
   innlogget. Den er ute: sidebufferen varierer ikke paa kapslene vaare, saa
   fargen var like ofte en annen besoekendes tilstand som hennes egen.
   Headeren sier naa bare hvor lenken gaar, og det er sant for alle. */

/* ---- CTA ---- */
.bnh a.bnh__cta{
  flex:none; margin-left:10px;
  color:#fff; background:var(--h-green);
  font-weight:600; font-size:15px; text-decoration:none;
  border-radius:4px; padding:10px 18px; white-space:nowrap;
  /* Like hoey som burgeren ved siden av. Foerste utgave laa paa 35px
     paa telefon – mindre enn naboen, og under det en tommel treffer. */
  display:inline-flex; align-items:center; min-height:44px;
  transition:background .15s;
}
/* Fargen maa staa eksplisitt i hver tilstand. Temaets Kit setter
   tekstfarge paa a:hover, og uten dette ble knappen groenn paa groenn –
   samme felle som paa behandlerkortene. */
.bnh a.bnh__cta:hover,
.bnh a.bnh__cta:focus,
.bnh a.bnh__cta:active{ background:var(--h-green-dark); color:#fff; }
.bnh a.bnh__cta:focus-visible{ outline:2px solid var(--h-green-dark); outline-offset:2px; }
/* Kort etikett brukes bare paa smale skjermer */
.bnh .bnh__cta-kort{ display:none; }

/* ---- burger ---- */
.bnh__burger{
  display:none; width:44px; height:44px; padding:11px; cursor:pointer; flex:none;
  flex-direction:column; justify-content:center; border-radius:4px;
}
.bnh__burger:hover{ background:var(--h-soft); }
.bnh__burger span{ display:block; height:2px; border-radius:2px; background:var(--h-ink); margin:2.8px 0; transition:transform .22s ease, opacity .18s ease; }
.bnh .bnh__toggle:checked ~ .bnh__bar .bnh__burger span:nth-child(1){ transform:translateY(4.8px) rotate(45deg); }
.bnh .bnh__toggle:checked ~ .bnh__bar .bnh__burger span:nth-child(2){ opacity:0; }
.bnh .bnh__toggle:checked ~ .bnh__bar .bnh__burger span:nth-child(3){ transform:translateY(-4.8px) rotate(-45deg); }

/* ---- fremdriftsstrek langs bunnkanten (kun scroll-drevet CSS) ---- */
.bnh__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--h-green); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ---- skuff ---- */
.bnh__scrim{
  position:fixed; inset:0; background:rgba(16,32,24,.46);
  z-index:999998; opacity:0; pointer-events:none; transition:opacity .25s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.bnh .bnh__toggle:checked ~ .bnh__scrim{ opacity:1; pointer-events:auto; }

/*
 * ============================================================
 * Skuffen, og hvorfor den IKKE skyves ut av skjermen lenger
 * ============================================================
 *
 * Foerste utgave lukket skuffen med `transform:translateX(100%)`. Den laa
 * da fysisk utenfor hoeyre skjermkant, 340 piksler ut i det tomme – paa
 * HVER eneste side paa nettstedet.
 *
 * En transform paavirker ikke layout, men den paavirker rullbart omraade.
 * Chrome paa skrivebordet lar det passere for et `position:fixed`-element;
 * Safari paa iPhone gjoer det ikke. Resultatet var at man kunne dra siden
 * sidelengs paa mobil – og fordi skuffen ligger i headeren, gjaldt det
 * alle sider, ikke bare den ene man la merke til det paa.
 *
 * Loesningen er aa skjule den UTEN aa flytte den: clip-path klipper den
 * bort mens den staar i ro innenfor skjermen. Ingen transform, ingenting
 * utenfor kanten, ingenting aa rulle til.
 *
 * `visibility` holder den ute av tabulatorrekkefoelgen. Den forsinkes ved
 * lukking (0s .34s) slik at den ikke forsvinner midt i animasjonen.
 *
 * Testriggen fant dette foerst da headeren ble lagt inn i rigg-siden for
 * behandler-siden. Saa lenge riggen bare hadde selve siden, bestod testen
 * «ingen vannrett rulling» mens produksjon rullet.
 */
.bnh__drawer{
  position:fixed; top:0; right:0; height:100vh; height:100dvh;
  width:min(340px,90vw); background:#fff; z-index:999999;
  clip-path:inset(0 0 0 100%);
  visibility:hidden;
  transition:clip-path .34s cubic-bezier(.32,.72,0,1), visibility 0s .34s;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; overflow-y:auto;
  border-left:1px solid var(--h-line);
  border-radius:8px 0 0 16px;
  box-shadow:-18px 0 44px rgba(16,32,24,.14);
  font-family:var(--bnett-font-body,"Inter",-apple-system,system-ui,sans-serif);
}
.bnh .bnh__toggle:checked ~ .bnh__drawer{
  clip-path:inset(0);
  visibility:visible;
  transition:clip-path .34s cubic-bezier(.32,.72,0,1), visibility 0s;
}
.bnh__drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--h-line);
}
.bnh__drawer-title{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--h-ink); font-size:15px; font-weight:700; letter-spacing:-.012em;
}
.bnh__dot{
  width:8px; height:8px; border-radius:50%; background:var(--h-green); flex:none;
  box-shadow:0 0 0 3px rgba(56,128,81,.14);
}
.bnh__close{
  width:38px; height:38px; background:var(--h-soft); color:var(--h-ink);
  border-radius:6px; cursor:pointer; display:grid; place-items:center;
  transition:background .15s;
}
.bnh__close:hover{ background:#e8ece8; }

.bnh__mnav{ display:flex; flex-direction:column; padding-top:6px; }
.bnh a.bnh__mlink{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:var(--h-ink); text-decoration:none; font-weight:600; font-size:17px;
  padding:14px 12px; border-radius:6px;
  transition:background .15s, color .15s;
}
.bnh a.bnh__mlink:hover{ background:var(--h-soft); }
.bnh .bnh__marrow{ color:var(--h-muted); flex:none; transition:transform .18s ease; }
.bnh a.bnh__mlink:hover .bnh__marrow{ transform:translateX(3px); color:var(--h-green-dark); }
.bnh__mlabel{
  margin:16px 0 8px; padding:0 12px;
  font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--h-muted);
}
.bnh__mlist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px;
}
.bnh .bnh__mlist a{
  /* I skuffen er rutene smale. Faar ikke «Massasjeterapeut» og tallet
     plass paa samme linje, skal tallet falle ned – ikke sprenge ruten. */
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:2px 6px;
  padding:11px 12px; border-radius:6px;
  background:var(--h-soft); border:1px solid transparent;
  color:var(--h-ink-2); text-decoration:none; font-size:14px; font-weight:500;
  transition:background .14s, color .14s, border-color .14s;
}
.bnh .bnh__mlist a:hover{ background:#fff; border-color:var(--h-line); color:var(--h-ink); }
.bnh .bnh__mlist a:focus-visible{ outline:2px solid var(--h-green); outline-offset:1px; }
/* I skuffen er rutene smale. Tallet faar bryte til neste linje heller
   enn aa presse navnet ut av ruten. */
.bnh .bnh__mlist .bnh__fagtall{ font-size:11.5px; }

.bnh__drawer-bunn{
  margin-top:auto; padding-top:18px;
  border-top:1px solid var(--h-line);
}
.bnh a.bnh__cta--block{
  margin:0; display:block; text-align:center; font-size:16px; padding:15px 18px; border-radius:6px;
}
.bnh__drawer-note{
  margin:10px 2px 0; text-align:center;
  font-size:12.5px; line-height:1.45; color:var(--h-ink-2);
}

/* Innholdet i skuffen glir inn litt etter litt naar den apnes */
.bnh .bnh__drawer .bnh__mlink,
.bnh__drawer .bnh__mlist li,
.bnh__drawer .bnh__drawer-bunn{
  opacity:0; transform:translateX(12px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.32,.72,0,1);
}
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlink,
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li,
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__drawer-bunn{ opacity:1; transform:none; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlink:nth-of-type(1){ transition-delay:.08s; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlink:nth-of-type(2){ transition-delay:.12s; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(-n+4){ transition-delay:.16s; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(n+5):nth-child(-n+8){ transition-delay:.2s; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(n+9){ transition-delay:.24s; }
.bnh .bnh__toggle:checked ~ .bnh__drawer .bnh__drawer-bunn{ transition-delay:.28s; }

html:has(.bnh__toggle:checked){ overflow:hidden; }

/*
 * Vakten.
 *
 * Skuffen er rettet over, men dette er billig og dekker alt annet som
 * maatte stikke utenfor kanten en gang i framtiden. `clip` og ikke
 * `hidden`: hidden lager en rulleboks og draeper `position:sticky` paa
 * headeren – det er den samme lærdommen som staar i stilarkene ellers.
 */
html:has(.bnh){ overflow-x:clip; }

/* ---- Sticky-effekt, variant 1: Elementors egen klasse (Firefox m.fl.) ---- */
.elementor-sticky--effects .bnh{ border-bottom-color:#dfe3df; box-shadow:0 1px 3px rgba(20,36,29,.08); }
.elementor-sticky--effects .bnh__bar{ min-height:58px; padding-top:8px; padding-bottom:8px; }
.elementor-sticky--effects .bnh a.bnh__logo{ color:var(--h-green-dark); }
.elementor-sticky--effects .bnh a.bnh__logo svg{ height:19px; }

/* ---- Sticky-effekt, variant 2: scroll-drevet CSS (Chrome, Edge, Safari) ----
   Baren strammes, logoen krymper og tones mot merkevaregronn, og en harfin
   gronn strek viser hvor langt ned pa siden man har kommet. Ingen JS. */
@keyframes bnh-prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes bnh-tight{
  from{ min-height:70px; padding-top:14px; padding-bottom:14px; }
  to{ min-height:56px; padding-top:8px; padding-bottom:8px; }
}
@keyframes bnh-tight-m{
  from{ min-height:64px; padding-top:11px; padding-bottom:11px; }
  to{ min-height:52px; padding-top:7px; padding-bottom:7px; }
}
@keyframes bnh-logostr{ from{ height:21px; } to{ height:18px; } }
@keyframes bnh-logostr-m{ from{ height:18px; } to{ height:16px; } }
@keyframes bnh-logofarge{ from{ color:#14241d; } to{ color:#2f7048; } }
@keyframes bnh-elev{
  from{ box-shadow:0 0 0 rgba(20,36,29,0); }
  to{ box-shadow:0 1px 3px rgba(20,36,29,.08); }
}

@supports (animation-timeline: scroll()){
  .bnh,
  .bnh__bar,
  .bnh a.bnh__logo,
  .bnh a.bnh__logo svg{
    animation-timeline:scroll(root block);
    animation-fill-mode:both;
    animation-timing-function:linear;
    animation-range:0 160px;
  }
  .bnh{ animation-name:bnh-elev; }
  .bnh__bar{ animation-name:bnh-tight; }
  .bnh a.bnh__logo{ animation-name:bnh-logofarge; }
  .bnh a.bnh__logo svg{ animation-name:bnh-logostr; }

  .bnh__progress{
    animation:bnh-prog linear both;
    animation-timeline:scroll(root block);
  }

  /* Naar den scroll-drevne varianten er aktiv, skal ikke Elementor-klassen
     dra i de samme verdiene samtidig. */
  .elementor-sticky--effects .bnh__bar{ min-height:auto; padding-top:14px; padding-bottom:14px; }
  .elementor-sticky--effects .bnh a.bnh__logo svg{ height:21px; }
}

@media (max-width:980px){
  .bnh__nav{ display:none; }
  /* Skuffen har den i stedet. Logo + knapp + burger trenger plassen, og
     tre ting paa en rad paa telefon er alt som er. */
  .bnh a.bnh__minside{ display:none; }
  .bnh__burger{ display:flex; }
  .bnh__bar{ min-height:64px; padding:11px 16px; gap:6px; }
  .bnh a.bnh__logo{ margin-right:auto; }
  .bnh a.bnh__logo svg{ height:18px; }
  .bnh a.bnh__cta{ margin-left:4px; font-size:13.5px; padding:9px 13px; }
  .elementor-sticky--effects .bnh__bar{ min-height:54px; }
  .elementor-sticky--effects .bnh a.bnh__logo svg{ height:17px; }

  @supports (animation-timeline: scroll()){
    .bnh__bar{ animation-name:bnh-tight-m; }
    .bnh a.bnh__logo svg{ animation-name:bnh-logostr-m; }
    .elementor-sticky--effects .bnh__bar{ min-height:auto; padding-top:11px; padding-bottom:11px; }
    .elementor-sticky--effects .bnh a.bnh__logo svg{ height:18px; }
  }
}

/* Smale telefoner: kortere knappetekst, slik at logo + knapp + burger far plass */
@media (max-width:430px){
  .bnh__bar{ padding-left:14px; padding-right:12px; }
  .bnh a.bnh__logo svg{ height:16px; }
  .bnh .bnh__cta-lang{ display:none; }
  .bnh .bnh__cta-kort{ display:inline; }
  .bnh a.bnh__cta{ font-size:13px; padding:10px 12px; }
  .bnh__burger{ width:40px; height:40px; padding:10px; }
  /* Skuffen blir for smal til to spalter med tall. */
  .bnh__mlist{ grid-template-columns:1fr; }
  @supports (animation-timeline: scroll()){
    .bnh a.bnh__logo svg{ animation-name:none; height:16px; }
  }
}

/* Aller smaleste telefoner (320 px): alt krympes ett hakk til */
@media (max-width:360px){
  .bnh__bar{ padding-left:12px; padding-right:10px; gap:4px; }
  .bnh a.bnh__logo svg{ height:14px; }
  .bnh a.bnh__cta{ font-size:12.5px; padding:10px 10px; margin-left:2px; }
  .bnh__burger{ width:38px; height:38px; padding:9px; }
  @supports (animation-timeline: scroll()){
    .bnh a.bnh__logo svg{ animation-name:none; height:14px; }
  }
}

/* Nedtrekket har faatt et tall i hver rad. Under ca. 1080px blir to
   spalter trangt, og navnet begynte aa bryte midt i ordet. */
@media (max-width:1080px) and (min-width:981px){
  .bnh__sub{ min-width:420px; }
  .bnh .bnh__sub-list a{ font-size:14px; padding:6px 8px; }
}

@media (prefers-reduced-motion:reduce){
  .bnh__drawer, .bnh__scrim, .bnh__sub, .bnh__chev, .bnh__bar,
  .bnh__burger span, .bnh__marrow,
  .bnh .bnh__drawer .bnh__mlink, .bnh__drawer .bnh__mlist li, .bnh__drawer .bnh__drawer-bunn{
    transition:none !important;
  }
  .bnh, .bnh__bar, .bnh a.bnh__logo, .bnh a.bnh__logo svg, .bnh__progress{ animation:none !important; }
  .bnh .bnh__drawer .bnh__mlink, .bnh__drawer .bnh__mlist li, .bnh__drawer .bnh__drawer-bunn{ opacity:1; transform:none; }
}