@charset "utf-8";
/* NAOIH | 18 oktober 2026 — alleen Home-titel, leeslijn en footer.
   CANON: de piramide-stacking kaarten en hun beweging NIET wijzigen. */

/* De originele grote hometitel vloeit over naar dezelfde links uitgelijnde
   Spiderman-balk als op de andere hoofdpagina's. */
body.page-home .naoih-home-fixed-title {
    z-index: 1200;
    height: clamp(58px, 7.7svh, 70px);
    padding: 9px var(--page-padding, 20px) 11px;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    text-align: left;
    border-bottom: 1px solid rgba(211, 152, 88, .60);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s;
}
body.page-home .naoih-home-fixed-title__text,
body.page-home .naoih-home-fixed-title__subtext {
    display: block;
    width: max-content;
    max-width: 100%;
    transform: translateX(var(--naoih-home-title-shift, 0px)) scale(var(--naoih-home-title-scale, 1));
    transform-origin: left center;
    will-change: transform;
}
body.page-home .naoih-home-fixed-title__text {
    font-size: clamp(1.42rem, 6vw, 1.9rem);
    line-height: 1.05;
}
body.page-home .naoih-home-fixed-title__subtext {
    font-size: clamp(.60rem, 2.35vw, .75rem);
    line-height: 1.2;
}
body.page-home.is-home-title-transitioning .naoih-home-fixed-title,
body.page-home.is-home-sticky-active .naoih-home-fixed-title {
    visibility: visible;
    opacity: var(--naoih-home-sticky-opacity, 1);
}
/* De normale hero-kop dooft geleidelijk tijdens de overdracht.
   Overschrijft alleen de oude abrupte 'opacity:0' na het logo. */
body.page-home #homeHero .hero-copy,
body.page-home.is-home-sticky-active #homeHero .hero-copy {
    opacity: var(--naoih-home-original-opacity, 1);
}

/* De decoratieve witte ruit/bal verdwijnt onder iedere sticky kop. */
body.page-home .naoih-home-fixed-title::after,
body.naoih-video-page > .naoih-sticky-title-bar::before {
    content: none;
    display: none;
}

/* Zichtbare goudkleurige leesvoortgang: exact 5px. */
.naoih-reading-progress {
    height: 5px;
    background: rgba(32,58,90,.23);
}
.naoih-reading-progress__fill {
    background: linear-gradient(90deg, #B97438, #D39858 68%, #E1AE73);
}

/* Het juiste NAOIH-logo centraal, iets groter, met het credit eronder. */
body.naoih-video-page .footer-bottom .footer-na-logo-link {
    left: 50%;
    right: auto;
    bottom: clamp(5.4rem, 11svh, 7.5rem);
    width: clamp(5rem, 21vw, 6.7rem);
    transform: translateX(-50%);
}
body.naoih-video-page .footer-bottom .footer-na-logo-link:active {
    transform: translateX(-50%) scale(.96);
}
body .footer-bottom .footer-na-logo {
    filter: none !important;
}
body .footer-bottom .footer-verbazer-credit {
    left: 50%;
    right: auto;
    bottom: 4px; /* VERBAZER lager, NAOIH-logo blijft exact op zijn plek. */
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    color: var(--blue, #203A5A);
    font-size: clamp(.77rem, 2.9vw, .9rem);
}
body:not(.naoih-video-page) .footer-bottom .footer-na-logo-link {
    position: static;
    width: clamp(5rem, 21vw, 6.7rem);
    transform: none;
}
body:not(.naoih-video-page) .footer-bottom .footer-verbazer-credit {
    position: static;
    display: block;
    transform: none;
    color: var(--offwhite, #FCFAF6);
    margin: -.8rem auto 0;
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .naoih-home-fixed-title__text,
    body.page-home .naoih-home-fixed-title__subtext { will-change: auto; }
}

/* -----------------------------------------------------------
   19 okt — uitsluitend de home-header, leesregel en footer.
   De canonieke piramide-stack blijft exact ongewijzigd.
   ----------------------------------------------------------- */

/* Geen optische top-verschuiving: de Spiderman-balk geeft nu echte
   10px padding boven de titel en 10px onder de volledige titelgroep. */
body.page-home.is-home-sticky-active .naoih-home-fixed-title > .hero-copy {
    position: relative;
    top: 0;
}

/* Alleen de slotzin in Playfair groter; de overige regels blijven Inter. */
body .footer-bottom .footer-daily-link p span {
    font-family: var(--font-heading, "Playfair Display", serif);
    font-size: clamp(1.28rem, 5.3vw, 1.7rem);
    line-height: 1.35;
}

/* 36px EXTRA ruimte NA de bestaande footer: VERBAZER kan nu lager
   liggen zonder door de footer afgesneden te worden. Het NAOIH-logo
   krijgt gelijke compensatie en behoudt daardoor zijn zichtbare plek. */
body.naoih-video-page .footer-bottom {
    min-height: calc(100svh + 36px);
    padding-bottom: calc(clamp(5.5rem, 12svh, 7rem) + 36px);
}
body.naoih-video-page .footer-bottom .footer-na-logo-link {
    bottom: calc(clamp(5.4rem, 11svh, 7.5rem) + 36px);
}
body.naoih-video-page .footer-bottom .footer-verbazer-credit {
    bottom: 4px;
}

/* De voortgangslijn wordt IN de sticky header gezet: exact daaronder.
   Geen afhankelijkheid meer van de plaats van het footer-element. */
.naoih-home-fixed-title > .naoih-reading-progress,
.naoih-sticky-title-bar > .naoih-reading-progress {
    position: absolute;
    top: 100%;
    bottom: auto;
    width: 100%;
    height: 5px;
    pointer-events: none;
}