/* ═════════════════════════════════════════════════════════════════
   MOBIEL — alle telefoon-specifieke stijlen staan hier bij elkaar.

   Deze stylesheet wordt als laatste ingeladen en bevat uitsluitend
   @media-regels. Alles wat hier staat geldt dus alleen op kleine
   schermen; de andere stylesheets blijven de desktopversie.

   Breekpunten:
     ≤ 920px  koptekst — hieronder past de menurij niet meer naast het logo
     ≤ 900px  telefoon + kleine tablet — kolommen stapelen (zelfde grens
              als sections.css en over-ons.css al aanhouden)
     ≤ 600px  telefoon — compactere maten, knoppen over de volle breedte
     ≤ 380px  kleine telefoon (iPhone SE en vergelijkbaar)

   Inhoud:
     1.  Koptekst en menu
     2.  Knoppen
     3.  Hero
     4.  Aanbod
     5.  Professionele bedding / diploma's
     6.  Contactblok
     7.  Voettekst
     8.  Ruimte tussen secties
     9.  Sierelementen
     10. Over ons — paginaspecifiek
     11. Kleine telefoons
════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1. Koptekst en menu

   Op desktop staat het menu als rij naast het logo. Op mobiel paste
   die rij niet, waardoor de koptekst over twee regels brak (134px
   hoog) én de links helemaal verborgen werden: er was dus geen enkele
   manier om te navigeren. Hieronder wordt het één regel met een
   menuknop, die een uitklappaneel opent. Zie js/nav.js.

   920px en niet 900px: de rij logo + links + knop past vanaf ongeveer
   918px pas op één regel. Houdt js/nav.js gelijk aan deze grens.
───────────────────────────────────────── */
@media (max-width: 920px) {
  .site-header nav {
    flex-wrap: nowrap;
    padding: 12px var(--section-pad-h);
    gap: 12px;
  }

  .nav-logo img  { height: 40px; }
  .nav-logo-name { font-size: 20px; }
  .nav-logo-sub  { font-size: 9.5px; letter-spacing: 0.18em; }

  /* Menuknop — 44×44 zodat hij met een duim te raken is */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1.5px solid rgba(13, 92, 73, 0.3);
    border-radius: 12px;
    color: var(--c-green-mid);
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--c-green-mid); }

  /* De drie streepjes: het middelste is het element zelf, de andere
     twee zijn de pseudo-elementen erboven en eronder. */
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.12s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after  { top: 6px; }

  /* Open: de streepjes worden een kruisje */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars            { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before    { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after     { transform: translateY(-6px) rotate(-45deg); }

  /* Uitklappaneel onder de koptekst. De koptekst zelf is sticky en
     daarmee al een positioneringskader, dus absolute volstaat. */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* Op desktop is dit een rij die mag doorlopen op een tweede regel;
       hier is het een kolom met een maximumhoogte. Blijft wrap dan aan
       staan, dan schuift alles wat niet meer past naar een tweede
       kolom — de knop kwam zo boven in het menu terecht, dwars over de
       links heen, zodra het aanbod opengeklapt werd. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--section-pad-h) 20px;
    background: var(--c-cream);
    border-bottom: 1px solid rgba(13, 92, 73, 0.14);
    box-shadow: 0 16px 32px rgba(8, 76, 59, 0.12);
    max-height: calc(100vh - 70px);
    /* dvh telt de adresbalk van een telefoonbrowser mee; vh niet, en dan
       valt de onderkant van het paneel buiten beeld. De vh-regel hierboven
       blijft staan voor browsers die dvh niet kennen. */
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    /* Is het paneel uitgescrold, dan hoeft de pagina erachter niet mee */
    overscroll-behavior: contain;
  }
  .nav-menu.is-open { display: flex; }

  /* En krimpen doen ze ook niet: een flexkolom drukt zijn kinderen
     anders samen tot ze binnen max-height passen, terwijl de links
     zelf hun hoogte houden. Niet krimpen betekent: het paneel scrollt. */
  .nav-menu > * { flex: 0 0 auto; }

  .nav-links {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    font-size: 17px;
  }
  .nav-links a {
    display: block;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(13, 92, 73, 0.12);
  }
  .nav-links li:last-child a { border-bottom: 0; }

  /* Aanbod met uitklapmenu: de link blijft gewoon naar het overzicht
     gaan, het knopje ernaast klapt de vijf onderdelen open. Hover
     bestaat hier niet, dus js/nav.js zet de klasse is-open. */
  .nav-item-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid rgba(13, 92, 73, 0.12);
  }
  .nav-links li.nav-item-sub > a { border-bottom: 0; }
  .nav-caret { display: none; }

  /* 44px hoog zodat het knopje met een duim te raken is */
  .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--c-green-mid);
    cursor: pointer;
  }
  .nav-sub-toggle svg { transition: transform 0.18s ease; }
  .nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Geen zwevend paneel maar een ingesprongen lijstje in de kolom */
  .nav-sub {
    grid-column: 1 / -1;
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 12px 2px;
    padding: 0 0 0 14px;
    gap: 0;
    background: none;
    border: 0;
    border-left: 2px solid rgba(13, 92, 73, 0.14);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    white-space: normal;
  }
  .nav-sub::before { display: none; }
  .nav-item-sub.is-open > .nav-sub { display: flex; }

  .nav-links .nav-sub a {
    padding: 11px 2px;
    border-bottom: 0;
    border-radius: 0;
    font-size: 15.5px;
    font-weight: 600;
  }

  .nav-cta {
    margin-top: 14px;
    text-align: center;
    font-size: 16.5px;
    padding: 15px 20px;
  }

  /* De koptekst is nu ~66px hoog in plaats van 134px, dus mag een
     sprong naar een anker dichter onder de rand stoppen. */
  section[id], [id="top"] { scroll-margin-top: 78px; }
}


/* ─────────────────────────────────────────
   2. Knoppen

   .btn heeft white-space: nowrap, wat op desktop klopt maar op een
   telefoon betekende dat "Plan een gratis kennismaking" (307px breed)
   uit zijn blok stak en de hele pagina horizontaal liet scrollen.
   Op mobiel worden knoppen daarom volle breedte en mogen ze afbreken.
───────────────────────────────────────── */
@media (max-width: 600px) {
  .hero-actions .btn,
  .aanbod-actions .btn,
  .contact-content .btn {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .hero-actions,
  .aanbod-actions { gap: 12px; }
}


/* ─────────────────────────────────────────
   3. Hero
───────────────────────────────────────── */
@media (max-width: 600px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 48px;
    gap: 36px;
  }
  .hero-label   { font-size: 12px; margin-bottom: 16px; }
  .hero-intro   { font-size: 17.5px; }
  .hero-body    { font-size: 16.5px; margin-bottom: 28px; }

  /* 4/5 staand is op een telefoon bijna een heel scherm hoog; iets
     vierkanter houdt de tekst eronder in beeld. */
  .hero-photo-frame { aspect-ratio: 4/4.2; }
}


/* ─────────────────────────────────────────
   4. Aanbod

   Op tablet verdwenen de omschrijvingen (display: none) en bleef er
   een raster van 28px/1fr/28px staan. Op een telefoon paste een titel
   als "Gratis kennismakingsgesprek" daar niet in, waardoor het pijltje
   buiten de marge viel. Nu een expliciet raster mét de omschrijving,
   want juist op mobiel is die tekst het enige wat uitlegt wat het is.
───────────────────────────────────────── */
@media (max-width: 600px) {
  .aanbod-item {
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    gap: 6px 12px;
    align-items: start;
    padding: 20px 2px;
  }

  .aanbod-icon  { grid-column: 1; grid-row: 1; align-self: start; margin-top: 2px; }
  .aanbod-icon svg { width: 21px; height: 21px; }

  .aanbod-item h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 20px;
    /* Nederlandse samenstellingen zijn lang; liever afbreken dan uitsteken */
    overflow-wrap: break-word;
  }

  .aanbod-arrow { grid-column: 3; grid-row: 1; align-self: start; font-size: 17px; }

  .aanbod-item p {
    display: block;
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: 15.5px;
    line-height: 1.55;
  }

  .aanbod-actions { margin-top: 32px; }
}


/* ─────────────────────────────────────────
   5. Professionele bedding / diploma's

   .credential hield ook op mobiel zijn kolom van 92px voor het logo
   vast. Daardoor bleef er zo'n 150px over voor de tekst, die dan in
   flarden van drie woorden naast een zwevend logo stond.
───────────────────────────────────────── */
@media (max-width: 600px) {
  .credential {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px;
  }

  .credential-logo {
    width: 84px;
    height: 84px;
  }
  .credential-logo img { width: 60px; height: 60px; }

  .credential p { font-size: 16px; }
}


/* ─────────────────────────────────────────
   6. Contactblok
───────────────────────────────────────── */
@media (max-width: 600px) {
  .contact-box { padding: 48px 22px; border-radius: 26px; }

  .contact-content h2 { font-size: 26px; }
  .contact-content p  { font-size: 17px; margin-bottom: 28px; }

  /* De cirkel is 340px en stak op een telefoon het hele blok uit */
  .contact-deco { width: 220px; height: 220px; top: -110px; right: -70px; }
}


/* ─────────────────────────────────────────
   7. Voettekst

   De vlam-illustratie staat als achtergrond op 100% hoogte. Op een
   smalle voettekst betekende dat een vlam dwars door álle tekst en
   links heen. Hij wordt hier een hoekaccent onder de tekst.
───────────────────────────────────────── */
@media (max-width: 900px) {
  .site-footer {
    background-size: auto 210px;
    background-position: right -34px bottom -10px;
  }

  /* Ruimere raakvlakken: 18px hoge links zijn met een duim niet te doen */
  .footer-nav   { gap: 0; }
  .footer-nav a { padding: 11px 0; }

  .footer-meta {
    gap: 2px 20px;
    font-size: 13.5px;
  }
  .footer-meta a { padding: 10px 0; }

  /* Zonder dit lopen de regels van de onderste balk over de vlam heen */
  .footer-meta > * { position: relative; }
}

@media (max-width: 600px) {
  .footer-inner   { padding-top: 44px; padding-bottom: 24px; gap: 32px; }
  .footer-tagline { font-size: 15.5px; }
  .footer-socials { gap: 12px; margin-top: 16px; }

  /* Op deze breedte paste de onderste balk nog in twee rommelige regels,
     waarbij de regels ongelijk uitliepen. Onder elkaar leest het rustiger
     en is elke link ook echt aan te tikken. */
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 36px;
  }
  .footer-meta > * { white-space: normal; padding: 5px 0; }
  .footer-meta a   { padding: 9px 0; }

  .site-footer { background-size: auto 170px; }
}


/* ─────────────────────────────────────────
   8. Ruimte tussen secties

   100px boven en onder elke sectie is op een telefoon een half scherm
   leegte; daardoor voelde de pagina eindeloos lang.
───────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --section-pad-v: 64px; }

  .herken-inner,
  .vuurkind-inner,
  .over-inner {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 36px;
  }

  .betekenen-intro { margin-bottom: 36px; }
  .aanbod-intro    { margin-bottom: 32px; }
  .cards           { gap: 18px; }
  .card            { padding: 28px 24px; }
  .card h3         { font-size: 23px; }

  .herken-left   { gap: 24px; }
  .herken-item   { padding: 13px 0; }
  .herken-item p { font-size: 16px; }
  .herken-cta    { font-size: 21px; padding-top: 22px; }
}


/* ─────────────────────────────────────────
   9. Sierelementen

   De losse cirkels zijn decoratie zonder inhoud. Op desktop vullen ze
   een lege kolom; op mobiel duwen ze de tekst alleen maar uit elkaar.
   (De cirkels van Over ons werden al verborgen in over-ons.css.)
───────────────────────────────────────── */
@media (max-width: 900px) {
  .werkwijze-deco { display: none; }
}


/* ─────────────────────────────────────────
   10. Over ons — paginaspecifiek
───────────────────────────────────────── */
@media (max-width: 600px) {
  .ov-hero        { padding-top: 40px; padding-bottom: 48px; gap: 36px; }
  .ov-hero-body   { font-size: 17px; }
  .ov-hero-frame  { aspect-ratio: 5/4; }

  .ov-lieke-inner,
  .ov-waarom-inner,
  .ov-drie-inner,
  .ov-samen-inner { padding-top: 64px; padding-bottom: 64px; gap: 36px; }

  .ov-weg,
  .ov-vuurkind,
  .ov-opleiding   { padding-top: 56px; padding-bottom: 56px; }

  .ov-weg         { gap: 44px; }
  .ov-vuurkind-intro { margin-bottom: 36px; }
  .ov-vuurkind-grid  { gap: 40px; }

  .ov-lieke-image { margin-top: 24px; }
  /* Anders steekt de cirkel buiten het scherm op een telefoon */
  .ov-lieke-circle { right: 0; bottom: -12px; width: 96px; height: 96px; }

  .ov-waarom-text p,
  .ov-samen-text p,
  .ov-drie-prose p { font-size: 16.5px; }

  .ov-drie h2      { font-size: 25px; }
  .ov-herken-card  { padding: 28px 22px 8px; }
  .ov-herken-card h3 { font-size: 20px; }
}


/* ─────────────────────────────────────────
   11. Kleine telefoons (iPhone SE en vergelijkbaar)
───────────────────────────────────────── */
@media (max-width: 380px) {
  .hero h1,
  .ov-hero h1     { font-size: 25px; }

  .nav-logo-name  { font-size: 18px; }
  .nav-logo img   { height: 36px; }

  .aanbod-item h3 { font-size: 18.5px; }
  .contact-box    { padding: 40px 18px; }
  .contact-content .ov-contact-quote { font-size: 22px; }
}