/* Aanvullingen voor de onderliggende pagina's.
   Gebruikt uitsluitend de tokens uit site.css, zodat de diepe pagina's
   dezelfde ontwerptaal spreken als de homepage. */

/* --- kop van een subpagina --- */
.page-hero{
  position:relative;
  padding:clamp(7rem,14vw,11rem) 0 clamp(2.5rem,5vw,4rem);
  background:linear-gradient(180deg,var(--black-bg-deep) 0%,var(--cream) 100%);
  border-bottom:1px solid var(--hairline);
}
/* De .wrap zelf mag niet versmald worden: .wrap centreert (margin:0 auto),
   dus een kleinere max-width schoof de hele paginakop naar het midden terwijl
   het kruimelpad en de lopende tekst eronder links uitlijnden — op 1280px
   scheelde dat bijna 200px. De leesbreedte hoort bij de tekst zelf. */
.page-hero__inner{max-width:var(--wrap)}
.page-hero__titel{max-width:52rem}
.page-hero__titel{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:.7rem 0 0;
}
.page-hero__intro{
  font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:44rem;
  margin:1.4rem 0 0;
}

/* --- kruimelpad --- */
.crumbs{
  border-bottom:1px solid var(--hairline);
  background:var(--cream);
  font-size:.82rem;
  letter-spacing:.02em;
}
.crumbs .wrap{padding-top:.9rem;padding-bottom:.9rem;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--blue-light)}
.crumbs__sep{margin:0 .6rem;opacity:.45}
.crumbs [aria-current]{color:var(--ink)}

/* --- lopende tekst --- */
.prose{max-width:44rem}
.prose p{
  font-size:1.02rem;
  line-height:1.85;
  color:var(--ink-soft);
  margin:0 0 1.35rem;
}
.prose__h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 1.3rem;
}
.prose__h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.12rem,2vw,1.35rem);
  color:var(--ink);
  margin:2.2rem 0 .9rem;
}
/* Interne links vallen op zonder de leesregel te breken. */
.prose a,.faq__antwoord a,.page-hero__intro a{
  color:var(--blue-light);
  text-decoration:underline;
  text-decoration-color:rgba(141,190,226,.35);
  text-underline-offset:.22em;
  transition:text-decoration-color .2s,color .2s;
}
.prose a:hover,.faq__antwoord a:hover,.page-hero__intro a:hover{
  color:var(--gold-light);
  text-decoration-color:var(--gold);
}
.prose__lijst{margin:0 0 1.6rem;padding:0;list-style:none}
.prose__lijst li{
  position:relative;
  padding-left:1.45rem;
  margin-bottom:.7rem;
  color:var(--ink-soft);
  line-height:1.75;
}
.prose__lijst li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:.42rem;height:.42rem;
  background:var(--gold);
  transform:rotate(45deg);
}

/* --- navigatie en footer op subpagina's ---
   Bewust leeg. De kop en de voettekst van de subpagina's gebruiken exact de
   classnamen uit home-bron.html en worden dus al door site.css opgemaakt.
   Hier stonden eerder eigen .nav__link(s)- en .footer__*-regels; die eerste
   overschreven — omdat pagina.css ná site.css laadt — de regel die het menu
   op smalle schermen verbergt, waardoor op elke subpagina de volle
   navigatiebalk naast de hamburgerknop bleef staan en over de schermrand
   liep. De .footer__*-regels sloegen nergens op: de voettekst gebruikt
   .foot__*. Niets van dit alles hier opnieuw definiëren. */


/* --- responsief: tablet en telefoon ---
   site.css regelt de homepage; deze breakpoints horen bij de blokken die
   alleen op de gegenereerde pagina's voorkomen. */

@media (max-width:640px){
  /* De kop staat onder de vaste navigatiebalk; op smalle schermen mag die
     ruimte kleiner, anders begint de tekst pas ver onder de vouw. */
  .page-hero{ padding:clamp(5.5rem,22vw,7.5rem) 0 clamp(2rem,7vw,2.8rem); }
  .page-hero__intro{ margin-top:1.1rem; }

  .crumbs{ font-size:.78rem; }
  .crumbs .wrap{ padding-top:.7rem; padding-bottom:.7rem; line-height:1.9; }
  .crumbs__sep{ margin:0 .4rem; }

  .prose p{ font-size:1rem; line-height:1.8; }
  .prose__h3{ margin-top:1.9rem; }
  /* Lange e-mailadressen en URL's in de lopende tekst mogen afbreken. */
  .prose a, .prose li, .prose p{ overflow-wrap:break-word; }
}

/* Aanraakvlakken: 44px is de vuistregel, een kruimel- of kaartlink haalde
   dat niet. Alleen op apparaten zonder muisaanwijzer, zodat de desktop
   niet ineens ruimer wordt. */
@media (hover:none){
  .crumbs a{ display:inline-block; padding:.35rem 0; }
}