/* ============================================================
   Behandlerside (.bnbeh)

   Erstatter Elementor-mal 23405 på detaljsidene. Seksjonene kommer i den
   rekkefølgen fagområdets mal sier, så CSS-en her kan ikke anta noen
   rekkefølge – hver seksjon står på egne ben.

   Om spesifisitet: samme grep som i kortene. Regler som treffer lenker og
   knapper er skrevet med to klasser, slik at temaets Elementor Kit (0-1-1)
   ikke overtar. Kan forenkles den dagen Kit-en er borte.
   ============================================================ */

.bnbeh,
.bnbeh *{ box-sizing:border-box; }

.bnbeh{
  --bnb-blekk:#14241d;
  --bnb-dus:#5a6b62;
  --bnb-svak:#8a978f;
  --bnb-linje:#e6e8e6;
  --bnb-flate:#ffffff;
  --bnb-mykt:#f4f6f4;
  --bnb-gronn:#2f7048;
  --bnb-gronn-lys:#e8efe6;
  --bnb-radius:10px;

  max-width:820px;
  margin:0 auto;
  padding-inline:16px;
  padding-block:24px 56px;
  color:var(--bnb-blekk);
  font-size:16px;
  line-height:1.6;
}

/* ---- hero ---- */
.bnbeh .bnbeh__hero{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding-bottom:22px;
  margin-bottom:8px;
  border-bottom:1px solid var(--bnb-linje);
}
/*
 * Portrettet er det eneste bildet av mennesket man vurderer å gå til.
 * 112px var for smått til det – ansiktet ble et ikon ved siden av navnet
 * i stedet for en del av presentasjonen. 184px på skjerm, 136px på mobil.
 */
.bnbeh .bnbeh__portrett{
  width:184px;
  height:184px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  background:var(--bnb-mykt);
  box-shadow:0 1px 3px rgba(20,36,29,.10);
}
/*
 * Klinikklogoer er sirkler de ogsaa.
 *
 * Foer fikk de avrundet firkant, med den begrunnelsen at en bred logo blir
 * beskaaret av en sirkel og mister navnet. Det er riktig – men resultatet
 * var at omtrent halvparten av bildene var runde og halvparten firkantede,
 * uten at noen utenfra kunne se regelen bak. Sirkelen er ikke problemet;
 * beskjaeringen er. Saa logoen ligger HELE inni sirkelen i stedet:
 * object-fit:contain, og luft nok til at den faar plass i kvadratet som
 * staar innskrevet i sirkelen.
 *
 * Kvadratet i en sirkel med diameter d har siden d/sqrt(2) = 0,707d. Luften
 * maa da vaere (1 - 0,707)/2 = 14,6 % paa hver side; 15 % gir en liten
 * margin. Prosent regnes ut fra bredden, saa tallet foelger stoerrelsen og
 * skal ikke gjentas i media-queryen.
 */
.bnbeh .bnbeh__portrett--logo{
  background:#fff;
  border:1px solid var(--bnb-linje);
  box-shadow:none;
}
.bnbeh .bnbeh__portrett img,
.bnbeh .bnbeh__portrett svg{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Maa staa ETTER den generelle regelen: de har samme spesifisitet
   (0-2-1), og da er det den siste som gjelder. Foerste forsoek sto
   foran, og logoen ble beskjaert likevel. */
.bnbeh .bnbeh__portrett--logo img{
  object-fit:contain;
  padding:var(--bnett-logoluft, 15%);
  box-sizing:border-box;
}
.bnbeh .bnbeh__herotekst{ min-width:0; }

.bnbeh .bnbeh__merke{
  display:inline-block;
  margin:0 0 6px;
  padding:2px 8px;
  border-radius:4px;
  background:var(--bnb-gronn-lys);
  color:#245c3c;
  font-size:12.5px;
  font-weight:600;
}
.bnbeh .bnbeh__navn{
  margin:0;
  font-size:clamp(24px,4vw,32px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.bnbeh .bnbeh__under{
  margin:5px 0 0;
  font-size:15px;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__ingress{
  margin:12px 0 0;
  max-width:62ch;
}
.bnbeh .bnbeh__ingress p{
  margin:0 0 10px;
  font-size:16.5px;
  line-height:1.6;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__ingress p:last-child{ margin-bottom:0; }

/* «Tilbyr online-timer» – samme merke som paa kortet, saa det er samme
   opplysning og ikke to ulike ting som ligner. */
.bnbeh .bnbeh__online{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:10px 0 0;
  padding:5px 12px 5px 10px;
  border:1px solid #cfe3d4;
  border-radius:999px;
  background:var(--bnb-gronn-lys);
  color:#1f5a38;
  font-size:14px;
  font-weight:600;
}

@media (max-width:560px){
  .bnbeh .bnbeh__hero{ flex-direction:column; gap:14px; }
  .bnbeh .bnbeh__portrett{ width:136px; height:136px; }
}

/* ---- seksjoner ---- */
.bnbeh .bnbeh__seksjon{
  padding-block:22px;
  border-bottom:1px solid var(--bnb-linje);
}
.bnbeh .bnbeh__seksjon:last-child{ border-bottom:0; }

.bnbeh .bnbeh__h2{
  margin:0 0 12px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.bnbeh .bnbeh__seksjon p{ margin:0 0 10px; max-width:62ch; }
.bnbeh .bnbeh__seksjon p:last-child{ margin-bottom:0; }

/* ---- emner ---- */
.bnbeh .bnbeh__emner{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.bnbeh .bnbeh__emner li{
  padding:5px 12px;
  border:1px solid #d7e2d5;
  border-radius:999px;
  background:var(--bnb-gronn-lys);
  color:#245c3c;
  font-size:14px;
  font-weight:600;
}

/* ---- fakta ---- */
.bnbeh .bnbeh__fakta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 18px;
  margin:0;
}
.bnbeh .bnbeh__fakta dt{
  font-weight:600;
  font-size:14.5px;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__fakta dd{ margin:0; font-size:15.5px; }

@media (max-width:440px){
  .bnbeh .bnbeh__fakta{ grid-template-columns:1fr; gap:2px; }
  .bnbeh .bnbeh__fakta dd{ margin-bottom:8px; }
}

/* ---- knapper ---- */
.bnbeh .bnbeh__knapper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.bnbeh .bnbeh__knapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--bnb-linje);
  border-radius:6px;
  background:var(--bnb-flate);
  color:var(--bnb-blekk);
  font-family:inherit;
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}
.bnbeh .bnbeh__knapp:focus-visible{ outline:2px solid var(--bnb-gronn); outline-offset:2px; }
.bnbeh .bnbeh__knapp--primar{
  background:var(--bnb-gronn);
  border-color:var(--bnb-gronn);
  color:#fff;
}
/* «Avtal en time» er en handling, ikke en henvisning – den skal se ut
   som noe man trykker paa, men ikke konkurrere med ringeknappen. */
.bnbeh .bnbeh__knapp--avtal{
  border-color:var(--bnb-gronn);
  color:var(--bnb-gronn);
  font-weight:700;
}

/*
 * Hover maa sette bade bakgrunn OG tekstfarge.
 *
 * Temaets Elementor Kit har en regel paa `a:hover` som setter tekstfarge
 * til samme groenn som knappen. Vi satte bare bakgrunnen, saa teksten ble
 * groenn paa groenn: «Ring 97129052» forsvant naar musen laa over. Derfor
 * staar fargen eksplisitt i hver eneste tilstand her, og velgeren har
 * klassen to ganger saa den slaar Kit-ets 0-2-0 uten !important.
 */
.bnbeh a.bnbeh__knapp.bnbeh__knapp:hover,
.bnbeh a.bnbeh__knapp.bnbeh__knapp:focus,
.bnbeh a.bnbeh__knapp.bnbeh__knapp:active,
.bnbeh button.bnbeh__knapp.bnbeh__knapp:hover,
.bnbeh button.bnbeh__knapp.bnbeh__knapp:focus{
  background:var(--bnb-mykt);
  color:var(--bnb-blekk);
  border-color:var(--bnb-linje);
}
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:hover,
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:focus,
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:active,
.bnbeh button.bnbeh__knapp--primar.bnbeh__knapp--primar:hover{
  background:#26603c;
  border-color:#26603c;
  color:#fff;
}
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:hover,
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:focus,
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:active,
.bnbeh button.bnbeh__knapp--avtal.bnbeh__knapp--avtal:hover{
  background:var(--bnb-gronn);
  border-color:var(--bnb-gronn);
  color:#fff;
}

/* ---- Priser ----
   Behandlerens egne tall øverst, fagområdets generelle linje under, og
   lenken til full prisliste sist. Tallene settes med tabular-nums, slik
   at «850» og «1 200» står på samme bredde per siffer når de ligger
   under hverandre. */
.bnbeh .bnbeh__pristekst{
  margin:0 0 10px;
  font-size:16px;
  color:#14241d;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__prisliste{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:7px;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__prisliste li{
  position:relative;
  padding-left:16px;
  font-size:16px;
  color:#14241d;
}
/* Prikken tegnes i CSS. Et bullet-tegn arver fonten og faller bort i en
   reserve som ikke har det. */
.bnbeh .bnbeh__prisliste li::before{
  content:"";
  position:absolute; left:2px; top:.62em;
  width:5px; height:5px;
  border-radius:999px;
  background:#5a6b62;
}
.bnbeh .bnbeh__priskilde{
  margin:0 0 10px;
  font-size:13.5px;
  color:#5f6f67;
}
.bnbeh .bnbeh__prisnote{ font-size:14.5px; color:var(--bnb-dus); }
.bnbeh .bnbeh__adresse{ font-size:16px; }

/* ---- Godt å vite ---- */
.bnbeh .bnbeh__raskt{
  list-style:none;
  margin:0;
  padding:16px 18px;
  display:grid;
  gap:9px;
  background:var(--bnb-mykt);
  border:1px solid var(--bnb-linje);
  border-radius:10px;
}
@media (min-width:560px){
  .bnbeh .bnbeh__raskt{ grid-template-columns:1fr 1fr; column-gap:22px; }
}
.bnbeh .bnbeh__raskt li{
  position:relative;
  padding-left:24px;
  font-size:15.5px;
  font-weight:500;
}
.bnbeh .bnbeh__raskt li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bnb-gronn);
  color:#fff;
  font-size:10px;
  font-weight:700;
}

/* ---- arbeidsformer ---- */
.bnbeh .bnbeh__former{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.bnbeh .bnbeh__former li{
  padding:6px 13px;
  border:1px solid var(--bnb-linje);
  border-radius:8px;
  background:var(--bnb-flate);
  font-size:14.5px;
}

/* ---- godkjenning ---- */
.bnbeh .bnbeh__hpr{
  margin:0;
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__hprnote{
  margin:4px 0 0;
  font-size:14px;
  color:var(--bnb-svak);
}

/* ---- tilbake ---- */
.bnbeh .bnbeh__tilbake{
  margin:0 0 14px;
  font-size:14.5px;
}
.bnbeh .bnbeh__tilbake a{
  color:var(--bnb-dus);
  text-decoration:none;
  font-weight:500;
}
.bnbeh .bnbeh__tilbake a:hover{ color:var(--bnb-gronn); text-decoration:underline; }

/* ---- veien videre, nederst ---- */
.bnbeh .bnbeh__videre{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 0;
  padding-top:22px;
  border-top:1px solid var(--bnb-linje);
}

/* ---- galleri ----
   Knapper, ikke bilder: de aapner lightboxen, og da skal de ogsaa kunne
   naas med tabulator og Enter. Forstoerrelsesglasset dukker opp paa hover
   saa det er tydelig at bildet kan aapnes. */
.bnbeh .bnbeh__galleri{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  margin:0;
  padding:0;
}
.bnbeh .bnbeh__bilde{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  /* Rammen maa vaere synlig: med `contain` er det ofte hvitt rundt
     motivet, og paa et hvitt ark forsvant ruten helt. */
  border:1px solid #dcdfdc;
  border-radius:10px;
  overflow:hidden;
  background:var(--bnb-mykt);
  cursor:zoom-in;
  font:inherit;
  color:inherit;
}
/*
 * `cover` kuttet bildene. Behandlere laster opp logoer, diplomer og
 * skilt like ofte som fotografier, og en logo som er beskaaret er
 * oedelagt – «NORSK PSYKOLOG» ble til «ORSK PSYKOLO». Derfor `contain`
 * paa en hvit flate: hele bildet vises, og rammen holder samme hoeyde
 * i hele rutenettet.
 */
.bnbeh .bnbeh__bilde img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:contain;
  background:#fff;
  padding:8px;
  box-sizing:border-box;
  display:block;
  transition:transform .2s ease;
}
.bnbeh .bnbeh__bilde:hover img,
.bnbeh .bnbeh__bilde:focus-visible img{ transform:scale(1.04); }
.bnbeh .bnbeh__bilde:focus-visible{ outline:2px solid var(--bnb-gronn); outline-offset:2px; }

.bnbeh .bnbeh__forstorr{
  position:absolute;
  right:8px; bottom:8px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--bnb-pine, #16352b);
  box-shadow:0 1px 4px rgba(20,36,29,.22);
  opacity:0;
  transition:opacity .15s ease;
}
.bnbeh .bnbeh__bilde:hover .bnbeh__forstorr,
.bnbeh .bnbeh__bilde:focus-visible .bnbeh__forstorr{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .bnbeh .bnbeh__bilde img,
  .bnbeh .bnbeh__forstorr{ transition:none; }
  .bnbeh .bnbeh__bilde:hover img{ transform:none; }
  .bnbeh .bnbeh__forstorr{ opacity:1; }
}

/* ---- naboer ---- */
.bnbeh .bnbeh__naere{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:620px){
  .bnbeh .bnbeh__naere{ grid-template-columns:1fr 1fr; }
}

/* ------------------------------------------------------------
   Ikke mørk modus.

   Her lå det et @media (prefers-color-scheme: dark)-blokk. Resten av
   behandlingsnett.no har ingen mørk variant, så for alle med mørkt
   operativsystem ble kortene mørkegrønne med lys tekst midt på en ellers
   lys side. Komponent-CSS skal ikke innføre en modus siden ikke har.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   «Er dette deg?»

   En rolig boks nederst på profilen, til behandleren som finner sin egen
   side ved å google seg selv. Den skal være lett å få øye på for den ene
   det gjelder, og lett å overse for alle de andre.
   Fargene står som tall i hver tilstand – en lenke uten egen :hover-farge
   arver temaets, og den har vært hvit.
   ------------------------------------------------------------ */
.bnbeh .bnbeh__eier{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px;
  margin:28px 0 0;
  padding:18px 20px;
  border:1px dashed #d5ddd7;
  border-radius:14px;
  background:#f7f9f7;
}
.bnbeh .bnbeh__eier-tekst{
  margin:0;
  max-width:62ch;
  color:#4a5a52;
  font-size:15px;
  line-height:1.55;
}
.bnbeh .bnbeh__eier-tekst strong{ color:#14241d; }
.bnbeh a.bnbeh__eier-lenke{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:11px 20px;
  border:1px solid #c9d2cc;
  border-radius:999px;
  background:#fff;
  color:#16352b;
  font-size:15px; font-weight:700; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.bnbeh a.bnbeh__eier-lenke:hover,
.bnbeh a.bnbeh__eier-lenke:focus,
.bnbeh a.bnbeh__eier-lenke:active{
  background:#f1f7f2; border-color:#388051; color:#16352b;
}
.bnbeh a.bnbeh__eier-lenke:focus-visible{ outline:3px solid #a8cdb5; outline-offset:2px; }

@media (max-width:560px){
  .bnbeh .bnbeh__eier{ flex-direction:column; align-items:flex-start; }
  .bnbeh a.bnbeh__eier-lenke{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .bnbeh a.bnbeh__eier-lenke{ transition:none; }
}