/* ==============================================
   Responsive CSS - GO rijtrainingen
   > 920px  : ongewijzigd (desktop)
   ≤ 920px  : vloeiende breedte (tablet/laptop)
   ≤ 600px  : gestapelde layout (mobiel)
   ============================================== */


/* ================================================
   HAMBURGER MENU - alleen auto navigatie
   ================================================ */
#hamburger {
    display: none;
    float: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: white;
    font-size: 26px;
    cursor: pointer;
    padding: 16px 20px;
    line-height: 1;
    width: auto !important;
}

/* ================================================
   TABLET & KLEINE LAPTOP  (max 920px)
   ================================================ */
@media screen and (max-width: 920px) {

    /* Header */
    #header {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    #header_center {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    #header_logo {
        margin-left: 20px;
    }

    #header_fb {
        width: auto;
        margin-right: 0;
        margin-top: 10px;
    }

    /* Facebook like widget verbergen (breekt layout op smal scherm) */
    #like_fb_go {
        display: none;
    }

    /* Navigatie */
    #navigation_bar {
        width: 100%;
        height: auto;
    }

    #navigation_center {
        width: 100%;
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
    }

    .nav_item {
        float: none !important;
        flex: 1 1 auto;
        height: auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box;
        min-width: 80px;
    }

    /* Hamburger: alleen auto nav */
    #hamburger {
        display: block;
        float: none !important;
    }

    .nav-auto {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-auto #navigation_center {
        display: none;
        flex-direction: column;
        width: 100%;
        flex-wrap: nowrap;
    }

    .nav-auto #navigation_center.open {
        display: flex;
        width: 100%;
    }

    .nav-auto .nav_item {
        width: 100%;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
        min-width: unset;
        padding: 14px 20px !important;
    }

    /* Content */
    #center {
        width: 100%;
        box-sizing: border-box;
    }

    /* Decoratieve achtergrond verbergen (vereist vaste afmetingen) */
    #center_image {
        display: none;
    }

    #content_block {
        width: 100%;
        margin-top: 20px;  /* Was 200px vanwege center_image, nu niet nodig */
        padding: 0 10px;
        box-sizing: border-box;
    }

    #white_block,
    #half_white_block,
    #third_white_block {
        width: auto;
        float: none;
        box-sizing: border-box;
    }

    /* Footer */
    #footer {
        width: 100%;
    }

    #footer-center {
        width: 100%;
        box-sizing: border-box;
    }

    #footer-right {
        margin-left: 0;
        width: auto;
    }
}


/* ================================================
   MOBIEL  (max 600px)
   ================================================ */
@media screen and (max-width: 600px) {

    /* Header: verticaal stapelen */
    #header_center {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #header_logo {
        float: none;
        margin-left: 0;
    }

    #header_fb {
        float: none;
        margin-top: 0;
    }

    /* Afbeeldingen in content: niet floaten, full-width */
    #white_block img,
    #half_white_block img,
    #third_white_block img {
        float: none !important;
        display: block;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 12px 0 !important;
    }

    /* Footer: verticaal stapelen */
    #footer-left,
    #footer-right {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    /* Contact */
    #contact-left {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    #contact-form {
        float: none;
        margin-top: 10px;
    }

    /* Tarieven tabel: één kolom */
    .tarieven {
        width: 100%;
    }

    .tarieven td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border-bottom: none;
    }

    .tarieven tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid gray;
        border-radius: 3px;
        padding: 5px;
    }
}