@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-background-color: #F8F8F8;
    --secondary-background-color: #FFFEFE;

    --primary-text-color: #E9E9E9;
    --secondary-text-color: red;

    --primary-header-color: white;
    --primary-footer-color: #0A2352;

    --header-height: 80px;
    --primary-border-color: #DEDEDE;

    --box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.19);
}

/* Apply the font globally to all elements */
* {
    font-family: 'Instrument Sans', sans-serif; /* Include a fallback font */
}

main {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    min-height: 100vh;
}

/* theme specific styles */
.bg-theme {
    background-color: var(--primary-background-color);
}

.bg-theme-secondary {
    background-color: var(--secondary-background-color);
}

.bg-theme-header {
    background-color: var(--primary-header-color);
}

.bg-theme-border-color {
    border-color: var(--primary-border-color);
}

.bg-theme-footer {
    background-color: var(--primary-footer-color);
}

.theme-shadow {
    box-shadow: var(--box-shadow);
}

.head-font {
    font-family: 'Montserrat', sans-serif;
}

.body-font {
    font-family: 'Instrument Sans', sans-serif;
}

.text-theme-color-primary {
    color: var(--primary-text-color);
}

.text-theme-color-secondary {
    color: var(--secondary-text-color);
}

.animate-object {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-object.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   HEADER SCROLL LOGICA
========================================= */
/* Verander de tekstkleur van de top-level menu items naar zwart als de header gescrold is */
#site-header.is-scrolled #nav > a.text-theme-color-primary,
#site-header.is-scrolled #nav > .dropdown > button.text-theme-color-primary {
    color: #000000;
}

/* =========================================
   HEADER SCROLL LOGICA & SMART CONTRAST (BULLETPROOF)
========================================= */

/* 1. Maak alle hoofdlinks zwart als er gescrold is, of als de pagina geen foto heeft */
#site-header.is-scrolled .text-theme-color-primary,
#site-header.force-dark-text .text-theme-color-primary {
    color: #1f2937 !important;
}

/* 2. Zorg dat de links ín de witte dropdown ALTIJD zwart zijn, onafhankelijk van de rest */
#site-header .dropdown-content .text-theme-color-primary {
    color: #1f2937 !important;
}

/* ============================================================
   Hamburger Icon Dynamic Contrast Sync
============================================================ */

/* Default state: Transparent header over a hero image -> White hamburger lines */
#site-header:not(.force-dark-text):not(.is-scrolled) #hamburger .line {
    background-color: #ffffff;
}

/* Scrolled state or Force Dark Text state -> Dark/Black hamburger lines */
#site-header.force-dark-text #hamburger .line,
#site-header.is-scrolled #hamburger .line {
    background-color: #1f2937; /* Matches gray-800 */
}