/*
 * WK Poule 2026 - Mobile navigation fix
 *
 * Doel:
 * - Navigatie op mobiel niet meer als enorme verticale kaart tonen.
 * - Sticky bovenaan bij scrollen.
 * - Horizontaal scrollbare compacte knoppen.
 * - Desktop blijft grotendeels zoals hij was.
 *
 * Plaats dit bestand in:
 * public/assets/css/mobile-nav-fix.css
 *
 * Voeg daarna in public/partials.php NA style.css toe:
 * <link rel="stylesheet" href="assets/css/mobile-nav-fix.css">
 */

@media (max-width: 900px) {

    body {
        padding-top: 0;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 1000;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;

        padding: .55rem .55rem !important;

        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;

        background:
            linear-gradient(180deg, rgba(20, 7, 34, .98), rgba(10, 3, 20, .98)) !important;

        border-bottom: 2px solid rgba(255, 196, 59, .55) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important;

        overflow: hidden;
    }

    .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;

        gap: .45rem !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        padding: .15rem .15rem .25rem !important;
        margin: 0 !important;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a {
        flex: 0 0 auto !important;

        min-width: auto !important;
        width: auto !important;

        padding: .55rem .85rem !important;

        border-radius: 999px !important;

        font-size: .86rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;

        text-align: center !important;

        background: rgba(255, 255, 255, .045) !important;
        border: 1px solid rgba(255, 243, 200, .28) !important;
        color: var(--cream, #fff3c8) !important;
    }

    .nav a.admin-pill,
    .nav a[href*="admin"] {
        /*background: var(--gold, #ffc43b) !important;*/
        /*color: #120820 !important;*/
        /*border-color: var(--gold, #ffc43b) !important;*/
    }

    .nav a:hover,
    .nav a:focus {
        background: rgba(255, 196, 59, .95) !important;
        color: #120820 !important;
    }

    /*
     * Zorg dat de content direct onder de sticky balk netjes begint.
     */
    .shell {
        width: calc(100% - 1rem) !important;
        margin-top: 1rem !important;
    }
}

/*
 * Tablet: iets compacter, maar niet zo extreem als mobiel.
 */
@media (min-width: 901px) and (max-width: 1200px) {
    .topbar {
        width: calc(100% - 2rem) !important;
        margin: 1rem auto !important;
        padding: .9rem !important;
        border-radius: 2rem !important;
    }

    .nav {
        justify-content: center !important;
        gap: .5rem !important;
    }

    .nav a {
        padding: .65rem .9rem !important;
        font-size: .9rem !important;
    }
}