/* =============================================================
   BASE.CSS — Heart Workx basis
   Reset, typografie, links, afbeeldingen, containers,
   hulpklassen en scroll-entrance animaties.
   Geladen op elke pagina, na tokens.css.
   ============================================================= */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family:      var(--body-font), sans-serif;
    font-size:        var(--tekst-base);
    font-weight:      var(--gewicht-normaal);
    color:            var(--tekstkleur);
    background-color: var(--achtergrond);
    line-height:      var(--regelafstand-tekst);
    overflow-x:       hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Koppen ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family:  var(--display-font), serif;
    font-weight:  var(--gewicht-normaal);
    line-height:  var(--regelafstand-kop);
    color:        var(--tekstkleur);
}

h1 { font-size: var(--kop-h1); }
h2 { font-size: var(--kop-h2); }
h3 { font-size: var(--kop-h3); }

/* ── Tekst ────────────────────────────────────────────────── */
p {
    margin-bottom: 1em;
    max-width: 68ch;   /* leescomfort — nooit breder dan dit */
}
p:last-child { margin-bottom: 0; }

/* ── Links ────────────────────────────────────────────────── */
a {
    color: var(--hoofdkleur);
    text-decoration: none;
    transition: color var(--overgang-snel);
}
a:hover { text-decoration: underline; }

/* ── Afbeeldingen ─────────────────────────────────────────── */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img[loading="lazy"] { content-visibility: auto; }

/* ── Container ────────────────────────────────────────────── */
.hw-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sectie-h);
}

/* ── Sectie basis ─────────────────────────────────────────── */
.hw-sectie {
    padding: var(--sectie-v) 0;
}

/* ── Label (eyebrow tekst boven kop) ─────────────────────── */
.hw-label {
    display: block;
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    color:          var(--hoofdkleur);
    margin-bottom:  var(--ruimte-4);
}

.hw-label--licht {
    color: var(--accentkleur);
}

/* ── Schermlezer hulptekst ────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Uitlijning hulpklassen ───────────────────────────────── */
.hw-centrum  { text-align: center; }
.hw-links    { text-align: left; }

/* ── Visuele scheidingslijn ───────────────────────────────── */
.hw-scheiding {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin: 0;
}

/* ── Kaart basis ──────────────────────────────────────────── */
.hw-kaart {
    background:    var(--wit);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(193,127,90,0.12);
    padding:       var(--ruimte-6);
    box-shadow:    var(--schaduw-sm);
}

/* ── Pagina hero (innerlijke pagina's) ───────────────────── */
.hw-pagina-hero {
    background: linear-gradient(135deg, var(--donker) 0%, #2A3E47 100%);
    padding: var(--ruimte-9) var(--sectie-h) var(--ruimte-8);
    text-align: center;
    color: var(--wit);
}
.hw-pagina-hero h1 { color: var(--wit); }
.hw-pagina-hero p  {
    color: var(--tekst-op-donker);
    margin-top: var(--ruimte-3);
    font-size: var(--tekst-md);
}

/* =============================================================
   SCROLL-ENTRANCE ANIMATIES
   Werkt via Intersection Observer in main.js.
   Elk element met .hw-reveal start verborgen en
   schuift omhoog zodra het in beeld komt.
   ============================================================= */

@keyframes hw-inkomst {
    from {
        opacity: 0;
        transform: translateY(var(--scroll-afstand));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Standaard reveal — wordt door JS geactiveerd */
.hw-reveal {
    opacity: 0;
    transform: translateY(var(--scroll-afstand));
    transition:
        opacity  var(--scroll-duur) ease,
        transform var(--scroll-duur) ease;
    will-change: opacity, transform;
}

.hw-reveal.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}

/* Gestapelde kinderen — elk iets later */
.hw-reveal-groep > * {
    opacity: 0;
    transform: translateY(var(--scroll-afstand));
    transition:
        opacity  var(--scroll-duur) ease,
        transform var(--scroll-duur) ease;
    will-change: opacity, transform;
}

.hw-reveal-groep.zichtbaar > *:nth-child(1) { transition-delay: calc(var(--scroll-vertraging) * 0); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(2) { transition-delay: calc(var(--scroll-vertraging) * 1); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(3) { transition-delay: calc(var(--scroll-vertraging) * 2); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(4) { transition-delay: calc(var(--scroll-vertraging) * 3); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(5) { transition-delay: calc(var(--scroll-vertraging) * 4); opacity: 1; transform: translateY(0); }

/* Voorkeur voor minder beweging respecteren */
@media (prefers-reduced-motion: reduce) {
    .hw-reveal,
    .hw-reveal-groep > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================================
   GLOBALE KLASSEN — compatibiliteit met bestaande pagina's
   Klassen die over.php, contact.php en andere innerlijke
   pagina's gebruiken vanuit het oude site.css / main.css.
   ============================================================= */

/* ── Container ───────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--sectie-h);
}

/* ── Sectie helpers ──────────────────────────────────────── */
.sectie-label {
    display:        block;
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--hoofdkleur);
    margin-bottom:  var(--ruimte-4);
}

.sectie-header {
    text-align:    center;
    max-width:     680px;
    margin:        0 auto var(--ruimte-8);
}

.sectie-intro {
    font-size:   var(--tekst-md);
    color:       #777;
    margin-top:  var(--ruimte-4);
    line-height: 1.8;
}

.achtergrond-zacht { background: var(--zacht); }
.achtergrond-donker { background: var(--donker); color: var(--wit); }

/* ── Kaart basis ──────────────────────────────────────────── */
.kaart {
    background:    var(--wit);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(193,127,90,0.12);
    padding:       var(--ruimte-6);
    box-shadow:    var(--schaduw-sm);
}

/* ── Knoppen — oud systeem compatibiliteit ───────────────── */
.knop-primair,
.knop-secundair {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         12px 24px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-base);
    font-weight:     var(--gewicht-semi);
    cursor:          pointer;
    text-decoration: none;
    border:          2px solid transparent;
    transition:      background var(--overgang-normaal), transform var(--overgang-snel), box-shadow var(--overgang-snel);
    min-height:      44px;
    -webkit-tap-highlight-color: transparent;
}

.knop-primair {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    border-color: var(--hoofdkleur);
}

.knop-primair:hover {
    background:      var(--donker);
    border-color:    var(--donker);
    color:           var(--wit);
    transform:       translateY(-2px);
    box-shadow:      var(--schaduw-md);
    text-decoration: none;
}

.knop-secundair {
    background:   transparent;
    color:        var(--hoofdkleur);
    border-color: var(--hoofdkleur);
}

.knop-secundair:hover {
    background:      var(--hoofdkleur);
    color:           var(--wit);
    transform:       translateY(-2px);
    text-decoration: none;
}

/* ── Kolom helpers ───────────────────────────────────────── */
.kolom-beeld { width: 100%; }

.kolom-tekst h2 { margin-bottom: var(--ruimte-5); }
.kolom-tekst p  { color: #666; line-height: 1.85; margin-bottom: var(--ruimte-4); }

/* ── Contact info kolom ──────────────────────────────────── */
.contact-info h2    { margin-bottom: var(--ruimte-4); }
.contact-info p     { color: #777; line-height: 1.8; margin-bottom: var(--ruimte-5); }

/* ── Pagina hero (innerlijke pagina's) ───────────────────── */
.pagina-hero {
    background: linear-gradient(135deg, var(--donker) 0%, var(--donker-diep) 100%);
    padding:    var(--ruimte-9) var(--sectie-h) var(--ruimte-8);
    text-align: center;
    color:      var(--wit);
}

.pagina-hero h1 {
    color:         var(--wit);
    margin-bottom: var(--ruimte-3);
}

.pagina-hero p {
    color:     var(--tekst-op-donker);
    font-size: var(--tekst-md);
    max-width: 580px;
    margin:    0 auto;
}

/* ── Pagina sectie ───────────────────────────────────────── */
.pagina-sectie {
    padding: var(--sectie-v) var(--sectie-h);
}