/* De opmaak van de publieke pagina's: startpagina en de drie ingangen.

   Stond tot september 2026 inline in index.html, en dat kon zolang er één
   publieke pagina met deze vorm was. Sinds er vier zijn, zou het vier kopieën
   betekenen -- en dan is het binnen een maand vier paletten. Dezelfde reden
   waarom app.css bestaat voor de schermen achter de login.

   De mockups staan bewust NIET hier maar nog in index.html: ze worden alleen
   daar getekend, en honderd regels meeladen op een pagina die ze niet gebruikt
   is een pagina die trager laadt zonder dat iemand er iets voor terugkrijgt.

   Test: backend/tests/test_landing.py -- het palet moet gelijk zijn aan dat van
   app.css, en elke publieke pagina laadt dit bestand.
*/

/* Self-hosted rather than Google's CDN. A page whose promise is
   "AVG-compliant" should not hand every visitor's IP address to a third
   party in the United States to fetch a typeface. Latin subset, 34 kB. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
/* The body stack has named Inter since day one but never shipped it, so
   everyone got Segoe UI or San Francisco -- and since the app started
   serving it for real, the landing page has been in a different typeface
   than the product it advertises. One variable file, 400-600. */
@font-face {
  font-family: 'InterVar';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F7F5F0;
  --groen: #1F3A2E;
  --koraal: #E67E4F;
  --zand: #EAE4D5;
  --sub: #5B5B57;
  --wit: #FFFFFF;
  --rand: #E2DCCE;
  /* Deliberately its own palette rather than /app.css: that sheet carries a
     dark theme and this page is always light. The values are the same as
     its light tokens, and a test in test_landing.py keeps them that way --
     --succes had already drifted from the app's green before it existed. */
  --succes: #3F7A58;
  --danger: #C1443F;
  /* Coral at 10px on a coral wash is about 2.8:1; the text needs its own,
     darker value. Same split as --accent-tekst in app.css. */
  --koraal-tekst: #A94D1C;
  --koraal-zacht: rgba(230,126,79,0.12);
  --succes-zacht: rgba(63,122,88,0.12);
  --danger-zacht: rgba(193,68,63,0.10);
  /* Tinted with --groen rather than black: a neutral shadow reads grey
     against this warm background. */
  --schaduw: 0 12px 32px rgba(31,58,46,0.08);
  --kop: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'InterVar', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--groen);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--kop); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

/* --- Header ----------------------------------------------------------- */
.nav { padding: 1.5rem 0; }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }
.merk {
  font-family: var(--kop); font-size: 20px; letter-spacing: -0.02em;
  margin-right: auto; text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
/* :not(.knop), en dat is geen nettigheid: zonder dat wint deze regel (0,1,1)
   van .knop-primair (0,1,0), en dan staat er grijze tekst op de donkergroene
   knop rechtsboven -- 2:1 contrast op de belangrijkste knop van de site. Zo
   stond het er tot 24 september op alle publieke pagina's. */
.nav-links a:not(.knop) { font-size: 14px; text-decoration: none; color: var(--sub); }
.nav-links a:not(.knop):hover { color: var(--groen); }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 0.7rem 1.4rem; font-size: 14px;
  font-weight: 500; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.knop-primair { background: var(--groen); color: var(--bg); }
.knop-primair:hover { background: #16291f; }
.knop-koraal { background: var(--koraal); color: #fff; }
.knop-koraal:hover { background: #d96f3f; }
.knop-rand { border-color: var(--groen); color: var(--groen); }
.knop-rand:hover { background: var(--zand); }

/* --- Hero ------------------------------------------------------------- */
.hero { padding: 3rem 0 4.5rem; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.08; }
.hero-sub { font-size: 1.0625rem; color: var(--sub); margin-top: 1rem; max-width: 30rem; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero-note { font-size: 13px; color: var(--sub); margin-top: 0.9rem; max-width: 30rem; }

/* One wrapping strip rather than two fixed rows: at 885px it breaks after
   three, on a phone after one or two, and neither needs its own rule. */
.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none;
  padding: 0; margin: 1.5rem 0 0; max-width: 32rem; }
.pills li {
  display: flex; align-items: center; gap: 0.35rem;
  background: var(--zand); border-radius: 999px; padding: 0.3rem 0.75rem;
  font-size: 12.5px; color: var(--sub); white-space: nowrap;
}
.pills li::before { content: "\2713"; color: var(--koraal); font-weight: 700; }
/* Nowrap keeps a pill from splitting mid-claim, but the longest one is wider
   than a small phone; there it may wrap like ordinary text. */
@media (max-width: 360px) { .pills li { white-space: normal; } }

/* --- Secties ---------------------------------------------------------- */
.sectie { padding: 4rem 0; }
.sectie-zand { background: var(--zand); }
/* The page alternates cream and sand, and two plain sections now sit next
   to each other. A hairline keeps the boundary readable without recolouring
   a section that is already approved. */
.sectie-lijn + .sectie-lijn { padding-top: 0; }
.sectie-lijn + .sectie-lijn > .wrap { border-top: 1px solid var(--rand);
  padding-top: 4rem; }
.sectie h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.sectie-lead { color: var(--sub); margin-top: 0.6rem; max-width: 34rem; }
.kaarten { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.25rem; }
.kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: 16px;
  padding: 1.5rem; }
.sectie-zand .kaart { border-color: #DCD4C0; }
.kaart h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.kaart p { font-size: 14px; color: var(--sub); }
.kaart-nr {
  width: 30px; height: 30px; border-radius: 50%; background: var(--groen);
  color: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; margin-bottom: 0.9rem;
}
.gerust { max-width: 40rem; margin: 2rem auto 0; text-align: center;
  font-size: 14px; color: var(--sub); }
.adres { display: inline-block; background: var(--zand); border-radius: 6px;
  padding: 0.1rem 0.4rem; font-size: 13px; color: var(--groen); }
.sectie-zand .adres { background: var(--wit); }

/* --- Footer-CTA ------------------------------------------------------- */
.cta { background: var(--groen); color: var(--bg); padding: 4.5rem 0; }
.cta h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.cta p { color: rgba(247,245,240,0.72); margin-top: 0.75rem; max-width: 30rem; }
.cta .hero-acties { margin-top: 2rem; }
.cta .knop-rand { border-color: rgba(247,245,240,0.4); color: var(--bg); }
.cta .knop-rand:hover { background: rgba(247,245,240,0.1); }
.voet {
  border-top: 1px solid rgba(247,245,240,0.15); margin-top: 3.5rem;
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  font-size: 13px; color: rgba(247,245,240,0.6);
}
.voet a { color: rgba(247,245,240,0.8); }
.voet .rechts { margin-left: auto; }

/* --- Breed ------------------------------------------------------------ */
@media (min-width: 820px) {
  .hero { padding: 4.5rem 0 6rem; }
  .hero .wrap { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .kaarten { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  /* Four mockups in three columns leaves the fourth alone on its own row,
     which reads as a mistake. Two by two also doubles their width, and the
     card detail and the letter are the two that need it to stay legible. */
  .kaarten-2 { grid-template-columns: repeat(2, 1fr); }
  .sectie { padding: 5.5rem 0; }
}
@media (max-width: 560px) {
  .nav-links { gap: 1rem; }
  .nav-links a[data-optioneel] { display: none; }
}