/* ---------- Kleuren ---------- */ :root {
    --braand-wit: rgba(255, 255, 255, 1);
    --braand-zwart: rgba(0, 0, 0, 1);
    --braand-lichtblauw: rgba(104, 212, 219, 1); /* #68d4db */
    --braand-donkerblauw: rgba(21, 92, 109, 1); /* #155c6d */
    --braand-rood: rgba(203, 0, 17, 1); /* #cb0011 */
    --braand-rood-2: rgba(203, 0, 17, 1); /* tweede #cb0011 (nog te bepalen) */
    --braand-geel: rgba(232, 185, 35, 1); /* #E8B923 */
    --braand-paneel: rgba(0, 0, 0, 0.6); /* donker vlak achter tekst */
    --nav-hoogte: 4.5rem;
    --bs-primary: var(--braand-rood);
    --bs-primary-rgb: 203, 0, 17;
    --bs-link-color: var(--braand-lichtblauw);
    --bs-link-hover-color: var(--braand-wit);
    --braand-link: #ffb347; /* warm amber, past bij het vuur-thema */
    --braand-link-hover: #ffd08a;
}
/* ---------- Fonts ---------- */
@font-face {
    font-family: "MarketDeco";
    src: url("../fonts/MarketDeco.woff2") format("woff2"), url("../fonts/MarketDeco.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-hoogte);
}
body {
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    color: var(--braand-wit);
    background-color: var(--braand-zwart);
    position: relative;
    min-height: 100vh;
}
/* Paginavullende achtergrond zonder vervorming (werkt ook op mobiel) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../images/braand_background.jpg") center center / cover no-repeat;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "MarketDeco", Georgia, serif;
    font-weight: normal; /* voorkomt nep-vet bij een font met 1 gewicht */
    color: var(--braand-lichtblauw);
}
/* Alle links in de rijen, behalve knoppen (.btn), navbar-links (.nav-link) en de footer-iconen (.footer-icons): :not() sluit die uit */
.braand-row a:not(.btn):not(.nav-link):not(.footer-icons) {
  color: var(--braand-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s, text-decoration-color .2s;
}

.braand-row a:not(.btn):not(.nav-link):not(.footer-icons):hover,
.braand-row a:not(.btn):not(.nav-link):not(.footer-icons):focus-visible {
  color: var(--braand-link-hover);
  text-decoration-thickness: 2px;
}
/* ---------- Kop met lijnen links en rechts ---------- */
.kop-lijnen {
    --kop-kleur: var(--braand-lichtblauw);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    text-transform: uppercase;
    color: var(--kop-kleur);
    margin-top: .5em;
    margin-bottom: 1em;
}
.kop-lijnen::before, .kop-lijnen::after {
    content: "";
    flex: 0 1 1.7em; /* lengte van de lijn; krimpt op smalle schermen */
    min-width: .5em;
    height: .1em; /* dikte van de lijn */
    background: currentColor; /* zelfde kleur als de tekst */
}
/* Bold en italic */
b, strong {
    font-weight: 700;
}
i, em {
    font-style: italic;
}
a {
    text-underline-offset: 0.2em;
}
.textBlue {
    color: var(--braand-lichtblauw);
}
.textDarkBlue {
    color: var(--braand-donkerblauw);
}
.extrasmall {
    font-size: 0.6rem;
}
.btn-primary {
    --bs-btn-bg: var(--braand-geel);
    --bs-btn-border-color: var(--braand-geel);
    --bs-btn-hover-bg: var(--braand-geel);
    --bs-btn-hover-border-color: var(--braand-geel);
    --bs-btn-active-bg: var(--braand-geel);
    --bs-btn-active-border-color: var(--braand-geel);
    --bs-btn-disabled-bg: var(--braand-geel);
    --bs-btn-disabled-border-color: var(--braand-geel);
    --bs-btn-color: #000;
}
/* ---------- Navigatie ---------- */
.braand-nav {
    background: var(--braand-paneel);
    backdrop-filter: blur(6px);
    min-height: var(--nav-hoogte);
}
.braand-nav .navbar-brand {
    font-family: "MarketDeco", Georgia, serif;
    font-size: 1.8rem;
    color: var(--braand-wit);
    display: flex;
    align-items: center;
}
.braand-nav .navbar-brand img {
    max-height: 30px;
    display: block;
}
.braand-nav .nav-link {
    position: relative;
    color: var(--braand-wit);
    font-weight: 400;
    transition: color .3s ease;
}
.braand-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .25rem;
    height: 2px;
    background: var(--braand-rood);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.braand-nav .nav-link:hover, .braand-nav .nav-link.active {
    color: var(--braand-lichtblauw);
}
.braand-nav .nav-link:hover::after, .braand-nav .nav-link.active::after {
    transform: scaleX(1);
}
/* ---------- Inhoud ---------- */
.braand-main {
    position: relative;
    z-index: 1; /* inhoud ligt boven de onderkant van de hero, dus links blijven klikbaar */
    margin-top: calc(var(--stage-w) * 1660 / 1200 * (var(--wagen-onder) - 1));
    padding-top: 1rem;
}
.braand-row {
    padding: 2.5rem 1rem;
    margin-bottom: 2rem;
    background: var(--braand-paneel);
    border-left: 4px solid var(--braand-rood);
    border-radius: .5rem;
}
.braand-row h1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
}
/* Verschijn-animatie */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s ease;
}
.is-scrolled .reveal.is-visible {
    opacity: 1;
    transform: none;
    /* laat hier je transition-regel staan als die er al in staat */
}
.Titelimage-M {
    max-width: 60%;
}
/* ---------- Quotes tussen de intro-tekst ---------- */
.braand-quote {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.6rem 0 0;
    max-width: min(30rem, 92%);
}
.braand-quote p {
    margin: 0;
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
}
.braand-quote strong {
    font-style: normal;
    font-weight: 700;
}
.braand-quote footer {
    margin-top: .5rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--braand-lichtblauw);
}
.braand-quote footer::before {
    content: "— ";
}
/* Eerste quote links, tweede rechts */
.braand-quote--links {
    margin-right: auto;
}
.braand-quote--rechts {
    margin-left: auto;
    text-align: right;
}
/* ---------- Speellijst ---------- */
.speellijst {
    --bs-table-bg: transparent;
    --bs-table-color: var(--braand-wit);
    --bs-table-border-color: rgba(255, 255, 255, .25);
}
.speellijst th {
    color: var(--braand-lichtblauw);
    font-weight: 600;
}
.speellijst tr.uitverkocht td {
    opacity: .55;
}
.speellijst tr.uitverkocht td:last-child {
    text-decoration: none;
    opacity: 1;
}
.speellijst .locatie-volgt {
    font-style: italic;
    opacity: .7;
}
.kaartverkoop-melding {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .5rem 1rem;
    border-left: 4px solid var(--braand-rood);
    background: rgba(0, 0, 0, .35);
    font-weight: 600;
}
/* Speellijst op smalle schermen:
   rij 1: plaats - datum - tijd
   rij 2: theater - kaarten */
@media (max-width: 767.98px) {
    .speellijst, .speellijst tbody {
        display: block;
    }
    /* Kopregel visueel verbergen, maar wel beschikbaar voor schermlezers */
    .speellijst thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .speellijst tr {
        display: grid;
        grid-template-columns: auto auto 1fr; /* plaats, datum en tijd sluiten op elkaar aan */
        column-gap: .6rem;
        row-gap: .5rem;
        align-items: baseline;
        padding: 1rem 0;
        border-bottom: 1px solid var(--bs-table-border-color);
    }
    .speellijst tr:last-child {
        border-bottom: 0;
    }
    .speellijst td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none; /* Bootstrap tekent de celkleur met een box-shadow */
    }
    .speellijst td:nth-child(1) {
        font-weight: 600;
        font-size: 1.1rem;
    } /* plaats */
    .speellijst td:nth-child(2), .speellijst td:nth-child(3) {
        text-align: left;
    } /* datum en tijd */
    .speellijst td:nth-child(4) {
        grid-column: 1 / 3;
    } /* theater */
    .speellijst td:nth-child(5) {
        grid-column: 3;
        justify-self: end;
        align-self: center;
    } /* kaarten */
    .speellijst td:nth-child(4):last-child {
        grid-column: 1 / -1;
    }
}
/* ---------- "Break glass"-knop ---------- */
/* Maakt het soepel uitfaden van de beweging mogelijk als je de muis op de knop zet */
@property --breek-wip {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.35;
}
.breek-knop {
    --breek-kleur: var(--braand-wit, #fff);
    --breek-gap: .9em; /* ruimte tussen pijl en stip in rust */
    --breek-stip: 2em; /* doorsnede van de stip */
    --breek-sluit: calc(var(--breek-gap) - .12em); /* hoever de pijlen gaan bij hover/klik */
    --breek-wip: .35; /* hoever de pijlen in rust heen en weer gaan (in em) */
    display: inline-grid;
    justify-items: center;
    gap: .35em;
    padding: .5em .8em;
    font-family: "Readex Pro", system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    color: var(--breek-kleur);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: --breek-wip .25s ease;
}
.breek-knop:hover {
    color: var(--breek-kleur);
}
.breek-knop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: .15em;
    border-radius: .3em;
}
.breek-knop__boven {
    font-size: 2.1em;
    letter-spacing: .02em;
}
.breek-knop__onder {
    font-size: 1.15em;
    letter-spacing: .04em;
}
.breek-knop__midden {
    display: flex;
    align-items: center;
    gap: var(--breek-gap);
}
.breek-knop__stip {
    display: block;
    width: var(--breek-stip);
    height: var(--breek-stip);
    border-radius: 50%;
    background: currentColor;
}
/* Pijlen: de buitenste laag doet de beweging naar de stip, de svg de rustige heen-en-weer-beweging */
.breek-pijl {
    display: block;
    transition: transform .25s cubic-bezier(.3, .7, .3, 1);
}
.breek-pijl svg {
    display: block;
    width: 3.2em;
    height: auto;
    fill: currentColor;
    animation: breek-wip 1.5s ease-in-out infinite;
}
.breek-pijl--links {
    --breek-richting: 1;
} /* beweegt naar rechts, richting de stip */
.breek-pijl--rechts {
    --breek-richting: -1;
} /* beweegt naar links, richting de stip */
@keyframes breek-wip {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(calc(var(--breek-wip) * var(--breek-richting) * 1em));
    }
}
/* Hover, klik of toetsenbordfocus: pijlen helemaal naar de stip */
.breek-knop:hover, .breek-knop:focus-visible, .breek-knop:active {
    --breek-wip: 0;
}
.breek-knop:hover .breek-pijl--links, .breek-knop:focus-visible .breek-pijl--links, .breek-knop:active .breek-pijl--links {
    transform: translateX(var(--breek-sluit));
}
.breek-knop:hover .breek-pijl--rechts, .breek-knop:focus-visible .breek-pijl--rechts, .breek-knop:active .breek-pijl--rechts {
    transform: translateX(calc(var(--breek-sluit) * -1));
}
@media (prefers-reduced-motion: reduce) {
    .breek-pijl svg {
        animation: none;
    }
    .breek-knop, .breek-pijl {
        transition: none;
    }
}
/* ---------- Definition lists ---------- */
/* FAQ */
.faq-dl dt {
    font-weight: 600;
    color: var(--braand-lichtblauw);
}
.faq-dl dd {
    margin-bottom: 1rem;
}
/* Cast en Crew, basis (ook voor Bestuur) */
.cast-dl dt {
    font-weight: 600;
    color: var(--braand-lichtblauw);
    margin-bottom: .1rem;
}
.cast-dl dd {
    margin-bottom: 1.1rem;
}
/* Cast en Crew, drie kolommen: gecentreerd, functie in paginafont, naam in kopfont */
#cast-crew .row .cast-dl {
    text-align: center;
}
#cast-crew .row .cast-dl dt {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .02em;
}
#cast-crew .row .cast-dl dd {
    font-family: 'MarketDeco', serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
/* Bestuur: gecentreerd in drie kolommen, rustiger dan de cast & crew */
#cast-crew h3 {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .7;
}
.cast-dl-bestuur {
    text-align: center;
    opacity: .85;
}
.cast-dl-bestuur dt {
    font-size: .85rem;
    font-weight: 400;
    margin-bottom: 0;
}
.cast-dl-bestuur dd {
    font-size: 1rem;
    margin-bottom: .6rem;
}
@media (min-width: 768px) {
    .cast-dl-bestuur {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        grid-auto-flow: column;
    }
    .cast-dl-bestuur dd {
        margin-bottom: 0;
    }
}
/* ---------------SPONSOR LOGOS----------------- */
.logo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    align-items: flex-end; /* Align logos at the bottom */
    gap: 20px; /* Space between logos */
    padding: var(--default-spacing);
}
.logo-container img {
    flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, base width: 100px */
    min-width: 120px;
    max-width: 20%;
    max-height: 120px;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain;
}
/* ---------- Footer ---------- */
.braand-footer {
    padding: 2rem 0 calc(var(--stage-w) * 0.36);
} /* ruimte zodat de laatste rij boven de brandweerman uitkomt */
/* Footer: iconen in het midden, copyright rechts, op één regel */
.footer-rij {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.footer-rij .footer-icons {
    grid-column: 2;
}
.footer-rij .footer-copy {
    grid-column: 3;
    justify-self: end;
    margin: 0;
    text-align: right;
}
/* De link ziet eruit als de tekst eromheen */
.footer-copy a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}
.footer-copy a:hover, .footer-copy a:focus-visible {
    color: var(--braand-lichtblauw);
    text-decoration: underline;
    text-underline-offset: .2em;
}
/* Smal scherm: onder elkaar, gecentreerd */
@media (max-width: 767.98px) {
    .footer-rij {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .footer-rij .footer-icons, .footer-rij .footer-copy {
        grid-column: 1;
        justify-self: center;
        text-align: center;
    }
}
/* Social media icons */
.footer-icons, .nav-icons {
    display: flex;
    gap: 10px;
}
.footer-icons a, .nav-icons a {
    text-decoration: none;
    display: inline-flex; /* Ensures proper scaling */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out; /* Smooth effect */
}
/* Icons should be slightly larger */
.footer-icons i, .nav-icons i {
    font-size: 1rem; /* Adjust the icon size */
}
/* Scale entire anchor (instead of just the <i>) */
.footer-icons a:hover, .nav-icons a:hover {
    transform: scale(1.3); /* Enlarges the link and icon */
}
/* Icons in de navigatie */
.nav-icons {
    align-items: center;
    gap: .25rem;
    padding-bottom: .5rem; /* mobiel: ruimte onder de iconen in het uitgeklapte menu */
}
.nav-icons a {
    padding: .5rem; /* zelfde ritme en klikvlak als de menu-links */
    color: var(--braand-wit);
    transition: transform .3s ease-in-out, color .3s ease;
}
.nav-icons a:hover {
    color: var(--braand-lichtblauw);
}
.nav-icons i {
    font-size: 1.25rem;
}
@media (min-width: 992px) {
    .braand-nav .navbar-collapse {
        justify-content: flex-end;
    } /* alles rechts */
    .braand-nav #navList {
        margin-left: auto;
    } /* de links blijven rechts */
    .nav-icons {
        flex: 0 0 auto;
        margin-left: 1rem !important; /* ruimte tussen de laatste link en de icons */
        margin-right: -.5rem; /* icoon sluit aan op de rechterrand */
        padding-bottom: 0;
    }
}
/* ---------- Hero met losse lagen ---------- */ :root {
    --hoogte: 100vh;
    --stage-max: 1320px; /* maximale breedte, gelijk aan de Bootstrap-container */
}
@supports (height: 100svh) {
    :root {
        --hoogte: 100svh;
    }
}
/* Breedte van alle lagen: niet breder dan het scherm of de container,
   en niet zo breed dat de afbeelding hoger wordt dan het scherm (1200 x 1660) */ :root {
    --stage-w: min(100%, var(--stage-max), calc((var(--hoogte) - var(--nav-hoogte)) * 1200 / 1660));
}
.braand-hero {
    position: relative;
    padding-top: var(--nav-hoogte); /* ruimte voor de vaste navbar */
}
.braand-stage {
    position: relative;
    isolation: isolate;
    width: var(--stage-w);
    aspect-ratio: 1200 / 1660;
    margin: 0 auto;
}
.layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}
/* Stapelvolgorde (onderaan naar bovenaan) */
.layer-wagen {
    z-index: 0;
}
.layer-gloed {
    z-index: 1;
}
.layer-confetti-onder {
    z-index: 2;
}
.braand-titel {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 3;
}
.layer-confetti-boven {
    z-index: 4;
}
/* Brandweerman: blijft onderaan het scherm staan, boven alle inhoud */
.braand-voorgrond {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: var(--stage-w);
    aspect-ratio: 1200 / 1660;
    transform: translateX(-50%);
    z-index: 1020; /* net onder de navbar (1030) */
    pointer-events: none;
}
.layer-gloed {
    transform-origin: 72% 73%; /* de spuitmond */
    will-change: opacity, transform;
}
/* Later voor de confetti: spuitpunt (hoseopening) ligt op ca. 72% / 73% van de laag */
/* ---------- Beweging beperken indien gewenst ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }
}