@charset "utf-8";
/* ================================================================
   NAOIH – vaste stijlen: DE HULK, SPIDERMAN en IRONMAN
   Een blok is altijd één volwaardige kaart op buitenblok-formaat.
   Geen beige omhulsel en geen onnodig extra wit binnenkaartje.
   Gebruik class="naoih-block--hulk", "naoih-block--spiderman"
   of "naoih-block--ironman".
   Dit bestand wordt NA naoih-design-update.css geladen.
   ================================================================ */

:root {
    --naoih-hulk-background: var(--offwhite); /* #FCFAF6 */
    --naoih-block-title: var(--blue);          /* #203A5A */
    --naoih-block-eyebrow: var(--honey);       /* #D39858 */
    --naoih-spiderman-blur: 14px;
}

/* Gedeelde afmetingen, typografie en kaartvorm. */
body.naoih-video-page :is(.naoih-block--hulk, .naoih-block--spiderman) {
    color: var(--naoih-block-title);
    border: var(--border);
    border-radius: var(--naoih-card-radius, 24px);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
body.naoih-video-page :is(.naoih-block--hulk, .naoih-block--spiderman) :is(h1, h2, h3, h4, p, li, strong, a) {
    color: var(--naoih-block-title);
    text-shadow: none;
}
body.naoih-video-page :is(.naoih-block--hulk, .naoih-block--spiderman) :is(.eyebrow, .service-label, .page-contents-title, .page-index-title) {
    color: var(--naoih-block-eyebrow);
    text-shadow: none;
}

/* DE HULK: uitsluitend de warme, gebroken-witte binnenkaartkleur,
   nu over de HELE voormalige buitenkaart. */
body.naoih-video-page .naoih-block--hulk {
    background: var(--naoih-hulk-background);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* SPIDERMAN: dezelfde maat/vorm als Hulk maar GEEN achtergrondkleur;
   de strandvideo blijft zichtbaar en de ruimte ACHTER de kaart vervaagt. */
body.naoih-video-page .naoih-block--spiderman {
    background: transparent;
    -webkit-backdrop-filter: blur(var(--naoih-spiderman-blur));
    backdrop-filter: blur(var(--naoih-spiderman-blur));
}

/* De oude eigen accentkleuren van de eerste informatieblokken
   mogen de Hulk-stijl niet overschrijven. */
body.page-home .site-main > .info-section.naoih-block--hulk,
body.naoih-video-page.subpage .subpage-main > .info-section.naoih-block--hulk {
    background: var(--naoih-hulk-background);
    color: var(--naoih-block-title);
}

/* Helpen: eyebrow binnen de eerste Hulk in dezelfde typografie als de
   andere NAOIH-eyebrows, zonder wijzigingen aan de lopende tekst. */
body.page-helpen #dienstbaarheid.naoih-block--hulk > .eyebrow {
    margin: 0 0 1rem;
    color: var(--naoih-block-eyebrow);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Helpen: het VOLLEDIGE 'Op deze pagina'-blok wordt Spiderman.
   De bestaande witte binnenkaart verdwijnt, zodat de vaste MP4 zichtbaar
   blijft door de transparante kaart met backdrop blur. */
body.page-helpen .service-index-section.naoih-block--spiderman {
    width: calc(100% - 2 * var(--naoih-frame));
    max-width: 42rem;
    margin-inline: auto;
    padding: clamp(24px, 5vw, 36px);
    overflow: hidden;
}
body.page-helpen .service-index-section.naoih-block--spiderman > .page-index {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


/* IRONMAN: beige buitenvlak met lichtere, vlakke taakkaartjes.
   De kleine kaarten (o.a. Koffie en thee verzorgen) hebben GEEN schaduw.
   De stijl is herbruikbaar: voeg naoih-block--ironman toe aan een
   service-section met .service-role-list erin. */
body.naoih-video-page .naoih-block--ironman {
    --section-bg: var(--rock);
    --section-color: var(--blue);
    --section-heading: var(--dark-blue);
    background: var(--rock);
    color: var(--blue);
    border: var(--border);
    border-radius: var(--naoih-card-radius, 24px);
    box-shadow: none;
    min-height: auto;
    padding: clamp(30px, 6vw, 56px) clamp(20px, 5vw, 44px);
}
body.naoih-video-page .naoih-block--ironman > .service-inner {
    width: 100%;
    max-width: 42rem;
    padding: 0;
}
body.naoih-video-page .naoih-block--ironman .service-role-list li {
    background: var(--offwhite);
    color: var(--blue);
    border: 1px solid rgba(32, 58, 90, .06);
    box-shadow: none;
}

/* Openstaande posities: een eigen, afzonderlijke blauwe kaart.
   Geen onderdeel van Ironman, geen extra geneste kaartlaag.
   De bestaande PHP-lijst met automatisch berekende vacatures blijft. */
body.page-helpen .service-open-positions-section {
    --section-bg: var(--blue);
    --section-color: var(--offwhite);
    --section-heading: var(--offwhite);
    background: var(--blue);
    color: var(--offwhite);
    border-radius: var(--naoih-card-radius, 24px);
    min-height: auto;
    padding: clamp(28px, 6vw, 52px) clamp(20px, 5vw, 44px);
}
body.page-helpen .service-open-positions-section > .service-inner {
    width: 100%;
    max-width: 42rem;
    padding: 0;
}
body.page-helpen .service-open-positions-section .service-open {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--offwhite);
    box-shadow: none;
}
body.page-helpen .service-open-positions-section .service-open :is(h3, p, strong) {
    color: var(--offwhite);
}
body.page-helpen .service-open-positions-section .service-label,
body.page-helpen .service-open-positions-section .service-vacancy-list span {
    color: var(--honey);
}

/* Meetings: het inhoudsoverzicht is direct na de header het eerste blok. */
body.page-meetings .page-contents-card.naoih-block--hulk {
    background: var(--naoih-hulk-background);
}

/* Rotatie: maak de oude witte binnenkaart één met het voormalige beige
   buitenblok. Geen dubbele kaart, marge of extra schaduw. */
body.page-helpen #rotatie.naoih-block--hulk {
    --section-bg: var(--naoih-hulk-background);
    --section-color: var(--naoih-block-title);
    --section-heading: var(--naoih-block-title);
    --section-eyebrow: var(--naoih-block-eyebrow);
    background: var(--naoih-hulk-background);
    min-height: auto;
    padding: clamp(28px, 6vw, 52px) clamp(20px, 5vw, 44px);
}
body.page-helpen #rotatie.naoih-block--hulk > .service-inner {
    width: 100%;
    max-width: 42rem;
    padding: 0;
}
body.page-helpen #rotatie.naoih-block--hulk .service-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Contact: de normale hero staat boven de eerste Hulk kaart. */
body.page-contact .subpage-main {
    padding-top: var(--naoih-frame-gap, 20px);
}
body.page-contact .subpage-main > .naoih-block--hulk a {
    text-underline-offset: .2em;
}

/* Footer: videobeeld scherp houden, dus ook geen onzichtbare
   gekleurde laag of backdrop-blur meer achter de footer. */
body.naoih-video-page .footer-bottom {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
    body.naoih-video-page .naoih-block--spiderman {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* Alleen in expliciete toegankelijkheidsmodus als vangnet. */
        background: var(--naoih-hulk-background);
    }
}

/* 18 oktober — SPIDERMAN is nu hetzelfde getinte glas als de sticky balk:
   zachte zandbeige tint, transparantie en subtiele vervaging. */
body.naoih-video-page .naoih-block--spiderman {
    background: rgba(234, 206, 170, .62);
    -webkit-backdrop-filter: blur(var(--naoih-spiderman-blur, 14px));
    backdrop-filter: blur(var(--naoih-spiderman-blur, 14px));
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .46);
}
/* Helpen: de links vormen één lijst; iedere titel krijgt een gouden punt
   in dezelfde kleur als OP DEZE PAGINA. */
body.page-helpen .service-index-section.naoih-block--spiderman .page-index a {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: .85rem;
}
body.page-helpen .service-index-section.naoih-block--spiderman .page-index a::before {
    content: "";
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    background-color: var(--naoih-block-eyebrow, var(--honey));
    border-radius: 50%;
    transform: translateY(-1px);
}
@media (prefers-reduced-transparency: reduce) {
    body.naoih-video-page .naoih-block--spiderman {
        background: var(--sand);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}