/* ==========================================================================
   AEROS KIT — den overordnede malen alle nettstedene arver
   ==========================================================================

   ÉN fil eier plasseringen og oppførselen til chrome-et (header, main,
   footer) og til seksjonsskallet. aeros.no, se.aeros.no og aerosphone.com
   laster denne UENDRET og skiller seg bare på to måter:

     1. TOKENS   — hvert tema setter sine egne --p-navy, --font-*, --edge …
                   Kit-et leser dem, definerer dem aldri selv.
     2. KONFIG   — logo, menyvalg og footer-lenker kommer fra PHP
                   (kit/konfig/<marked>.php), ikke herfra.

   ⛔ INGEN RÅ FARGE, INGEN RÅ SKRIFT I DENNE FILA. Skriver du #102030 her,
      har du bundet malen til Norge. Alt går via var(--…) med fallback, slik
      at et nettsted som mangler et token fortsatt får noe brukbart.

   ⛔ INGEN SIDESPESIFIKKE REGLER. Hører regelen til /juno, hører den hjemme
      i juno.css. Denne fila skal kunne kopieres til et nytt nettsted uten
      å dra med seg noe som helst fra det forrige.
   ========================================================================== */


/* ==========================================================================
   0. KIT-EGNE MÅL
   Avledet fra temaets tokens der de finnes. Fallback-verdiene er de målte
   verdiene fra aeros.no, så et tema uten tokens.css (i dag: aeros-se) får
   nøyaktig dagens utseende inntil det får sin egen.
   ========================================================================== */

:root {
  /* Høyden på den festede toppen. Alt som skal ligge klar av den, leser
     denne — aldri et hardkodet 64. Endres den, følger main og ankrene med. */
  --kit-topp-h: 64px;

  /* Seksjonsrytmen. Tre trinn, ikke fjorten. Se --band i tokens.css. */
  --kit-band-tett: var(--band-tett, clamp(48px, 8vw, 80px));
  --kit-band:      var(--band,      clamp(64px, 11vw, 128px));
  --kit-band-luft: var(--band-luft, clamp(78px, 13vw, 150px));

  --kit-edge:      var(--edge,      clamp(16px, 5vw, 72px));
  --kit-max-w:     var(--max-w,     1200px);
  --kit-skall:     var(--maal-skall, 720px);
  --kit-tekst:     var(--maal-tekst, 54ch);

  /* Semantiske aliaser. VARIANTENE BYTTER DISSE — aldri enkeltfarger.
     Det er hele grunnen til at én komponentregel holder på fire flater. */
  --kit-flate:     var(--bg, #102030);
  --kit-blekk:     var(--text, #FFFBEF);
  --kit-blekk-dim: var(--text-dim, rgba(255, 251, 239, .72));
  --kit-blekk-svak:var(--text-faint, rgba(255, 251, 239, .6));
  --kit-aksent:    var(--gold, #C6B996);
  --kit-strek:     var(--border-subtle, rgba(198, 185, 150, .16));
}


/* ==========================================================================
   1. HEADER — festet topp med plassholder for logo og sider

   Plasseringen er den samme på alle tre nettstedene: ordmerket til venstre
   (og ordmerket ER hjem-lenka — ikke legg inn en egen «Hjem»), menyen til
   høyre, hårstrek under, lesestripe PÅ hårstreken.
   ========================================================================== */

.kit-topp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  /* Gjennomskinnelig med blur: innholdet skal ane seg under toppen når man
     ruller, ikke forsvinne bak en solid plate. Fallback for nettlesere uten
     backdrop-filter er den samme fargen, bare tettere. */
  background: var(--kit-topp-flate, rgba(11, 20, 30, .82));
  border-bottom: 1px solid var(--kit-strek);

  --kit-nav-hvile: var(--nav-hvile, rgba(255, 251, 239, .5));
  --kit-nav-aktiv: var(--nav-aktiv, #C6B996);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .kit-topp {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.kit-topp__inner {
  max-width: var(--kit-max-w);
  margin: 0 auto;
  padding: 0 var(--kit-edge);
  height: var(--kit-topp-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* --- Plassholder: LOGO ---------------------------------------------------
   Ordmerket er TEKST, ikke et bilde (se minnet «ordmerke-i-dokumenter»).
   Et nettsted som vil ha et bilde, legger et <img> inne i lenka — målene
   under holder da fortsatt raden på 64 px. */
.kit-logo {
  font-family: var(--font-logo, var(--font-serif, Georgia, serif));
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kit-blekk);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.kit-logo img,
.kit-logo svg { display: block; height: 22px; width: auto; }

/* --- Plassholder: SIDER (menyen) ----------------------------------------
   🪤 TREFFSONE ≠ HØYDE. Lenkene er små versaler; uten det usynlige ::after
   er trykkflaten ~17 px høy på mobil. Padding ville flyttet ordene fra
   hverandre — pseudoelementet gir 44 px uten å endre utseendet.
   Se minnet «forside-film-live» (07.08.2026). */
.kit-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.kit-nav__lenke {
  position: relative;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kit-nav-hvile);
  padding: 0 10px;
  white-space: nowrap;
  transition: color .2s ease;
}

.kit-nav__lenke::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.kit-nav__lenke:hover,
.kit-nav__lenke:focus-visible { color: var(--kit-blekk); }

.kit-nav__lenke--aktiv { color: var(--kit-nav-aktiv); }

/* --- Hamburger. Av som standard: to menyvalg trenger ingen skuff.
       Et nettsted som har flere, setter 'hamburger' => true i konfigen. --- */
.kit-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--kit-blekk);
}

.kit-toggle-icon { width: 26px; height: 20px; display: block; }

.kit-topp--hamburger .kit-toggle { display: block; }
.kit-topp--hamburger .kit-nav     { display: none; }

@media (min-width: 768px) {
  .kit-topp--hamburger .kit-toggle { display: none; }
  .kit-topp--hamburger .kit-nav     { display: flex; }
}

/* --- Lesestripe: hvor langt ned i siden du er. Gull, 2 px, ingen tall. ----
   Ligger PÅ hårstreken (bottom: -1px), så den legger ikke til høyde.
   ⛔ Aldri i kassen — «kassen skal være naken». Malen rendrer den ikke der;
   regelen her er bare utseendet. */
.kit-lesestripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.kit-lesestripe span {
  display: block;
  height: 100%;
  width: 0;
  background: color-mix(in srgb, var(--kit-aksent) 55%, transparent);
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .kit-lesestripe { display: none; }
}


/* ==========================================================================
   2. MOBILSKUFF — kun når konfigen ber om den
   ========================================================================== */

.kit-skuff { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.kit-skuff.er-apen { visibility: visible; }

.kit-skuff__slor {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.kit-skuff.er-apen .kit-skuff__slor { opacity: 1; }

.kit-skuff__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--kit-flate);
  border-left: 1px solid var(--kit-strek);
  padding: 24px var(--kit-edge);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.kit-skuff.er-apen .kit-skuff__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kit-skuff__slor,
  .kit-skuff__panel { transition: none; }
}

.kit-skuff__lenker { display: flex; flex-direction: column; gap: 2px; margin-top: 40px; }

.kit-skuff__lenke {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--kit-blekk-dim);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--kit-strek);
}
.kit-skuff__lenke:hover { color: var(--kit-blekk); }


/* ==========================================================================
   3. HOVEDOMRÅDET — main med sidetopp og seksjoner under

   🪤 FELLA SOM FANTES I DAG: `.site-main` hadde INGEN regel i det hele tatt.
   Toppen er `position: fixed`, så de 64 pikslene ble aldri kompensert — det
   gikk bra utelukkende fordi hver side tilfeldigvis åpnet med en hero på
   100vh der innholdet er bunnstilt. En vanlig underside ville fått første
   linje under toppen. Kit-et kompenserer som standard, og sider som ÅPNER
   med et fullflate-motiv slår det av med `.kit-main--hero`.
   ========================================================================== */

.kit-main {
  display: block;
  padding-top: var(--kit-topp-h);
  background: var(--kit-flate);
}

/* Åpner siden med hero/fullflate-motiv: la motivet gå helt opp under toppen. */
.kit-main--hero { padding-top: 0; }

/* --- SIDETOPP: «header-en inne i hovedområdet» -------------------------
   Tittelblokka en underside åpner med. Sentrert, egen luft, egen flate —
   den skal aldri arve luften sin fra seksjonen under. */
.kit-sidetopp {
  padding: var(--kit-band-luft) var(--kit-edge) var(--kit-band-tett);
  background: var(--kit-flate);
  color: var(--kit-blekk);
  text-align: center;
}

.kit-sidetopp__inner { max-width: var(--kit-skall); margin: 0 auto; }

.kit-sidetopp__eyebrow,
.kit-eyebrow {
  display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kit-aksent);
  margin: 0 0 13px;
}

.kit-sidetopp__tittel {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.14;
  color: var(--kit-blekk);
  margin: 0;
  text-wrap: balance;
}

.kit-sidetopp__ingress {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--kit-blekk-dim);
  max-width: var(--kit-tekst);
  margin: 18px auto 0;
  text-wrap: pretty;
}


/* ==========================================================================
   4. SEKSJONSSKALLET — STILGUIDE steg 3

   ⛔ REGEL 1: EN SEKSJON SETTER ALLTID SIN EGEN PADDING. Å la barnas
      marginer bære luften er rotårsaken til at plattform-lenka på /juno lå
      med 0 px ned til neste seksjon. Skallet gjør det umulig å glemme.

   ⛔ REGEL 2: TO NABOSEKSJONER HAR ALDRI SAMME FLATE. Varianten bytter
      semantiske aliaser, ikke enkeltfarger — derfor arver overskrift,
      brødtekst, hårstrek og eyebrow riktig farge uten en eneste
      duplisert komponentregel.
   ========================================================================== */

.kit-seksjon {
  position: relative;
  padding: var(--kit-band) var(--kit-edge);
  background: var(--kit-flate);
  color: var(--kit-blekk);
}

.kit-seksjon__inner {
  max-width: var(--kit-skall);
  margin: 0 auto;
}

/* Bredt innhold (rutenett, tabeller, galleri) sprenger lesebredden med vilje. */
.kit-seksjon__inner--bred { max-width: var(--kit-max-w); }

/* 🪤 TYPOGRAFIEN ER SCOPET TIL `.kit-seksjon__inner`, IKKE TIL `.kit-seksjon`.
   Skallet skal kunne legges rundt en FERDIG modul uten å røre innholdet i
   den. Sto reglene på `.kit-seksjon p`, traff de alt inni — og på /juno slo
   `max-width: var(--kit-tekst)` (54ch = 534 px) inn på `.juno-founder-price`
   og `.juno-founder-cta-note`, som dermed la seg **284 px til venstre for
   senter** i en 1100 px spalte. Målt på utkastsiden; live /juno har
   `max-width: none` på de samme elementene.
   ⛔ Ikke løft disse tilbake til `.kit-seksjon`. Skal en eksisterende modul
   arve kit-typografien, gi den `.kit-seksjon__inner` — da er det et valg,
   ikke en bivirkning. */

.kit-seksjon__inner h2 {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  color: var(--kit-blekk);
  margin: 0 0 18px;
  text-wrap: balance;
}

.kit-seksjon__inner h2 em { font-style: italic; color: var(--kit-blekk); }

.kit-seksjon__inner p {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--kit-blekk-dim);
  max-width: var(--kit-tekst);
  margin: 0 0 16px;
}

.kit-seksjon > .kit-seksjon__inner > p:last-child { margin-bottom: 0; }

/* --- FLATE-STIGEN --------------------------------------------------------
   A  (standard)      --surface-1   dypest — åpning, produkt, kjøp
   B  --dyp           --surface-2   ett hakk — de rolige mellomseksjonene
   B2 --natt          --surface-3   dramatikk, brukes sparsomt
   C  --lys           --sand-1      de redaksjonelle flatene

   Sjekk HELE rekkefølgen når du legger til eller flytter en seksjon.     */

.kit-seksjon--dyp  { --kit-flate: var(--surface-2, var(--bg-dark, #0d1a26)); }
.kit-seksjon--natt { --kit-flate: var(--surface-3, var(--bg-black, #0a0a0a)); }

/* 📏 VERDIENE ER MÅLT PÅ LIVE, IKKE HENTET FRA tokens.css.
   `.ff-lys` på forsiden har kjørt denne kremen siden 05.08 og måler
   8,78:1 på brødtekst, 18,31:1 på overskrift, 4,78:1 på eyebrow.
   🪤 tokens.css sitt `--sand-1` er en ANNEN, mørkere krem (#E4DBC4) som
   aldri har vært deployet. Brukte jeg den, falt brødteksten til **4,31:1**
   — under AA. Målt, ikke antatt. ⛔ Ikke «rydd» disse tilbake til --sand-*
   uten å måle kontrasten på nytt.

   Varianten bytter BÅDE kit-aliasene og TEMAETS egne aliaser. Det er det som
   gjør at en vilkårlig modul kan slippes ned på en krem-seksjon og få riktig
   farge uten en eneste ny regel — modulene leser allerede --text/--gold. */
.kit-seksjon--lys {
  /* temaets aliaser — så eksisterende moduler snur av seg selv */
  --bg:            #FFFBEF;
  --bg-dark:       #FFFBEF;
  --bg-black:      #FFFBEF;
  --text:          #14100A;
  --text-dim:      rgba(20, 16, 10, .76);
  --text-faint:    rgba(20, 16, 10, .62);
  --gold:          #7E6F45;
  --gold-light:    #635737;
  --border:        rgba(20, 16, 10, .16);
  --border-subtle: rgba(20, 16, 10, .11);

  /* kit-aliasene */
  --kit-flate:      #FFFBEF;
  --kit-blekk:      #14100A;
  --kit-blekk-dim:  rgba(20, 16, 10, .76);
  --kit-blekk-svak: rgba(20, 16, 10, .62);
  --kit-aksent:     #7E6F45;
  --kit-strek:      rgba(20, 16, 10, .16);
}

/* 🪤 Knappen må snus på krem. En gullknapp med nesten-sort tekst målte
   1,2:1 på live. Invertert (mørk flate, lys tekst) måler 15,97:1.
   Se minnet «forside-film-live». */
.kit-seksjon--lys .btn-gold,
.kit-seksjon--lys .kit-knapp {
  background: var(--sand-ink, #101F2C) !important;
  color: var(--p-cream, #FFFBEF) !important;
}

/* --- Rytmevarianter --- */
.kit-seksjon--tett  { padding-top: var(--kit-band-tett); padding-bottom: var(--kit-band-tett); }
.kit-seksjon--luft  { padding-top: var(--kit-band-luft); padding-bottom: var(--kit-band-luft); }

/* --- Fullflate-motiv: bildet ER flaten og møter naboen kant i kant. -------
   🪤 MÅ stå etter rytmevariantene: lik spesifisitet ⇒ kilderekkefølgen
   avgjør, og et bildebånd med 116 px navy over seg er nøyaktig den mørke
   stripa vi fjernet på aerosphone.com. */
.kit-seksjon--flush { padding-left: 0; padding-right: 0; }
.kit-seksjon--bleed { padding: 0; }
.kit-seksjon--bleed + .kit-seksjon--bleed { padding-top: 0; }

/* Gull-hårstrek på toppen av en seksjon — det gjentakende merket som binder
   flatene sammen. Opt-in, ikke standard. */
.kit-seksjon--strek::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--kit-strek);
}


/* ==========================================================================
   5. FADE-INN — ÉN implementasjon (STILGUIDE punkt 4)

   ⛔ ALDRI `opacity: 0` i en basisregel. Utgangspunktet er SYNLIG; skjulingen
      slår inn først når JS har bekreftet at den kjører, via rot-klassen
      .har-reveal som settes FØR observatøren starter. Feiler JS, er siden hel.
      Vi har allerede hatt en seksjon stående permanent usynlig på en salgsside.
   ⛔ Posisjonering og reveal deler ALDRI transform.
   ========================================================================== */

.kit-reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.har-reveal .kit-reveal {
    opacity: 0;
    transform: translateY(var(--mot-loft, 18px));
    transition: opacity var(--mot-inn, .6s) ease,
                transform var(--mot-inn, .6s) var(--mot-mykt, cubic-bezier(.4, 0, .2, 1));
  }
  html.har-reveal .kit-reveal.er-inne { opacity: 1; transform: none; }
}


/* ==========================================================================
   6. FOOTER — samme plassering på alle nettstedene
   ========================================================================== */

.kit-bunn {
  background: var(--surface-2, var(--bg-dark, #0d1a26));
  border-top: 1px solid var(--kit-strek);
  color: var(--kit-blekk-dim);
}

.kit-bunn__grid {
  max-width: var(--kit-max-w);
  margin: 0 auto;
  padding: var(--kit-band-tett) var(--kit-edge) calc(var(--kit-band-tett) * .7);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}

.kit-bunn__logo {
  font-family: var(--font-logo, var(--font-serif, Georgia, serif));
  font-size: 19px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kit-blekk);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 14px;
}

.kit-bunn__tagline {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--kit-blekk-svak);
  margin: 0 0 18px;
}

.kit-bunn__adresse {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.9;
  font-style: normal;
  color: var(--kit-blekk-svak);
}

.kit-bunn__tittel {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kit-aksent);
  margin: 0 0 14px;
}

.kit-bunn__liste { list-style: none; margin: 0; padding: 0; }

/* 🪤 `list-style: none` fjerner IKKE nettleserens padding-inline-start
   (målt 17,5 px). Nullstill den eksplisitt, ellers står lenkene skjevt
   mot overskriften over. */
.kit-bunn__liste li { margin: 0 0 9px; padding: 0; }

.kit-bunn__liste a {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  color: var(--kit-blekk-dim);
  text-decoration: none;
  transition: color .2s ease;
}
.kit-bunn__liste a:hover { color: var(--kit-blekk); }

.kit-bunn__fot {
  max-width: var(--kit-max-w);
  margin: 0 auto;
  padding: 20px var(--kit-edge) 34px;
  border-top: 1px solid var(--kit-strek);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  color: var(--kit-blekk-svak);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Kassen skal være naken: logo, tagline, org.nr. Ingenting mer. --- */
.kit-bunn--kasse .kit-bunn__grid,
.kit-bunn--kasse .kit-bunn__fot { display: none; }

.kit-bunn__kasse {
  max-width: var(--kit-max-w);
  margin: 0 auto;
  padding: 34px var(--kit-edge);
  text-align: center;
}


/* ==========================================================================
   7. MOBIL — ett bruddpunkt for chrome-et

   Malen har ÉN grense (768). Sidene har sine egne der innholdet krever det;
   chrome-et skal ikke ha fjorten.
   ========================================================================== */

@media (max-width: 767px) {
  .kit-topp__inner { gap: 12px; }

  /* 🪤 Sperret versaltekst tar mye bredde. Målt på 320 px med dagens ord:
     meny 153 px + logo 83 px av 305 px = 69 px klaring. Legger du inn et
     tredje valg ELLER lengre ord, MÅL PÅ NYTT. */
  .kit-nav__lenke { font-size: 11px; padding: 0 8px; letter-spacing: .1em; }
  .kit-logo { font-size: 17px; }

  .kit-bunn__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .kit-bunn__fot { justify-content: center; text-align: center; }
}