/* senas.css – felles design for den offentlige nettsiden (senas.no).
   SENAS PROFIL (fra profilmanualen): hvit · mørk grå (Cool Grey 11, #54565B) ·
   sort (#231F20) · grønn (PMS 383 / Wasabi, #99C217).
   Typografi: Museo Sans Rounded (lisensiert) → Nunito som web-erstatning. */
/* NB: Google Fonts lastes IKKE herfra. Skriften hentes først når besøkende har
   samtykket til tredjeparts-innhold (se samtykke-banneret i site.js) – ellers
   ville IP-adressen gått til Google før samtykke. Uten samtykke vises siden i
   systemfonten, som ligger svært nær Nunito i uttrykk. */
:root {
  --senas: #54565b;        /* mørk grå – primær flate/chrome */
  --senas-mork: #231f20;   /* sort */
  --gronn: #99c217;        /* PMS 383 – aksent/CTA (alltid med mørk tekst) */
  --gronn-mork: #7da010;
  --gronn-tekst: #5f7a10;  /* mørk nok grønn for tekst på hvitt */
  --senas-lys: #f3f7e7;    /* lys grønn-tone til fremhevede flater */
  --bg: #f5f6f4;
  --kort: #ffffff;
  --ramme: #dcdedb;
  --tekst: #231f20;
  --demp: #6b6e74;
  --ok: #1c6b3a;
  --feil: #8c1d18;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--tekst); line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--gronn-tekst); }

/* ---- Header / meny ---- */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--ramme);
  box-shadow: 0 1px 4px rgba(16, 40, 70, .06);
}
.topp-inn { max-width: 1100px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 18px; }
.topp-logo img { height: 40px; display: block; }
.topp-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.topp-nav a {
  color: var(--tekst); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px;
}
.topp-nav a:hover { background: var(--senas-lys); color: var(--senas-mork); }
.topp-nav a.aktiv { background: var(--senas); color: #fff; }
.topp-nav a.cta { background: var(--gronn); color: var(--senas-mork); font-weight: 700; }
.topp-nav a.cta:hover { background: var(--gronn-mork); }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--ramme); border-radius: 8px; font-size: 20px; padding: 4px 12px; cursor: pointer; color: var(--senas-mork); }
@media (max-width: 860px) {
  .burger { display: block; }
  .topp-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--ramme); flex-direction: column; padding: 10px 18px 16px; gap: 2px; box-shadow: 0 8px 16px rgba(16, 40, 70, .08); }
  .topp-nav.open { display: flex; }
  .topp-nav a { padding: 11px 12px; font-size: 16px; }
}

/* ---- Hero ---- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--senas); }
.hero .bakgrunn { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
/* Mørk gradient over fotoet: sikrer at den hvite hero-teksten holder lesbar
   kontrast (WCAG AA) også der bildet er lyst. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(35,31,32,.72) 0%, rgba(35,31,32,.55) 45%, rgba(35,31,32,.25) 100%);
}
.hero-inn { position: relative; z-index: 1; }
.hero-inn { position: relative; max-width: 1100px; margin: 0 auto; padding: 72px 18px 76px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 10px; line-height: 1.15; }
.hero p { font-size: clamp(16px, 2.2vw, 19px); max-width: 620px; margin: 0 0 26px; color: #e9eae7; }
.hero .knapper { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Seksjoner / kort ---- */
main.side { max-width: 1100px; margin: 0 auto; padding: 34px 18px 60px; }
.seksjon { margin-bottom: 44px; }
.seksjon > h2 { font-size: clamp(22px, 3vw, 28px); color: var(--senas-mork); margin: 0 0 6px; }
.seksjon > .ingress { color: var(--demp); font-size: 16px; max-width: 700px; margin: 0 0 22px; }
.kort-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
/* Fire kort: hold raden balansert (4 på bred skjerm, 2×2 på mellomstore) – uten
   dette havner det fjerde kortet alene på en egen rad og seksjonen ser uferdig ut. */
@media (min-width: 1000px) { .kort-rad.fire { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) and (max-width: 999px) { .kort-rad.fire { grid-template-columns: repeat(2, 1fr); } }
.kort {
  background: var(--kort); border: 1px solid var(--ramme); border-radius: 14px;
  padding: 24px; box-shadow: 0 1px 3px rgba(16, 40, 70, .05);
  display: flex; flex-direction: column;
}
.kort .ikon { font-size: 30px; margin-bottom: 10px; }
.kort h3 { margin: 0 0 8px; font-size: 19px; color: var(--senas-mork); }
.kort p { margin: 0 0 16px; font-size: 14.5px; color: var(--tekst); flex: 1; }
.kort-lenke { text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.kort-lenke:hover .kort { box-shadow: 0 6px 18px rgba(35, 31, 32, .16); border-color: var(--gronn); }

/* ---- Knapper: grønn CTA med mørk tekst (profilens aksent), grå sekundær ---- */
.knapp {
  display: inline-block; background: var(--gronn); color: var(--senas-mork); text-decoration: none;
  border: 0; border-radius: 10px; padding: 12px 24px; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.knapp:hover { background: var(--gronn-mork); }
.knapp.sekundaer { background: #fff; color: var(--senas-mork); border: 1.5px solid var(--senas); }
.knapp.sekundaer:hover { background: #ececec; }
.knapp.stor { padding: 14px 30px; font-size: 17px; }

/* ---- Info-striper ---- */
.stripe { background: var(--senas-lys); border: 1px solid #dbe6b6; border-radius: 14px; padding: 20px 24px; }
.steg-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: steg; }
.steg { position: relative; padding-left: 44px; }
.steg::before {
  counter-increment: steg; content: counter(steg);
  position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gronn); color: var(--senas-mork); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.steg b { display: block; margin-bottom: 3px; color: var(--senas-mork); }
.steg span { font-size: 13.5px; color: var(--tekst); }

/* ---- Tabeller (prisliste) ---- */
table.pris { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ramme); border-radius: 12px; overflow: hidden; font-size: 15px; }
table.pris th { text-align: left; background: var(--senas); color: #fff; padding: 11px 16px; font-size: 14px; }
table.pris td { padding: 10px 16px; border-top: 1px solid var(--ramme); }
table.pris td.pris-verdi { text-align: right; white-space: nowrap; font-weight: 600; color: var(--senas-mork); }
.merknad { font-size: 13px; color: var(--demp); margin-top: 10px; }

/* ---- FAQ ---- */
details.faq { background: #fff; border: 1px solid var(--ramme); border-radius: 12px; margin-bottom: 10px; padding: 0 20px; }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--senas-mork); padding: 15px 0; list-style: none; position: relative; padding-right: 30px; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 21px; color: var(--gronn-tekst); }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: 0 0 16px; font-size: 14.5px; }

/* ---- Skjema ---- */
.skjema { background: #fff; border: 1px solid var(--ramme); border-radius: 14px; padding: 26px; max-width: 640px; }
.skjema label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 5px; }
.skjema input, .skjema textarea, .skjema select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--ramme); border-radius: 9px;
  font: inherit; font-size: 15px; background: #fbfcfe;
}
.skjema input:focus, .skjema textarea:focus { outline: 2px solid #d3e59b; border-color: var(--gronn-mork); }

/* ---- Tastaturfokus: tydelig markering i profilfargene på ALT som kan fokuseres.
   :focus-visible treffer kun tastaturbruk, så musklikk ser uendret ut. ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gronn-tekst);   /* mørk nok grønn mot hvitt (WCAG 1.4.11) */
  outline-offset: 2px;
  border-radius: 6px;
}
/* På de mørke flatene (hero og bunn) trengs den lyse grønnen for å synes */
.hero a:focus-visible, .hero button:focus-visible,
.bunn a:focus-visible, .bunn button:focus-visible { outline-color: var(--gronn); }
.skjema .melding { margin-top: 14px; font-size: 14.5px; min-height: 20px; }
.skjema .melding.ok { color: var(--ok); font-weight: 600; }
.skjema .melding.feil { color: var(--feil); }
/* ---- Samtykke-banner + kartsperre (tredjeparts-innhold fra Google) ---- */
.samtykke {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 3px solid var(--gronn);
  box-shadow: 0 -6px 22px rgba(16, 40, 70, .16);
  padding: 16px 18px; display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}
.samtykke-tekst { font-size: 14px; max-width: 640px; color: var(--tekst); }
.samtykke-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.samtykke .knapp { padding: 9px 20px; font-size: 14.5px; }
.kart-sperre {
  background: var(--senas-lys); border: 1px dashed #c3d68f; border-radius: 14px;
  padding: 28px 22px; text-align: center;
}
.kart-sperre p { margin: 0 0 16px; font-size: 14.5px; color: var(--tekst); }
.kart-sperre .knapp { margin: 0 4px 6px; }

/* Spamfelle: skjules for øyet, men wrapperen har aria-hidden slik at
   skjermlesere ikke finner den og «svarer» i den (da ville meldingen forsvinne). */
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
footer.bunn { background: var(--senas-mork); color: #cfd0cd; margin-top: 30px; }
.bunn-inn { max-width: 1100px; margin: 0 auto; padding: 40px 18px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.bunn h4 { color: #fff; font-size: 15px; margin: 0 0 10px; }
.bunn a { color: #cfd0cd; text-decoration: none; }
.bunn a:hover { color: #fff; text-decoration: underline; }
.bunn ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.bunn li { margin-bottom: 7px; }
.bunn-linje { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 26px; }
.bunn-bunn { max-width: 1100px; margin: 0 auto; padding: 14px 18px; font-size: 12.5px; color: #a3a5a1; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }