/* Søkedialogen og /sok.
 *
 * EGEN FIL, ikke i stil.css: den genereres fra canvaset og overskrives ved
 * hver build. Her ligger også grunnen til at dialogen er lett å fjerne igjen
 * — slett denne fila, scripts/sok.mjs og public/sok*.js, så er søket borte.
 *
 * Fargene er nettstedets egne: #12211B mørk, #F2F4F1 papir, #5E8E3E grønn,
 * #C2D0BC ramme, #7A8A80 dempet tekst. Skriftene arves fra body.
 */

/* ── knappen i headeren ──────── */
.sokknapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  margin-right: 6px;
  border-radius: 999px;
  /* IKKE color:inherit. Headeren står på #12211B, men arver tekstfargen
     #12211B fra ytterdiven — menylenkene setter sin egen farge inline, så
     ingen har merket det. Et ikon med currentColor ble dermed mørkt på
     mørkt, altså usynlig. Målt: rgb(18,33,27) på rgb(18,33,27). */
  color: #F2F4F1;
  /* Ramme og svakt fyll. Et ikon uten noe rundt seg leses som et symbol,
     ikke som en knapp — og da prøver færre å trykke på det. Lyst og ikke
     grønt med vilje: to grønne knapper ved siden av hverandre konkurrerer,
     og «Kontakt oss» skal vinne den kampen. */
  border: 1px solid rgba(242, 244, 241, .22);
  background: rgba(242, 244, 241, .06);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sokknapp:hover {
  background: rgba(242, 244, 241, .16);
  border-color: rgba(242, 244, 241, .5);
  color: #FFFFFF;
}

/* Under 861 px bytter headeren til ikonrad, og rekkefølgen styres av
   order: mobilmenyen 1, logoen 2, kontaktknappen 3. Uten en order havner
   søkeknappen på 0 — altså først av alt, til venstre for hamburgeren.
   Med order:2 stiller den seg like etter logoen, og de to ikonene som
   gjør noe (søk og kontakt) står sammen til høyre. */
@media (max-width: 860px) {
  .sokknapp { order: 2; margin-right: 0; }
}
.sokknapp:focus-visible { outline: 2px solid #5E8E3E; outline-offset: 2px; }

/* ── dialogen ──────── */
/* MØRK, og det er ikke bare pynt. En lys, nøytral boks kunne tilhørt hvilken
   som helst nettside — nettstedets eget uttrykk ER de mørke båndene. /sok
   står lyst, for der er dialogen hele siden og skal føles som en side.
   Derfor er alt det mørke under scopet til .sokdialog. */
.sokdialog {
  width: min(680px, 100vw - 32px);
  max-height: min(78vh, 720px);
  padding: 0;
  /* #1B2E25 og ikke #12211B: dialogen åpnes ofte over heroen, som SELV
     står på #12211B. Like farger ga en boks som nesten forsvant i
     bakgrunnen. Nå ligger panelet ett hakk lysere enn siden under, og
     feltet ett hakk mørkere enn panelet — som et innfelt skjemafelt. */
  border: 1px solid #3E5C4B;
  border-radius: 4px;
  background: #1B2E25;
  color: #F2F4F1;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
  /* Dialogen sentreres av nettleseren vannrett. Loddrett legges den litt
     over midten: trefflista vokser nedover, og en boks som ligger midt på
     skjermen hopper oppover for hvert tegn du skriver. */
  margin-top: 10vh;
  overflow: hidden;
}
.sokdialog::backdrop { background: rgba(6, 12, 9, .72); }

.sokdialog .sokfelt { background: #12211B; border-bottom: 1px solid #3E5C4B; }
/* Den grønne fokusringen rundt feltet står med vilje. Den kommer fra
   :focus-visible i stil.css, som er satt med !important og en forklaring:
   ringen må virke både mot mørk header og mot lyse flater.
   Fristelsen er å dempe den her, siden feltet ALLTID har fokus når
   dialogen åpnes og ringen dermed ikke sier noe nytt i det øyeblikket.
   Men den som bruker piltastene går ned i trefflista og opp igjen — og da
   er ringen det eneste som viser at fokus er tilbake i feltet. Markøren
   alene er for tynn til å se. Den blir stående.
   Raden får en grønn underkant i tillegg, så fokus leses som én ting. */
.sokdialog .sokfelt:focus-within { border-bottom-color: #7AB55C; }
.sokdialog .sokfelt svg { color: #7AB55C; }
.sokdialog .sokfelt input { color: #F2F4F1; }
.sokdialog .sokfelt input::placeholder { color: #7A8A80; }
.sokdialog .soklukk { color: #A8B5AC; }
.sokdialog .soklukk:hover { background: #2A4034; color: #F2F4F1; }
.sokdialog .sokstatus { color: #7A8A80; }
.sokdialog .soktreff a:hover,
.sokdialog .soktreff a:focus-visible { background: #24382E; }
.sokdialog .soktreff a:focus-visible { box-shadow: inset 0 0 0 2px #7AB55C; }
.sokdialog .soktreff .sokomrade { color: #7AB55C; }
.sokdialog .soktreff .sokingress { color: #A8B5AC; }
.sokdialog .soktomt { color: #A8B5AC; }
.sokdialog .soktomt a { color: #7AB55C; }
.sokdialog .soksnarvei p { color: #7A8A80; }
.sokdialog .sokpiller a {
  border-color: #3E5C4B; background: #12211B; color: #DCE3D8;
}
.sokdialog .sokpiller a:hover { border-color: #7AB55C; background: #24382E; color: #FFFFFF; }
.sokdialog mark { background: rgba(122, 181, 92, .26); color: #FFFFFF; }

/* ── feltet ──────── */
.sokfelt {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(12px, 3vw, 18px);
  background: #FFFFFF;
}
.sokfelt svg { flex-shrink: 0; color: #5E8E3E; }
.sokfelt input {
  flex: 1;
  /* min-width:0 er ikke pynt. Uten den nekter et flex-barn å bli smalere
     enn innholdet sitt, og lukkeknappen ble presset ut av dialogen på
     390 px. */
  min-width: 0;
  border: 0; background: none; outline: none;
  /* 17px og ikke mindre: iOS zoomer inn på felter under 16px, og da hopper
     hele siden når noen trykker i feltet. */
  font: inherit; font-size: 17px; color: #12211B;
}
.sokfelt input::placeholder { color: #7A8A80; }
.sokfelt input::-webkit-search-cancel-button { -webkit-appearance: none; }
.soklukk {
  flex-shrink: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none;
  color: #3E4A43; cursor: pointer;
}
.soklukk:hover { background: #DCE3D8; }

/* ── status og treff ──────── */
.sokstatus {
  margin: 0; padding: 12px clamp(12px, 3vw, 18px) 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #7A8A80;
}
.sokstatus:empty { display: none; }

.soktreff { overflow-y: auto; padding: 6px clamp(12px, 3vw, 18px) clamp(12px, 3vw, 18px); }
.sokdialog .soktreff { max-height: calc(78vh - 120px); }

.soktreff a {
  display: block; padding: 13px 14px;
  border-radius: 3px;
  text-decoration: none; color: inherit;
}
.soktreff a:hover, .soktreff a:focus-visible { background: #DCE3D8; outline: none; }
.soktreff a:focus-visible { box-shadow: inset 0 0 0 2px #5E8E3E; }

.soktreff .sokomrade {
  display: block; margin-bottom: 5px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #5E8E3E;
}
.soktreff .soktittel {
  display: block; margin-bottom: 4px;
  font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em;
}
.soktreff .sokingress {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0; font-size: 14px; line-height: 1.5; color: #3E4A43;
}

/* ── snarveier ──────── */
.soksnarvei { padding: 14px clamp(12px, 3vw, 18px) clamp(14px, 3vw, 20px); }
.soksnarvei[hidden] { display: none; }
.soksnarvei p {
  margin: 0 0 10px;
  font-size: 10px; letter-spacing: .14em; color: #7A8A80;
}
.sokpiller { display: flex; flex-wrap: wrap; gap: 8px; }
.sokpiller a {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid #C6D1C1; border-radius: 2px;
  background: #FFFFFF; color: #12211B;
  font-size: 14px; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sokpiller a:hover { border-color: #5E8E3E; color: #3E6B26; }

/* ── uthevet søkeord ──────── */
/* Bakgrunn og ikke farge alene: en fargeforskjell kan forsvinne for den som
   ser farger annerledes, og markeringen er hele poenget her. */
.soktreff mark {
  background: rgba(94, 142, 62, .2);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.soktomt { padding: 14px; font-size: 15px; line-height: 1.6; color: #3E4A43; }
.soktomt a { color: #3E6B26; }

/* ── /sok-siden ──────── */
/* Luften står inline fra scripts/sok.mjs, som de andre seksjonene, så de
   responsive reglene i stil.css treffer den på samme måte. */
.soksiden .modul { max-width: 680px; margin: 0 auto; }
.soksiden h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.12;
  font-weight: 700; letter-spacing: -.03em;
}
.soksiden .sokbrod { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #3E4A43; }
.soksiden .sokfelt { border: 1px solid #C2D0BC; border-radius: 3px; }
.soksiden .sokfelt:focus-within { border-color: #5E8E3E; }
.soksiden .soksnarvei { padding-left: 0; padding-right: 0; }
.soksiden .soktreff { padding-left: 0; padding-right: 0; }
.soksiden .soktreff a { padding-left: 0; padding-right: 0; }
.soksiden .soktreff a:hover, .soksiden .soktreff a:focus-visible { background: none; }
.soksiden .soktreff .soktittel { color: #12211B; }
.soksiden .soktreff a:hover .soktittel { color: #3E6B26; }

/* Den som har slått av bevegelse skal ikke få overganger på hover. */
@media (prefers-reduced-motion: reduce) {
  .sokknapp, .sokpiller a { transition: none; }
}