/* ------------------------------------------------------------
   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;

  position:relative;
  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 */
a.bnh-skip{
  position:absolute; left:-9999px; top:0; z-index:1000000;
  background:#fff; color:#14241d; padding:12px 18px;
  border:1px solid #e6e8e6; border-radius:4px; font-size:15px; font-weight:600;
  text-decoration:none;
}
a.bnh-skip:focus{ left:12px; top:12px; outline:2px solid #388051; outline-offset:2px; }

.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;
}
.bnh a.bnh__logo{
  display:flex; align-items:center; flex:none; line-height:0;
  color:var(--h-ink); 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; }
/* Innlogget: ikonet staar groent, slik at det ogsaa synes uten aa lese
   etiketten. */
.bnh a.bnh__minside.er-inne .bnh__minside-ikon{ color:#2f7048; }

/* ---- 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__toggle:checked ~ .bnh__bar .bnh__burger span:nth-child(1){ transform:translateY(4.8px) rotate(45deg); }
.bnh__toggle:checked ~ .bnh__bar .bnh__burger span:nth-child(2){ opacity:0; }
.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__toggle:checked ~ .bnh__scrim{ opacity:1; pointer-events:auto; }

.bnh__drawer{
  position:fixed; top:0; right:0; height:100vh; height:100dvh;
  width:min(340px,90vw); background:#fff; z-index:999999;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.32,.72,0,1);
  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:16px 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__toggle:checked ~ .bnh__drawer{ transform:translateX(0); }
.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:9px; 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:9px;
  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:8px;
  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:9px;
}
.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__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__toggle:checked ~ .bnh__drawer .bnh__mlink,
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li,
.bnh__toggle:checked ~ .bnh__drawer .bnh__drawer-bunn{ opacity:1; transform:none; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlink:nth-of-type(1){ transition-delay:.08s; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlink:nth-of-type(2){ transition-delay:.12s; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(-n+4){ transition-delay:.16s; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(n+5):nth-child(-n+8){ transition-delay:.2s; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__mlist li:nth-child(n+9){ transition-delay:.24s; }
.bnh__toggle:checked ~ .bnh__drawer .bnh__drawer-bunn{ transition-delay:.28s; }

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

/* ---- 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__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__drawer .bnh__mlink, .bnh__drawer .bnh__mlist li, .bnh__drawer .bnh__drawer-bunn{ opacity:1; transform:none; }
}