/* ==========================================================================
   A-Logopedene — stilark
   Én fil, ingen byggesteg, ingen eksterne avhengigheter.
   Fargene er definert som variabler under :root — endre der, så slår det
   igjennom på hele nettstedet.
   ========================================================================== */

:root {
  /* ======================================================================
     DESIGN TOKENS
     Alle farger pa nettstedet star her, og ingen andre steder. Endrer du en
     verdi her, slar den igjennom overalt.

     Paletten er Klassisk kontrast med okergule detaljer, valgt av
     A-Logopedene i oktober 2026.

     Navnene sier hva fargen BRUKES TIL, ikke hvilken farge den er.
     ====================================================================== */

  /* --- Merkevare. Folger ikke paletten. ---------------------------------
     Logomerket (A-en, indigo #3e477b) har fargen sin i
     bilder/logo-merke.svg, ikke her. */
  --logo-tekst:  #000000;  /* navnet ved siden av logomerket */
  --brikke-hvit: #ffffff;  /* hvit brikke bak Helfo-logoen, som er navy */
  --paa-brikke:  #2f3436;  /* tekst pa den brikken, folger brikken */
  --papir:       #ffffff;  /* bare utskrift */

  /* --- Flater ------------------------------------------------------------ */
  --bg:               #fbfbfa;  /* hovedbakgrunn og menylinje */
  --bg-gjennomsiktig: rgba(251, 251, 250, 0.88);  /* menylinje med uskarphet */
  --flate-ro:         #eceef1;  /* rolig flate: band 2, sidetopp, faktaboks */
  --flate-varm:       #ece5db;  /* band 3 - varm sand, ikke blagra */
  --flate-varm-lys:   #faf6f0;  /* kort som ligger pa den flaten */
  --kort:             #ffffff;  /* hvite kort, tabeller, skjemafelt */
  --bunn-bg:          #16263d;  /* band 4, bunnfeltet */

  /* --- Tekst -------------------------------------------------------------- */
  --tekst:           #1f2429;
  --tekst-svak:      #545b62;
  --paa-aksent:      #ffffff;
  --paa-primaer:     #ffffff;  /* ubrukt na, men holdes for fylte primaerflater */
  --paa-bunn:        #ffffff;
  --paa-bunn-mykt:   rgba(255, 255, 255, .92);
  --paa-bunn-dempet: rgba(255, 255, 255, .88);
  --paa-bunn-hover:  #ece5db;

  /* --- Aksent og dekor ----------------------------------------------------- */
  --aksent:      #16263d;  /* lenker, knapper, fokus - samme som bunnfeltet */
  --aksent-mork: #0f1b2b;  /* hover */
  --primaer:     #a0701e;  /* omradeikoner og faktaboks-kant */
  --dekor:       #c49a53;  /* streker og detaljer uten meningsbaerende rolle */

  /* --- Linjer og skygge ----------------------------------------------------- */
  --kant-svak:         rgba(31, 36, 41, 0.09);  /* kort og flater */
  --kant:              rgba(31, 36, 41, 0.12);  /* rammer og tabellrader */
  --kant-knapp:        rgba(31, 36, 41, 0.2);
  /* Skjemakanten ma na 3:1 mot feltet sitt (WCAG 1.4.11). */
  --kant-skjema:       rgba(31, 36, 41, 0.49);
  --kant-skjema-sterk: rgba(31, 36, 41, 0.66);
  --kant-topp:          rgba(196, 154, 83, 0.38);  /* under menylinja */
  --kant-pa-bunn:       rgba(255, 255, 255, .18);
  --kant-pa-bunn-sterk: rgba(255, 255, 255, .35);
  --skygge: 0 1px 2px rgba(31, 36, 41, 0.05), 0 6px 20px rgba(31, 36, 41, 0.06);

  /* --- Tilbakemelding -------------------------------------------------------- */
  --feil:       #8a1f1f;
  --feil-flate: #fdf1f1;

  /* Alle kombinasjonene over er kontrastsjekket mot WCAG 2.1 AA.
     Se kontrast.md. Merk: --dekor er for lys til brodtekst i begge
     retninger og brukes derfor bare dekorativt. */

  /* --- Mal og form ----------------------------------------------------------- */
  --bredde:       68rem;
  --bredde-tekst: 40rem;   /* lesbar linjelengde, ca. 65-75 tegn */
  --radius:       14px;
  --radius-stor:  22px;
  --nav-hoyde:    4.75rem;
}

/* --- Grunnlag ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Kompenserer for den faste menylinjen når man hopper til en #ankertekst */
  scroll-padding-top: calc(var(--nav-hoyde) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;   /* 17px — litt større enn standard, bevisst valg */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p, ul, ol { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--aksent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--aksent-mork); }

img { max-width: 100%; height: auto; display: block; }

/* Synlig fokusmarkering — viktig for tastaturnavigasjon */
:focus-visible {
  outline: 3px solid var(--aksent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skjult for øyet, men lesbar for skjermlesere */
.visuelt-skjult {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hopp til innhold — synlig først når den får tastaturfokus */
.hopp-lenke {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--aksent);
  color: var(--paa-aksent);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top .15s ease;
}
.hopp-lenke:focus { top: 0; color: var(--paa-aksent); }

/* --- Layout -------------------------------------------------------------- */

.ramme {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band-krem   { background: var(--bg); }
.band-salvia { background: var(--flate-ro); }
.band-sand   { background: var(--flate-varm); }

/* Lesbar tekstkolonne */
.tekst { max-width: var(--bredde-tekst); }

/* Det siste bandet for bunnfeltet trenger mindre luft under seg, fordi
   bunnfeltet har sin egen luft over. */
main > .band:last-child { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   BÅND 1 — Menylinje
   ========================================================================== */

.topp {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--kant-topp);
}

/* Litt bakgrunnsuskarphet der nettleseren støtter det */
@supports (backdrop-filter: blur(8px)) {
  .topp {
    background: var(--bg-gjennomsiktig);
    backdrop-filter: blur(10px);
  }
}

.topp-innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-hoyde);
}

/* Logoen fungerer som hjem-knapp */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--logo-tekst);
  flex-shrink: 0;
}
/* Navnet skal være svart også ved hover, fokus og besøkt lenke. Uten
   denne vinner a:hover og gjør det mørkeblått. */
.logo:hover,
.logo:focus,
.logo:visited { color: var(--logo-tekst); }
/* Logomerket (A-sjevronen). Filen er 500 × 298 px, så høyden styrer. */
.logo img { height: 2.1rem; width: auto; flex-shrink: 0; }
.logo-navn {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.meny ul {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.meny a {
  display: block;
  padding: .55rem .9rem;
  border-radius: 999px;
  color: var(--tekst);
  text-decoration: none;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.meny a:hover { background: var(--flate-ro); color: var(--aksent); }

/* Gjeldende side */
.meny a[aria-current="page"] {
  color: var(--aksent);
  background: var(--flate-ro);
  font-weight: 600;
}

/* Hamburgerknapp — kun på små skjermer */
.meny-knapp {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--kant-knapp);
  border-radius: 999px;
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 500;
  color: var(--tekst);
  cursor: pointer;
}
.meny-knapp svg { width: 1.15rem; height: 1.15rem; }

@media (max-width: 47.9375rem) {
  .meny-knapp { display: inline-flex; }

  .meny {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--kant-topp);
    box-shadow: var(--skygge);
    display: none;
  }
  .meny[data-apen="ja"] { display: block; }

  .meny ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem clamp(1.25rem, 5vw, 2.5rem) 1rem;
  }
  .meny a {
    border-radius: var(--radius);
    padding: .85rem 1rem;
  }
}

/* ==========================================================================
   BÅND 2 — Velkomst
   ========================================================================== */

.velkomst-rutenett {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .velkomst-rutenett { grid-template-columns: 1.05fr .95fr; }
}

.velkomst h1 { margin-bottom: .5rem; }

.ingress {
  font-size: clamp(1.125rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--tekst);
  margin-bottom: 1.5rem;
}

.bilde-ramme {
  border-radius: var(--radius-stor);
  overflow: hidden;
  box-shadow: var(--skygge);
  background: var(--flate-varm-lys);
}
/* <picture> er inline i utgangspunktet, og da har den ingen hoyde a gi
   videre til bildet. Uten denne blir height: 100% pa bildet til auto. */
.bilde-ramme picture { display: block; }
.bilde-ramme img { width: 100%; }

/* --- Forsidebildet i buet utsnitt ---------------------------------------
   Bildet ligger i en organisk form i stedet for en rektangulaer ramme.
   Rammen arver overflow: hidden fra .bilde-ramme over, sa radiusen her
   klipper bildet uten at noe mer trengs. */

.velkomst .bilde-ramme {
  border-radius: 56% 44% 48% 52% / 48% 52% 48% 52%;
  background: none;
  box-shadow: none;
}
.velkomst .bilde-ramme img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 52rem) {
  .velkomst .bilde-ramme { max-width: 24rem; margin-inline: auto; }
}


/* --- Knapper ------------------------------------------------------------- */

.knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.knapp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.knapp-fylt {
  background: var(--aksent);
  color: var(--paa-aksent);
}
.knapp-fylt:hover { background: var(--aksent-mork); color: var(--paa-aksent); }

.knapp-tom {
  border-color: var(--aksent);
  color: var(--aksent);
  background: transparent;
}
.knapp-tom:hover { background: var(--aksent); color: var(--paa-aksent); }


/* ==========================================================================
   BÅND 3 — Behandlingsområder (ikonkort)
   ========================================================================== */

.omrade-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.omrade-kort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: var(--flate-varm-lys);
  border: 1px solid var(--kant-svak);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--tekst);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.omrade-kort:hover {
  background: var(--bg);
  transform: translateY(-3px);
  box-shadow: var(--skygge);
  color: var(--tekst);
}

.omrade-kort .ikon {
  width: 2.9rem;
  height: 2.9rem;
  color: var(--primaer);
  flex-shrink: 0;
}

.omrade-kort strong {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.omrade-kort span {
  color: var(--tekst-svak);
  font-size: .975rem;
  line-height: 1.55;
}

.omrade-kort em {
  margin-top: auto;
  padding-top: .5rem;
  font-style: normal;
  font-weight: 600;
  color: var(--aksent);
  font-size: .95rem;
}
.omrade-kort:hover em { text-decoration: underline; text-underline-offset: .18em; }

/* ==========================================================================
   Trekkspill — behandlingsområder som utvides
   ========================================================================== */

.trekkspill { margin-top: 2.5rem; }

.omrade {
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.omrade[open] {
  border-color: var(--dekor);
  box-shadow: var(--skygge);
}

.omrade > summary {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 1.5rem;
  cursor: pointer;
  list-style: none;                 /* fjerner standard trekant */
  transition: background-color .15s ease;
}
.omrade > summary::-webkit-details-marker { display: none; }
.omrade > summary:hover { background: var(--flate-ro); }

.omrade > summary .ikon {
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
  color: var(--primaer);
  transition: color .15s ease;
}
/* Ikonet beholder okeren ogsa nar seksjonen er apen. Den gamle regelen
   flippet det til aksentfargen, men na som rammen samtidig blir gull,
   ville det apne kortet hatt to ulike aksentfarger pa en gang. Apen
   tilstand vises uansett av pila, rammen og skyggen. */

.omrade-tekst { flex: 1; min-width: 0; }

.omrade-tittel {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}
.omrade-teaser {
  display: block;
  color: var(--tekst-svak);
  font-size: .975rem;
  line-height: 1.5;
  margin-top: .15rem;
}

/* Pil som snus når seksjonen er åpen */
.omrade-pil {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  position: relative;
  color: var(--aksent);
  transition: transform .2s ease;
}
.omrade-pil::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .6rem;
  height: .6rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.omrade[open] .omrade-pil { transform: rotate(180deg); }

.omrade-innhold {
  padding: 0 1.5rem 1.75rem;
  max-width: calc(var(--bredde-tekst) + 4.5rem);
}
.omrade-innhold > :first-child { margin-top: 0; }

/* Grønn strek som binder innholdet til overskriften */
.omrade-innhold::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--dekor);
  border-radius: 2px;
  margin-bottom: 1.4rem;
}

@media (max-width: 33rem) {
  .omrade > summary { padding: 1.1rem 1.15rem; gap: .85rem; }
  .omrade > summary .ikon { width: 2.4rem; height: 2.4rem; }
  .omrade-innhold { padding: 0 1.15rem 1.5rem; }
}

/* --- Lister -------------------------------------------------------------- */

.punktliste {
  list-style: none;
  padding: 0;
}
.punktliste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
}
.punktliste li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .72em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--dekor);
}

/* Nummerert framgangsmåte */
.trinn {
  list-style: none;
  padding: 0;
  counter-reset: trinn;
  max-width: var(--bredde-tekst);
}
.trinn > li {
  counter-increment: trinn;
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 1.6rem;
}
.trinn > li::before {
  content: counter(trinn);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Tallene folger aksenten og ikke primaerfargen. De er grensesnitt pa
     linje med en knapp, mens omradeikonene er innhold - og okeren som
     ikonene bruker er for lys til a baere hvit tekst pa en fylt skive. */
  background: var(--aksent);
  color: var(--paa-aksent);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.trinn h3 { margin-bottom: .3rem; }

/* ==========================================================================
   Priser
   ========================================================================== */

.pris-tabell-ramme {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--kant);
  background: var(--kort);
}

table.priser {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

table.priser caption {
  text-align: left;
  padding: 1.1rem 1.25rem .35rem;
  font-weight: 600;
  font-size: 1.1rem;
}

table.priser th,
table.priser td {
  text-align: left;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--kant);
  vertical-align: top;
}

table.priser thead th {
  background: var(--flate-ro);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tekst);
}

table.priser tbody tr:last-child th,
table.priser tbody tr:last-child td { border-bottom: none; }

table.priser tbody th {
  font-weight: 500;
  padding-right: 2rem;
}

table.priser .belop {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Faktaboks */
.faktaboks {
  background: var(--flate-ro);
  border-left: 4px solid var(--primaer);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  max-width: calc(var(--bredde-tekst) + 2rem);
}
.faktaboks h3 { margin-bottom: .4rem; }
.faktaboks :last-child { margin-bottom: 0; }

.faktaboks-sand {
  background: var(--flate-varm-lys);
  border-left-color: var(--dekor);
}

/* ==========================================================================
   Om oss — profilkort
   ========================================================================== */

.profil-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.profil {
  background: var(--kort);
  border: 1px solid var(--kant-svak);
  border-radius: var(--radius);
  overflow: hidden;
}

.profil-bilde {
  aspect-ratio: 1 / 1;
  background: var(--flate-varm-lys);
  display: grid;
  place-items: center;
  position: relative;
}
.profil-bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-tekst { padding: 1.15rem 1.25rem 1.4rem; }
.profil-tekst h3 { margin-bottom: .15rem; font-size: 1.1rem; }
.profil-rolle {
  color: var(--tekst-svak);
  font-size: .95rem;
  margin-bottom: .6rem;
}
.profil-tekst p { font-size: .975rem; margin-bottom: 0; }
.profil-tekst a { font-size: .975rem; }

/* ==========================================================================
   Kontakt
   ========================================================================== */

.kontakt-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.kontaktkort {
  background: var(--kort);
  border: 1px solid var(--kant-svak);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.kontaktkort h3 { margin-bottom: .75rem; }
.kontaktkort dl { margin: 0; }
.kontaktkort dt {
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tekst-svak);
  margin-top: 1rem;
}
.kontaktkort dt:first-child { margin-top: 0; }
.kontaktkort dd { margin: .15rem 0 0; }


/* ==========================================================================
   BÅND 4 — Bunn
   ========================================================================== */

.bunn { background: var(--bunn-bg); color: var(--paa-bunn); }

.bunn-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  /* Mindre luft over enn under. Sammen med det siste bandets reduserte
     bunnpadding gir det ca. 7rem mellom innholdet og bunnfeltets tekst,
     mot 10,5rem for - avstanden sto og slo hull i siden. */
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}

.bunn h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.bunn h3 {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--paa-bunn-dempet);
}
/* Lenker i bunnfeltet: hvite, ikke aksentfargen — den er nesten
   usynlig mot den grønne bakgrunnen. */
.bunn a { color: var(--paa-bunn); }
.bunn a:hover { color: var(--paa-bunn-hover); }

.bunn p, .bunn address {
  font-style: normal;
  margin-bottom: .35rem;
  color: var(--paa-bunn-mykt);
}
.bunn ul { list-style: none; padding: 0; margin: 0; }
.bunn li { margin-bottom: .4rem; }

.bunn-merker {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}
.bunn-merke {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1px solid var(--kant-pa-bunn-sterk);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--paa-bunn-mykt);
}

/* Helfo-logoen står på hvit brikke — den er navy og forsvinner mot grønt */
.helfo-merke {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: .9rem;
  padding: .6rem 1rem;
  background: var(--brikke-hvit);
  border-radius: var(--radius);
}
.helfo-merke img { height: 1.6rem; width: auto; }
.helfo-merke span {
  color: var(--paa-brikke);
  font-size: .9rem;
  line-height: 1.35;
}

.bunn-strek {
  border-top: 1px solid var(--kant-pa-bunn);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--paa-bunn-dempet);
}

/* --- Sidetopp for undersider --------------------------------------------- */

.sidetopp {
  background: var(--flate-ro);
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
.sidetopp h1 { margin-bottom: .35rem; }
.sidetopp p {
  max-width: var(--bredde-tekst);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  color: var(--tekst);
  margin-bottom: 0;
}

/* Utskrift: fold ut alt, dropp menyen */
@media print {
  .topp, .hopp-lenke, .knapperad { display: none; }
  .omrade-innhold { display: block !important; }
  body { background: var(--papir); font-size: 11pt; }
}

/* ==========================================================================
   Priser på smale skjermer
   Tabellene har ingen minstebredde lenger — teksten brytes i stedet, og
   priskolonnen krymper til nøyaktig sin egen bredde. Da slipper man å
   skyve tabellen sidelengs på mobil.
   ========================================================================== */

table.priser th.belop,
table.priser td.belop { width: 1%; }

@media (max-width: 34rem) {
  table.priser caption   { padding: .9rem .9rem .3rem; }
  table.priser th,
  table.priser td        { padding: .8rem .9rem; }
  table.priser thead th  { font-size: .85rem; }
  table.priser tbody th  { padding-right: .9rem; font-size: .975rem; }
  .pris-tabell-ramme     { margin-bottom: 1.25rem; }
}

/* ==========================================================================
   Kontaktskjema
   ========================================================================== */

.skjema { max-width: var(--bredde-tekst); }

.felt { margin-bottom: 1.35rem; }

.felt > label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
}

.felt .hjelp {
  display: block;
  font-size: .925rem;
  line-height: 1.5;
  color: var(--tekst-svak);
  margin-bottom: .45rem;
}

.pakrevd { color: var(--feil); }

.felt input,
.felt select,
.felt textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--kort);
  padding: .75rem .9rem;
  border: 1.5px solid var(--kant-skjema);
  border-radius: 10px;
  transition: border-color .15s ease;
}

.felt textarea { min-height: 9.5rem; resize: vertical; }

.felt input:hover,
.felt select:hover,
.felt textarea:hover { border-color: var(--kant-skjema-sterk); }

.felt input:focus,
.felt select:focus,
.felt textarea:focus { border-color: var(--aksent); }

/* Honningkrukke mot søppelpost — skjult for folk, synlig for roboter */
.honningkrukke {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skjema button[type="submit"] {
  font: inherit;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Tilbakemelding etter innsending */
.skjema-melding {
  padding: 1.1rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.75rem;
  max-width: calc(var(--bredde-tekst) + 2rem);
}
.skjema-melding :last-child { margin-bottom: 0; }
.skjema-melding h3 { margin-bottom: .3rem; }

.skjema-melding-ok {
  background: var(--flate-ro);
  border-left: 4px solid var(--primaer);
}
.skjema-melding-feil {
  background: var(--feil-flate);
  border-left: 4px solid var(--feil);
}

/* ==========================================================================
   Kart
   OpenStreetMap er valgt framfor Google Maps fordi det ikke setter
   informasjonskapsler. Se personvern.html.
   ========================================================================== */

.kart-ramme {
  margin-top: 1.35rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--kant);
  background: var(--flate-varm-lys);
}

.kart-ramme iframe {
  display: block;
  width: 100%;
  height: 15rem;
  border: 0;
}

.kart-lenke {
  display: inline-block;
  margin-top: .7rem;
  font-size: .95rem;
}

/* ==========================================================================
   Om oss — fellesadressen under profilbildene
   ========================================================================== */

.profil-felles {
  margin-top: 2.25rem;
  max-width: var(--bredde-tekst);
  font-size: 1.0625rem;
}

/* ==========================================================================
   Smatekst
   Brukes til datolinjer og ansvarlig-opplysninger nederst pa en side. Sto
   tidligere som inline style med var(--koks-svak) rett i HTML-en - det
   overlevde ikke omdopingen til semantiske tokens, og fargen falt tilbake
   til brodtekstfargen uten at noe varslet om det.
   ========================================================================== */

.smatekst {
  color: var(--tekst-svak);
  font-size: .95rem;
  margin-top: 2rem;
}