/* ------------------------------------------------------------
   Behandler-siden

   Samme uttrykk som forsiden, headeren og footeren. To regler gjelder
   hele fila, og begge er lært av feil som har stått ute:

   1. Alle farger står som tall. Ingen var() på `color`. En farge satt med
      var() som ikke lar seg løse blir ugyldig, og en ugyldig `color`
      arver – som på en grønn flate gir grønt på grønt. Det kostet
      stedsknappene på forsiden tre runder.
   2. Klasser dobles (.bnbs.bnbs) der temaet kan slå oss. Temaets
      Elementor Kit ligger på 0-2-0, og en enkel klasse taper.
   ------------------------------------------------------------ */

/* Bryter ut av temaets smale innholdsspalte. Regnestykket er
   selvkorrigerende: 50 % av egen boks minus 50 % av vindusbredden er
   nøyaktig avstanden ut til kanten, uansett hvor bred spalten er. */
.bnbs.bnbs{
  margin-inline: calc(50% - 50vw);
  display: block;
  background: #fff;
  color: #4a5a52;
  font-family: var(--bnett-font-body, "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
}
.bnbs *{ box-sizing: border-box; }

/* clip, ikke hidden: hidden ødelegger position:sticky lenger opp i
   treet, og headeren er sticky. */
body:has(.bnbs){ overflow-x: clip; }

.bnbs .bnbs__inner{
  max-width: 1220px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* Temaet setter display:grid på .entry-content div. Seksjonene og
   innpakningene våre skal ligge under hverandre som blokker. */
.bnbs.bnbs > section,
.bnbs .bnbs__inner{ display: block; }

/* ---- typografi ---- */
.bnbs h1,
.bnbs h2,
.bnbs h3{
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  color: #14241d;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.bnbs h2{ margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 31px); font-weight: 800; line-height: 1.18; }
.bnbs h3{ margin: 0 0 8px; font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.bnbs p{ margin: 0 0 12px; }
.bnbs p:last-child{ margin-bottom: 0; }

.bnbs .bnbs-hode{ max-width: 62ch; margin: 0 0 30px; }
.bnbs .bnbs-merke{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #5f6f67;
}
.bnbs .bnbs-hode__under{ margin: 10px 0 0; color: #4a5a52; font-size: 16.5px; }

/* ---- knapper ----
   Fargen står eksplisitt i HVER tilstand. Det var en :hover uten `color`
   som gjorde knappene på forsiden usynlige. */
.bnbs a.bnbs-knapp{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 14px 28px;
  border: 1px solid #388051;
  border-radius: 999px;
  background: #388051;
  color: #fff;
  font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.bnbs a.bnbs-knapp:hover,
.bnbs a.bnbs-knapp:focus,
.bnbs a.bnbs-knapp:active{ background: #2f7048; border-color: #2f7048; color: #fff; }
.bnbs a.bnbs-knapp:focus-visible{ outline: 3px solid #a8cdb5; outline-offset: 3px; }

.bnbs a.bnbs-knapp--stille{
  background: #fff;
  border-color: #c9d2cc;
  color: #16352b;
}
.bnbs a.bnbs-knapp--stille:hover,
.bnbs a.bnbs-knapp--stille:focus,
.bnbs a.bnbs-knapp--stille:active{ background: #f1f7f2; border-color: #388051; color: #16352b; }

.bnbs .bnbs-hake{ flex: none; color: #388051; }

/* ------------------------------------------------------------
   1. Hero med skjemaet
   ------------------------------------------------------------
   Venstre er en SMAL skinne, ikke en like bred spalte. To like spalter
   ville gitt skjemaet mindre plass enn det har i dag – og det var
   nettopp plassen som var problemet.
   ------------------------------------------------------------ */
.bnbs .bnbs-hero{ padding-block: 48px 56px; background: #f7f9f7; }
.bnbs .bnbs-hero__rad{
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 860px);
  gap: 44px;
  align-items: start;
  justify-content: center;
}

.bnbs .bnbs-hero__tittel{
  margin: 0 0 14px;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
}
.bnbs .bnbs-hero__ingress{
  margin: 0 0 20px;
  color: #3a4a42;
  font-size: 17px;
}

.bnbs .bnbs-lofter{
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 9px;
}
.bnbs .bnbs-lofter li{
  display: flex; align-items: center; gap: 9px;
  color: #16352b;
  font-size: 15.5px; font-weight: 600;
}

.bnbs .bnbs-tall{
  display: grid; gap: 16px;
  margin: 0 0 22px; padding: 20px 0 0;
  border-top: 1px solid #dde3de;
}
.bnbs .bnbs-tall dt{
  margin: 0;
  color: #16352b;
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  font-size: 27px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bnbs .bnbs-tall dd{ margin: 2px 0 0; color: #5f6f67; font-size: 14.5px; }

.bnbs .bnbs-hero__note{
  margin: 0;
  color: #5f6f67;
  font-size: 14.5px;
}

/* ---- skjemaet ----
   Commerce setter .ptc-v2 til max-width:640px. Inne i 640 piksler får de
   tre pakkekortene aldri plass på én rad – container-spørringen deres
   krever 720 – så Basis og Synlig sto ved siden av hverandre og
   Prioritert alene under.
   Her får skjemaet hele spalten. Da faller kortene på én rad av seg
   selv, uten at commerce røres. Klassen dobles fordi commerce sin egen
   regel ellers vinner. */
.bnbs .bnbs-skjema .ptc-v2.ptc-v2{
  max-width: 100%;
  margin: 0;
}
.bnbs .bnbs-skjema--tom{
  padding: 26px;
  border: 1px solid #e6e8e6;
  border-radius: 8px;
  background: #fff;
  color: #4a5a52;
}

/* ------------------------------------------------------------
   2. Slik fungerer det
   ------------------------------------------------------------ */
.bnbs .bnbs-slik{ padding-block: 64px; }
.bnbs .bnbs-steg{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  counter-reset: none;
}
.bnbs .bnbs-steg li{ margin: 0; }
.bnbs .bnbs-steg__nr{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #e8efe6;
  color: #16352b;
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bnbs .bnbs-steg p{ color: #4a5a52; font-size: 15px; }

/* ------------------------------------------------------------
   3. Priser
   ------------------------------------------------------------ */
.bnbs .bnbs-priser{ padding-block: 64px; background: #f7f9f7; }
/*
 * ============================================================
 * Luften i pakkeboksene
 * ============================================================
 *
 * Stian ba om mer luft. Det som faktisk var trangt, var ikke boksene – det
 * var AVSTANDEN mellom tingene inni dem: merket, prisen, undertittelen,
 * punktene og knappen lå med 8–16 piksler mellom seg, og da leses de som én
 * blokk i stedet for fem.
 *
 * Padding opp fra 26/24 til 32/28, mellomrommet mellom kortene fra 20 til
 * 24, og hvert element har fått sin egen luft nedenfor. Punktlisten har fått
 * mest: den er det du faktisk sammenligner.
 */
.bnbs .bnbs-nivaaer{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.bnbs .bnbs-nivaakort{
  display: flex; flex-direction: column;
  padding: 32px 28px 34px;
  border: 1px solid #e6e8e6;
  border-radius: 9px;
  background: #fff;
}
.bnbs .bnbs-nivaakort.er-anbefalt{ border-color: #388051; box-shadow: 0 0 0 1px #388051; }
.bnbs .bnbs-nivaakort__merke{
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e8efe6;
  color: #16352b;
  font-size: 12.5px; font-weight: 700;
}
/* Tom merkelapp: holder hoeyden, men viser ingenting. Den finnes bare naar
   ruteren kjoerer uten commerce og vi ikke har en tekst aa sette. */
.bnbs .bnbs-nivaakort__merke.er-tom{ background: transparent; color: transparent; }
.bnbs .bnbs-nivaakort h3{ margin: 0 0 12px; font-size: 20px; }

.bnbs .bnbs-pris{
  margin: 0;
  color: #16352b;
  font-family: var(--bnett-font-head, "Bricolage Grotesque", -apple-system, system-ui, sans-serif);
  font-size: 30px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bnbs .bnbs-oppstart{ margin: 6px 0 0; color: #5f6f67; font-size: 13.5px; }
/*
 * Undertittelen faar plass til TO linjer, alltid.
 *
 * Paa 1280 piksler staar alle tre paa én linje. Paa 900 – tre kolonner paa
 * rundt 270 piksler – brytes «Bli funnet, ikke bare oppfoert» over to, mens
 * «Kom med i registeret» blir staaende paa én. Da forskjoev Synlig-kortet seg
 * 9 piksler, og punktene under sto ikke lenger paa linje med de andre.
 *
 * Det var nettleseren som fant det; maalingen paa 1280 var identisk i alle
 * tre kortene. Derfor maales punktene naa i hver bredde, ikke bare i én.
 *
 * Reservert plass koster en tom linje paa desktop. Det er en billig pris for
 * at de tre boksene kan leses ved siden av hverandre – og det er den samme
 * luften Stian ba om.
 */
.bnbs .bnbs-nivaakort__under{
  margin: 14px 0 0;
  min-height: 2.9em;
  color: #4a5a52;
  font-size: 15px; line-height: 1.45;
}

/* Streken over punktene skiller prisen fra det du får for den. */
.bnbs .bnbs-punkter{
  list-style: none;
  margin: 22px 0 28px; padding: 22px 0 0;
  border-top: 1px solid #edf1ed;
  display: grid; gap: 14px;
}
/*
 * Hvert punkt skal stå på ÉN linje.
 *
 * Grunnen er sammenligningen: brytes punkt 1 i Synlig over to linjer, står
 * punkt 2 og 3 i det kortet lavere enn i de to andre, og da kan man ikke lese
 * boksene ved siden av hverandre. Tekstene er derfor holdt under 34 tegn (det
 * er en test på det i commerce), og `white-space: nowrap` fanger den dagen
 * noen skriver en lengre.
 *
 * Og den dagen DET skjer, skal det ikke bli tre prikker: `text-overflow` er
 * med vilje IKKE satt. En avkuttet setning ser ut som en feil i teksten.
 * Punktet skal heller skyve seg litt enn å forsvinne – og på smal skjerm
 * slippes nowrap helt, se nederst.
 */
.bnbs .bnbs-punkter li{
  position: relative;
  padding-left: 26px;
  color: #3f4f47;
  font-size: 15px; line-height: 1.35;
  white-space: nowrap;
}
/* Haken og streken tegnes i CSS. Et ✓ som tegn arver fonten og
   forsvinner i en reserve som ikke har det. */
.bnbs .bnbs-punkter li.er-med::before{
  content: "";
  position: absolute; left: 3px; top: .3em;
  width: 11px; height: 6px;
  border-left: 2px solid #388051;
  border-bottom: 2px solid #388051;
  transform: rotate(-45deg);
}
/* `er-uten` brukes ikke lenger i pakkeboksene – de tre punktene er alle
   noe du FÅR, og det som mangler står som en egen linje i teksten («Nederst
   i listene»). Regelen står igjen fordi klassen finnes i Min side. */
.bnbs .bnbs-punkter li.er-uten{ color: #6b7a73; }
.bnbs .bnbs-punkter li.er-uten::before{
  content: "";
  position: absolute; left: 3px; top: .65em;
  width: 11px; height: 0;
  border-top: 2px solid #aab5ae;
}
.bnbs .bnbs-nivaakort .bnbs-knapp{ margin-top: auto; width: 100%; }

/* ------------------------------------------------------------
   4. og 5. tillit og hvem
   ------------------------------------------------------------ */
.bnbs .bnbs-tillit{ padding-block: 64px; }
.bnbs .bnbs-hvem{ padding-block: 64px; background: #f7f9f7; }

.bnbs .bnbs-rutenett{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.bnbs .bnbs-rutenett--to{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bnbs .bnbs-boks{
  padding: 24px 22px;
  border: 1px solid #e6e8e6;
  border-radius: 8px;
  background: #fff;
}
.bnbs .bnbs-boks p{ color: #4a5a52; font-size: 15px; }
.bnbs .bnbs-fotnote{
  margin: 22px 0 0;
  max-width: 76ch;
  color: #5f6f67;
  font-size: 14.5px;
}

/* ------------------------------------------------------------
   6. Spørsmål og avslutning
   ------------------------------------------------------------ */
.bnbs .bnbs-faq{ padding-block: 64px 72px; }
.bnbs .bnbs-faq__liste{
  max-width: 820px;
  border-top: 1px solid #e6e8e6;
}
.bnbs .bnbs-faq__post{ border-bottom: 1px solid #e6e8e6; }
.bnbs .bnbs-faq__post summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  color: #14241d;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.bnbs .bnbs-faq__post summary::-webkit-details-marker{ display: none; }
/* Pluss som blir minus. Tegnet i CSS, av samme grunn som haken. */
.bnbs .bnbs-faq__post summary::after{
  content: "";
  flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(#5f6f67, #5f6f67) center/13px 2px no-repeat,
    linear-gradient(#5f6f67, #5f6f67) center/2px 13px no-repeat;
  transition: transform .18s ease;
}
.bnbs .bnbs-faq__post[open] summary::after{
  background: linear-gradient(#5f6f67, #5f6f67) center/13px 2px no-repeat;
}
.bnbs .bnbs-faq__post summary:focus-visible{ outline: 2px solid #388051; outline-offset: 2px; border-radius: 6px; }
.bnbs .bnbs-faq__svar{ padding: 0 0 18px; max-width: 72ch; }
.bnbs .bnbs-faq__svar p{ color: #4a5a52; font-size: 15.5px; }

.bnbs .bnbs-avslutt{
  margin-top: 48px;
  padding: 40px 32px;
  border-radius: 10px;
  background: #16352b;
  text-align: center;
}
.bnbs .bnbs-avslutt h2{ margin: 0 0 8px; color: #fff; }
.bnbs .bnbs-avslutt p{ margin: 0 0 22px; color: #d6e2da; font-size: 16.5px; }

/* ------------------------------------------------------------
   7. Nettsidelinjen
   ------------------------------------------------------------ */
.bnbs .bnbs-nettside{ padding-block: 26px 40px; border-top: 1px solid #e6e8e6; }
.bnbs .bnbs-nettside__linje{
  margin: 0;
  color: #5f6f67;
  font-size: 15px;
}
.bnbs .bnbs-nettside__linje a{
  display: inline-block;
  padding: 4px 0;
  color: #2f7048;
  font-weight: 600;
  text-decoration: none;
}
.bnbs .bnbs-nettside__linje a:hover,
.bnbs .bnbs-nettside__linje a:focus{ color: #16352b; text-decoration: underline; }

/* ------------------------------------------------------------
   Smalere skjermer
   ------------------------------------------------------------ */
@media (max-width: 1180px){
  .bnbs .bnbs-hero__rad{ grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 1000px){
  /* Skinnen legger seg over skjemaet. Skjemaet får hele bredden – det er
     fortsatt bredere enn de 640 pikslene det hadde før. */
  .bnbs .bnbs-hero__rad{ grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .bnbs .bnbs-tall{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bnbs .bnbs-steg{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bnbs .bnbs-rutenett{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .bnbs .bnbs-nivaaer{ grid-template-columns: minmax(0, 1fr); }
  /* Ett kort i bredden: da er det ingen kolonner å holde på linje, og en
     tekst som brytes er bedre enn en som stikker ut av boksen. */
  .bnbs .bnbs-punkter li{ white-space: normal; }
}
@media (max-width: 620px){
  .bnbs .bnbs__inner{ padding-inline: 16px; }
  .bnbs .bnbs-hero{ padding-block: 32px 40px; }
  .bnbs .bnbs-slik,
  .bnbs .bnbs-priser,
  .bnbs .bnbs-tillit,
  .bnbs .bnbs-hvem{ padding-block: 44px; }
  .bnbs .bnbs-faq{ padding-block: 44px 52px; }
  .bnbs .bnbs-steg{ grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bnbs .bnbs-rutenett,
  .bnbs .bnbs-rutenett--to{ grid-template-columns: minmax(0, 1fr); }
  .bnbs .bnbs-tall{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bnbs .bnbs-tall dt{ font-size: 22px; }
  .bnbs a.bnbs-knapp{ width: 100%; }
  .bnbs .bnbs-avslutt{ padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .bnbs a.bnbs-knapp,
  .bnbs .bnbs-faq__post summary::after{ transition: none; }
}

/* Hopper man til skjemaet fra en knapp lenger nede, skal ikke den
   sticky headeren stå oppå overskriften. */
.bnbs .bnbs-hero{ scroll-margin-top: 90px; }

/* Skjult for oeyet, lest av skjermlesere. Brukt paa «(aapnes i ny fane)» –
   en lenke som bytter fane uten aa si fra, er en liten felle. */
.bnbs .bnbs__skjult{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   Kunnskap – fire artikler rett før FAQ

   Fargene er skrevet som tall. En var() som ikke lar seg løse gjør hele
   erklæringen ugyldig, og for `color` betyr ugyldig «arv» – det var slik
   vi fikk hvitt på hvitt i en tidligere runde.
   ============================================================ */
.bnbs .bnbs-kunnskap{
  padding-block: 56px;
  border-top: 1px solid #e6e8e6;
}
.bnbs ul.bnbs-kunnskap__liste{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.bnbs ul.bnbs-kunnskap__liste li{ margin: 0; padding: 0; }
.bnbs ul.bnbs-kunnskap__liste li::marker{ content: none; }

.bnbs a.bnbs-kunnskap__lenke{
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e6e8e6;
  border-radius: 8px;
  overflow: clip;
  background: #ffffff;
  color: #14241d;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Temaets Kit setter farge på a:hover. Derfor står hver tilstand her. */
.bnbs a.bnbs-kunnskap__lenke:hover,
.bnbs a.bnbs-kunnskap__lenke:focus,
.bnbs a.bnbs-kunnskap__lenke:active{
  color: #14241d;
  text-decoration: none;
  border-color: #b9d7c4;
  box-shadow: 0 6px 18px -10px rgba(20, 36, 29, .30);
  transform: translateY(-2px);
}
.bnbs a.bnbs-kunnskap__lenke:focus-visible{ outline: 2px solid #388051; outline-offset: 2px; }

.bnbs .bnbs-kunnskap__bilde{
  display: block;
  aspect-ratio: 16 / 9;
  background: #f4f6f4;
  max-width: 100%;
}
.bnbs .bnbs-kunnskap__bilde img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bnbs .bnbs-kunnskap__tekst{
  display: block;
  padding: 15px 16px 18px;
}
.bnbs .bnbs-kunnskap__overskrift{
  display: block;
  color: #14241d;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  text-wrap: balance;
}
.bnbs .bnbs-kunnskap__utdrag{
  display: block;
  margin-top: 7px;
  color: #4a5a52;
  font-size: 14.5px; line-height: 1.55;
}
.bnbs .bnbs-kunnskap__alle{ margin: 22px 0 0; }
.bnbs .bnbs-kunnskap__alle a,
.bnbs .bnbs-kunnskap__alle a:hover,
.bnbs .bnbs-kunnskap__alle a:focus{
  color: #2f7048; font-weight: 600;
}

@media (max-width: 560px){
  .bnbs .bnbs-kunnskap{ padding-block: 40px; }
  .bnbs ul.bnbs-kunnskap__liste{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* På telefon er bildet mest luft. Teksten er det man leser. */
  .bnbs .bnbs-kunnskap__bilde{ display: none; }
}