/* ==========================================================================
   css/mobile.css - Geoptimaliseerde Versie
   ========================================================================== */

/* Media query is essentieel om desktop-styling niet te overschrijven [2, 3] */
@media screen and (max-width: 768px) {

    /* 1. PAGINA-BASIS & ACHTERGROND */
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden; /* Voorkomt horizontale scrollbar [4] */
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* Zorgt dat padding binnen de 100% breedte valt [5] */
    }

    body {
        /* 'scroll' is de veiligste keuze voor iOS Safari [6, 7] */
        background-attachment: scroll; 
    }

    /* 2. LAYOUT OPTIMALISATIE */
    .container, 
    section, 
    .content-wrapper,
    main {
        padding-left: 15px; /* Iets ruimer voor betere leesbaarheid [8] */
        padding-right: 15px;
    }

    /* Verbeterde tabel-UX: laat tabellen scrollen in plaats van ze te pletten [9] */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Grid-aanpassing naar 1 kolom voor smartphones [8, 10] */
    .grid-3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 3. LEESBAARHEID & TYPOGRAFIE */
    .section-title {
        /* Gebruik rem voor schaalbaarheid op basis van gebruikersinstellingen [5, 11] */
        font-size: 1.75rem; 
        line-height: 1.2;
    }

    .checker-title {
        font-size: 0.85rem;
        margin: 20px 0 12px;
        text-align: center;
    }

    /* 4. VINGER-VRIENDELIJKE NAVIGATIE & FORMULIEREN */
    /* Google adviseert touch targets van minimaal 48x48dp [12, 13] */
    .navbar a, 
    .menu a,
    header a.btn,
    .header-buttons a { 
        padding: 12px; /* Vergroot het klikbare oppervlak voor 'dikke vingers' [14] */
        margin: 5px;
        display: inline-block;
        min-width: 44px; /* Voldoet aan iOS Human Interface richtlijnen [15, 16] */
    }

    .checker-form input, 
    .checker-form select, 
    .checker-form button {
        width: 100%;
        padding: 14px; 
        /* 16px voorkomt dat iOS automatisch inzoomt bij focus [17] */
        font-size: 16px; 
        margin-bottom: 10px;
        border-radius: 4px;
    }

    .checker-form {
        margin-bottom: 30px;
    }
}