/* ------------------------------------------------------------
   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: 16px;
  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; }
.bnbs .bnbs-nivaaer{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.bnbs .bnbs-nivaakort{
  display: flex; flex-direction: column;
  padding: 26px 24px 28px;
  border: 1px solid #e6e8e6;
  border-radius: 18px;
  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 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e8efe6;
  color: #16352b;
  font-size: 12.5px; font-weight: 700;
}
.bnbs .bnbs-nivaakort h3{ margin: 0 0 8px; 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: 4px 0 0; color: #5f6f67; font-size: 13.5px; }
.bnbs .bnbs-nivaakort__under{ margin: 12px 0 0; color: #4a5a52; font-size: 15px; }

.bnbs .bnbs-punkter{
  list-style: none;
  margin: 16px 0 24px; padding: 0;
  display: grid; gap: 8px;
}
.bnbs .bnbs-punkter li{
  position: relative;
  padding-left: 25px;
  color: #4a5a52;
  font-size: 15px;
}
/* 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);
}
.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: 16px;
  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: 20px;
  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); }
}
@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; }