/*
Theme Name: VVVosmeer Custom
Author: Jouw Senior Developer & Jij
Description: Custom thema gebaseerd op Figma ontwerp.
Version: 1.0.1
Text Domain: vvvosmeer
*/

/* 1. VARIABELEN INSTELLEN */
:root {
    /* --- Lettertypes --- */
    --font-heading: 'Satoshi', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* --- Kleuren --- */
    --color-primary: #F39200;       /* VVVosmeer Oranje */
    --color-primary-hover: #d98200; 
    
    --color-dark: #3E2B1D;          /* Donkerbruin/Zwart */
    --color-dark-soft: #5A4231;     
    
    --color-bg-light: #FAF9F5;      /* Crème achtergrond */
    --color-white: #FFFFFF;
    --color-border: #E5E5E5;
    
    --color-success: #1E8E3E;
    --color-success-bg: #E6F4EA;

    /* --- Layout & Spacing --- */
    --container-width: 1280px;
    --container-padding: 20px;
    
    --gap-md: 20px;
    --gap-lg: 40px;
    --gap-xl: 80px;

    --radius-md: 8px;               /* Voor kaarten */
    --radius-btn: 12px;             /* Voor knoppen */

    /* --- Transitions --- */
    --transition-fast: 0.2s ease;
}

/* 2. GLOBAL RESET & BASE STYLES */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
}

/* Koppen krijgen automatisch Satoshi */
h1, h2, h3, h4, h5, h6,
.hero-title, 
.section-title, 
.match-label, 
.score, 
.team-name,
.btn,
.main-navigation a,
.section-intro,
.club-name {
    font-family: var(--font-heading);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

/* Container Utility */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* --- Button Styles --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    border: none;
    font-family: var(--font-heading);
    font-size: 16px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* --- Navigatie Desktop --- */
.desktop-nav { display: none; } /* Mobile first: verbergen */

@media (min-width: 992px) {
    .desktop-nav { display: block; }
    
    .nav-list { display: flex; gap: 35px; align-items: center; margin: 0; }
    .nav-list li { position: relative; }
    .nav-list li a { 
        font-weight: 600; 
        color: var(--color-dark); 
        font-size: 16px; 
        padding: 10px 0;
        display: flex; 
        align-items: center; 
    }
    
    .nav-list li a:hover { color: var(--color-primary); }

    /* Actieve Pagina (Hoofdmenu) */
    .nav-list > .current-menu-item > a { color: var(--color-primary); }
    .nav-list > .current-menu-item > a::after {
        content: ''; position: absolute; bottom: 5px; left: 0; 
        width: 100%; height: 3px; background: var(--color-primary); border-radius: 2px;
    }

    /* Automatisch Pijltje voor items met een dropdown */
    .nav-list .menu-item-has-children > a::before {
        content: ''; display: inline-block; width: 6px; height: 6px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg); margin-left: 8px; transition: 0.3s ease;
        order: 2; /* Zet pijltje rechts van de tekst */
    }
    .nav-list .menu-item-has-children:hover > a::before { 
        transform: translateY(2px) rotate(225deg); 
    }

    /* --- Het Dropdown Submenu (De witte kaart) --- */
    .nav-list .sub-menu {
        position: absolute; top: 100%; left: -15px; /* Compenseert de padding */
        min-width: 220px; background: var(--color-white);
        box-shadow: 0 10px 40px rgba(0,0,0,0.08); border-radius: 12px;
        padding: 10px; opacity: 0; visibility: hidden;
        transform: translateY(15px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 99; display: flex; flex-direction: column; gap: 2px;
        border: 1px solid rgba(0,0,0,0.03);
    }

    /* Toon dropdown bij Hover */
    .nav-list .menu-item-has-children:hover .sub-menu { 
        opacity: 1; visibility: visible; transform: translateY(0); 
    }

    /* Submenu Items */
    .nav-list .sub-menu li a {
        padding: 10px 15px; font-size: 15px; font-weight: 500;
        border-radius: 8px; color: var(--color-dark-soft); transition: 0.2s;
    }

    /* Submenu Hover (Zacht oranje zoals screenshot) */
    .nav-list .sub-menu li a:hover {
        background-color: rgba(243, 146, 0, 0.08); 
        color: var(--color-primary);
    }
    
    /* Submenu Actieve pagina */
    .nav-list .sub-menu li.current-menu-item > a {
        background-color: rgba(243, 146, 0, 0.12); 
        color: var(--color-primary); font-weight: 700;
    }
    
    /* Haal het pijltje onder de actieve tab weg in het submenu */
    .nav-list .sub-menu .current-menu-item > a::after { display: none; }
}

/* --- Header Actions (Knoppen) --- */
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-cta { display: none; }

.mobile-toggle { background: none; border: none; cursor: pointer; padding: 10px; }
.hamburger-box { width: 30px; height: 24px; display: block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px; height: 3px; background-color: var(--color-dark);
    position: absolute; border-radius: 4px; transition: 0.2s;
}
.hamburger-inner { top: 10px; }
.hamburger-inner::before { content: ''; top: -8px; }
.hamburger-inner::after { content: ''; top: 8px; }

@media (min-width: 992px) {
    .header-cta { display: inline-flex; }
    .mobile-toggle { display: none; }
}

/* --- Mobile Menu Overlay & Accordeon --- */
.mobile-menu-overlay {
    position: fixed; top: 0; right: -100%;
    width: 100%; height: 100vh; background: rgba(0,0,0,0.5);
    z-index: 2000; transition: 0.3s ease; visibility: hidden;
}
.mobile-menu-container {
    position: absolute; top: 0; right: 0;
    width: 85%; max-width: 350px; height: 100%;
    background: var(--color-white); padding: 30px 20px;
    transform: translateX(100%); transition: 0.3s ease;
    overflow-y: auto;
}
.mobile-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; font-size: 30px; cursor: pointer; color: var(--color-dark);
}
.mobile-menu-overlay.active { right: 0; visibility: visible; }
.mobile-menu-overlay.active .mobile-menu-container { transform: translateX(0); }

/* Basis Mobiele Lijst */
.mobile-nav-list { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.mobile-nav-list li { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.mobile-nav-list > li > a { 
    font-size: 1.25rem; font-weight: 700; color: var(--color-dark); 
    padding: 10px 0; flex-grow: 1; 
}

/* JS Toggle Button (Wordt via Javascript toegevoegd) */
.mobile-submenu-toggle {
    background: #FAF8F5; border: none; width: 44px; height: 44px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; margin-left: 10px;
}
.mobile-submenu-toggle::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid var(--color-dark); border-bottom: 2px solid var(--color-dark);
    transform: translateY(-2px) rotate(45deg); transition: 0.3s;
}
.mobile-submenu-toggle.is-open { background: rgba(243, 146, 0, 0.1); }
.mobile-submenu-toggle.is-open::after { 
    transform: translateY(2px) rotate(225deg); border-color: var(--color-primary); 
}

/* Mobiel Submenu (Accordeon verborgen) */
.mobile-nav-list .sub-menu {
    width: 100%; display: none; padding-left: 15px; margin-top: 5px; 
    border-left: 2px solid rgba(243, 146, 0, 0.3);
}
.mobile-nav-list .sub-menu.is-open { 
    display: flex; flex-direction: column; gap: 5px; 
    animation: fadeIn 0.3s ease; 
}
.mobile-nav-list .sub-menu a { 
    font-size: 16px; font-weight: 500; color: var(--color-dark-soft); padding: 10px 0; 
}
.mobile-nav-list .sub-menu a:hover { color: var(--color-primary); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Mobiele Menu Interactiviteit */
@media (max-width: 991px) {
    .nav-menu ul.sub-menu {
        display: none;
        padding-left: 20px;
        background: #f9f9f9;
    }
    .menu-item-has-children.open > ul.sub-menu {
        display: block;
    }
    .menu-item-has-children {
        position: relative;
    }
} /* ← SLUIT HIER CORRECT AF */

/* --- Dropdown Pijltjes Regelen --- */
.dropdown-toggle {
    display: none !important;
}

@media (max-width: 991px) {
    .dropdown-toggle {
        display: flex !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--color-primary);
        font-size: 20px;
        transition: transform 0.3s ease;
        z-index: 10;
    }
    .menu-item-has-children.open > .dropdown-toggle {
        transform: rotate(180deg);
    }
    .menu-item-has-children > a {
        padding-right: 50px !important;
    }
}

/* ==========================================================================
   HEADER & NAVIGATIE (Alles-in-1 Fix)
   ========================================================================== */

/* --- 1. Top Bar --- */
.top-bar {
    background-color: #2D1E12; color: var(--color-white);
    padding: 8px 0; font-size: 13px; font-weight: 600;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-status { display: flex; align-items: center; gap: 8px; }
.status-open { color: #2ecc71; }
.status-closed { color: #e74c3c; }
.status-warning { color: #f39c12; }
.status-text { color: var(--color-white); }
.top-links { display: flex; align-items: center; gap: 20px; }
.top-links a { color: var(--color-white); display: flex; align-items: center; }
.top-links a:hover { color: var(--color-primary); }
.top-link-item { font-weight: 700; text-transform: uppercase; font-size: 12px; }

/* =========================================
   TOP HEADER LINKS (Sponsor & Socials)
========================================= */
.top-link-item,
.top-social-item {
    color: inherit; /* Neemt de standaard tekstkleur van de balk over */
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none !important; /* Dwingt 'normale' letters af i.p.v. hoofdletters */
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

/* Hover effect: Accentkleur (Oranje) */
.top-link-item:hover,
.top-social-item:hover {
    color: var(--color-primary) !important;
}

/* --- 2. Main Header Basis --- */
.site-header-wrapper {
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); background: var(--color-white);
}
.main-header { padding: 15px 0; }

/* CRUCIAAL: Dit zorgt dat logo, menu en knop naast elkaar staan! */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-placeholder { display: flex; align-items: center; gap: 12px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.club-name { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--color-dark); }
.club-year { font-size: 12px; color: #888; }
.site-logo { max-height: 60px; width: auto; display: block; }
.footer-logo { max-height: 50px; width: auto; } /* Laten we staan voor de footer */

/* --- 3. Desktop Navigatie --- */
.desktop-nav { display: none; } /* Mobile first: verbergen */

@media (min-width: 992px) {
    .desktop-nav { display: block; }
    
    .nav-list { display: flex; gap: 35px; align-items: center; margin: 0; padding: 0; list-style: none; }
    .nav-list > li { position: relative; }
    .nav-list > li > a { 
        font-weight: 600; color: var(--color-dark); font-size: 16px; 
        padding: 20px 0; /* Ruime padding voorkomt dat dropdown per ongeluk dichtklapt */
        display: flex; align-items: center; 
    }
    .nav-list > li > a:hover { color: var(--color-primary); }

    /* Actieve Pagina (Hoofdmenu) */
    .nav-list > .current-menu-item > a { color: var(--color-primary); }
    .nav-list > .current-menu-item > a::after {
        content: ''; position: absolute; bottom: 10px; left: 0; 
        width: 100%; height: 3px; background: var(--color-primary); border-radius: 2px;
    }

    /* Pijltje voor items met een dropdown */
    .nav-list .menu-item-has-children > a::before {
        content: ''; display: inline-block; width: 6px; height: 6px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg); margin-left: 8px; transition: 0.3s ease;
        order: 2; /* Zet pijltje rechts */
    }
    .nav-list .menu-item-has-children:hover > a::before { transform: translateY(2px) rotate(225deg); }

    /* --- Het Dropdown Submenu (De witte kaart) --- */
    .nav-list .sub-menu {
        position: absolute; top: 100%; left: -15px; 
        min-width: 220px; background: var(--color-white);
        box-shadow: 0 10px 40px rgba(0,0,0,0.08); border-radius: 12px;
        padding: 10px; opacity: 0; visibility: hidden;
        transform: translateY(15px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 99; display: flex; flex-direction: column; gap: 2px;
        border: 1px solid rgba(0,0,0,0.03); list-style: none; margin: 0;
    }

    /* Toon dropdown bij Hover */
    .nav-list .menu-item-has-children:hover > .sub-menu { 
        opacity: 1; visibility: visible; transform: translateY(0); 
    }

    /* Submenu Items */
    .nav-list .sub-menu li a {
        padding: 10px 15px; font-size: 15px; font-weight: 500; display: block;
        border-radius: 8px; color: var(--color-dark-soft); transition: 0.2s;
    }
    .nav-list .sub-menu li a:hover { background-color: rgba(243, 146, 0, 0.08); color: var(--color-primary); }
    .nav-list .sub-menu li.current-menu-item > a { background-color: rgba(243, 146, 0, 0.12); color: var(--color-primary); font-weight: 700; }
    .nav-list .sub-menu .current-menu-item > a::after { display: none; }
}

/* --- 4. Header Actions & Mobiel Overlay --- */
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-cta { display: none; }

.mobile-toggle { background: none; border: none; cursor: pointer; padding: 10px; margin-left: auto; }
.hamburger-box { width: 30px; height: 24px; display: block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px; height: 3px; background-color: var(--color-dark);
    position: absolute; border-radius: 4px; transition: 0.2s;
}
.hamburger-inner { top: 10px; }
.hamburger-inner::before { content: ''; top: -8px; }
.hamburger-inner::after { content: ''; top: 8px; }

@media (min-width: 992px) {
    .header-cta { display: inline-flex; }
    .mobile-toggle { display: none; }
}

.mobile-menu-overlay {
    position: fixed; top: 0; right: -100%;
    width: 100%; height: 100vh; background: rgba(0,0,0,0.5);
    z-index: 2000; transition: 0.3s ease; visibility: hidden;
}
.mobile-menu-container {
    position: absolute; top: 0; right: 0;
    width: 85%; max-width: 350px; height: 100%;
    background: var(--color-white); padding: 30px 20px;
    transform: translateX(100%); transition: 0.3s ease; overflow-y: auto;
}
.mobile-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; font-size: 30px; cursor: pointer; color: var(--color-dark);
}
.mobile-menu-overlay.active { right: 0; visibility: visible; }
.mobile-menu-overlay.active .mobile-menu-container { transform: translateX(0); }

.mobile-nav-list { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; list-style: none; padding: 0; }
.mobile-nav-list li { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.mobile-nav-list > li > a { font-size: 1.25rem; font-weight: 700; color: var(--color-dark); padding: 10px 0; flex-grow: 1; }

.mobile-submenu-toggle {
    background: #FAF8F5; border: none; width: 44px; height: 44px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; margin-left: 10px;
}
.mobile-submenu-toggle::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid var(--color-dark); border-bottom: 2px solid var(--color-dark);
    transform: translateY(-2px) rotate(45deg); transition: 0.3s;
}
.mobile-submenu-toggle.is-open { background: rgba(243, 146, 0, 0.1); }
.mobile-submenu-toggle.is-open::after { transform: translateY(2px) rotate(225deg); border-color: var(--color-primary); }

.mobile-nav-list .sub-menu {
    width: 100%; display: none; padding-left: 15px; margin-top: 5px; 
    border-left: 2px solid rgba(243, 146, 0, 0.3); list-style: none;
}
.mobile-nav-list .sub-menu.is-open { display: flex; flex-direction: column; gap: 5px; animation: fadeIn 0.3s ease; }
.mobile-nav-list .sub-menu a { font-size: 16px; font-weight: 500; color: var(--color-dark-soft); padding: 10px 0; display: block; }
.mobile-nav-list .sub-menu a:hover { color: var(--color-primary); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* --- Footer Styles --- */
.site-footer {
    background-color: var(--color-dark); color: #ccc;
    padding: 60px 0 20px; font-size: 14px; margin-top: auto;
}
.site-footer h3 { color: var(--color-white); font-size: 18px; margin-bottom: 20px; }
.site-footer a { color: #ccc; }
.site-footer a:hover { color: var(--color-primary); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
.footer-social .social-icons { display: flex; gap: 15px; margin-bottom: 15px; }
.footer-social .social-icons a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: rgba(255,255,255,0.1);
    border-radius: 50%; color: var(--color-white); transition: 0.3s;
}
.footer-social .social-icons a:hover { background: var(--color-primary); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; opacity: 0.6; }

.footer-logo-block { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; color: white; }
.brand-desc { opacity: 0.8; line-height: 1.6; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px; margin-top: 40px;
}
.footer-legal { display: flex; gap: 20px; }

@media (max-width: 768px) {
    .footer-bottom { flex-direction: column; text-align: center; }
}
@media (min-width: 992px) {
    .footer-grid { grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr; }
}

/* --- Block: Hero Main --- */
.hero-main {
    position: relative; width: 100%; height: 600px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; align-items: center; color: var(--color-white);
    margin-bottom: var(--gap-xl); 
}
.hero-main:has(+ .status-banner) { margin-bottom: 0; }
.hero-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1;
}
.hero-content {
    position: relative; z-index: 2; max-width: 900px;
    margin-left: auto; margin-right: auto; text-align: center;
}
.hero-title { font-size: 4.5rem; font-weight: 900; color: var(--color-white); margin-bottom: 1rem; line-height: 1.1; }
.hero-subtitle {
    font-size: 1.125rem; max-width: 650px; margin-left: auto; margin-right: auto;
    margin-bottom: 2.5rem; font-weight: 400; opacity: 0.9; line-height: 1.8;
}
@media (max-width: 768px) {
    .hero-main { height: 500px; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1rem; }
}

/* --- Block: Status Banner --- */
.status-banner {
    background-color: #F6F3EB; padding: 20px 0;
    margin-bottom: var(--gap-lg); border-bottom: 1px solid rgba(0,0,0,0.05);
}
.status-banner-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.sb-left { display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: 500; color: var(--color-dark); }
.status-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background-color: var(--color-white); padding: 8px 16px;
    border-radius: 8px; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.status-badge.is-open { color: #1E8E3E; border: 1px solid #E6F4EA; }
.status-badge.is-closed { color: #D93025; border: 1px solid #FCE8E6; }
.sb-right { display: flex; align-items: center; }
.training-link {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--color-dark); font-weight: 600; font-size: 16px;
    text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.training-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

@media (max-width: 768px) {
    .status-banner-inner { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sb-left { width: 100%; justify-content: space-between; }
}

/* --- Block: Sponsors Grid (Met Slider) --- */
.sponsors-section { background-color: #FAF8F5; padding: var(--gap-xl) 0; overflow: hidden; }
.sponsors-header { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.section-title { font-size: 2.5rem; color: var(--color-dark); margin-bottom: 15px; font-weight: 700; }
.section-intro { font-size: 1.125rem; color: var(--color-dark-soft); margin-bottom: 25px; line-height: 1.6; }
.section-divider { width: 60px; height: 4px; background-color: var(--color-primary); margin: 0 auto; border-radius: 2px; }

.sponsors-layout-wrapper { display: flex; flex-direction: column; gap: 50px; margin-bottom: 60px; }
.main-sponsor-wrapper { display: flex; justify-content: center; width: 100%; padding: 0 20px; }
.main-sponsor {
    background: var(--color-white); border: 2px solid rgba(243, 146, 0, 0.15);
    border-radius: var(--radius-md); padding: 40px; width: 100%; max-width: 500px;
    text-align: center; position: relative; transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center;
}
.main-sponsor:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.sponsor-label {
    /* 1. Weer netjes rechtsboven vastzetten, mét z-index voor de voorgrond */
    position: absolute; 
    top: 15px; 
    right: 15px; 
    z-index: 10; /* <-- Dit zorgt ervoor dat hij OVER de afbeelding valt! */
    
    /* 2. De oranje kleuren */
    background-color: #FFF3E5; 
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    
    /* 3. Standaard opmaak behouden */
    font-size: 11px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 5px 10px; 
    border-radius: 4px;
}
.main-sponsor .sponsor-logo-wrapper { height: 120px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.main-sponsor .sponsor-name { font-size: 18px; font-weight: 700; color: var(--color-dark); }

.partners-slider-container { width: 100%; padding-bottom: 40px; }
.swiper-slide { height: auto; display: flex; }
.partner-card {
    background: var(--color-white); border-radius: var(--radius-md); padding: 25px 15px;
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; transition: 0.3s; border: 1px solid transparent; box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.partner-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); border-color: rgba(243, 146, 0, 0.2); }
.partner-card .sponsor-logo-wrapper { height: 70px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sponsor-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: 0.3s; }
.main-sponsor:hover .sponsor-img, .partner-card:hover .sponsor-img { filter: grayscale(0%); opacity: 1; }
.partner-card .sponsor-name { font-size: 13px; color: var(--color-dark-soft); font-weight: 600; margin-top: auto; }

.swiper-pagination-bullet { background: #ccc; opacity: 1; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { background: var(--color-primary) !important; width: 12px; height: 12px; }

.sponsor-cta {
    background: var(--color-white); border-radius: 16px; padding: 30px 40px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 2px solid rgba(243, 146, 0, 0.1); max-width: 1100px; margin: 0 auto;
}
.cta-content { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 300px; }
.cta-icon-box {
    width: 60px; height: 60px; background: rgba(243, 146, 0, 0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary);
}
.cta-text-group h3 { margin-bottom: 5px; font-size: 1.25rem; color: var(--color-dark); }
.cta-text-group p { color: var(--color-dark-soft); margin: 0; font-size: 0.95rem; }

@media (max-width: 768px) {
    .section-title { font-size: 2rem; }
    .sponsor-cta { flex-direction: column; text-align: center; padding: 30px 20px; }
    .cta-content { flex-direction: column; align-items: center; min-width: 0; }
    .cta-btn-wrapper, .cta-btn-wrapper .btn { width: 100%; }
    .main-sponsor { padding: 30px; }
}

/* =========================================
   HOOFDSPONSOR STEMPEL FIX (Kleur & Positie)
========================================= */

/* 1. Zorg dat de container van het logo een flexbox is */
/* We targeten de meest gangbare containers voor logo's in WordPress */
.site-branding,
.custom-logo-link,
.navbar-brand {
    display: flex !important;
    flex-direction: row !important; /* Netjes naast elkaar */
    align-items: center !important; /* Verticaal centreren */
    gap: 15px !important; /* Ruimte tussen label en logo */
}

/* 2. Stijl het label en zet het vooraan */
/* We gebruiken een brede selector om zeker te zijn dat we hem raken */
.site-branding span[class*="label"],
.custom-logo-link span[class*="label"],
.match-label,
.hoofdsponsor-label {
    /* Zet het label VOOR het logo */
    order: -1 !important;

    /* Forceer de oranje kleuren */
    background-color: #FFF3E5 !important; /* Zacht oranje achtergrond */
    color: var(--color-primary) !important; /* De oranje hoofdkleur voor de tekst */
    border: 1px solid var(--color-primary) !important; /* Oranje randje */

    /* Zorg voor nette uitlijning */
    margin: 0 !important;
    white-space: nowrap; /* Zorg dat de tekst op één regel blijft */
}

/* --- Universal Grid Block --- */
.universal-section { padding: var(--gap-lg) 0; }
.universal-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 30px; border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 15px;
}
.btn-text { color: var(--color-primary); font-weight: 600; display: flex; align-items: center; gap: 5px; }

.universal-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .universal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .universal-grid { grid-template-columns: repeat(3, 1fr); } }

.grid-card {
    background: var(--color-white); border-radius: var(--radius-md); overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; border: 1px solid rgba(0,0,0,0.03); height: 100%;
}
.card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.grid-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-image-wrapper { position: relative; height: 200px; background-color: #f0f0f0; overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.grid-card:hover .card-img { transform: scale(1.05); }
.card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; }

.date-badge {
    position: absolute; top: 15px; left: 15px; background: var(--color-white);
    border-radius: 6px; padding: 6px 10px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); line-height: 1; min-width: 50px;
}
.db-day { display: block; font-size: 18px; font-weight: 800; color: var(--color-dark); }
.db-month { display: block; font-size: 11px; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-top: 2px; }

.card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.card-meta { margin-bottom: 10px; font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.card-title { font-size: 18px; margin-bottom: 10px; line-height: 1.4; font-weight: 700; color: var(--color-dark); }
.card-excerpt { font-size: 14px; color: var(--color-dark-soft); margin-bottom: 20px; line-height: 1.6; flex-grow: 1; }
.read-more { font-size: 13px; font-weight: 700; color: var(--color-primary); margin-top: auto; }

/* =========================================
   UNIVERSAL GRID: PLACEHOLDER AFBEELDING
========================================= */

.card-image-wrapper {
    position: relative;
    min-height: 220px; 
    background-color: var(--color-dark); /* De bruine fallback kleur */
    overflow: hidden;
}

.card-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark);
}

/* Styling voor het V.V. Vosmeer logo als watermerk */
.placeholder-logo {
    max-width: 120px; /* Pas dit aan als je het logo groter of kleiner wilt */
    height: auto;
    opacity: 0.3; /* Dit maakt er een subtiel watermerk van! */
    filter: grayscale(100%) brightness(200%); /* Optioneel: maakt het logo mooi zacht/wit-achtig in het bruin */
    transition: opacity 0.3s ease;
}

.grid-card:hover .placeholder-logo {
    opacity: 0.5; /* Licht iets op als je eroverheen muist */
}

/* --- Templates: General --- */
.page-hero {
    position: relative; height: 400px; background-size: cover; background-position: center;
    display: flex; align-items: flex-end; color: white; padding-bottom: 60px;
}
.page-hero.small-hero { height: 300px; }
.hero-content-inner { position: relative; z-index: 2; }
.hero-title { font-size: 3rem; margin-bottom: 10px; line-height: 1.1; }
.page-content { padding: 60px 20px; }
.content-body { font-size: 1.1rem; line-height: 1.8; color: var(--color-dark); }
.content-body h3 { margin-top: 30px; margin-bottom: 15px; }

/* --- Template: Wedstrijdverslag --- */
.match-hero { background-color: #5A4231; padding: 60px 0; color: white; text-align: center; }
.match-header { margin-bottom: 40px; }
.match-label {
    background: var(--color-primary); padding: 6px 15px; border-radius: 20px;
    font-weight: 700; margin-right: 15px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
}
.match-date { opacity: 0.9; font-size: 14px; font-weight: 500; }
.scoreboard { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.team-block { text-align: center; width: 150px; display: flex; flex-direction: column; align-items: center; }
.team-visual { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.scoreboard-logo { max-height: 100px; width: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.team-logo-placeholder {
    width: 80px; height: 80px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: white;
}
.team-name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.score-block {
    background: rgba(0,0,0,0.25); padding: 15px 30px; border-radius: 12px;
    font-size: 3.5rem; font-weight: 900; line-height: 1; display: flex; gap: 10px; margin: 10px 0;
}
.divider { opacity: 0.5; font-weight: 400; }

.match-gallery-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; }
.match-gallery-section h3 { margin-bottom: 25px; font-size: 1.5rem; }
.match-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.gallery-item img {
    width: 100%; height: 250px; object-fit: cover; border-radius: 8px;
    transition: transform 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.gallery-item img:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

@media (min-width: 768px) { .match-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 600px) {
    .match-hero { padding: 40px 0; }
    .score-block { font-size: 2.5rem; padding: 10px 20px; }
    .team-block { width: 100px; }
    .team-visual { height: 70px; }
    .scoreboard-logo { max-height: 60px; }
    .team-logo-placeholder { width: 50px; height: 50px; font-size: 16px; }
    .team-name { font-size: 13px; }
}

/* Fix voor het scorebord op mobiel */
@media screen and (max-width: 768px) {
    .scoreboard {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Dit dwingt alles op 1 regel */
        align-items: center;
        justify-content: center;
        gap: 10px; /* Iets minder ruimte tussen de blokken */
    }
    
    .team-block {
        flex: 1 1 0; /* Zorgt dat beide teams exact evenveel ruimte krijgen */
        min-width: 0; /* Voorkomt dat een lange naam de layout uitrekt */
    }
    
    /* Maak de logo's iets kleiner op mobiel */
    .scoreboard-logo,
    .team-visual img {
        max-width: 50px !important; 
        height: auto;
    }
    
    .team-name {
        font-size: 13px !important; /* Maak de tekst iets kleiner */
        display: block;
        white-space: normal;
        word-wrap: break-word; /* Breek lange woorden netjes af */
    }
    
    .score-block {
        flex-shrink: 0; /* Zorg dat het blokje met de score nooit samenknijpt */
        padding: 5px 15px !important; /* Eventueel de padding iets kleiner */
    }
}

/* --- Template: Agenda --- */
.activity-bar { background: white; border-bottom: 2px solid var(--color-primary); padding: 20px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.activity-bar-inner { display: flex; gap: 40px; flex-wrap: wrap; }
.ab-item { display: flex; align-items: center; gap: 15px; }
.ab-icon { 
    color: var(--color-primary); background: #FAF8F5; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
}
.ab-text small { display: block; font-size: 10px; color: #999; letter-spacing: 1px; text-transform: uppercase; }
.ab-text strong { display: block; color: var(--color-dark); font-size: 15px; }

.activity-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width: 992px) { .activity-grid { grid-template-columns: 2fr 1fr; } }

.content-lead {
    font-size: 1.15rem; font-weight: 600; color: var(--color-dark); line-height: 1.6;
    margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee;
}

.activity-sidebar { position: sticky; top: 40px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.sidebar-box { border-radius: 12px; padding: 30px; }
.sidebar-box h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.2rem; color: var(--color-dark); }

.signup-box { background: var(--color-white); border: 1px solid #eaeaea; box-shadow: 0 5px 20px rgba(0,0,0,0.04); }
.form-wrapper { margin-bottom: 15px; }
.form-wrapper .btn, .form-wrapper input[type="submit"] {
    width: 100%; background: var(--color-primary); color: white; border: none;
    padding: 14px; border-radius: 8px; font-weight: 700; cursor: pointer; text-align: center;
}
.form-note { font-size: 12px; color: #999; margin: 0; text-align: center; }

.contact-box { background: #FAF8F5; }
.contact-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; }
.contact-item { display: flex; align-items: center; gap: 15px; }
.ci-icon { color: var(--color-primary); }
.ci-text small { display: block; font-size: 10px; color: var(--color-dark-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.ci-text strong { display: block; color: var(--color-dark); font-size: 14px; }

.btn-dark {
    display: block; text-align: center; background: #3E2B1F; color: white;
    padding: 12px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.btn-dark:hover { background: #2a1d15; }

/* --- Contact Form 7 Formulier Styling --- */
.wpcf7-form label {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-dark);
    display: block;
    margin-bottom: 5px;
}

.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap textarea {
    width: 100%;
    padding: 14px 16px; /* Zorgt voor heerlijk ruime, toegankelijke velden */
    border: 2px solid #eaeaea;
    border-radius: 8px; /* Zelfde afronding als de knoppen */
    font-family: var(--font-body);
    font-size: 16px; /* 16px is de gouden standaard (voorkomt auto-zoom op mobiel) */
    color: var(--color-dark);
    background-color: #fdfdfd;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

/* Mooie oranje gloed als je in het veld klikt (Focus state) */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: var(--color-primary);
    background-color: var(--color-white);
    outline: none;
    box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.15);
}

/* Zorg dat de oranje verzendknop netjes aansluit */
.wpcf7-form input[type="submit"] {
    margin-top: 10px;
}

/* --- Menu Uitlijning Fix --- */

/* Zorg dat de submenu's de volledige breedte kunnen pakken */
.site-header-wrapper .sub-menu {
    position: absolute;
    top: 100%;
    left: -15px; /* Een kleine verschuiving voor een betere uitlijning met de knop */
    min-width: 220px; /* Een goede breedte voor teamnamen */
    margin: 0;
    padding: 10px; /* Een kleine marge rondom de links */
    list-style: none;
}

/* Herstel de padding voor de links in het submenu */
.site-header-wrapper .sub-menu li a {
    display: block;
    padding: 10px 15px;
    font-size: 15px; /* Tekst iets kleiner voor een strakkere look */
    font-weight: 500;
}

/* Uitlijning voor eventuele sub-sub-menu's */
.site-header-wrapper .sub-menu .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin: 0;
    padding: 10px;
}

/* --- Mobiele weergave Agenda: Sidebar met aanmelden naar boven halen --- */
@media (max-width: 991px) {
    .activity-main {
        order: 2; 
    }
    .activity-sidebar {
        order: 1; 
        margin-bottom: 20px;
        position: static; /* <-- Dit is de fix! Zet het meescrollen uit op mobiel */
    }
}

/* ==========================================================================
   TEMPLATE: TEAM DETAILS (Afwisselende Achtergronden)
   ========================================================================== */

/* --- 1. Team Hero --- */
.team-hero-solid {
    background-color: var(--color-dark);
    padding: 80px 0 60px;
    color: var(--color-white);
}

.team-subtitel {
    display: inline-block;
    background: rgba(243, 146, 0, 0.9);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.team-hero-solid .hero-title {
    font-size: 4.5rem;
    margin-bottom: 10px;
    color: var(--color-white);
}

.team-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 500; opacity: 0.9;
}

.team-page-container {
    max-width: 1000px;
}

/* --- 2. Secties & Achtergronden --- */
.team-section {
    padding: 60px 0; /* Padding in plaats van margin, voor doorlopende achtergrond! */
}

/* Witte Sectie (Training & Selectie) */
.bg-white {
    background-color: var(--color-white);
}
/* Maak de kaarten hierbinnen donkerder beige */
.bg-white .team-card {
    background-color: #F6F3EB; 
}

/* Beige Sectie (Staf & Verslagen) */
.bg-beige {
    background-color: #F6F3EB;
}
/* Maak de kaarten hierbinnen strak wit */
.bg-beige .team-card {
    background-color: var(--color-white);
}

/* Gedeelde Titels */
.section-title-small {
    font-size: 1.5rem; color: var(--color-dark);
    display: flex; align-items: center; gap: 10px;
}
.section-title-small .title-icon { color: var(--color-primary); }

.section-title-centered {
    font-size: 2rem; color: var(--color-dark);
    text-align: center; margin-bottom: 40px;
}

/* Oranje Strepen */
.title-underlined { position: relative; padding-bottom: 15px; margin-bottom: 30px; }
.title-underlined::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 45px; height: 3px; background-color: var(--color-primary); border-radius: 2px;
}

.title-underlined-center { position: relative; padding-bottom: 15px; margin-bottom: 0; }
.title-underlined-center::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 55px; height: 3px; background-color: var(--color-primary); border-radius: 2px;
}

/* --- 3. Het "Card" en Hover Effect --- */
.team-card {
    border: 1px solid transparent; 
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    display: flex; flex-direction: column; justify-content: center;
}

/* Altijd dezelfde hover, ongeacht in welke sectie hij staat! */
.team-card:hover {
    background-color: var(--color-white) !important;
    border-color: var(--color-primary);
    box-shadow: 0 8px 25px rgba(243, 146, 0, 0.08); 
    transform: translateY(-2px); 
}

/* Trainingstijden Kaart (Specifiek) */
.training-card {
    border-left: 4px solid var(--color-primary) !important; 
    padding: 25px;
}
/* Zorg dat linkerrand blijft staan bij hover */
.training-card:hover {
    border: 1px solid var(--color-primary) !important;
    border-left: 4px solid var(--color-primary) !important;
}

.tc-day { font-size: 1.1rem; margin-bottom: 15px; color: var(--color-dark); }
.tc-detail { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-dark-soft); margin-bottom: 8px; }
.tc-detail svg { color: var(--color-primary); }

.training-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .training-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

/* --- 4. Team Foto --- */
.team-photo-section { margin-top: 20px; }
.team-photo {
    width: 100%; height: auto; max-height: 500px; object-fit: cover;
    border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* --- 5. Staf Layout --- */
.staff-layout { display: grid; grid-template-columns: 1fr; gap: 50px; }
@media (min-width: 768px) { .staff-layout { grid-template-columns: 1fr 1fr; gap: 40px; } }
.staff-grid { display: flex; flex-direction: column; gap: 15px; }

/* Persoon Kaart (Spelers & Staf) */
.person-card { padding: 20px 25px; } 
.pc-name { font-size: 15px; font-weight: 700; color: var(--color-dark); }
.pc-role { font-size: 12px; color: var(--color-primary); font-weight: 600; margin-top: 5px; }

/* =========================================
   TEAM PAGINA: CONTACT ICOONTJES
========================================= */
.pc-icon-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background-color: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 50% !important;
    color: var(--color-primary) !important; /* Maakt de binnenkant oranje */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

.pc-icon-link .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.pc-icon-link:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important; /* Maakt de binnenkant wit op hover */
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(243, 146, 0, 0.2) !important;
}

/* --- 6. Selectie Grid --- */
.players-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 40px;}
@media (min-width: 500px) { .players-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .players-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 992px) { .players-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   BLOCK: MEDIA TEKST (Figma Design)
   ========================================================================== */

/* Achtergrond & Spatiëring */
.media-text-section {
    padding: 80px 0;
}
.media-text-section.bg-beige { background-color: #FAF8F5; }
.media-text-section.bg-white { background-color: var(--color-white); }

/* Grid Layout */
.media-text-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 992px) {
    .media-text-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
    
    /* True/False wissel: Tekst Links, Foto Rechts */
    .layout-text-left .mt-text-col { order: 1; }
    .layout-text-left .mt-media-col { order: 2; }
    
    /* True/False wissel: Foto Links, Tekst Rechts */
    .layout-text-right .mt-media-col { order: 1; }
    .layout-text-right .mt-text-col { order: 2; }
}

/* --- De Afbeelding & Hover Effecten --- */
.mt-image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: box-shadow 0.4s ease;
    transform: translateZ(0); /* Zorgt voor een soepele, stotter-vrije animatie */
}

.mt-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Zeer vloeiende 'scale' animatie */
}

@media (min-width: 992px) {
    .mt-image { height: 500px; }
}

/* De onzichtbare oranje laag */
.mt-overlay {
    position: absolute;
    inset: 0; /* Pakt de hele foto */
    background-color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* De actie wanneer je er met de muis overheen gaat */
.mt-image-wrapper:hover {
    box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}
.mt-image-wrapper:hover .mt-image {
    transform: scale(1.05); /* Zoomt licht in */
}
.mt-image-wrapper:hover .mt-overlay {
    opacity: 0.15; /* Laat de oranje gloed zien */
}

/* --- Tekst Styling --- */
.mt-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.mt-title {
    font-size: 2.25rem;
    color: var(--color-dark);
    margin-bottom: 24px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .mt-title { font-size: 2.5rem; }
}

.mt-divider {
    width: 96px; /* Zelfde als w-24 in Tailwind */
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
    margin-bottom: 24px;
}

.mt-content {
    color: rgba(62, 43, 29, 0.8); /* Jouw dark kleur op 80% opacity */
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
}

.mt-content p {
    margin-bottom: 16px;
}
.mt-content p:last-child {
    margin-bottom: 0;
}

/* --- Knop Effect --- */
.mt-btn {
    margin-top: 32px;
    box-shadow: 0 4px 10px rgba(243, 146, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mt-btn .dashicons {
    transition: transform 0.3s ease;
}

.mt-btn:hover {
    box-shadow: 0 8px 20px rgba(243, 146, 0, 0.3);
}

.mt-btn:hover .dashicons {
    transform: translateX(5px); /* Het pijltje schuift mooi opzij bij hover */
}

/* =========================================
   FLEXIBLE CONTENT: MEDIA & TEKST (STANDAARD FORMAAT)
========================================= */

.media-text-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 992px) {
    .media-text-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        /* align-items: center zorgt dat een kleinere afbeelding mooi 
           in het midden staat ten opzichte van een lang stuk tekst (of vice versa) */
        align-items: center; 
    }

    .media-text-grid.layout-text-left .mt-text-col { order: -1; }
}

/* --- De Afbeelding Wrapper --- */
.mt-media-col {
    width: 100%;
}

.mt-image-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden; 
    /* Zorg dat hier GEEN height of min-height meer staat! */
}

/* --- De Afbeelding Zelf --- */
.mt-image {
    width: 100%; /* Vult de kolom mooi uit */
    max-width: 100%; /* Zorgt dat hij nooit te groot wordt of buiten de lijntjes breekt */
    height: auto !important; /* Dwingt de browser om ALTIJD de originele verhouding te behouden */
    display: block; /* Haalt eventuele witruimte onder de afbeelding weg */
}

/* ==========================================================================
   BLOCK: TEKST BLOK (Gecentreerde Kaart - Gecorrigeerd)
   ========================================================================== */

/* Achtergrond van de hele rij */
.text-block-section {
    padding: 80px 0;
}

/* Smalle container zodat de tekst niet onleesbaar breed wordt (max-w-5xl) */
.text-block-container {
    max-width: 900px; 
}

/* De Witte Kaart met Schaduw */
.text-block-card {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 40px 20px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.06);
    text-align: center; /* <-- DEZE REGEL LOST HET OP! Centreert alles. */
}

@media (min-width: 768px) {
    .text-block-card {
        padding: 50px 60px; /* Ruimere padding op desktop */
    }
}

/* --- Tekst Styling binnen de kaart --- */
.tb-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.tb-title {
    font-size: 2.25rem;
    color: var(--color-dark);
    margin-bottom: 24px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .tb-title { font-size: 2.5rem; }
}

/* Het oranje streepje */
.tb-divider {
    width: 96px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
    margin-bottom: 32px;
}
/* Deze class zorgt dat het streepje zelf ook in het midden staat */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.tb-content {
    color: rgba(62, 43, 29, 0.8); /* Jouw dark kleur op 80% opacity */
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    margin-bottom: 32px;
}

.tb-content p { margin-bottom: 16px; }
.tb-content p:last-child { margin-bottom: 0; }

/* --- Knop Effect --- */
/* Deze wrapper zorgt dat de knop ook netjes in het midden staat */
.tb-btn-wrapper {
    display: flex;
    justify-content: center;
}

.tb-btn {
    box-shadow: 0 4px 10px rgba(243, 146, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-btn .dashicons {
    transition: transform 0.3s ease;
}

.tb-btn:hover {
    box-shadow: 0 8px 20px rgba(243, 146, 0, 0.3);
}

.tb-btn:hover .dashicons {
    transform: translateX(5px); /* Pijltje schuift opzij */
}

/* ==========================================================================
   ARCHIEF: TEAMS LIJST (Horizontale Kaarten)
   ========================================================================== */
.teams-list-section {
    padding: 40px 0 100px;
}

.teams-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Ruimte tussen de teams onderling */
}

.team-list-card {
    display: flex;
    flex-direction: column; /* Mobiel: foto boven, tekst onder */
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.4s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.team-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(243, 146, 0, 0.1);
    border-color: rgba(243, 146, 0, 0.3);
}

/* --- Foto Gedeelte --- */
.tlc-image-wrapper {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.tlc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-list-card:hover .tlc-img {
    transform: scale(1.05); /* Foto zoomt in bij hover */
}

/* Oranje gloed over foto bij hover */
.tlc-overlay {
    position: absolute; inset: 0;
    background: var(--color-primary);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.team-list-card:hover .tlc-overlay { opacity: 0.15; }

/* Placeholder voor teams zonder foto */
.tlc-placeholder {
    width: 100%; height: 100%;
    background: var(--color-dark);
    display: flex; align-items: center; justify-content: center;
}
.tlc-placeholder .dashicons {
    color: var(--color-primary); font-size: 4rem; width: 4rem; height: 4rem; opacity: 0.5;
}

/* --- Tekst Gedeelte --- */
.tlc-content {
    padding: 30px;
    width: 100%;
}

.tlc-subtitle {
    display: block; font-size: 14px; font-weight: 800;
    color: var(--color-primary); text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 10px;
}

.tlc-title {
    font-size: 2rem; color: var(--color-dark);
    margin-bottom: 24px; transition: color 0.3s ease;
}
.team-list-card:hover .tlc-title { color: var(--color-primary); }

/* De Knop */
.tlc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; font-size: 14px;
    background: transparent; color: var(--color-primary); 
    border: 2px solid var(--color-primary);
    border-radius: 8px; font-weight: 600;
    transition: all 0.3s ease;
}

.team-list-card:hover .tlc-btn {
    background: var(--color-primary); color: var(--color-white);
}

.tlc-btn .dashicons { transition: transform 0.3s ease; }
.team-list-card:hover .tlc-btn .dashicons { transform: translateX(5px); }

/* ==========================================================================
   DESKTOP LAYOUT (Horizontaal!)
   ========================================================================== */
@media (min-width: 768px) {
    .team-list-card {
        flex-direction: row; /* Desktop: Foto links, Tekst rechts */
        align-items: stretch; /* Rek de kaart uit */
        min-height: 280px; 
    }
    .tlc-image-wrapper {
        width: 40%; /* Foto is 40% van de breedte */
        height: auto; 
    }
    .tlc-content {
        width: 60%; /* Tekst is 60% van de breedte */
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Tekst verticaal in het midden */
        align-items: flex-start;
    }
}

/* ==========================================================================
   ARCHIEF: AGENDA LIJST (Horizontale Kaarten)
   ========================================================================== */
.agenda-list-section {
    padding: 40px 0 100px;
}

.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.agenda-list-card {
    display: flex;
    flex-direction: column; 
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.4s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.agenda-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(243, 146, 0, 0.1);
    border-color: rgba(243, 146, 0, 0.3);
}

/* --- Foto Gedeelte --- */
.alc-image-wrapper {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.alc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.agenda-list-card:hover .alc-img {
    transform: scale(1.05); 
}

.alc-overlay {
    position: absolute; inset: 0;
    background: var(--color-primary);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.agenda-list-card:hover .alc-overlay { opacity: 0.15; }

/* Bruine Placeholder voor activiteiten zonder foto */
.alc-placeholder {
    width: 100%; height: 100%;
    background: var(--color-dark); /* De Vosmeer bruine kleur */
    display: flex; align-items: center; justify-content: center;
}
.alc-placeholder .dashicons {
    color: var(--color-primary); /* Oranje kalender icoon */
    font-size: 4rem; width: 4rem; height: 4rem; opacity: 0.8;
}

/* --- Tekst Gedeelte --- */
.alc-content {
    padding: 30px;
    width: 100%;
}

.alc-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.alc-meta .dashicons {
    font-size: 16px; width: 16px; height: 16px; margin-right: 6px;
}

.alc-title {
    font-size: 2rem; color: var(--color-dark);
    margin-bottom: 16px; transition: color 0.3s ease; line-height: 1.2;
}
.agenda-list-card:hover .alc-title { color: var(--color-primary); }

.alc-excerpt {
    color: rgba(62, 43, 29, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* De Knop */
.alc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; font-size: 14px;
    background: transparent; color: var(--color-primary); 
    border: 2px solid var(--color-primary);
    border-radius: 8px; font-weight: 600;
    transition: all 0.3s ease;
}

.agenda-list-card:hover .alc-btn {
    background: var(--color-primary); color: var(--color-white);
}

.alc-btn .dashicons { transition: transform 0.3s ease; }
.agenda-list-card:hover .alc-btn .dashicons { transform: translateX(5px); }

/* ==========================================================================
   DESKTOP LAYOUT (Horizontaal)
   ========================================================================== */
@media (min-width: 768px) {
    .agenda-list-card {
        flex-direction: row; 
        align-items: stretch; 
        min-height: 280px; 
    }
    .alc-image-wrapper {
        width: 40%; 
        height: auto; 
    }
    .alc-content {
        width: 60%; 
        padding: 40px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: flex-start;
    }
}

/* --- Responsive Video voor Nieuws --- */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 verhouding */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .video-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px !important;
    }
}

/* =========================================
   BESTUUR BLOK COMPLEET
========================================= */

.bestuur-sectie { 
    margin: 60px auto; 
    font-family: var(--font-body); 
}

/* Header uitlijning (Titel en tekst netjes onder elkaar gecentreerd) */
.bestuur-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}
.bestuur-title {
    font-size: 2.5rem !important;
    color: var(--color-dark);
    margin-top: 0;
    margin-bottom: 15px;
}

/* CSS Grid voor de kaarten (1 kolom mobiel, 4 op desktop) */
.bestuur-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
}
@media (min-width: 600px) { .bestuur-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bestuur-grid { grid-template-columns: repeat(4, 1fr); } }

/* De Individuele Kaart */
.bestuur-card {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* De Hover Status! */
.bestuur-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 25px rgba(243, 146, 0, 0.1);
    transform: translateY(-3px);
}
.bestuur-card:hover .bestuur-naam {
    color: var(--color-primary);
}

/* Avatars & Initialen */
.bestuur-avatar-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
}
.bestuur-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bestuur-initials {
    width: 100%;
    height: 100%;
    background-color: #FFF3E5 !important; /* Zacht oranje achtergrond */
    color: var(--color-dark) !important;  /* Bruine letters */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Teksten in de kaart */
.bestuur-naam {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: var(--color-dark);
    transition: color 0.3s ease;
}
.bestuur-functie {
    display: block;
    font-size: 13px;
    color: var(--color-dark-soft);
    margin-bottom: 15px;
}
.bestuur-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.bestuur-contact-link:hover { text-decoration: underline; }

/* Onderste Contact Blok (CTA) */
.bestuur-cta {
    background-color: #FFF9F2 !important; /* Zachte warme oranje tint */
    border: 2px solid var(--color-primary) !important; /* Oranje omlijning */
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(243, 146, 0, 0.08); /* Lichte oranje gloed */
}
@media (min-width: 768px) {
    .bestuur-cta {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 40px;
    }
    .cta-text { flex: 1; }
    .cta-btn-wrapper { flex-shrink: 0; margin-left: 30px; }
}
.cta-text h3 { margin-top: 0; margin-bottom: 10px; color: var(--color-dark); }
.cta-text p { margin: 0; color: var(--color-dark-soft); font-size: 15px; }

/* =========================================
   FOOTER STYLING FINETUNING
========================================= */

/* Desktop layout (4 kolommen naast elkaar) */
@media (min-width: 768px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .site-footer .footer-bottom {
        flex-direction: row !important;
    }
}
@media (min-width: 992px) {
    .site-footer .footer-grid {
        /* Kolom 1 iets breder voor het logo & tekst, de rest gelijk verdeeld */
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important; 
    }
}

/* Snelle Links menu styling */
.footer-menu-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-menu-wrapper ul li a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}
.footer-menu-wrapper ul li a:hover {
    color: var(--color-primary); /* Wordt mooi oranje bij hover */
}

/* Ronde Social Icons met hover */
.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}
.social-circle:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Legal links (Privacybeleid etc.) hover */
.footer-legal a:hover {
    color: #fff !important;
}

/* Contact e-mail/telefoon hover */
.footer-contact a:hover {
    color: #fff !important;
}

/* =========================================
   FORMULIEREN BLOK STYLING
========================================= */

/* De basis verdeling */
.form-wrapper.layout-centered {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.form-wrapper.layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: start;
}

@media (min-width: 992px) {
    .form-wrapper.layout-split {
        grid-template-columns: 1fr 1.5fr; /* Links tekst, rechts breder formulier */
        text-align: left;
    }
}

/* Contact Form 7 "Excel" Styling */
.wpcf7-form label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    margin-top: 5px;
}

/* Rijtjes naast elkaar (Voornaam / Voorletters) zoals in Excel */
.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-row label {
    flex: 1;
    min-width: 200px;
}

/* De Verzendknop */
.wpcf7-submit {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 40px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 50px !important;
}

.wpcf7-submit:hover {
    background-color: var(--color-dark) !important;
    transform: translateY(-2px);
}

/* =========================================
   LUXE FORMULIER KAART STYLING
========================================= */

.form-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06); /* Subtiele luxe schaduw */
    max-width: 900px; /* Iets breder voor de 2-koloms velden */
    margin: 0 auto; /* Gecentreerd op de pagina, inhoud is links uitgelijnd */
    text-align: left;
    border: 1px solid rgba(0,0,0,0.03);
}

@media (min-width: 768px) {
    .form-card {
        padding: 60px; /* Meer ademruimte op grotere schermen */
    }
}

.form-card-title {
    font-size: 2.2rem;
    color: var(--color-dark);
    margin: 0;
    font-weight: 800;
}

.form-card-intro {
    font-size: 1.1rem;
    color: var(--color-dark-soft);
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Luxe Dropdown (Select) Styling */
.wpcf7-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f39200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
    padding-right: 45px !important;
    cursor: pointer;
}

/* Focus staat: randje oranje bij klikken */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1);
}

/* =========================================
   FORCEER CHECKBOX NAAST DE TEKST
========================================= */

/* Pak de specifieke Contact Form 7 lijst-item aan */
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0 !important;
}

/* Dwing het label om als een flex-row te werken */
.wpcf7-acceptance label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* Lijn uit op de bovenkant van de tekst */
    gap: 12px !important;
    text-align: left !important;
    cursor: pointer;
}

/* Zorg dat het vinkje zelf niet verspringt of naar een nieuwe regel gaat */
.wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0 !important; /* Voorkom dat het vakje platgedrukt wordt */
    margin-top: 4px !important; /* Lijn het vinkje mooi uit met de eerste regel tekst */
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--color-primary);
}

/* De tekst zelf */
.wpcf7-list-item-label {
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* =========================================
   STANDAARD ORANJE OPSOMMINGSTEKENS
========================================= */

/* 1. Herstel de standaard lijst met bolletjes */
.mt-content ul,
.entry-content ul,
.form-card ul {
    list-style: disc !important; 
    padding-left: 25px !important; /* Nette inspringing */
    margin-bottom: 25px !important;
}

/* 2. Zorg voor ademruimte tussen de regels */
.mt-content ul li,
.entry-content ul li,
.form-card ul li {
    display: list-item !important; /* Dwingt het standaard lijst-gedrag af */
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}

/* 3. Maak specifiek het bolletje oranje (werkt in alle moderne browsers) */
.mt-content ul li::marker,
.entry-content ul li::marker,
.form-card ul li::marker {
    color: #f39200 !important; /* De Vosmeer oranje kleur */
    font-size: 1.2em; /* Maakt het bolletje net een fractie steviger */
}

/* =========================================
   TRAININGSSCHEMA PAGINA
========================================= */

.schema-dag-blok {
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-radius: 8px;
}

.sd-header {
    background-color: #534033; /* De donkerbruine Vosmeer kleur */
    color: var(--color-white);
    padding: 18px 25px;
    border-radius: 8px 8px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-bullet {
    color: var(--color-primary); /* Oranje bolletje */
    font-size: 1.5rem;
}

.sd-body {
    background-color: var(--color-white);
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0 25px;
}

.sd-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Verwijder het lijntje bij de allerlaatste training op een dag */
.sd-rij:last-child {
    border-bottom: none;
}

.sd-team-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sd-team-naam {
    font-size: 1.15rem;
    color: var(--color-dark);
}

.sd-badge {
    background-color: #fff4e6; /* Licht oranje achtergrond */
    color: #f39200; /* Vosmeer oranje tekst */
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sd-tijd-info {
    color: #666;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.sd-tijd-info .dashicons {
    color: var(--color-primary);
}

/* Mobiele optimalisatie */
@media (max-width: 768px) {
    .sd-rij {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* Styling voor de klikbare team link */
.sd-team-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

/* Hover effect: de teamnaam wordt oranje */
.sd-team-link:hover .sd-team-naam {
    color: var(--color-primary);
}

/* =========================================
   MOBIELE MENU KNOP (LID WORDEN)
========================================= */

/* 1. Verberg dit menu-item op desktop (zodat je daar geen twee knoppen hebt) */
@media (min-width: 992px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* 2. Maak er een echte Vosmeer-knop van op mobiel */
@media (max-width: 991px) {
    li.mobile-menu-btn {
        margin-top: 25px !important; /* Geeft wat ademruimte onder 'Contact' */
        padding-bottom: 25px !important;
    }

    li.mobile-menu-btn a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: var(--color-primary) !important; /* Vosmeer Oranje */
        color: #ffffff !important;
        padding: 14px 25px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        text-align: center;
        width: 100% !important; /* Maakt de knop mooi breed over het hele menu */
        box-shadow: 0 4px 15px rgba(243, 146, 0, 0.2);
        transition: all 0.3s ease;
    }

    li.mobile-menu-btn a:hover,
    li.mobile-menu-btn a:focus {
        background-color: #d68100 !important; /* Iets donkerder oranje bij aantikken */
        transform: translateY(-2px);
    }
}

/* --- OVERRIDE: Forceer Dashicons --- */
.dashicons, 
.dashicons-before::before,
[class^="dashicons-"],
[class*=" dashicons-"] {
    font-family: 'dashicons' !important;
    font-weight: normal !important;
    font-style: normal !important;
}