/* TTV Otio Design System - Foundation Variables
   Structure: [Color]-[Weight]
*/

:root {
    /* --- BLUE (Primary) --- */
    --blue-300: #5D7B91;
    --blue-500: #3F5E73; /* Base Petroleum Blue */
    --blue-700: #2D4454;
    --blue-900: #1A262F;

    /* --- RED (Accent) --- */
    --red-300: #EA706C;
    --red-500: #E0443F; /* Base Barn Red */
    --red-700: #B33632;

    /* --- GREEN (Forest) --- */
    --green-300: #3A7361;
    --green-500: #1B4D3E; /* Base Deep Forest */
    --green-700: #0F2E25;

    /* --- MINT (CTA) --- */
    --mint-300: #86FFD9;
    --mint-500: #48FFC5; /* Base Vibrant Mint */
    --mint-700: #00D194;

    /* --- SAND (Neutral Background) --- */
    --sand-100: #FDF5E6;
    --sand-500: #FBEACE; /* Base Retro Sand */
    --sand-700: #EBDCBE;

    /* --- GRAY (Text & UI) --- */
    --gray-300: #8C98A4;
    --gray-500: #51596C; /* Base Neutral Gray */
    --gray-700: #2D374B;

    /* --- SEMANTIC MAPPING (Optioneel, handig voor overzicht) --- */
    
    --accent: var(--red-500);
    --bg-page: var(--sand-500);
    --text-main: var(--gray-500);
    --text-heading: var(--gray-700);
    --cta: var(--mint-500);


    --bs-primary: var(--red-500);    /* Jouw Barn Red wordt de hoofdkleur */
    --bs-secondary: var(--green-500);  /* Jouw Petroleum Blue */
    --bs-success: var(--green-500);   /* Jouw Deep Forest */
    --bs-info: var(--blue-500);
    --bs-warning: #f39568; 
    --bs-danger: var(--red-500);
    --bs-light: var(--sand-500);
    --bs-dark: var(--gray-900);

  
    --bs-body-bg: var(--sand-500);    /* De achtergrond van je hele site */
    --bs-body-color: var(--gray-500); /* De standaard tekstkleur */
    --bs-link-color: var(--red-500);
    --bs-link-hover-color: var(--blue-500);

    --header-bg: var(--blue-900);
  
    --bs-body-font-family: 'Jost', sans-serif;
  
    --bs-primary-rgb: 224, 68, 63;
    --bs-secondary-rgb: 63, 94, 115;
    --bs-body-bg-rgb: 251, 234, 206;

}

/* ==========================================================================
   OTIO UTILITY CLASSES (Backgrounds & Text)
   ========================================================================== */

/* --- Backgrounds --- */
.bg-otio-blue-300 { background-color: var(--blue-300) !important; }
.bg-otio-blue-500 { background-color: var(--blue-500) !important; }
.bg-otio-blue-700 { background-color: var(--blue-700) !important; }
.bg-otio-blue-900 { background-color: var(--blue-900) !important; }

.bg-otio-red-300  { background-color: var(--red-300) !important; }
.bg-otio-red-500  { background-color: var(--red-500) !important; }
.bg-otio-red-700  { background-color: var(--red-700) !important; }

.bg-otio-green-300 { background-color: var(--green-300) !important; }
.bg-otio-green-500 { background-color: var(--green-500) !important; }
.bg-otio-green-700 { background-color: var(--green-700) !important; }

.bg-otio-mint-300  { background-color: var(--mint-300) !important; }
.bg-otio-mint-500  { background-color: var(--mint-500) !important; }
.bg-otio-mint-700  { background-color: var(--mint-700) !important; }

.bg-otio-sand-100  { background-color: var(--sand-100) !important; }
.bg-otio-sand-500  { background-color: var(--sand-500) !important; }
.bg-otio-sand-700  { background-color: var(--sand-700) !important; }

/* --- Text Colors --- */
.text-otio-blue-300  { color: var(--blue-300) !important; }
.text-otio-blue-500  { color: var(--blue-500) !important; }
.text-otio-red-500   { color: var(--red-500) !important; }
.text-otio-green-300 { color: var(--green-300) !important; }
.text-otio-green-500 { color: var(--green-500) !important; }
.text-otio-green-700 { color: var(--green-700) !important; }
.text-otio-sand-100  { color: var(--sand-100) !important; }
.text-otio-sand-500  { color: var(--sand-500) !important; }
.text-otio-gray-300  { color: var(--gray-300) !important; }


/* ==========================================================================
   1. GLOBALE STIJLEN & BASIS
   ========================================================================== */
body {
    background-color: var(--sand-300);
    color: var(--gray-500);
    font-family: 'Jost', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gray-700);
}

/* Header & Sticky navigatie */
#header.navbar, 
.navbar-main, 
.header {
    background-color: var(--blue-900) !important;
    border-bottom: 1px solid var(--gray-700);
}





/* ==========================================================================
    BUTTONS - PRIMAIRY 
   ========================================================================== */
.btn-primary {
    background-color: var(--red-700) !important;
    border: 1px solid var(--red-500) !important; 
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--red-300) !important;
    border-color: var(--sand-700) !important;
    color: var(--sand-100) !important;
    transform: translateY(-3px); /* Iets subtieler dan 5px */
}



/* ==========================================================================
   3. NAVIGATIE (NAV-PILLS IN HEADER)
   ========================================================================== */

/* Basis navigatie-item */
#header .nav-pills .nav-link {
    background-color: var(--gray-700) !important;
    color: var(--sand-500) !important;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    padding: 0.6rem 1rem;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
    
    /* Het subtiele lijntje */
    border: 1px solid var(--gray-500) !important; 
}

/* Actieve staat & Hover */
#header .nav-pills .nav-link.active,
#header .nav-pills .nav-link:hover,
#header .nav-pills .show > .nav-link {
    color: var(--red-500) !important;
    border-color: var(--gray-500) !important; /* Lijntje licht op bij actie */
    background-color: var(--gray-700) !important;
    box-shadow: none !important;
}

/* Alleen zweven bij de hover, niet bij de actieve pagina */
#header .nav-pills .nav-link:hover {
    transform: translateY(-2px);
}

/* Dropdown pijl (caret) kleurt mee */
#header .nav-link.dropdown-toggle::after {
    color: inherit;
}

/* ==========================================================================
   4. DROPDOWN MENU OPMAAK
   ========================================================================== */
#header .dropdown-menu {
    background-color: var(--blue-900);
    border: 1px solid var(--gray-500); /* Iets lichter randje voor menu */
    border-radius: 0.25rem;
    padding: 0.5rem;
}

#header .dropdown-item {
    color: var(--sand-500);
    border-radius: 0.2rem;
    transition: color 0.2s;
}

#header .dropdown-item:hover {
    background-color: transparent;
    color: var(--red-500);
}


/* ==========================================================================
   1. HEADER & FOOTER (Blue-900 override)
   ========================================================================== */

/* We gebruiken de ID #header om de CSS-specificiteit te verhogen */
#header.navbar.bg-dark, 
#header.navbar,
.footer,
footer, footer.bg-dark {
    background-color: var(--blue-900) !important;
    /* We overschrijven de Bootstrap RGB variabelen voor de zekerheid */
    --bs-bg-opacity: 1;
    background-image: none !important; 
    border-bottom: 1px solid var(--gray-800);
}

/* De navigatie-pills moeten natuurlijk ook op deze nieuwe achtergrond passen */
#header .nav-pills .nav-link {
    background-color: var(--gray-800) !important; /* Iets lichter dan de bg voor diepte */
    color: var(--sand-500) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#header .nav-pills .nav-link.active,
#header .nav-pills .nav-link:hover {
    background-color: var(--gray-800) !important;
    color: var(--red-300) !important;
    border-color: var(--red-500) !important;
}



#navbarNavDropdown {
    background-color: var(--blue-900) !important;
 
}

.navbar-nav{
     background-color: var(--blue-900) !important;
}


/* Verwijder de dropdown pijltjes volledig */
.dropdown-toggle::after {
    display: none !important;
}

/* Voor Unify specifiek (als ze hun eigen pijltjes gebruiken) */
.hs-has-sub-menu > .nav-link::after, .dropdown-item::after { 
    display: none !important;
}

/* --- Dikke dubbele rode lijnen met blauwe tussenruimte --- */

header.navbar, 
.navbar-show-hide {
    /* Verwijder de standaard border als die er nog stond */
    border-bottom: none !important;
    
    box-shadow: 
        0 2px 0 0 var(--red-700), 
        0 6px 0 0 var(--blue-900), 
        0 8px 0 0 var(--red-500) !important;
    
    /* Zorg dat de lijnen zichtbaar blijven */
    overflow: visible !important;
    position: relative;
    z-index: 1030;
}

/* --- Spiegeling van de rode lijnen voor de Footer --- */

footer {
    position: relative;
    border-top: none !important; /* Verwijder standaard borders */
    
    /* We spiegelen de header: 
       Schaduw gaat nu omhoog (negatieve Y-waarde)
       Lijn 1: 2px rood-700
       Tussenruimte: 4px blauw (blue-900)
       Lijn 2: 2px rood-500
    */
    box-shadow: 
        0 -4px 0 0 var(--green-300), 
        0 -8px 0 0 var(--blue-700), 
        0 -9px 0 0 var(--green-300) !important;

    /* Zorg dat de lijnen niet worden afgekapt door secties erboven */
    z-index: 10;
}



/* Zorg dat de content onder de header niet tegen de lijnen aanplakt */
main {
    margin-top: 12px !important;
}

/* Mocht Unify font-icons gebruiken (zoals Bootstrap Icons of FontAwesome) */
.list-checked-primary .list-checked-item::before {
    content: "\f00c"; /* Standaard vinkje code, pas aan als je een ander icoon ziet */
    font-family: "bootstrap-icons"; /* Of de font-family die Unify gebruikt */
    color: var(--green-300) !important;
}

/* --- OTIO KLEURENPALET --- */
:root {
  --otio-blue-900: #0b1a2e;
  --otio-red-500: #E63946;
  --otio-sand-100: #F5E6BE;
}

/* --- OTIO BUTTONS --- */

/* De Zandkleurige Button (btn-otio-sand-100) */
.btn-otio-sand-100 {
  background-color: var(--otio-sand-100);
  color: var(--otio-blue-900);
  border-color: var(--otio-sand-100);
}

.btn-otio-sand-100:hover, .btn-otio-sand-100:focus {
  background-color: #e9dac0; /* Iets donkerder zand bij hover */
  color: var(--otio-blue-900);
  border-color: #e9dac0;
  box-shadow: 0 4px 11px rgba(245, 230, 190, 0.35);
}

/* De Rode Button (btn-otio-red) */
.btn-otio-red {
  background-color: var(--otio-red-500);
  color: #fff;
  border-color: var(--otio-red-500);
}

.btn-otio-red:hover, .btn-otio-red:focus {
  background-color: #d62e3b; /* Iets donkerder rood bij hover */
  color: #fff;
  border-color: #d62e3b;
  box-shadow: 0 4px 11px rgba(230, 57, 70, 0.35);
}

/* De Blauwe Button (btn-otio-blue-900) */
.btn-otio-blue-900 {
  background-color: var(--otio-blue-900);
  color: #fff;
  border-color: var(--otio-blue-900);
}

.btn-otio-blue-900:hover, .btn-otio-blue-900:focus {
  background-color: #081322;
  color: #fff;
  border-color: #081322;
  box-shadow: 0 4px 11px rgba(11, 26, 46, 0.35);
}

/* --- EXTRA HULP CLASSES --- */

/* Achtergrondkleuren */
.bg-otio-blue-900 { background-color: var(--otio-blue-900) !important; }
.bg-otio-red-500  { background-color: var(--otio-red-500) !important; }
.bg-otio-sand-100 { background-color: var(--otio-sand-100) !important; }

/* Tekstkleuren */
.text-otio-blue-900 { color: var(--otio-blue-900) !important; }
.text-otio-red-500  { color: var(--otio-red-500) !important; }
.text-otio-sand-100 { color: var(--otio-sand-100) !important; }

/* Icoon/Checklist Kleur */
.list-checked-otio-blue-900 .list-checked-item::before {
  color: var(--otio-blue-900);
}

/* Icoon/Checklist Kleur */
.list-checked-otio-green-500, .list-checked-otio-green-500 .list-checked-item::before {
  color: var(--green-500);
}