/* ============================================================
   SKOLEBOKSEN — den moerke boksen med utvidbar skole- og
   barnehageoversikt (komponenten SkoleBoks.astro).

   Laa i kommune-v2.css til 11. sep 2026. Flyttet hit da Flekkefjord by
   fikk samme boks paa stedssida: boksen skal ta med seg stilen dit den
   brukes, og stedssidene laster ikke kommunemalen. Kommunetokenene
   (--kv-mork, --kv-aksent, --kv-krem) er byttet til paletten; de to
   lokale (--kv-aksent-mork, --kv-dempet) defineres i blokka selv.
   ============================================================ */

.kv-darkcard {
  background: var(--surface-utility);
  color: var(--color-cream);
  border-radius: 18px;
  padding: clamp(22px, 2.8vw, 36px);
}
.kv-darkcard__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3831rem + 1.3521vw, 2.6rem);
  line-height: var(--linje-display);
  color: var(--color-cream);
}
/* Boks nummer to (ekstraboks) rett under skoleboksen, samme spalte. */
.kv-darkcard--ekstra { margin-top: clamp(16px, 2vw, 24px); }
.kv-darkcard__rows { display: flex; flex-direction: column; font-size: var(--brod); }
.kv-darkcard__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* En lang verdi («Vita Velo sykkelklubb») får ikke plass ved siden av
     navnet på en telefon. Da bryter den til egen linje, høyrestilt, i
     stedet for å gå ut av kortet. */
  column-gap: 12px;
  row-gap: var(--space-xs);
  padding: 9px 0;
  border-bottom: 1px solid rgba(241, 235, 227, 0.16);
}
/* Lenke i flat rad (Eiken): samme farge som teksten, understrek som
   diskret signal, og ut-pila (.kv-skoler__ut) kommer ved hover og fokus. */
.kv-darkcard__row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(241, 235, 227, 0.35);
  text-underline-offset: 3px;
  border-radius: 4px;
}
.kv-darkcard__row a:hover,
.kv-darkcard__row a:focus-visible { text-decoration-color: currentColor; }
.kv-darkcard__row a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.kv-darkcard__row a:hover .kv-skoler__ut,
.kv-darkcard__row a:focus-visible .kv-skoler__ut { opacity: 1; transform: translate(0, 0); }
.kv-darkcard__row em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  margin-left: auto;
  text-align: right;
  color: var(--aksent-tekst-mork);
}

/* ---- Utvidbar skoleoversikt i den moerke boksen -------------------------
 *
 * Foerste forsoek satte stedet i egen kolonne til hoeyre. Det ble forkastet:
 * ti av tolv skoler har stedet i navnet allerede, saa «Kvaas skole · Kvaas»
 * fylte plass uten aa opplyse. Avstand fra sentrum hadde vaert ny
 * informasjon, men gjoer sentrum til maalestokk — og skolene skal vaere
 * likestilte.
 *
 * Naar det ikke finnes en andre kolonne verdt aa ha, maa formen baere alene.
 * Skolene staar derfor i et rutenett, ikke en stabel: seks barneskoler blir
 * to rader i stedet for seks, boksen holder hoeyden nede, og lista leses som
 * en oversikt i stedet for en lenkeliste.
 *
 * Understreking og fast pil er borte av samme grunn. Lenkeaffordansen ligger
 * i at hele flisa er klikkbar, lyser opp under pekeren, og faar en pil som
 * kommer til syne ved hover og fokus.
 * ------------------------------------------------------------------------ */
.kv-skoler {
  display: flex;
  flex-direction: column;
  font-size: var(--brod);
  /* Husets aksent (#C4918A) gir 4,18:1 mot den moerke flata — under AA for
   * broedtekststoerrelse. Loeftet 15 % mot kremfargen blir den 4,82:1, og
   * forskjellen er knapt synlig. Egen variabel her, ikke endret --kv-aksent:
   * den brukes ogsaa paa lyse flater der originalen er riktig.
   * Alfa 0,62 paa krem gir 4,75:1 og er nedre grense for de dempede. */
  --kv-aksent-mork: var(--aksent-tekst-mork);
  --kv-dempet: rgba(241, 235, 227, 0.62);
}

.kv-skoler__gruppe { border-top: 1px solid rgba(241, 235, 227, 0.14); }
.kv-skoler__gruppe:last-child { border-bottom: 1px solid rgba(241, 235, 227, 0.14); }

/* ---- lukket rad ---- */
.kv-skoler__hode {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.kv-skoler__hode::-webkit-details-marker { display: none; }
.kv-skoler__hode:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Gruppenavnet er OVERSKRIFT for skolene under, og maa lese som det naar
 * gruppa er aapen. Foer sto det i 20 px/400 mot skolenavn i 18,8 px/400 —
 * samme vekt, samme farge, et steg paa 1,06. Da fantes det ikke et hierarki.
 * Naa: 700 mot 400, og 20 px mot 16 px (--kv-body mot --kv-caption), altsaa
 * et steg paa 1,25. Fonten har bare 400 og 700, saa 700 er valgt framfor 600
 * som maatte vaert syntetisert. */
.kv-skoler__navn {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 700;
  letter-spacing: var(--sperring-tett);
}

/* Trinnspennet er en etikett, ikke broedtekst — samme rolle som eyebrowene
 * ellers paa sida, saa det ikke konkurrerer med skoletypen. */
.kv-skoler__trinn {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--kv-dempet);
  white-space: nowrap;
}

.kv-skoler__antall {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  white-space: nowrap;
  color: var(--kv-aksent-mork);
  margin-left: auto;
}

.kv-skoler__pil {
  flex: none;
  align-self: center;
  color: rgba(241, 235, 227, 0.45);
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms ease;
}
.kv-skoler__gruppe[open] > .kv-skoler__hode .kv-skoler__pil { transform: rotate(180deg); }

/* ---- aapning og lukking ------------------------------------------------
 * <details> aapner normalt i ett hopp. ::details-content sammen med
 * interpolate-size gjoer at hoeyden kan gaa fra 0 til auto som en ekte
 * overgang, uten en linje JavaScript. Nettlesere uten stoette hopper som
 * foer — funksjonen er den samme, bare uten bevegelsen.
 *
 * Aapning gaar saktere enn lukking (380 mot 260 ms). Aa aapne er noe man
 * ser paa; aa lukke er noe man vil ha unnagjort. */
@supports selector(::details-content) {
  .kv-skoler { interpolate-size: allow-keywords; }

  .kv-skoler__gruppe::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 260ms cubic-bezier(0.4, 0, 0.2, 1),
      content-visibility 260ms allow-discrete;
  }
  .kv-skoler__gruppe[open]::details-content {
    block-size: auto;
    transition:
      block-size 380ms cubic-bezier(0.23, 1, 0.32, 1),
      content-visibility 380ms allow-discrete;
  }

  /* Flisene kommer inn etter tur, ikke samlet. Forskyvningen er kort nok til
   * aa leses som én bevegelse: siste flis i en sekser starter 175 ms etter
   * den foerste, mens panelet fortsatt aapner.
   *
   * @starting-style, ikke en base paa opacity: 0. Forskjellen er viktig:
   * her er HVILETILSTANDEN synlig, og bare INNGANGEN starter gjennomsiktig.
   * Med opacity: 0 som utgangspunkt ble flisene usynlige i alle tilfeller
   * der overgangen ikke faktisk kjoerer — skjult fane, avbrutt overgang,
   * throttlet prosess. Innhold skal aldri avhenge av at en animasjon
   * fullfoerer. Verifisert: med skjult dokument sto flisene paa opacity 0
   * med den gamle varianten. */
  .kv-skoler__gruppe[open] .kv-skoler__liste li {
    opacity: 1;
    transform: none;
    transition:
      opacity 300ms ease,
      transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  @starting-style {
    .kv-skoler__gruppe[open] .kv-skoler__liste li {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  /* Merknaden kommer sist, etter skolene den gjelder. */
  .kv-skoler__gruppe[open] .kv-skoler__merknad {
    opacity: 1;
    transition: opacity 260ms ease 240ms;
  }
  @starting-style {
    .kv-skoler__gruppe[open] .kv-skoler__merknad { opacity: 0; }
  }
}
.kv-skoler__hode:hover .kv-skoler__pil { color: var(--kv-aksent-mork); }

/* ---- aapen liste ---- */
/* Hairline til venstre gjoer at lista leses som noe som hoerer TIL gruppa
 * over, ikke som en ny seksjon. */
.kv-skoler__liste {
  /* Luft over lista og et tydeligere innrykk: barna skal ligge synlig under
   * og innenfor overskriften, ikke stoete inntil den. Hairline-en er hevet
   * fra 0,14 til 0,22 alfa saa nestingen leses ogsaa uten aa se etter. */
  margin: 0 0 12px;
  padding: 10px 0 4px 22px;
  list-style: none;
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 2px 10px;
}

/* Hairline-en tegnes ovenfra og ned naar gruppa aapner, i takt med at
 * flisene kommer inn. Egen pseudo-element framfor border-left nettopp for
 * aa kunne animeres. */
.kv-skoler__liste::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgba(241, 235, 227, 0.22);
  transform-origin: top;
}
/* Samme prinsipp som flisene: streken staar i hvile, og tegnes bare naar
   gruppa faktisk aapner. */
.kv-skoler__gruppe[open] .kv-skoler__liste::before {
  transform: scaleY(1);
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style {
  .kv-skoler__gruppe[open] .kv-skoler__liste::before { transform: scaleY(0); }
}

.kv-skoler__liste a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  margin-left: -10px;
  border-radius: 6px;
  color: var(--color-cream);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.kv-skoler__liste a:hover,
.kv-skoler__liste a:focus-visible { background: rgba(241, 235, 227, 0.07); }
.kv-skoler__liste a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}

/* ---------- Skoleboksen som faner ---------- */

.kv-skoler__skole { font-size: var(--etikett-stor); min-width: 0; hyphens: auto; }


.kv-skoler__ut {
  flex: none;
  align-self: center;
  opacity: 0;
  color: var(--kv-aksent-mork);
  transform: translate(-3px, 2px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.kv-skoler__liste a:hover .kv-skoler__ut,
.kv-skoler__liste a:focus-visible .kv-skoler__ut {
  opacity: 1;
  transform: translate(0, 0);
}

.kv-skoler__merknad {
  margin: 2px 0 16px 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(241, 235, 227, 0.1);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--kv-dempet);
}

/* Ber leseren om mindre bevegelse: ingen overganger, og ingenting som
 * starter usynlig — panelet skal aapne og lukke, bare uten aa bevege seg. */
@media (prefers-reduced-motion: reduce) {
  .kv-skoler__pil,
  .kv-skoler__ut,
  .kv-skoler__liste a,
  .kv-skoler__liste li,
  .kv-skoler__liste::before,
  .kv-skoler__merknad,
  .kv-skoler__gruppe::details-content { transition: none; }
  .kv-skoler__gruppe[open] .kv-skoler__liste li,
  .kv-skoler__gruppe[open] .kv-skoler__merknad { opacity: 1; transform: none; }
  .kv-skoler__gruppe[open] .kv-skoler__liste::before { transform: scaleY(1); }
}

/* Under 560 px er det ikke plass til to kolonner — da faar hver skole
 * hele bredden, med god trykkflate. */
@media (max-width: 560px) {
  .kv-skoler__liste { grid-template-columns: 1fr; gap: 0; }
  .kv-skoler__liste a { padding: 11px 10px; }
}

/* ---------- Skoleboksen som faner (bygd av kv-skolefaner.js) ---------- */

/* Trekkspillet ligger i fire spalter naar seksjonen er stablet. Faner er én
   rad over ett panel, saa det oppsettet maa nulles naar JS har oppgradert.
   Uten dette havnet fanene i en smal venstrekolonne. */
.kv-oppvekst-split--stablet .kv-skoler--faner,
.kv-skoler--faner {
  display: block;
}
.kv-skoler--faner .kv-skoler__gruppe { display: none; }
/* Fanene: én rad piller over ett panel, satt inn i stedet for trekkspillet.
   Bygges av kv-skolefaner.js. Trekkspillet under er grunnformen og staar
   som det er uten JS; disse reglene gjelder foerst naar .kv-skoler--faner
   er satt. */
.kv-skoler__faner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 2.4vw, 26px);
}
.kv-skoler__fane {
  display: inline-flex;
  /* Et langt fanenavn («Primary and lower secondary») bryter inne i fanen
     i stedet for å gå ut av kortet. */
  max-width: 100%;
  text-align: left;
  align-items: baseline;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(241, 235, 227, 0.28);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.kv-skoler__fane:hover,
.kv-skoler__fane:focus-visible { border-color: var(--kv-aksent-mork); }
.kv-skoler__fane:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}
/* Valgt fane snur flata: krem bunn, moerk tekst. Da gjelder den LYSE
   aksenten paa tallet — 5,26:1 mot kremen. */
.kv-skoler__fane.er-valgt {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--surface-utility);
}
.kv-skoler__fanetall {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--linje-tett);
  font-style: normal;
  color: var(--kv-aksent-mork);
}
.kv-skoler__fane.er-valgt .kv-skoler__fanetall { color: var(--aksent-tekst); }
.kv-skoler__fanenavn {
  font-family: var(--font-body);
  font-size: var(--etikett);
  text-transform: uppercase;
  letter-spacing: var(--sperring-md);
  line-height: var(--linje-etikett);
}

.kv-skoler__panel {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-top: 26px;
  border-top: 1px solid rgba(241, 235, 227, 0.18);
}
.kv-skoler__panelhode {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
/* Gruppenavnet i panelet. Skrives ut her, ikke arvet: uten egen regel tok
   den hva som helst som traff <h3> i den moerke boksen, og traff ulikt paa
   mobil og skjerm. Redaksjonell stemme -> display med ekte kursiv. */
.kv-skoler__panelnavn {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
/* Antallet staar hoeyrestilt paa samme linje naar det er plass. Bryter linja
   — «Barneskoler 1.–7. trinn» tar hele bredden paa mobil — faller det ned og
   stiller seg til venstre. Uten bryting ble det skjoevet utenfor kortkanten. */
.kv-skoler__panelhode .kv-skoler__antall { margin-left: auto; }
@media (max-width: 560px) {
  .kv-skoler__panelhode .kv-skoler__antall { margin-left: 0; }
}

/* Kolonnene foelger boksens egen bredde, ikke vinduets: maks tre, og faerre
   naar hver ikke faar 12rem. Med faste tre kolonner styrt av vindusbredden
   sprengte lange navn («Flekkefjord ungdomsskole») boksen der den staar ved
   siden av bildet, og tredje kolonne ble kuttet i kanten (3. okt 2026). */
.kv-skoler__fliser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12rem, (100% - 40px) / 3)), 1fr));
  gap: 10px 20px;
}
.kv-skoler__flis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(241, 235, 227, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease;
}
.kv-skoler__flis:hover,
.kv-skoler__flis:focus-visible { background: rgba(241, 235, 227, 0.13); }
.kv-skoler__flis .kv-skoler__ut { color: var(--kv-aksent-mork); flex: 0 0 auto; }


/* Ingen overganger for den som har bedt om mindre bevegelse. */
.kv-skoler--rolig .kv-skoler__fane,
.kv-skoler--rolig .kv-skoler__flis { transition: none; }