/* Friendsmas, stijlfundament
   Kleuren en letter overgenomen uit de bestaande Lovable-versie.
   Twee vlakken: donker navy voor hero, footer en verdiepende secties,
   warm gebroken wit voor de leessecties. Rood is accent, goud is actie. */

:root {
  /* Vlakken */
  --navy-900: #16273f;
  --navy-800: #1b2e4f;
  --navy-700: #22395e;
  --navy-600: #2a4570;
  --cream-50: #fbf9f6;
  --cream-100: #f7f3ec;
  --cream-200: #efe8dd;

  /* Accenten */
  --red-700: #8e1d1d;
  --red-600: #a81c22;
  --red-500: #c22f2a;
  --gold-500: #e9a63c;
  --gold-400: #f0bb63;

  /* Tekst */
  --ink-900: #1a1815;
  --ink-700: #3d3830;
  --ink-500: #6a6359;
  --on-dark: #f4efe7;
  --on-dark-muted: #b9c4d4;

  /* Ritme */
  --maxw: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 21, .04), 0 6px 18px rgba(26, 24, 21, .05);
  --shadow-md: 0 2px 4px rgba(26, 24, 21, .05), 0 18px 44px rgba(26, 24, 21, .08);

  --font: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  /* Ruim, want de doelgroep is vijftig tot zeventig */
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Links in lopende tekst krijgen een signaal dat niet op kleur leunt.
   WCAG 1.4.1 Use of Color is niveau A. De contrastcheck ziet dit geval
   niet: die meet tekst tegen achtergrond, niet link tegen de tekst
   eromheen. Op de koorpagina was dat verschil 1,24:1.
   currentColor, omdat deze links zowel op rood als op een witte
   formulierkaart staan. */
p a:not(.btn) {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

h1, h2, h3, h4 {
  color: var(--ink-900);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 700; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-800);
  color: var(--on-dark);
  padding: .8rem 1.2rem;
  z-index: 200;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--section-y); }

/* Schermvullende secties, guardrail uit het Web-Design-Handboek (13-08-2026).
   svh en niet vh, anders snijdt de adresbalk op mobiel de onderkant af. Past de
   inhoud niet in een scherm, dan groeit de sectie gewoon mee: dat staat de
   guardrail expliciet toe en gebeurt hier op mobiel bij de langere secties. */
.hero,
.section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--dark {
  background: var(--navy-800);
  color: var(--on-dark-muted);
}
.section--dark h2,
.section--dark h3 { color: var(--on-dark); }

.section--tint {
  background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
}

.section--red {
  background: var(--red-700);
  color: #f6e6e3;
}
.section--red h2 { color: #fff; }

/* Kop van een sectie, gecentreerd en met een vaste maximale leesbreedte.
   Dit is wat in de oude versie scheef liep. */
.head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.head--left {
  text-align: left;
  margin-inline: 0;
}
.head p { color: var(--ink-500); font-size: 1.075em; }
.section--dark .head p { color: var(--on-dark-muted); }

.eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: 1rem;
}
.section--dark .eyebrow,
/* gold-500 haalt op red-700 maar 4,26:1 en dit is kleine tekst. gold-400 haalt 5,12:1. */
.section--red .eyebrow { color: var(--gold-400); }

.lede {
  font-size: clamp(1.125rem, 1.1vw + .9rem, 1.4rem);
  line-height: 1.55;
  color: var(--ink-700);
}
.section--dark .lede { color: var(--on-dark-muted); }

.prose {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Wordmark en navigatie ---------- */

.wordmark {
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1vw + 1.1rem, 1.85rem);
  letter-spacing: -.035em;
  color: var(--red-600);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.wordmark--light { color: var(--on-dark); }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 246, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(26, 24, 21, .07);
  transition: box-shadow .3s ease;
}
.nav[data-scrolled="true"] { box-shadow: var(--shadow-sm); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.nav__links {
  display: none;
  margin-left: auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.nav__links a {
  text-decoration: none;
  font-weight: 600;
  font-size: .975rem;
  color: var(--ink-700);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--red-600); border-bottom-color: var(--red-600); }

/* Op smalle schermen zit de actie in het uitklapmenu, dus de balk blijft rustig. */
.nav__cta { display: none; }

@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__cta { display: block; }
}

.nav__toggle {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(26, 24, 21, .18);
  border-radius: 12px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-900);
}
.nav__toggle svg { width: 22px; height: 22px; }

/* Moet na de basisregel staan, anders wint display:grid alsnog. */
@media (min-width: 62rem) {
  .nav__toggle { display: none; }
}

.nav__drawer {
  display: none;
  border-top: 1px solid rgba(26, 24, 21, .07);
  padding-block: 1rem 1.5rem;
}
.nav__drawer[data-open="true"] { display: block; }
.nav__drawer ul { list-style: none; margin: 0; padding: 0; }
.nav__drawer a {
  display: block;
  padding: .85rem .25rem;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(26, 24, 21, .07);
}
@media (min-width: 62rem) { .nav__drawer { display: none !important; } }

/* Zijstraatje: op de koorpagina schuift het accent naar goud,
   zodat je merkt dat je in een ander deel van de site zit. */
.nav--koor {
  background: rgba(22, 39, 63, .9);
  border-bottom-color: rgba(255, 255, 255, .12);
}
.nav--koor .nav__links a { color: var(--on-dark-muted); }
.nav--koor .nav__links a:hover { color: var(--gold-400); border-bottom-color: var(--gold-400); }
.nav--koor .nav__toggle { color: var(--on-dark); border-color: rgba(255, 255, 255, .25); }
.nav--koor .nav__drawer { border-top-color: rgba(255, 255, 255, .12); }
.nav--koor .nav__drawer a { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, .1); }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  font-family: inherit;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--gold-500); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); }

.btn--ghost-light { border-color: rgba(255, 255, 255, .45); color: var(--on-dark); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn--ghost-dark { border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost-dark:hover { background: var(--ink-900); color: var(--cream-50); }

.btn--red { background: var(--red-600); color: #fff; }
.btn--red:hover { background: var(--red-500); }

.btn--sm { padding: .7rem 1.2rem; font-size: .9375rem; }
.btn--block { width: 100%; }

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}
.btns--center { justify-content: center; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-dark);
  padding-block: clamp(4.5rem, 12vw, 9rem) clamp(4rem, 10vw, 7.5rem);
  isolation: isolate;
}

/* Sfeer zonder mensen: warm strijklicht en zachte lichtbollen.
   Wordt vervangen door een echte foto zodra die er is. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 34rem at 78% 8%, rgba(233, 166, 60, .30), transparent 62%),
    radial-gradient(44rem 30rem at 8% 92%, rgba(168, 28, 34, .34), transparent 66%),
    linear-gradient(178deg, #16273f 0%, #172a45 48%, #101d31 100%);
}
.hero__bokeh {
  position: absolute;
  inset: -10%;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
}
.hero__bokeh span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 226, 168, .55), rgba(233, 166, 60, .18) 45%, transparent 70%);
  filter: blur(6px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -22px, 0); }
}

.hero__inner { position: relative; max-width: 54rem; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero h1 em {
  font-style: normal;
  color: var(--gold-400);
}
.hero .lede { color: #e6dfd4; max-width: 40rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
}
.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
  font-weight: 600;
  color: #f0e9de;
}
.hero__meta svg { width: 17px; height: 17px; flex: none; color: var(--gold-400); }

.hero__note {
  margin-top: 2.25rem;
  font-size: .9375rem;
  color: var(--on-dark-muted);
  max-width: 34rem;
}

/* ---------- Kaarten en rasters ---------- */

.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.card {
  background: #fff;
  border: 1px solid rgba(26, 24, 21, .07);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--ink-500); font-size: .9875em; }
.card p:last-child { margin-bottom: 0; }

.card--dark {
  background: var(--navy-700);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--on-dark-muted); }

.card--flat { box-shadow: none; }

.icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(168, 28, 34, .09);
  color: var(--red-600);
  margin-bottom: 1.25rem;
}
.icon svg { width: 25px; height: 25px; }
.card--dark .icon { background: rgba(233, 166, 60, .14); color: var(--gold-400); }

.centered { text-align: center; }
.centered .icon { margin-inline: auto; }

/* Lijstjes met vinkjes */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .6rem 0;
}
.checks svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: .25rem;
  color: var(--red-600);
}
.card--dark .checks svg,
.section--dark .checks svg { color: var(--gold-400); }

/* Uitgelichte quote */
.quote {
  background: var(--cream-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.quote blockquote {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.015em;
}
.quote blockquote span { color: var(--red-600); }
.quote cite { font-style: normal; color: var(--ink-500); font-size: .95rem; }

/* Split: tekst naast kaart */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* Team- en steunblok */
.stack { display: grid; gap: 1.5rem; }

.credits {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.credits li {
  font-size: .875rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #e8e1d6;
}

/* ---------- Formulier ---------- */

.form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
  color: var(--ink-700);
}
.form h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; }

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink-900);
  margin-bottom: .45rem;
}
.field label .opt { font-weight: 500; color: var(--ink-500); }

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: var(--cream-50);
  border: 1.5px solid rgba(26, 24, 21, .14);
  border-radius: 14px;
  padding: .85rem 1rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(233, 166, 60, .22);
}

.form__note {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--ink-500);
  text-align: center;
}
.form__note a { color: var(--red-600); }

.form__status {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  font-size: .9375rem;
  font-weight: 600;
  display: none;
}
.form__status[data-state="ok"] {
  display: block;
  background: rgba(46, 125, 74, .1);
  color: #216342;
}
.form__status[data-state="err"] {
  display: block;
  background: rgba(168, 28, 34, .1);
  color: var(--red-700);
}

.badge {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin-top: 2rem;
}
.badge svg { width: 24px; height: 24px; flex: none; color: var(--gold-400); }
.badge strong { display: block; color: #fff; }
.badge span { font-size: .9375rem; }

/* ---------- Footer ---------- */

.footer {
  background: var(--navy-900);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
.footer h3 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .6rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--gold-400); text-decoration: underline; }
.footer__tagline { max-width: 26rem; margin-top: 1rem; }

.socials { display: flex; gap: .65rem; margin-top: 1.5rem; }
.socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  color: var(--on-dark);
}
.socials a:hover { background: var(--gold-500); color: var(--navy-900); }
.socials svg { width: 20px; height: 20px; }

.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .875rem;
}

/* ---------- Verborgen secties ----------
   Deze secties staan klaar voor een volgende editie. Ze zijn uit,
   omdat de inhoud nu niet waar is. Zet de schakelaar bovenaan de
   betreffende pagina op "true" om ze aan te zetten. */
[data-enabled="false"] { display: none !important; }

/* ---------- Leeslinten ---------- */

.longread { max-width: 40rem; }
.longread p + h2 { margin-top: 2rem; }
/* De privacysecties staan semantisch op h2, maar houden het
   formaat dat ze als h3 hadden. */
.longread h2 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 700; }

/* ---------- Beweging ---------- */

.reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
.is-ready .reveal { will-change: opacity, transform; }

/* Zonder JavaScript, of met beweging uit, staat alles gewoon zichtbaar. */
html:not(.is-ready) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__bokeh span { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}