/* ========================================================= */
/* 9. Media Queries */
/* ========================================================= */

@media (max-width: 1000px) {
    /* Algemene aanpassingen */
    body {
        padding-top: 0px;
    }
    
    /* Zorg ervoor dat de site niet meescrolt als het menu open is */
    body.menu-open {
        overflow: hidden;
    }

    /* Oplossing voor de onverwachte token-fout */
    .content-grid {
        grid-template-columns: 1fr;
    }
    .content-grid .cta-button {
        width: 100%;
    }
    .intro-section {
        flex-direction: column;
        margin-top: 0;
        padding-top: 0px;
    }
    .intro-text, .intro-slider {
        flex: 1 1 100%;
    }
    .intro-section .intro-text {
        color: var(--color-text-light);
    }
    .button-section,
    .big-button-section,
    .button-section-1,
    .button-section-2,
    .button-section-3 {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* UNIFORME KNOPPEN OP MOBIEL */
    .big-button-base,
    .big-button-section .big-button-base,
    .button-section-1 .big-button-base,
    .button-section-2 .big-button-base,
    .button-section-3 .big-button-base {
        width: 300px;
        max-width: 100%;
        height: 70px;
        min-height: 70px;
        flex-basis: auto;
    }

    /* GEZAMENLIJKE STIJL VOOR DE KNOPTEKST */
    .big-button-base .button-title,
    .big-button-base .mobile-text {
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
    }

    .big-button-base .desktop-text,
    .big-button-base .mobile-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Verbergt de omschrijving op mobiel */
    .big-button-base small {
        display: none;
    }

    /* Verbergt de desktop-tekst en toont alleen de mobiele tekst */
    .big-button-base .desktop-text {
        display: none;
    }
    .big-button-base .mobile-text {
        display: block;
        text-align: center;
    }

    /* Navigatie mobiel */
    .main-nav .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-darkest);
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../assets/images/roos.jpg');
        background-size: cover;
        background-position: center 230px; 
        background-repeat: no-repeat;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 170px;
        padding-bottom: 100px;
        transition: transform 0.4s ease;
        z-index: 10;
        overflow-y: auto;
    }
    
    /* Toon het mobiele menu wanneer de body de klasse .menu-open heeft */
    .menu-open .main-nav .nav-links {
        display: flex;
    }
    
    /* MOBIEL NAVIGATIE MENU & SUBMENU'S */
    .main-nav .nav-links li.has-submenu .submenu {
        display: block;
        position: static;
        width: 45%;
        background-color: white;
        box-shadow: none;
        padding: 0 10px;
        margin: 0 auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        border-radius: 8px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .main-nav .nav-links li.has-submenu.is-open .submenu {
        max-height: 500px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-nav .nav-links li.has-submenu .submenu a {
        padding: 10px 15px;
        font-size: 1.1rem;
        font-family: calibri;
        color: black;
        font-weight: bold;
    }
    .main-nav .nav-links li {
        width: 100%;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .main-nav .nav-links a {
        padding: 15px;
        font-size: 1.2rem;
        display: block;
        transition: background-color 0.3s ease;
    }
    .main-nav .nav-links a.active {
        background-color: var(--brand-orange);
        color: black;
        border-radius: 8px;
    }
    
    /* Admin dashboard mobiel */
    .dashboard-table, .dashboard-table thead, .dashboard-table tbody, .dashboard-table tr, .dashboard-table th, .dashboard-table td {
        display: block;
        width: 100%;
        border-spacing: 0;
    }
    .dashboard-table thead {
        display: none;
    }
    .dashboard-table tr {
        margin-bottom: 20px;
        border: 1px solid #333;
        border-radius: 8px;
    }
    .dashboard-table td {
        position: relative;
        padding: 20% 20% 20% 40%;
        text-align: right;
        border-bottom: 1px solid #333;
    }
    .dashboard-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        padding: 20px;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
        color: var(--brand-orange);
    }
    .user-details-row {
        flex-direction: column;
        gap: 10px;
    }
    .user-details {
        flex: 1 1 100%;
    }

    /* Verkleint de ruimte tussen het logo en de tekst */
    .page-wrapper {
        margin-top: 1px;/* Pas deze waarde aan om de afstand te verkleinen */
	
    }

    /* Zorgt dat de header zelf minder ruimte inneemt */
    .site-header {
        padding: 0px 0px;/* Verkleint de boven- en onderpadding */
    }

    /* Verkleint de padding in de mobiele header container */
    .header-content {
        padding: 0px 0px;/* Verkleint de boven- en onderpadding */
    }
    /* Verklein het mobiele logo */
    .header-content .logo-wrap img {
        max-height: 120px;
        width: auto;
        align-items: center;
    }
    /* Stijl van het hamburger-menu */
    .hamburger-menu {
        display: block;
        cursor: pointer;
        z-index: 20;
        width: 25px;
        height: 25px;
        position: absolute; /* Zorgt ervoor dat het menu 'zweeft' */
        top: 25px; /* Positioneert het menu vanaf de bovenkant */
        left: 20px; /* Positioneert het menu vanaf de linkerkant */
        border: none;
        background: transparent;
        padding: 0;
    }
    .hamburger-menu .line {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--brand-orange);
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        margin-bottom: 5px;
    }
    .hamburger-menu .line:last-child {
        margin-bottom: 0;
    }
    /* Animatie van het hamburger-icoon wanneer het actief is */
    .hamburger-menu.is-active .line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-menu.is-active .line:nth-child(2) {
        width: 0;
        opacity: 0;
    }
    .hamburger-menu.is-active .line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Aanpassingen om effecten uit te schakelen op mobiel */
    /* Reset de hover-stijl van rijen in de planningstabel */
    .schedule-table tr:hover {
        background-color: transparent;
    }
    
    /* Reset de hover-stijl van social media-iconen */
    .social-logo-link:hover {
        transform: none;
        box-shadow: none;
    }

    /* Reset de hover-stijl voor footer-links */
    .footer-webdesign a:hover {
        color: inherit;
    }

    /* Aanpassingen voor het hoofdmenu op mobiel */
    .nav-links li:hover > a,
    .nav-links li:hover > a:active,
    .nav-links li:hover > a:focus,
    .nav-links a:hover,
    .nav-links a:active,
    .nav-links a:focus {
        /* Reset de actieve of hover kleur naar de standaardkleur van de link */
        color: var(--color-text-light);
        /* Reset de achtergrondkleur van de link */
        background-color: transparent;
        /* Reset schaduw of transformaties die op hover worden toegepast */
        transform: none;
        box-shadow: none;
    }
    
    /* Schakel hover-effecten uit voor mobiele knoppen */
    .big-button-base:hover,
    .big-button-base:focus {
        background-color: transparent;
        color: var(--brand-orange);
    }
}

/* Verberg de hamburger-knop op desktop */
@media (min-width: 1001px) {
    .hamburger-menu {
        display: none;
    }
    .main-nav .nav-links {
        display: flex;
    }
}

.contributie-big-button {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

    .page-text-container {
        padding-top: 0px; /* pas deze waarde aan om de ruimte te verkleinen */
    }