@charset "utf-8";
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ==========================================================================
   DESIGNTOKENS

   Färgerna är inte gissade. Dimgrå och havsblå är samplade ur den faktiska
   bilden (uppmätt medelvärde i rubrikzonen: RGB 159,164,178), så paletten
   och fotot hör ihop istället för att ligga bredvid varandra.
   ========================================================================== */
:root {
  /* Bas */
  --navy-900: #071320;   /* djupast — sektionsbotten */
  --navy-800: #0B1B2B;   /* midnight navy, brief */
  --navy-700: #14293D;   /* djuphav */
  --navy-600: #1E3A52;

  /* Ljus */
  --ivory:      #F7F4EF;
  --ivory-warm: #FBF8F3;
  --ivory-dim:  #E8E2D8;

  /* Samplat ur bilden */
  --mist:       #9FA4B2;
  --mist-light: #C3C9D3;

  /* Accent — dämpad guld, inte metallisk. Skandinavisk snarare än pompös. */
  --gold:       #C9A96A;
  --gold-light: #DFC79A;
  --gold-deep:  #A88748;

  /* Text */
  --text-on-dark:      var(--ivory);
  --text-on-dark-soft: rgba(247, 244, 239, 0.82);
  --text-on-light:     var(--navy-800);
  --text-on-light-soft: rgba(11, 27, 43, 0.72);

  /* Form */
  --radius:    14px;
  --radius-sm: 10px;

  /* Typografi */
  --font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.36vw, 1.375rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --step-4:  clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

  /* Rytm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max-width: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Synlig fokusmarkering. Guld på mörkt, navy på ljust — aldrig borttagen. */
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--light :focus-visible { outline-color: var(--navy-600); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;

  /**
   * ========================================================================
   * 🛑 ORDMARKET SKREV OVER OGONBRYNET
   * ========================================================================
   *
   * Har stod `align-items: center`. Ordmarket ligger `position: absolute`
   * och tar darfor ingen plats i flodet — hero-innehallet centrerades som
   * om loggan inte fanns. Blev fonstret lagt i forhallande till hur hogt
   * innehallet ar vaxte det centrerade blocket uppat, rakt in i loggans
   * zon, och "FAMILJERATT - HELA SVERIGE" lade sig tvars over "Famora".
   *
   * ⚠️ Det sag ut som ett kantfall. Det var det inte. Matt over atta
   * vanliga fonsterstorlekar overlappade sju:
   *
   *     1440x1000  -43 px      1280x800   -60 px
   *     1440x900   -60 px      1280x720   -60 px
   *     1440x820   -60 px      1100x700   -57 px
   *     1440x760   -60 px      1920x1080  +7 px  (enda som klarade sig)
   *
   * `safe center` betyder: centrera nar det finns plats, men ar innehallet
   * hogre an ytan — borja uppifran i stallet for att vaxa at bada hall.
   * Det ar precis vad nyckelordet finns till for.
   *
   * ⚠️ Inget test vaktar det har an. Matningen gjordes med Playwright mot
   * en lokal server; siffrorna ovan ar fran den korningen. Andras
   * `align-items` eller `--logotypzon` har, matt om.
   */
  align-items: safe center;

  overflow: hidden;
  background-color: var(--navy-800); /* syns direkt, före media laddat */
  isolation: isolate;

  /* Logotypzonen: avstandet fran toppen, plus hojden, plus lite luft.
     Samma clamp-varden som `.hero__logo` — andras de dar ska de andras
     har. */
  --logotypzon: calc(clamp(1rem, 2.5vw, 1.75rem)
                   + clamp(1.7rem, 3.4vw, 2.5rem)
                   + 1.25rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Videon ligger ovanpå postern och tonas in när den kan spela.
   Ingen hopp i layouten, ingen svart bildruta. */
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video.is-ready { opacity: 1; }

/* --------------------------------------------------------------------------
   ÖVERLÄGG — KONTRASTGARANTIN

   Uppmätt: ivory mot loopens ljusaste bildruta i rubrikzonen ger 1,28:1.
   Oläsligt. Med 72 % navy blir det 7,5:1, alltså WCAG AAA.

   Överlägget är riktat, inte platt. Starkt till vänster där texten ligger,
   nästan borta till höger så att dimman och havet får finnas kvar. Ett platt
   överlägg hade garanterat kontrasten men dödat bilden.
   -------------------------------------------------------------------------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(7, 19, 32, 0.88) 0%,
      rgba(11, 27, 43, 0.80) 28%,
      rgba(11, 27, 43, 0.72) 46%,
      rgba(11, 27, 43, 0.38) 68%,
      rgba(11, 27, 43, 0.14) 100%
    ),
    /* Botten mörknar för att bära över i nästa sektion */
    linear-gradient(
      to bottom,
      rgba(7, 19, 32, 0.30) 0%,
      rgba(7, 19, 32, 0) 22%,
      rgba(7, 19, 32, 0) 62%,
      rgba(7, 19, 32, 0.55) 100%
    );
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(6rem, 14vh, 10rem) clamp(5rem, 12vh, 8rem);
}

.hero__content { max-width: 34ch; }

/* Ögonbryn. Guldlinjen är kort och tunn — en markering, inte en dekoration. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero__eyebrow::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.hero__headline {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
  text-wrap: balance;
}

.hero__subheadline {
  margin: 0 0 2.75rem;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-on-dark-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   KNAPPAR
   -------------------------------------------------------------------------- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms ease, background-color 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease;
}

/* Primär: ljus guldgradient med navy text.
   Kontrast navy mot #DFC79A = 8,9:1. */
.btn--primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy-900);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(7, 19, 32, 0.28),
              0 8px 24px rgba(7, 19, 32, 0.22);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #E8D3AC 0%, var(--gold-light) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(7, 19, 32, 0.3),
              0 12px 32px rgba(7, 19, 32, 0.28);
}
.btn--primary:active { transform: translateY(0); }

/* Sekundär: transparent med ivory kant */
.btn--secondary {
  background: rgba(247, 244, 239, 0.06);
  color: var(--ivory);
  border-color: rgba(247, 244, 239, 0.60); /* 3,50:1 — UI-komponenter kräver 3:1 */
  backdrop-filter: blur(2px);
}
.btn--secondary:hover {
  background: rgba(247, 244, 239, 0.13);
  border-color: rgba(247, 244, 239, 0.75);
}

/* --------------------------------------------------------------------------
   FOTNOT I HERO
   Ingen påhittad social proof. Endast det som faktiskt går att belägga:
   att tjänsten är kostnadsfri för användaren och att vi inte är ombud.
   -------------------------------------------------------------------------- */
.hero__note {
  margin: 2.5rem 0 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(247, 244, 239, 0.75); /* 5,06:1 — 0.66 gav 4,31 och underkändes */
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   SIGNATUR: DIMRIDÅN

   Övergången mellan hero och nästa sektion är ingen kant, utan dimma som
   tunnas ut. Färgen är samplad ur bilden. Det är därför sidan går från
   mörker mot ljus utan att man ser var det händer — sidan reser sig ur
   dimman istället för att byta bakgrund.
   -------------------------------------------------------------------------- */
.hero__mist {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 220px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11, 27, 43, 0) 0%,
    rgba(31, 50, 68, 0.35) 30%,
    rgba(103, 116, 132, 0.55) 62%,
    rgba(195, 201, 211, 0.82) 84%,
    var(--ivory-warm) 100%
  );
}

/* ==========================================================================
   NÄSTA SEKTION — LJUSET
   ========================================================================== */
.section--light {
  background: var(--ivory-warm);
  color: var(--text-on-light);
  padding-block: clamp(4.5rem, 12vh, 8rem);
}

.section__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.statement {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  text-wrap: balance;
}

.statement + p {
  max-width: 52ch;
  margin: 1.75rem 0 0;
  color: var(--text-on-light-soft);
  font-size: var(--step-1);
  line-height: 1.6;
}

/* ==========================================================================
   RÖRELSE

   En enda orkestrerad sekvens vid inladdning. Inget mer animeras.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .reveal:nth-child(1) { animation-delay: 120ms; }
  .reveal:nth-child(2) { animation-delay: 260ms; }
  .reveal:nth-child(3) { animation-delay: 400ms; }
  .reveal:nth-child(4) { animation-delay: 540ms; }
  .reveal:nth-child(5) { animation-delay: 680ms; }
}

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Rörelsekänslighet respekteras fullt ut: ingen animation, ingen video,
   ingen intoning. Vissa användare får yrsel eller huvudvärk av rörelse,
   och en del av dem har det redan tungt nog. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   MOBIL
   Endast stillbild. Videon laddas aldrig — inte ens i bakgrunden.
   ========================================================================== */
@media (max-width: 899px) {
  /* 🛑 Har stod tidigare  .hero__video { display: none; }
     och kommentaren ovanfor sa "Videon laddas aldrig — inte ens i
     bakgrunden".

     Andrat 2026-09-22: videon spelar aven har, fran en egen lattare fil.
     Se shouldPlay() i hero.js for vilka villkor som fortfarande galler —
     reducerad rorelse, Save-Data och langsam uppkoppling ger stillbild
     precis som forut.

     Ingen regel behovs i stallet: .hero__video ar redan position:absolute
     med opacity 0, och <picture> bakom bar stillbilden. Videon tonas in
     ovanpa den nar den kan spela. */
  .hero__content { max-width: none; }
  .hero__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(7, 19, 32, 0.72) 0%,
        rgba(11, 27, 43, 0.66) 45%,
        rgba(11, 27, 43, 0.78) 100%
      );
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

@media (min-width: 900px) {
  /* Zonen halls ledig pa behallaren, inte pa innehallet. Skalet: padding
     pa ett centrerat rutnatsbarn tar ut sig sjalv nar barnet ar hogre an
     ytan — det centreras med sin padding och toppen hamnar pa samma
     stalle anda. Padding pa behallaren minskar i stallet ytan som det
     centreras inom, och da kan innehallet aldrig na upp i loggans zon. */
  .hero { padding-block-start: var(--logotypzon); }
  .hero__inner { padding-block: 0; }
}

/* Under loopens skarv styr hero.js opaciteten bildruta för bildruta.
   Övergången på 1,2 sekunder gäller intoningen när videon börjar spela och
   skulle här bara göra toningen trög. */
.hero__video.is-seaming { transition: none; }

/* --------------------------------------------------------------------------
   INLOGGNING FÖR BYRÅER

   Ligger överst till höger i hero. Diskret men läsbar: en byrå som ska
   logga in ska inte behöva leta, men knappen får inte konkurrera med det
   sidan handlar om — föräldern som söker hjälp.

   Guld mot den mörka bilden räcker för kontrast. Ramen är något tjockare
   än sajtens övriga konturknappar, eftersom den ligger mot rörlig bild
   där en tunn linje försvinner i vissa bildrutor.
   -------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   ORDMARKET

   Speglar inloggningsknappens placering: samma avstand fran kanten, samma
   vertikala linje. De ska lasa som ett par, inte som tva pafund.

   🛑 INGEN PLATTA BAKOM. Inloggningsknappen har en halvgenomskinlig
   bakgrund eftersom den ar en knapp och maste ga att traeffa. Ordmarket ar
   inte klickbart och ska smalta in — en ruta runt det hade gjort det till
   ett grafiskt element som konkurrerar med rubriken.

   ⚠️ Lasbarheten loses i stallet med en skugga. Hero-videon vaxlar mellan
   ljusa och morka bildrutor, och elfenbensvitt mot en ljus bildruta
   forsvinner. Skuggan ar mork och mjuk: den syns inte mot morkt, men
   haller kvar konturen mot ljust.
   --------------------------------------------------------------------------- */

.hero__logo {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  left: clamp(1rem, 4vw, 2.5rem);
  z-index: 3;

  /* Hojden styr. Bredden foljer, sa att guldstrecket alltid ligger rakt
     under sista bokstaven oavsett skarmbredd. */
  width: auto;
  height: clamp(1.7rem, 3.4vw, 2.5rem);

  /* Optisk justering: ordmarkets versal-F borjar nagra bildpunkter in i
     filen, och utan detta ser loggan indragen ut jamfort med knappen. */
  margin-left: -0.15rem;

  /* 🛑 TVA SKUGGOR, INTE EN.

     Forsta forsoket var en enda mjuk skugga. Provrenderat mot
     hero-postern — som ar en ljus himmel — forsvann elfenbensvitt nastan
     helt. En enda skugga gor antingen konturen hard och smutsig, eller
     mjuk och verkningslos.

     Losningen ar den som anvands for vit text over foto: en tat skugga
     som halller kvar bokstavskanten, och en bred mjuk som morkar ytan
     bakom. Tillsammans ger de lasbarhet utan platta. */
  filter: drop-shadow(0 1px 2px rgba(7, 19, 32, 0.85))
          drop-shadow(0 2px 12px rgba(7, 19, 32, 0.65));

  pointer-events: none;
  user-select: none;
}

@media (max-width: 560px) {
  .hero__logo {
    height: 1.5rem;
  }
}

@media (prefers-contrast: more) {
  .hero__logo {
    filter: drop-shadow(0 1px 2px rgba(7, 19, 32, 1))
            drop-shadow(0 2px 14px rgba(7, 19, 32, 0.9));
  }
}

.hero__login {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;

  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;

  color: var(--gold-light);
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: rgba(11, 26, 44, 0.35);
  /* Bakgrunden finns för läsbarhetens skull: hero-videon växlar mellan
     ljusa och mörka bildrutor, och utan den blir texten oläslig i de
     ljusa. Halvgenomskinlig så att bilden fortfarande syns igenom. */
  backdrop-filter: blur(3px);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.hero__login:hover,
.hero__login:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}

.hero__login:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .hero__login {
    min-height: 2.25rem;
    padding: 0.4rem 0.9rem;
    font-size: var(--step--2);
    border-width: 1.5px;
  }
}

/* Utan rörlig bakgrund behövs ingen oskärpa. */
@media (prefers-reduced-motion: reduce) {
  .hero__login { backdrop-filter: none; background: rgba(11, 26, 44, 0.6); }
}

/* ==========================================================================
   LAGA FONSTER
   ==========================================================================

   🛑 TYPOGRAFIN SKALADE BARA MED BREDDEN

   `--step-4` vaxer med `vw` och stannar pa 4,5rem. Pa en 1440x900-skarm —
   en helt vanlig barbar — blev rubriken darfor lika stor som pa en 27-tums
   skarm, medan hojden var 180 px mindre. Innehallet blev hogre an ytan, och
   nagot maste hamna utanfor.

   Fore rattningen av `align-items` sag man det inte: blocket vaxte uppat och
   gomde sin egen topp under ordmarket. Nar toppen skyddades flyttades
   spillet i stallet nedat, och knapparna hamnade under vikten. Det ar inte
   tva fel utan ett: rubriken tar mer hojd an det finns.

   ⚠️ Darfor styrs storleken har av `vh`, inte `vw`. Pa laga fonster ar
   hojden den knappa resursen.

   ⚠️ Inget test vaktar det har an.
   ========================================================================== */
@media (min-width: 900px) and (max-height: 950px) {
  .hero__headline {
    font-size: clamp(2.4rem, 5.2vh, 3.4rem);
    margin-bottom: 1.1rem;
  }
  .hero__eyebrow { margin-bottom: 1.25rem; }
  .hero__subheadline { margin-bottom: 1.75rem; }
}