/*
 * Components — Martha Kindercoaching
 * ----------------------------------------
 * Lovable-componentclasses (@apply uitgeschreven naar pure CSS) + globale
 * chrome (header, footer). Project-specifieke secties komen per pagina apart.
 */

/* ----------------------------------------
 * BUTTONS  (uit de Lovable-bron, uitgeschreven)
 * ---------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  min-height:       var(--btn-height);
  border-radius:    9999px;
  padding:          0.5rem 1.5rem;
  font-family:      var(--font-body);
  font-size:        0.875rem;
  font-weight:      500;
  line-height:      1;
  text-decoration:  none;
  cursor:           pointer;
  border:           1px solid transparent;
  transition:       all 0.2s ease;
}

.btn-primary {
  background-color: var(--sage-deep);
  color:            #fff;
  box-shadow:       0 6px 20px -8px color-mix(in oklab, var(--sage-deep) 55%, transparent);
}

.btn-primary:hover {
  background-color: color-mix(in oklab, var(--sage-deep) 88%, black);
  color:            #fff;
  transform:        translateY(-1px);
}

.btn-outline {
  border-color:     var(--border);
  background-color: transparent;
  color:            var(--ink);
}

.btn-outline:hover {
  background-color: var(--cream);
}

/* ----------------------------------------
 * LAYOUT HELPERS  (uit de Lovable-bron, uitgeschreven)
 * ---------------------------------------- */

.container-soft {
  margin-inline: auto;
  width:         100%;
  max-width:     72rem;          /* 1152px */
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .container-soft { padding-inline: 2rem; }
}

/* Subtiele groene gloed achter de hero */
.leaf-bg {
  background-image:
    radial-gradient(circle at 10% 20%, color-mix(in oklab, var(--sage) 18%, transparent), transparent 40%),
    radial-gradient(circle at 90% 80%, color-mix(in oklab, var(--taupe) 22%, transparent), transparent 45%);
}

/* Twee-koloms: beeld naast tekst. Site-breed herbruikbaar (homepage-verhaal,
   Over Martha-verhaal, ...). Modifiers voor uitlijning en kolomverdeling. */
.media-split {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   var(--space-16);
  align-items:           center;
}

.media-split--top          { align-items: start; }
.media-split--media-narrow { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

/* Beeld op de volledige kolomhoogte (gelijk aan de tekst ernaast). De
   media-kolom rekt mee (stretch) en de afbeelding vult 'm met object-fit. */
.media-split--fill { align-items: stretch; }

.media-split--fill .media-split__media {
  position: relative;
}

.media-split--fill .media-split__media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.media-split__media {
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-md);
  overflow:      hidden;   /* ronde hoeken + ruimte voor .media-zoom */
}

.media-split__media img {
  display: block;
  width:   100%;
  height:  auto;
}

@media (max-width: 768px) {
  .media-split,
  .media-split--media-narrow {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
  }

  /* Gestapeld: beeld terug naar natuurlijke hoogte (anders klapt het dicht). */
  .media-split--fill { align-items: start; }
  .media-split--fill .media-split__media { position: static; }
  .media-split--fill .media-split__media img {
    position: static;
    height:   auto;
  }
}

/* ----------------------------------------
 * EYEBROW (klein uppercase label boven een kop) — site-breed
 * ---------------------------------------- */

.eyebrow {
  color:          var(--sage-deep);
  font-family:    var(--font-heading);
  font-size:      var(--text-eyebrow);
  font-weight:    var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ----------------------------------------
 * ICON-CHIP — rond groen vlak met lucide-icoon (site-breed)
 * ---------------------------------------- */

.icon-chip {
  display:          grid;
  place-items:      center;
  width:            40px;
  height:           40px;
  border-radius:    var(--radius-full);
  background-color: color-mix(in oklab, var(--sage) 22%, transparent);
  color:            var(--sage-deep);
}

.icon-chip svg {
  width:  20px;
  height: 20px;
}

/* ----------------------------------------
 * EFFECTEN — scroll-reveal + beeld-zoom (rustig)
 * ---------------------------------------- */

@keyframes martha-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Blok-reveal: faden zacht omhoog zodra ze in beeld komen (.is-visible via JS) */
.reveal {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity:   1;
  transform: none;
}

/* Stagger-reveal: de kinderen van een container komen na elkaar in.
   Animatie (i.p.v. transition) zodat het niet botst met hover-transities. */
.reveal-stagger > * {
  opacity: 0;
}

.reveal-stagger.is-visible > * {
  animation: martha-fade-up 0.6s ease both;
}

.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.07s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.21s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.35s; }

/* Zachte zoom op een afbeelding bij hover (herbruikbaar) */
.media-zoom {
  overflow: hidden;
}

.media-zoom img {
  display:    block;
  width:      100%;
  height:     auto;
  transition: transform 0.5s ease;
}

.media-zoom:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }
  .reveal-stagger > * {
    opacity:   1;
    animation: none;
  }
  .media-zoom img,
  .media-zoom:hover img {
    transition: none;
    transform:  none;
  }
}

/* ----------------------------------------
 * HEADER / NAVIGATIE
 * ---------------------------------------- */

.header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--background);
  border-bottom:    1px solid var(--border);
}

.nav {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  max-width:        var(--container-max);
  margin:           0 auto;
  padding-block:    var(--space-3);
  padding-inline:   1.25rem;   /* gelijk aan .container-soft */
}

@media (min-width: 640px) {
  .nav { padding-inline: 2rem; }
}

.nav__logo {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
}

.nav__logo-img {
  height: 40px;
  width:  auto;
}

.nav__logo-symbol {
  height: 44px;
  width:  auto;
}

.nav__logo-text {
  font-family:    var(--font-heading);
  font-size:      var(--text-base);
  font-weight:    var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-wordmark);
}

.nav__collapse {
  display:      flex;
  align-items:  center;
  gap:          var(--space-6);
}

.nav__menu {
  display:    flex;
  align-items: center;
  gap:        var(--space-1);
  list-style: none;
  margin:     0;
  padding:    0;
}

.nav__menu a {
  display:          inline-block;
  padding:          var(--space-2) var(--space-4);
  border-radius:    var(--radius-full);
  color:            var(--color-menu);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      var(--font-regular);
  text-decoration:  none;
  transition:       background-color var(--transition-fast),
                    color var(--transition-fast);
}

.nav__menu a:hover,
.nav__menu .current-menu-item > a,
.nav__menu .current_page_item > a,
.nav__menu .current-menu-ancestor > a {
  background-color: var(--cream);
  color:            var(--ink);
}

.nav__cta {
  margin-left: var(--space-2);
}

/* Skip link */
.skip-link {
  position: absolute;
  left:     -9999px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.skip-link:focus {
  left:             var(--space-4);
  top:              var(--space-4);
  width:            auto;
  height:           auto;
  padding:          var(--space-2) var(--space-4);
  background:       var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-sm);
  z-index:          200;
}

/* Hamburger toggle — alleen op mobiel */
.nav__toggle {
  display:          none;
  width:            44px;
  height:           44px;
  padding:          0;
  background:       transparent;
  border:           none;
  cursor:           pointer;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              5px;
}

.nav__toggle-bar {
  display:          block;
  width:            26px;
  height:           2px;
  border-radius:    2px;
  background-color: var(--ink);
  transition:       transform var(--transition-fast),
                    opacity var(--transition-fast);
}

/* ----------------------------------------
 * PAGE HERO (subpagina's) — tekst op leaf-bg, geen beeld
 * ---------------------------------------- */

.page-hero {
  padding-block: var(--space-16) var(--space-20);
}

.page-hero__eyebrow {
  margin: 0 0 var(--space-5);
}

.page-hero__title {
  margin:      0 0 var(--space-6);
  font-size:   clamp(2.25rem, 4vw, 3rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color:       var(--ink);
}

.page-hero__intro {
  margin:      0;
  max-width:   52ch;
  color:       var(--muted-foreground);
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Zachte entree bij laden (keyframe staat hierboven) */
.page-hero__eyebrow,
.page-hero__title,
.page-hero__intro {
  animation: martha-fade-up 0.7s ease both;
}

.page-hero__title { animation-delay: 0.08s; }
.page-hero__intro { animation-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .page-hero__eyebrow,
  .page-hero__title,
  .page-hero__intro {
    animation: none;
  }
}

/* ----------------------------------------
 * RICH TEXT (wysiwyg-blokken in templates) — herbruikbaar
 * ---------------------------------------- */

.rich-text > :first-child { margin-top: 0; }

.rich-text p {
  margin:      0 0 var(--space-4);
  color:       var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

.rich-text p:last-child { margin-bottom: 0; }

.rich-text h2,
.rich-text h3 {
  margin:      var(--space-8) 0 var(--space-4);
  color:       var(--ink);
}

.rich-text h2 { font-size: var(--text-2xl); }
.rich-text h3 { font-size: var(--text-xl); }

/* ----------------------------------------
 * PAGE HEADER (eenvoudige paginatitel)
 * ---------------------------------------- */

.page-header {
  padding:    var(--space-16) var(--section-padding-x) var(--space-8);
  text-align: center;
  background: var(--background);
}

.page-header__title {
  font-family: var(--font-heading);
  font-size:   var(--text-3xl);
  font-weight: var(--font-bold);
  color:       var(--ink);
  margin:      0;
}

/* 404 — gecentreerde foutmelding */
.error-404 {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      40vh;
  text-align:      center;
}

.error-404 .btn {
  margin-top: var(--space-6);
}

/* ----------------------------------------
 * SECTIES
 * ---------------------------------------- */

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

.section--white { background-color: var(--background); }
.section--cream { background-color: var(--cream-soft); }

/* CTA-sectie: bovenpadding eraf zodat de witruimte boven de cream-box
   (= onderpadding van de sectie erboven) gelijk is aan die naar de footer. */
.section--cta { padding-top: 0; }

.section__inner {
  max-width: var(--container-max);
  margin:    0 auto;
}

/* ----------------------------------------
 * FOOTER
 * ---------------------------------------- */

.footer {
  background-color: var(--cream);
  color:            var(--ink);
  padding:          var(--space-20) var(--section-padding-x) var(--space-8);  /* horizontale gutter gelijk aan .section */
  font-size:        var(--text-sm);
}

/* overrule de globale p-regel (16px) binnen de footer */
.footer p {
  font-size: var(--text-sm);
}

.footer__inner {
  max-width:      var(--container-max);
  margin:         0 auto;
  padding-inline: 1.25rem;   /* gelijk aan .container-soft / .nav */
  display:        grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap:            var(--space-12);
  align-items:    start;
}

.footer__logo {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

.footer__logo-img {
  height:  44px;
  width:   auto;
  display: block;
}

.footer__logo-symbol {
  height:  40px;
  width:   auto;
  display: block;
}

.footer__logo-text {
  font-family:    var(--font-heading);
  font-size:      var(--text-base);
  font-weight:    var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-wordmark);
}

.footer__tagline {
  margin-top: var(--space-4);
  max-width:  34ch;
  color:      var(--muted-foreground);
  line-height: var(--leading-normal);
}

.footer__title {
  font-family: var(--font-heading);
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
  color:       var(--ink);
  margin:      0 0 var(--space-4);
}

.footer__menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

.footer__menu li {
  margin-bottom: var(--space-2);
}

.footer__menu a,
.footer__contact a {
  color:           var(--ink);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer__menu a:hover,
.footer__contact a:hover {
  color: var(--sage-deep);
}

.footer__contact {
  font-style:  normal;
  line-height: var(--leading-normal);
}

.footer__contact p {
  margin: 0 0 var(--space-3);
}

.footer__contact-name {
  font-weight: var(--font-semibold);
}

.footer__contact-email {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

.footer__bottom {
  max-width:       var(--container-max);
  margin:          var(--space-16) auto 0;
  padding-top:     var(--space-5);
  padding-inline:  1.25rem;   /* gelijk aan .container-soft / .nav */
  border-top:      1px solid var(--border);
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  gap:             var(--space-3);
  font-size:       var(--text-sm);
  color:           var(--muted-foreground);
}

.footer__bottom a {
  color:           inherit;
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--sage-deep);
}

/* ----------------------------------------
 * GEDEELDE PART — CHECKLIST
 * ---------------------------------------- */

.checklist__inner {
  display:               grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:                   var(--space-16);
  align-items:           start;
}

.checklist__title {
  margin-bottom: var(--space-4);
}

.checklist__intro,
.checklist__slot {
  color:       var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

.checklist__slot {
  margin-top: var(--space-5);
}

.checklist__action {
  margin-top: var(--space-6);
}

.checklist__items {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows:        1fr;   /* alle pills even hoog als de hoogste */
  gap:                   var(--space-4);
  list-style:            none;
  margin:                0;
  padding:               0;
}

.checklist__item {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-4) var(--space-5);
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-full);
  box-shadow:       var(--shadow-sm);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    transform var(--transition-fast);
}

.checklist__item:hover {
  border-color: var(--sage);
  box-shadow:   var(--shadow-md);
  transform:    translateY(-2px);
}

.checklist__check {
  flex-shrink:      0;
  display:          grid;
  place-items:      center;
  width:            28px;
  height:           28px;
  border-radius:    var(--radius-full);
  background-color: color-mix(in oklab, var(--sage) 25%, transparent);
  color:            var(--sage-deep);
}

.checklist__check svg {
  width:  16px;
  height: 16px;
}

.checklist__item-text {
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
}

/* Gestapelde variant: titel boven, items in drie kolommen, afsluiter eronder
   (bv. Over Martha "Waar ik voor sta"). */
.checklist--stacked .checklist__inner { display: block; }

.checklist--stacked .checklist__head { max-width: 60ch; }

.checklist--stacked .checklist__items {
  grid-template-columns: repeat(3, 1fr);
  margin-top:            var(--space-8);
}

.checklist--stacked .checklist__foot { margin-top: var(--space-8); }

.checklist--stacked .checklist__slot {
  margin-top: 0;
  max-width:  62ch;
}

.checklist--stacked .checklist__action { margin-top: var(--space-6); }

/* ----------------------------------------
 * GEDEELDE PART — CTA-BLOK
 * ---------------------------------------- */

.cta-block {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--space-8);
  background-color: var(--cream);
  border-radius:    var(--radius-lg);
  padding:          var(--space-12) var(--space-16);
}

.cta-block--center {
  flex-direction: column;
  text-align:     center;
}

.cta-block__text {
  max-width: 30rem;
}

/* Gecentreerd: titel niet inperken (past op 1 regel); intro houdt leesbreedte. */
.cta-block--center .cta-block__text {
  max-width: none;
}

.cta-block__intro {
  margin-top: var(--space-3);
  color:      var(--muted-foreground);
  max-width:  46ch;
}

.cta-block--center .cta-block__intro {
  margin-inline: auto;
}

.cta-block__actions {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;   /* beide knoppen even breed (= de breedste) */
  gap:            var(--space-3);
  flex-shrink:    0;
}

/* Gecentreerd blok: knoppen naast elkaar, gecentreerd (1 of 2 knoppen). */
.cta-block--center .cta-block__actions {
  flex-direction:  row;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
}

/* Split met knoppen naast elkaar (tekst links, knoppen rechts op één rij). */
.cta-block--row .cta-block__actions {
  flex-direction: row;
  flex-wrap:      wrap;
  align-items:    center;
}

/* ----------------------------------------
 * PAGE CONTENT (standaard pagina's)
 * ---------------------------------------- */

.page-content {
  max-width:   720px;
  margin:      0 auto;
  line-height: var(--leading-relaxed);
}

.page-content h2,
.page-content h3 {
  margin-top: var(--space-8);
}

.page-content ul,
.page-content ol {
  padding-left:  var(--space-6);
  margin-bottom: var(--space-4);
  list-style:    revert;
}

.page-content a {
  text-decoration: underline;
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 768px) {

  :root {
    --section-padding-y: 48px;
    --section-padding-x: 16px;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-2xl); }

  .nav__toggle {
    display: flex;
  }

  .nav__collapse {
    display:        none;
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    flex-direction: column;
    align-items:    stretch;
    padding:        var(--space-5);
    background:     var(--background);
    border-bottom:  1px solid var(--border);
    gap:            var(--space-4);
  }

  .nav__collapse.is-open {
    display: flex;
  }

  .nav__menu {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--space-1);
  }

  .nav__cta {
    margin-left: 0;
    text-align:  center;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {

  .checklist__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Stacked: 3 -> 2 kolommen (inner blijft block, dus alleen items aanpassen) */
  .checklist--stacked .checklist__items {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .checklist__items {
    grid-template-columns: 1fr;
  }

  .cta-block {
    flex-direction: column;
    align-items:    flex-start;
    text-align:     left;
    padding:        var(--space-8);
  }

  .cta-block--center {
    align-items: center;
    text-align:  center;
  }
}

@media (max-width: 600px) {

  /* Stacked checklist: 2 -> 1 kolom */
  .checklist--stacked .checklist__items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .footer__inner {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
  }
}

/* Desktop-gutter footer gelijk aan .container-soft (ná de basisregels zodat
   deze wint bij gelijke specificiteit). */
@media (min-width: 640px) {
  .footer__inner,
  .footer__bottom { padding-inline: 2rem; }
}