/* ==========================================================================
   RESPONSIVE.CSS - Dynamische tekst + Werkende Active Status
   ========================================================================== */

/* Desktop: Verberg mobiele elementen */
@media (min-width: 1441px) {
    .menu-toggle, .mobile-sidebar, .sidebar-overlay {
        display: none !important;
    }
}

/* Tablet & Mobiel */
@media (max-width: 1440px) {
    .main-nav { display: none !important; }

    /* De Sidebar */
    .mobile-sidebar {
        position: fixed;
        top: 0;
        right: -95%;
        width: 60%; 
        min-width: 280px;
        height: 100%;
        background-color: #ffffff;
        z-index: 2000;
        transition: right 0.3s ease-in-out;
        padding: 80px 5% 40px 5%;
        overflow-y: auto;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        text-align: left !important;
    }

    .mobile-sidebar.open {
        right: 0;
    }

    .mobile-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left !important;
    }

    /* DE TEKST: Algemene links in sidebar */
    .mobile-sidebar a, 
    .group-title a {
        font-size: clamp(1.4rem, 4vw, 2.2rem); /* !important verwijderd voor overschrijfbaarheid */
        color: #222; 
        font-weight: 800;
        display: block;
        padding: 15px 12px;
        text-decoration: none;
        border-radius: 8px;
        margin-bottom: 8px;
        line-height: 1.2;
        text-align: left !important;
        transition: background-color 0.2s;
    }

    /* ===== DE ACTIVE STATUS (Nu met extra prioriteit) ===== */
    .mobile-sidebar a.active,
    .mobile-sidebar .mobile-group a.active {
        background-color: rgba(10, 121, 104, 0.1) !important; /* Lichtgroene achtergrond */
        color: rgb(10, 121, 104) !important;                /* De merkkleur */
        outline: 2px solid rgb(10, 121, 104) !important;
        font-weight: 900;
    }

    /* Groep styling */
    .mobile-group {
        margin-top: 20px;
        margin-bottom: 25px;
        text-align: left !important;
    }
    
    .mobile-group ul {
        margin-left: 15px;
        border-left: 4px solid #eee; /* Standaard grijze lijn */
        padding-left: 15px;
    }

    /* Als een submenu een actieve link bevat, maken we de lijn groen */
    .mobile-group:has(a.active) ul {
        border-left-color: rgb(10, 121, 104);
    }

    /* Submenu tekstgrootte */
    .mobile-group ul a {
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        font-weight: 600;
        color: #444;
        padding: 10px 12px;
    }

    /* Sidebar Header */
    .sidebar-header .site-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        font-weight: 800;
        color: rgb(10, 121, 104);
        display: block;
        text-align: left;
        margin-bottom: 30px;
    }

    /* Overlay & Toggle */
    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
        z-index: 1999;
    }
    .sidebar-overlay.active { display: block; }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 70px;
        height: 70px;
        background: rgb(10, 121, 104);
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 2001;
        padding: 12px;
        cursor: pointer;
    }
    .menu-toggle span { width: 100%; height: 3px; background-color: white; border-radius: 10px; }
}

@media (max-width: 600px) {
    .mobile-sidebar { width: 85%; }
}

/* Specifiek voor de info-blokken op mobiel/tablet */
@media (max-width: 1440px) {
    
    /* Maak de titels van de tekstblokken groter */
    .info-block h2 {
        font-size: clamp(1.8rem, 5vw, 2.2rem) !important;
        margin-bottom: 1.5rem;
    }

    /* Maak de hoofdtekst (p) en lijstjes (li) in info-blocks groter */
    .info-block p, 
    .info-block ul li {
        font-size: 1.5rem !important; /* Verhoogd van 1.15rem naar 1.3rem */
        line-height: 1.6;             /* Genoeg ruimte tussen regels voor leesbaarheid */
        color: #333;                  /* Iets donkerder voor beter contrast op kleine schermen */
        text-align: left;             /* Optioneel: houdt tekst links ondanks dat de container gecentreerd kan zijn */
    }

    /* De knop (CTA) in het tekstvak ook iets groter voor dikke vingers */
    .info-block .cta-btn {
        font-size: 1.5rem;
        padding: 15px 30px;
        display: inline-block; /* Zorgt dat de padding goed werkt */
        width: auto;           /* Voorkomt dat de knop de hele breedte pakt tenzij je dat wil */
    }
}

/* Voor extra kleine telefoons (onder 600px) */
@media (max-width: 600px) {
    .info-block p, 
    .info-block ul li {
        font-size: 1.25rem !important; /* Net iets kleiner dan tablet, maar groter dan standaard */
    }
}