/* =============================================================================
   Oslo-skallet for PxWeb 2 — layout og PxWeb-overstyringer
   -----------------------------------------------------------------------------
   Parkoblet med oslo-shell.js. Sammen legger de et Oslo-lag RUNDT PxWeb-appen
   uten å røre releasen: JS bygger header, hero og emnekort utenfor #root, og
   CSS-en her skjuler de delene av PxWebs egen startside som skallet erstatter.

   ARBEIDSDELING MOT PUNKT
   -----------------------
   Typografi kommer fra Punkt (`pkt-txt-*`), ikke herfra. Fila under setter
   layout, farge og avstand — ikke font-size, font-weight eller line-height på
   tekst som har en pkt-klasse. Grunnen er at det ellers blir en KOPI av
   styleguiden: verdiene ville sett riktige ut i dag og stille drevet fra Punkt
   ved neste oppdatering, uten at noen merket det. Punkts skala har dessuten
   responsive trinn (`--tablet-up`) som en håndskrevet clamp() bare tilnærmer.

   TO REGLER SOM HOLDER DETTE LEVENDE GJENNOM OPPGRADERINGER
   ---------------------------------------------------------
   1. ALDRI selekter på PxWebs klassenavn. De er CSS-modul-hasher
      (`_startPage_17acf_181`) og bygges om ved hver release. Bruk i stedet
      (a) våre EGNE klasser, som JS setter, (b) de stabile `px-`-id-ene
      (`#px-start-filter`, `#px-start-result`, `#wip-status-message`), eller
      (c) semantikk og struktur (`main > div:first-child h1`).

   2. Skjulereglene er gated i TO NIVÅER, fordi risikoen er ulik:

      `body.oslo-skall` settes umiddelbart av JS og styrer det lavrisikable —
      PxWebs header, WIP-banneret og språkvelgeren, alle på stabile id-er eller
      på <header> inne i #root.

      `body.oslo-hero-synlig` settes bare når JS har FUNNET startsidens H1 og
      ingress i DOM-en. De ligger på en posisjonsbasert krok som en
      omstrukturering upstream kan flytte. Finnes de ikke, settes klassen aldri,
      ingenting skjules, og siden får to overskrifter — stygt, men lesbart —
      framfor en side der overskriften er borte og ingenting erstattet den.
      Fail-open, ikke fail-blank. JS logger samtidig hva som må rettes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Felles. Fargene er Punkt-tokens, gjentatt her fordi skallet ligger utenfor
   PxWebs token-tre (theme/variables.css gjelder `--px-*`, ikke våre klasser).
   ----------------------------------------------------------------------- */
.oslo-skall-rot {
  --oslo-blaa: #2a2859;         /* Oslo mørkeblå — tekst, flater, kant       */
  --oslo-varmblaa: #1f42aa;     /* hover/aktiv på handlinger                 */
  --oslo-cyan: #6fe9ff;         /* aksent på mørk flate                      */
  --oslo-lys: #e5fcff;          /* lys blå flate                             */
  --oslo-graa: #f2f2f2;         /* nøytral kant                              */
  --oslo-sand: #f8f0dd;         /* varm flate — geografiske nivå             */
  --oslo-fokus: #e0adff;        /* Punkts lilla fokusring — ikke fjern       */
  --oslo-bredde: 80rem;

  color: var(--oslo-blaa);
}

.oslo-skall-rot,
.oslo-skall-rot * {
  box-sizing: border-box;
}

/* Punkts fokusring, over hele skallet. Aksessibilitet — ikke fjern. */
.oslo-skall-rot :focus-visible {
  outline: 4px solid var(--oslo-fokus);
  outline-offset: 1px;
}

.oslo-midt {
  max-width: var(--oslo-bredde);
  margin: 0 auto;
  padding: 0 2rem;
}

/* --------------------------------------------------------------------------
   Header — Oslo-logo + tjenestenavn, og to ærlige lenker til oslo.kommune.no.
   Bevisst ingen megameny eller innloggingsknapp: Punkts
   <pkt-header type="global"> henter den menyen sentralt fra
   cdn.web.oslo.kommune.no, som svarer 403 herfra (verifisert 2026-08-20), og en
   håndbygd kopi ville drifte fra sannheten uten at noen merket det.
   ----------------------------------------------------------------------- */
.oslo-header {
  background: #fff;
  border-bottom: 2px solid var(--oslo-blaa);
  position: sticky;
  top: 0;
  z-index: 30;
}

.oslo-header__inner {
  max-width: var(--oslo-bredde);
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.oslo-merke {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.oslo-merke__logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.oslo-merke__navn {
  color: inherit;
  text-decoration: none;
}

.oslo-header__lenker {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.oslo-header__lenke {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
}

.oslo-header__lenke:hover,
.oslo-header__lenke:focus-visible {
  color: var(--oslo-varmblaa);
  border-bottom-color: currentColor;
}

.oslo-header__lenke img {
  width: 16px;
  height: 16px;
  margin-left: 0.35rem;
  vertical-align: -2px;
}

/* --------------------------------------------------------------------------
   Hero. Søket er en ekte <form method="get"> mot ?q=, som PxWebs egen
   startside leser — så det virker uten JavaScript.
   ----------------------------------------------------------------------- */
.oslo-hero {
  background: var(--oslo-blaa);
  color: #fff;
  padding: 4rem 0 4.5rem;
}

.oslo-hero__merkelapp {
  display: inline-block;
  background: var(--oslo-cyan);
  color: var(--oslo-blaa);
  padding: 0.35rem 0.75rem;
  margin-bottom: 1.25rem;
}

.oslo-hero__tittel {
  margin: 0 0 1rem;
  max-width: 40rem;
}

.oslo-hero__ingress {
  margin: 0 0 2rem;
  max-width: 44rem;
}

.oslo-sok {
  display: flex;
  max-width: 40rem;
  background: #fff;
  border: 2px solid var(--oslo-cyan);
}

.oslo-sok__ikon {
  display: grid;
  place-items: center;
  padding: 0 1rem;
  flex-shrink: 0;
}

.oslo-sok__ikon img {
  width: 24px;
  height: 24px;
}

.oslo-sok__felt {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 1rem 0.5rem;
  font-family: inherit;
  color: var(--oslo-blaa);
  background: transparent;
}

.oslo-sok__knapp {
  border: 0;
  background: var(--oslo-blaa);
  color: #fff;
  padding: 0 1.75rem;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.oslo-sok__knapp:hover,
.oslo-sok__knapp:focus-visible {
  background: var(--oslo-varmblaa);
}

.oslo-hero__snarveier {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.25rem;
}

.oslo-hero__snarveier a {
  color: var(--oslo-cyan);
  text-decoration: underline;
}

.oslo-hero__snarveier a:hover,
.oslo-hero__snarveier a:focus-visible {
  text-decoration-thickness: 3px;
}

/* --------------------------------------------------------------------------
   Emnekort — bygges fra API-ets emnetre, ikke fra en hardkodet liste, så de
   viser det basen faktisk inneholder og aldri lenker til et tomt emne.
   ----------------------------------------------------------------------- */
.oslo-emner {
  padding: 3.5rem 0 1rem;
}

.oslo-emner__tittel {
  margin: 0 0 0.5rem;
}

.oslo-emner__ingress {
  margin: 0 0 2rem;
}

.oslo-emner__rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
}

.oslo-emnekort {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border: 2px solid var(--oslo-graa);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.oslo-emnekort:hover,
.oslo-emnekort:focus-visible {
  border-color: var(--oslo-varmblaa);
}

.oslo-emnekort__ikon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--oslo-lys);
}

/* PxWebs små emneikoner er 28x28 (dokumentert mål). */
.oslo-emnekort__ikon img {
  width: 28px;
  height: 28px;
}

.oslo-emnekort__navn {
  display: block;
  margin-bottom: 0.25rem;
}

.oslo-emnekort__antall {
  display: block;
}

/* --------------------------------------------------------------------------
   Geografiske nivå — det brukerne oftest lurer på, og det PROD gjemmer i en
   boks nede til høyre. Her ligger det i flyten.
   ----------------------------------------------------------------------- */
.oslo-geo {
  background: var(--oslo-sand);
  padding: 3rem 0;
  margin-top: 3.5rem;
}

.oslo-geo__inner {
  max-width: var(--oslo-bredde);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.oslo-geo__tekst {
  max-width: 34rem;
}

.oslo-geo__tittel {
  margin: 0 0 0.75rem;
}

.oslo-geo__brodtekst {
  margin: 0;
}

.oslo-geo__nivaaer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.oslo-geo__nivaa {
  background: #fff;
  border: 2px solid var(--oslo-blaa);
  padding: 0.5rem 0.9rem;
}

/* --------------------------------------------------------------------------
   PxWeb-overstyringer — NIVÅ 1 (body.oslo-skall, settes umiddelbart).
   Bare stabile id-er og semantikk. Se regel 2 øverst.
   ----------------------------------------------------------------------- */

/* WIP-banneret er PxWebs egen «vi bygger fortsatt»-melding, med emoji og
   referanse til PxWeb 2.0. Stabil id, trygg å skjule. */
body.oslo-skall #wip-status-message {
  display: none !important;
}

/* PxWebs egen header erstattes av Oslo-headeren. Scopet til #root, så vårt
   eget <header> — som ligger utenfor #root — ikke treffes. */
body.oslo-skall #root header {
  display: none !important;
}

/* Språkvelgeren: API-et har bare norsk (`/api/v2/config` → languages: [no]),
   så en språkbryter fører til en ødelagt tilstand. Skjules til flere språk
   faktisk finnes i basen. */
body.oslo-skall #language-switcher {
  display: none !important;
}

/* --------------------------------------------------------------------------
   NIVÅ 2 (body.oslo-hero-synlig, settes bare når krokene er verifisert).
   ----------------------------------------------------------------------- */

/* Startsidens egen H1 og ingress — hero-en sier det samme, bedre. */
body.oslo-hero-synlig #root main > div:first-child h1,
body.oslo-hero-synlig #root main > div:first-child h1 + p {
  display: none !important;
}

/* Detaljseksjonen («Om statistikkbanken») BEHOLDES — den bærer kilder og
   nedlastingsinfo fra content.json, og har ingen plass i skallet. Men blokka
   den bor i var dimensjonert for en overskrift og en ingress vi nå skjuler, så
   uten dette blir det et stort tomrom mellom geo-båndet og seksjonen. */
body.oslo-hero-synlig #root main > div:first-child {
  padding-block: 0;
}

body.oslo-hero-synlig #root main > div:first-child > div {
  padding-block: 1.5rem;
}

/* Uten hero (aktivt søk, eller tabellside) trenger innholdet luft der PxWebs
   header sto. */
body.oslo-skall:not(.oslo-hero-synlig) #root main {
  padding-top: 2rem;
}

/* --------------------------------------------------------------------------
   Mobil. Kun layout — teksten skalerer via Punkts egne `--tablet-up`-trinn.
   ----------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .oslo-midt,
  .oslo-header__inner,
  .oslo-geo__inner {
    padding: 0 1rem;
  }

  .oslo-header__inner {
    min-height: 64px;
  }

  /* Lenkene til oslo.kommune.no viker for tjenestenavnet på liten skjerm. */
  .oslo-header__lenker {
    display: none;
  }

  .oslo-hero {
    padding: 2.5rem 0 3rem;
  }

  .oslo-sok {
    flex-wrap: wrap;
  }

  .oslo-sok__knapp {
    width: 100%;
    padding: 0.85rem 0;
  }

  .oslo-emner {
    padding: 2.5rem 0 1rem;
  }

  .oslo-emner__rutenett {
    grid-template-columns: 1fr;
  }
}

/* Respekter brukerens valg om mindre bevegelse. */
@media (prefers-reduced-motion: reduce) {
  .oslo-emnekort {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Oslos globale footer.

   Innholdet leses av oslo-shell.js fra content/no/content.json — den SAMME fila
   PxWebs egen footer bruker, og den er PxWebs støttede mekanisme. Bare
   presentasjonen ligger her. Alternativet, å skrive lenkene inn i skallet,
   ville gitt to kilder til samme innhold som drifter fra hverandre usett.
   ----------------------------------------------------------------------- */
.oslo-skall-bunn {
  /* Wrapperen etter #root skal ikke ta plass av seg selv. */
  display: block;
}

.oslo-footer {
  background: var(--oslo-blaa);
  color: #fff;
  padding: 3.5rem 0 2rem;
}

.oslo-footer__inner {
  max-width: var(--oslo-bredde);
  margin: 0 auto;
  padding: 0 2rem;
}

.oslo-footer__kolonner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem;
}

.oslo-footer__kolonnetittel {
  margin: 0 0 1rem;
  color: #fff;
}

.oslo-footer__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oslo-footer__liste li {
  margin-bottom: 0.6rem;
}

.oslo-footer__lenke {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Punkts lenkefarge er laget for lys flate. På den mørke footeren er hvit med
   cyan hover det som holder kontrastkravet. */
.oslo-footer__lenke:hover,
.oslo-footer__lenke:focus-visible {
  color: var(--oslo-cyan);
  text-decoration-thickness: 2px;
}

.oslo-footer__eksternikon {
  width: 14px;
  height: 14px;
  margin-left: 0.35rem;
  vertical-align: -1px;
  /* Punkt-ikonene er mørke SVG-er; på mørk flate må de inverteres. */
  filter: invert(1) brightness(1.6);
}

.oslo-footer__bunn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.oslo-footer__topp {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  cursor: pointer;
}

.oslo-footer__topp:hover,
.oslo-footer__topp:focus-visible {
  border-color: var(--oslo-cyan);
  color: var(--oslo-cyan);
}

/* PxWebs egen footer erstattes — men FØRST når vår faktisk er bygget. Feiler
   fetch av content.json, settes klassen aldri, og PxWebs footer står fram med
   riktig innhold i sin egen drakt. Fail-open, som resten av skallet. */
body.oslo-footer-bygget #root footer {
  display: none !important;
}

@media (max-width: 48rem) {
  .oslo-footer__inner {
    padding: 0 1rem;
  }

  .oslo-footer {
    padding: 2.5rem 0 1.5rem;
  }

  .oslo-footer__kolonner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}