/* ============================================
   MARKETINGSITE (apex) - app-laag naast app.css
   Alles gescoped op body.marketing zodat school- en platformwereld
   onaangeroerd blijven. Kleuren en maten via framework-tokens:
   dark mode flipt automatisch mee.
   ============================================ */

/* Het thema verlaagt --h1-font-size naar 2rem voor werkschermen;
   op de marketingsite mag de framework-marketingmaat terug. */
body.marketing {
  --h1-font-size: var(--text-4xl);
  --h2-font-size: var(--text-3xl);
}

/* Sticky footer zonder :has()-afhankelijkheid (core doet dit al via
   body:has(> .footer); deze fallback geeft hetzelfde resultaat overal). */
body.marketing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.marketing > main { flex: 1; }

/* ─── Skip-link (bestaat niet in core) ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-md);
  z-index: 400;
  background: var(--color-surface-raised);
  color: var(--color-text);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-md); }

/* ─── Nav ─── */
body.marketing .nav-cta { margin-left: var(--space-sm); }

/* ─── Hero: tekst + chat-mockup ─── */
body.marketing .hero { padding-bottom: var(--space-3xl); }
.hero-split {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 1025px) {
  .hero-split { grid-template-columns: 7fr 5fr; }
}
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.hero-copy .hero-title { margin-bottom: var(--space-lg); }
.hero-copy .hero-lead { margin-bottom: var(--space-xl); }
.hero-note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Chat-mockup: een blaadje uit het schrift met twee gesprekjes */
.chat-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.chat-demo-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.chat-demo-bubble {
  max-width: 85%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.chat-demo-student {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-bottom-right-radius: 3px;
}
.chat-demo-bot {
  align-self: flex-start;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 3px;
}
.chat-demo-bot .voorbeeld { color: var(--color-text-secondary); font-style: italic; }
.chat-demo-refuse {
  border-left: 3px solid var(--color-warning);
}

/* ─── "Zo werkt het": drie genummerde stappen als indexkaartjes ─── */
.step-grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 641px) {
  .step-grid { grid-template-columns: repeat(3, 1fr); }
}
.step {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-xl);
}
.step-nr {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.step h3 { margin-bottom: var(--space-sm); }
.step p { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: 0; }

/* ─── Troeven op de merk-band: doorschijnende papierkaartjes ─── */
.troef-grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 641px) {
  .troef-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .troef-grid { grid-template-columns: repeat(4, 1fr); }
}
.troef {
  display: block;
  background: rgba(253, 252, 242, 0.07);
  border: 1px solid rgba(253, 252, 242, 0.18);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.troef:hover {
  background: rgba(253, 252, 242, 0.12);
  border-color: rgba(253, 252, 242, 0.35);
  color: inherit;
}
.troef .material-icons {
  color: var(--color-secondary);
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  margin-bottom: var(--space-md);
}
.troef h3 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
.troef p { font-size: var(--text-sm); opacity: 0.85; margin-bottom: var(--space-sm); }
.troef-meer {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary);
}

/* ─── Inzichten-mockup (leerkrachtsectie) ─── */
.insight-demo {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-xl);
}
.insight-demo-title {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.insight-woorden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.insight-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.insight-rij .material-icons { color: var(--color-primary); }

/* ─── Split-secties (tekst naast beeld) ─── */
.split {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 1025px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* ─── Tekstpagina's (didactiek, over, privacyverklaring) ─── */
.page-prose { max-width: 46rem; }
.page-prose h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-md); }
.page-prose h2:first-child { margin-top: 0; }
.page-prose h3 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.page-prose ul { padding-left: 1.2em; margin-bottom: var(--space-lg); }
.page-prose li { margin-bottom: var(--space-sm); }
.bron-lijst {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.bron-lijst li { margin-bottom: var(--space-sm); }

/* ─── FAQ ─── */
.accordion-group { max-width: 46rem; margin-inline: auto; }
.accordion-group .accordion + .accordion { margin-top: var(--space-md); }

/* ─── Demo-formulier ─── */
.demo-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}
@media (min-width: 1025px) {
  .demo-grid { grid-template-columns: 5fr 7fr; }
}
.demo-vinkjes { list-style: none; padding: 0; margin: 0 0 var(--space-xl); }
.demo-vinkjes li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}
.demo-vinkjes .material-icons { color: var(--color-success); font-size: 1.25rem; }

/* Honeypot: onzichtbaar voor mensen, niet via display:none
   (sommige bots filteren dat weg en laten het veld dan leeg). */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Footer-indeling ─── */
body.marketing .footer {
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  /* De border-gradient-top-utility schildert zijn eigen binnenachtergrond
     (default --color-surface = papier) en wiste zo de inktband; deze
     variabele zet de band terug zonder het gradientlijntje te verliezen. */
  --border-gradient-bg: var(--color-surface-brand);
}
.footer-grid {
  display: grid;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 641px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand .brand-name { color: var(--color-surface-brand-text); }
/* De voettekst staat op de donkere merk-band: daar wordt de ballon crème en de
   tweede stem geel, net als op de favicon. Zonder deze regel zou de lijn het
   blauw van --color-primary houden en wegvallen tegen het inkt. */
.footer-brand .brand-mark {
  --logo-fill: var(--color-surface-brand-text);
  --logo-spark: var(--color-secondary);
}
.footer-tagline { margin-top: var(--space-md); opacity: 0.8; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}
.footer-legal { opacity: 0.7; font-size: var(--text-xs); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-2xl);
  justify-content: space-between;
  border-top: 1px solid rgba(253, 252, 242, 0.18);
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
  opacity: 0.75;
}
.footer-meta p { margin-bottom: 0; }

/* ─── CTA-band ─── */
.cta-band .hero-actions { justify-content: center; }
.cta-band .section-header { margin-bottom: var(--space-xl); }