@charset "utf-8";
/* NAOIH — video zichtbaar tussen de inhoud en transparante footer.
   Dit stylesheet staat als laatste geladen, zodat oude templates intact blijven. */

:root {
    --naoih-frame: clamp(20px, 5vw, 44px);
    --naoih-frame-gap: clamp(15px, 3.6vw, 32px);
    --naoih-card-radius: clamp(20px, 5vw, 34px);
}

/* De vaste video blijft achter alle inhoud; de oorspronkelijke scrollscripts
   en pagina-indeling worden niet gewijzigd. */
body.naoih-video-page { background: transparent; }
body.naoih-video-page > :not(.site-video-background) { position: relative; }
body.naoih-video-page .index-sections,
body.naoih-video-page .site-sections,
body.naoih-video-page .subpage-main,
body.naoih-video-page .page-contents-section,
body.naoih-video-page .subpage-hero-track {
    background: transparent;
}
/* De video vult uitsluitend de ruimte om de blokken; de blokken zelf
   blijven ondoorzichtig, zodat de teksten goed leesbaar zijn. */
body.home .site-sections > .content-section {
    width: calc(100% - 2 * var(--naoih-frame));
    margin-inline: auto;
    margin-bottom: var(--naoih-frame-gap);
    border-radius: var(--naoih-card-radius);
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(12,27,44,.16);
}
/* De route zit als vierde blok in dezelfde stack en krijgt dus dezelfde inset. */
body.home .site-sections > .route-section {
    background: var(--sand);
}
/* Eigen kleur per homepage inhoudsblok, allemaal afkomstig uit de Herstel-pagina. */
body.page-home .site-main .info-section {
    background: var(--ice-blue);
    color: var(--dark-blue);
}
body.page-home .site-main .info-section p,
body.page-home .site-main .info-section h2 { color: var(--dark-blue); }
body.page-home .site-sections > .content-section:nth-child(1) {
    --section-bg: var(--soft-blue);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--blue);
    --section-accent: var(--blue);
}
body.page-home .site-sections > .content-section:nth-child(2) {
    --section-bg: var(--dark-blue);
    --section-color: var(--rice);
    --section-heading: var(--honey);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}
body.page-home .site-sections > .content-section:nth-child(3) {
    --section-bg: var(--terra);
    --section-color: var(--jungle);
    --section-heading: var(--jungle);
    --section-eyebrow: var(--blue);
    --section-accent: var(--blue);
}
/* De horizon-foto blijft horizontaal bewegen; rondom blijft strand zichtbaar. */
body.home .horizontal-image-sticky {
    width: calc(100% - 2 * var(--naoih-frame));
    margin-inline: auto;
    border-radius: var(--naoih-card-radius);
}
/* De 13 bestaande linkkaarten blijven exact dezelfde, op een zachte achtergrond. */
body.home .cards-section {
    background: transparent;
    padding: var(--naoih-frame-gap) var(--naoih-frame);
}
body.home .cards-inner {
    max-width: 46rem;
    padding: clamp(20px, 5vw, 40px) clamp(14px, 4vw, 30px);
    border-radius: var(--naoih-card-radius);
    background: var(--rice);
    box-shadow: 0 12px 36px rgba(12,27,44,.13);
}
body.home .walk-promo { background: transparent; padding-inline: var(--naoih-frame); }

/* Video op de vijf andere hoofdpagina's; hero-foto is verwijderd.
   Contentblokken krijgen smalle zichtbare videoranden in plaats van full bleed. */
body.naoih-video-page.subpage .content-section {
    width: calc(100% - 2 * var(--naoih-frame));
    margin-inline: auto;
    margin-block: var(--naoih-frame-gap);
    border-radius: var(--naoih-card-radius);
    overflow: hidden;
}
body.naoih-video-page.subpage .subpage-main {
    background: transparent;
}
body.naoih-video-page.subpage .page-contents-section { background: transparent; }
body.naoih-video-page.subpage .page-contents-card { box-shadow: var(--shadow); }
body.naoih-video-page.subpage .subpage-hero-track::after { opacity: .08; }

/* Zes hoofdpagina's, zes eigen themablokken (kleuren uit Herstel):
   Home = ijsblauw | Meetings = stormblauw | Herstel = zachtblauw
   Helpen = terra | Agenda = zand | Contact = diepblauw. */
body.page-meetings .subpage-main > .info-section {
    background: var(--storm-blue);
    color: var(--offwhite);
}
body.page-meetings .subpage-main > .info-section :is(h2,h3,p,li,strong,a,blockquote) {
    color: var(--offwhite);
}
body.page-herstel .subpage-main > .info-section {
    background: var(--soft-blue);
    color: var(--dark-blue);
}
body.page-herstel .subpage-main > .info-section :is(h2,p,strong) { color: var(--dark-blue); }
body.page-helpen .subpage-main > .info-section:first-of-type {
    background: var(--terra);
    color: var(--dark-blue);
}
body.page-helpen .subpage-main > .info-section:first-of-type :is(h2,p,strong) { color: var(--dark-blue); }
body.page-agenda .subpage-main > .info-section {
    background: var(--sand);
    color: var(--dark-blue);
}
body.page-agenda .subpage-main > .info-section :is(h2,p,strong) { color: var(--dark-blue); }
body.page-contact .slide__content {
    max-width: calc(42rem - 2 * var(--naoih-frame));
    margin: 0 var(--naoih-frame) clamp(20px, 5vw, 36px);
    padding: 1.5rem;
    border-radius: var(--naoih-card-radius);
    background: rgba(32, 58, 90, .90);
    color: var(--offwhite);
}
/* Zorg dat de site-achtergrond overal ook echt zichtbaar is. */
body.page-agenda .calendar-section {
    background: var(--sand);
}

/* FOOTER — over de hele breedte, geen achtergrondkleur, blur of uitsparing.
   De bewegende strandvideo blijft volledig zichtbaar. */
.site-footer {
    position: relative;
    z-index: 15;
    width: 100%;
    margin: 0;
    background: transparent;
}
.footer-bottom {
    width: 100%;
    background: transparent;
    color: var(--blue);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    border-top: 0;
}
/* Ook de oude footer-textuur is weg: volledig transparant. */
.footer-bottom::before,
.footer-bottom::after { content: none; display: none; }
/* De oorspronkelijke witte footerzinnen zouden op het lichte strand wegvallen. */
.footer-bottom .footer-message p { color: var(--blue); }
body.naoih-video-page .recovery-footer-dock { background: transparent; }

@media (min-width: 820px) {
    body.naoih-video-page.subpage .subpage-main > .info-section,
    body.page-contact .slide__content { max-width: 42rem; }
}
@media (prefers-reduced-transparency: reduce) {
    .footer-bottom { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ========================================
   HERO ZONDER TWEEDE AFBEELDING
   De strandvideo blijft zichtbaar achter de bestaande paginatitels.
   Alleen op de zes hoofdpagina's met vaste videolaag.
======================================== */

/* Een ondoorzichtige hero zou de video nog steeds afdekken,
   ook nadat het img-element uit de PHP-pagina is verwijderd. */
body.naoih-video-page.subpage .subpage-hero,
body.naoih-video-page.page-contact .slide {
    background: transparent;
}

/* Decoratieve vogelafbeelding in de lege scrollruimte niet over
   de levende strandachtergrond heen tekenen. */
body.naoih-video-page.subpage .subpage-hero-track::after {
    display: none;
}

/* Geen extra hero-foto of contact-overlay voor de bewegende video. */
body.naoih-video-page.page-contact .slide__overlay {
    display: none;
}

/* Dezelfde donkerblauwe tekst als de homepage, voor kleine regel én titel.
   Geen witte letters, honingkleur of tekstschaduw meer. */
body.naoih-video-page.subpage .subpage-hero .page-kicker,
body.naoih-video-page.subpage .subpage-hero h1,
body.naoih-video-page.page-contact .slide__title,
body.naoih-video-page.page-contact .slide__label {
    color: var(--blue);
    text-shadow: none;
}
/* Contact gebruikt een donkerblauwe kaart: die krijgt een lichte, doorschijnende
   ondergrond, anders wordt de nieuwe blauwe titel onleesbaar. */
body.naoih-video-page.page-contact .slide__content {
    background: rgba(243, 239, 230, .55);
    color: var(--blue);
}
body.naoih-video-page.page-contact .slide__text,
body.naoih-video-page.page-contact .slide__text a { color: var(--blue); }