/* Swimkla(a)s – stijlen
   Evergreen browsers: cascade layers, native nesting, :has(), media range syntax, logical properties. */

@layer fonts, tokens, base, layout, components;

/* Plus Jakarta Sans (SIL OFL, zie ../fonts/OFL.txt), zelf gehost; variabel lettertype 400–800 */
@layer fonts {
  @font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
      U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
      U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

@layer tokens {
  :root {
    /* Kleuren */
    --inkt: #0F2A3D;
    --marine: #0F3B57;
    --marine-hover: #0A2A3F;
    --blauw: #1F6F94;
    --oranje: #F2A541;
    --tint: #F2F9FB;
    --wit: #fff;
    --tekst-zacht: #4A6573;
    --tekst-intro: #33505F;
    --lijn: #E3EEF3;
    --lijn-kaart: #D6E7EE;
    --lijn-knop: #BFD9E4;
    --donker-zacht: #C9DCE6;
    --donker-lijn: #2A4A5E;

    /* Typografie */
    --font: "Plus Jakarta Sans", system-ui, sans-serif;
    --fs-klein: 0.875rem;   /* 14px */
    --fs-sm: 0.9375rem;     /* 15px */
    --fs-body: 1.0625rem;   /* 17px */
    --fs-md: 1.1875rem;     /* 19px */
    --fs-lg: 1.25rem;       /* 20px */
    --fs-xl: 1.375rem;      /* 22px */
    --fs-h2: clamp(1.875rem, 4vw, 2.5rem);
    --fs-h1: clamp(2.5rem, 6vw, 4rem);

    /* Ruimte en vormen */
    --breedte: 70rem;       /* 1120px inhoud, zijmarges komen erbij */
    --breedte-smal: 51.25rem;
    --rand: 1.5rem;         /* zijmarge op kleine schermen */
    --sectie: 5.5rem;       /* 88px */
    --gap: 1.25rem;
    --radius: 1.25rem;
    --radius-sm: 1rem;
  }
}

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

  html {
    scroll-behavior: smooth;
    @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
  }

  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--inkt);
    background: var(--wit);
  }

  h1, h2, h3 { margin: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }

  a {
    color: var(--marine);
    &:hover { color: var(--marine-hover); }
  }

  :focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
  [id] { scroll-margin-block-start: 1.5rem; }

  h2 {
    margin-block-end: 2rem;
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.02em;
    &:has(+ p) { margin-block-end: 0.75rem; }
  }
}

@layer layout {
  .container {
    max-inline-size: calc(var(--breedte) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  .sectie {
    padding-block: var(--sectie);
    &.tint { background: var(--tint); }
    &.donker { background: var(--inkt); color: var(--wit); }
  }

  /* Kop en tekst links, inhoud rechts; onder elkaar als er geen plaats is */
  .split {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 3rem;
    > :first-child { flex: 1 1 20rem; }
    > :last-child { flex: 999 1 30rem; min-inline-size: 0; }
  }

  .raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
    gap: var(--gap);
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: -9999px;
    &:focus { inset-inline-start: 1rem; inset-block-start: 1rem; z-index: 10; background: var(--wit); padding: 0.75rem 1rem; }
  }

  .zacht { color: var(--tekst-zacht); }

  /* Kleine blauwe hoofdletterlabel boven een titel */
  .label {
    display: block;
    font-size: var(--fs-klein);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blauw);
  }

  /* Kop */
  .site-kop {
    border-block-end: 1px solid var(--lijn);
    .container { display: flex; justify-content: center; padding-block: 1rem; }
  }

  .merk {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--inkt);
    img { inline-size: 3.5rem; }
    span { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; }
  }

  /* Held */
  .held {
    background: var(--tint);
    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 3.5rem;
      padding-block: 4.5rem;
    }
    h1 {
      margin-block-end: 1.5rem;
      font-size: var(--fs-h1);
      line-height: 1.05;
      letter-spacing: -0.03em;
      font-weight: 800;
      .label { margin-block-end: 1rem; }
    }
  }
  .held-tekst { flex: 999 1 28.75rem; min-inline-size: 0; }
  .held-foto {
    flex: 1 1 20rem;
    max-inline-size: 25rem;
    margin-inline: auto;
    img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.75rem; }
  }

  .intro {
    margin-block-end: 2rem;
    max-inline-size: 34em;
    font-size: var(--fs-md);
    color: var(--tekst-intro);
  }

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

  .knop {
    padding: 1rem 1.75rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    background: var(--marine);
    color: var(--wit);
    &:hover { background: var(--marine-hover); color: var(--wit); }
    &.secundair {
      background: var(--wit);
      color: var(--marine);
      border: 1.5px solid var(--lijn-knop);
      &:hover { border-color: var(--marine); }
    }
  }

  .troeven {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-block-start: 1.75rem;
    font-size: var(--fs-sm);
    color: var(--tekst-intro);
    li::before { content: "✓ "; }
  }

  /* Kernwaarden */
  .kernwaarden {
    border-block-end: 1px solid var(--lijn);
    .raster { --min: 15rem; gap: 1.5rem; padding-block: 2.5rem; }
  }
  .kernwaarde {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    &::before {
      content: "";
      flex: none;
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border-radius: 50%;
      background: var(--oranje);
    }
    strong { font-size: var(--fs-md); }
    p { margin-block-start: 0.25rem; font-size: var(--fs-sm); color: var(--tekst-zacht); }
  }

  /* Kaarten "Zo verloopt een les": 1 / 2 / 4 kolommen, nooit 3 + 1 */
  .les-raster {
    display: grid;
    gap: var(--gap);
    @media (width >= 600px) { grid-template-columns: repeat(2, 1fr); }
    @media (width >= 1000px) { grid-template-columns: repeat(4, 1fr); }
  }

  .kaart {
    padding: 1.75rem;
    border-radius: var(--radius);
    background: var(--tint);
    h3 { margin-block-end: 0.5rem; font-size: var(--fs-md); }
    p { color: var(--tekst-zacht); }
  }

  /* Foto's */
  .foto {
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--radius);
  }

  .foto-rij {
    display: grid;
    gap: var(--gap);
    margin-block-start: var(--gap);
    .foto { aspect-ratio: 3 / 2; }
    @media (width >= 600px) { grid-template-columns: 1fr 1fr; }
  }

  .brevet-fotos {
    display: grid;
    gap: var(--gap);
    .foto:first-child { aspect-ratio: 4 / 3; }
    .foto:last-child { aspect-ratio: 1; object-position: 50% 30%; }
    @media (width >= 600px) { grid-template-columns: 4fr 3fr; }
  }

  .breed-foto {
    aspect-ratio: 2 / 1;
    object-position: 50% 60%;
    margin-block-end: var(--gap);
  }

  .sectie-intro {
    margin-block-end: 2rem;
    max-inline-size: 36em;
    color: var(--tekst-zacht);
  }

  /* Over Klaas */
  .donker {
    .label { margin-block-end: 0.75rem; color: var(--oranje); }
    h2 { margin-block-end: 1rem; }
    .split > :first-child p:last-child { max-inline-size: 28em; color: var(--donker-zacht); }
  }

  .tijdlijn li {
    display: flex;
    gap: 1.5rem;
    padding-block: 1.125rem;
    &:not(:last-child) { border-block-end: 1px solid var(--donker-lijn); }
  }
  .jaar { min-inline-size: 3.5rem; font-weight: 700; color: var(--oranje); }

  /* Waar */
  .locaties { --min: 17.5rem; }
  .locatie {
    padding: 2rem;
    border: 1.5px solid var(--lijn-kaart);
    border-radius: var(--radius);
    .label { margin-block-end: 0.5rem; }
    h3 { margin-block-end: 0.5rem; font-size: var(--fs-xl); }
    p:last-child { color: var(--tekst-zacht); }
  }

  /* Prijzen */
  .prijzen { --min: 16.25rem; }
  .prijs {
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--wit);
    &.uitgelicht { outline: 2px solid var(--oranje); }
    h3 { margin-block-end: 0.25rem; font-size: var(--fs-lg); }
  }
  .prijs-sub { margin-block-end: 1.25rem; color: var(--tekst-zacht); }
  .bedrag {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    span { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--tekst-zacht); }
  }
  .reeks {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--lijn);
    font-size: var(--fs-sm);
    color: var(--tekst-zacht);
  }

  /* Zo start je: nummers via een CSS-teller */
  .stappen { --min: 16.25rem; counter-reset: stap; }
  .stappen li {
    display: flex;
    gap: 1rem;
    counter-increment: stap;
    &::before {
      content: counter(stap);
      flex: none;
      display: grid;
      place-items: center;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      border-radius: 50%;
      background: var(--oranje);
      font-weight: 800;
    }
    h3 { margin-block-end: 0.25rem; font-size: var(--fs-md); }
    p { color: var(--tekst-zacht); }
  }

  /* Veelgestelde vragen */
  .faq {
    .container { max-inline-size: calc(var(--breedte-smal) + 2 * var(--rand)); }
    h2 { margin-block-end: 1.5rem; }
  }
  .vragen { display: grid; gap: 0.75rem; }

  details {
    padding-inline: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--wit);
    p { margin-block-end: 1.25rem; color: var(--tekst-zacht); }
  }

  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-block-size: 2.75rem;
    padding-block: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    &::-webkit-details-marker { display: none; }
    &::after {
      content: "+" / "";
      font-size: 1.5rem;
      font-weight: 400;
      @media (prefers-reduced-motion: no-preference) { transition: rotate 0.2s; }
    }
    [open] > &::after { rotate: 45deg; }
  }

  /* Contact */
  .contact-lijst {
    display: grid;
    gap: 0.75rem;
    > p { margin-block-start: 0.25rem; font-size: var(--fs-sm); color: var(--tekst-zacht); }
  }

  .contact-rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--tint);
    color: var(--inkt);
    text-decoration: none;
    > span { color: var(--tekst-zacht); }
    strong { overflow-wrap: anywhere; }
    small { font-size: var(--fs-klein); }
    &:hover { color: var(--marine); }
  }
  .contact-rij.groot strong { font-size: var(--fs-lg); }

  /* Voet */
  .site-voet {
    border-block-start: 1px solid var(--lijn);
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.75rem;
      padding-block: 1.75rem;
      font-size: var(--fs-klein);
      color: var(--tekst-zacht);
    }
  }
}