@charset "utf-8";
/* ============================================================
   NAOIH | Sierlijn, licht zandgetinte sticky kop, rustige footer
   Alleen presentatie: alle bestaande content en animaties blijven.
   ============================================================ */

/* De Spiderman-balk krijgt een fijne, doorlopende onderlijn.
   Het lijntje verschijnt en verdwijnt samen met de bestaande scrollfade. */
body.naoih-video-page > .naoih-sticky-title-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: .65rem;
    box-sizing: border-box;
}
body.naoih-video-page > .naoih-sticky-title-bar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(32, 58, 90, .35) 14%,
        rgba(211, 152, 88, .9) 50%,
        rgba(32, 58, 90, .35) 86%,
        transparent 100%);
    pointer-events: none;
}
body.naoih-video-page > .naoih-sticky-title-bar::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 5px;
    height: 5px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid rgba(211, 152, 88, .85);
    background: var(--offwhite);
    box-sizing: border-box;
    pointer-events: none;
}
.naoih-sticky-title-bar__inner {
    min-width: 0;
    flex: 0 1 auto;
}
/* Een heel lichte zandkleur als frosted-glass-achtergrond bij de
   vastgezette header. De video blijft door de laag zichtbaar, maar
   donkerblauwe titel en kicker blijven ook boven donkere content leesbaar. */
body.naoih-video-page > .naoih-sticky-title-bar.is-active {
    background-color: rgba(234, 206, 170, .62); /* --sand #EACEAA */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Footer: bewegende video blijft volledig zichtbaar achter de tekst.
   Grotere regelmaat en donkerblauwe letters voor goede leesbaarheid. */
body.naoih-video-page .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 5vw, 2.2rem);
    /* Op het einde van de pagina vult de footer een heel scherm.
       Zo blijft de boodschap centraal in beeld, met het NA-logo daaronder. */
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    padding: clamp(3rem, 8svh, 5rem) 20px clamp(5.5rem, 12svh, 7rem);
    background: transparent;
    color: var(--dark-blue);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.naoih-video-page .footer-bottom .footer-message {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}
body.naoih-video-page .footer-bottom .footer-message p,
body.naoih-video-page .footer-bottom .footer-daily-link p span {
    color: var(--dark-blue);
    text-shadow: none;
}
body.naoih-video-page .footer-bottom .footer-message p {
    font-size: clamp(1.04rem, 3.9vw, 1.25rem);
    line-height: 1.8;
    font-weight: 500;
    letter-spacing: .005em;
}
body.naoih-video-page .footer-bottom .footer-daily-link p span {
    font-weight: 700;
    text-decoration-color: var(--honey);
}

/* NA-logo onder de tekst, exact in het midden; niet langer rechts zwevend. */
body.naoih-video-page .footer-bottom .footer-na-logo-link {
    position: absolute;
    left: 50%;
    bottom: clamp(1.75rem, 5svh, 3.5rem);
    display: block;
    width: clamp(3rem, 10vw, 3.6rem);
    margin: 0;
    flex: 0 0 auto;
    opacity: 1;
    transform: translateX(-50%);
}
body.naoih-video-page .footer-bottom .footer-na-logo-link:active {
    transform: translateX(-50%) scale(.96);
}
body.naoih-video-page .footer-bottom .footer-na-logo {
    display: block;
    width: 100%;
    height: auto;
    /* Het originele logo is vrijwel wit en zou wegvallen op het strand. */
    filter: brightness(0) saturate(100%) invert(13%) sepia(19%)
            saturate(1443%) hue-rotate(175deg) brightness(87%) contrast(92%);
}

/* Geen ingrijpende wijziging voor de buitenliggende herstel-subpagina's. */
@media (prefers-reduced-transparency: reduce) {
    body.naoih-video-page > .naoih-sticky-title-bar::before {
        background: var(--offwhite);
    }
}

/* Op aanvullende informatiepagina's, zonder strandvideo, blijft de
   bestaande donkere footer leesbaar maar krijgt ook de grotere tekst
   en een werkelijk gecentreerd NA-logo onderaan. */
body:not(.naoih-video-page) .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    padding-bottom: 3rem;
}
body:not(.naoih-video-page) .footer-bottom .footer-message p {
    font-size: clamp(1.04rem, 3.9vw, 1.25rem);
    line-height: 1.8;
    color: var(--offwhite);
}
body:not(.naoih-video-page) .footer-bottom .footer-na-logo-link {
    position: static;
    display: block;
    width: clamp(3rem, 10vw, 3.6rem);
    margin: 0 auto;
    opacity: 1;
}


/* Footer: gouden onderstreping onder “Alleen voor vandaag.”
   identiek aan de lijnen bij het hartje erboven, met extra ademruimte. */
.footer-bottom .footer-daily-link p span {
    display: inline-block;
    border-bottom: 1px solid var(--honey, #D39858);
    padding-bottom: .27em;
    text-decoration: none;
}