/* =====================================================
   Pro-Monty — Mobile Readability Pass
   Verbetert leesbaarheid op telefoons zonder de
   desktop-styling te breken.
   ===================================================== */

/* Basis — geldt op alle schermen, maar belangrijkst op mobile */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inputs nooit kleiner dan 16px (anders zoomt iOS automatisch in) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
    font-size: 16px;
}

/* Bredere tap-targets — Apple HIG / WCAG: minimaal 44×44px */
a, button, [role="button"], .btn, .nav-cta, .hero-btn, .dag-btn, .dieet-pil, .filter-tab {
    min-height: 36px;
}
@media (max-width: 720px) {
    /* Op telefoon: 44px minimum voor klikbare items */
    a.nav-cta, a.hero-btn, button.hero-btn,
    .filter-tab, .dag-btn, .dieet-pil,
    button[type="submit"], .ctrl-btn, .admin-btn,
    .modal-cta, .btn-primair, .btn-secundair {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mobile-specifieke aanpassingen */
@media (max-width: 720px) {
    /* Body 17px op kleine schermen voor app-achtige leesbaarheid */
    body {
        font-size: 17px;
        line-height: 1.6;
    }

    /* Main padding ruimer */
    main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Recipe cards groter en luchtiger op mobile */
    .recipe-card {
        padding: 14px !important;
    }
    .recipe-foto-header, .recipe-foto-wrap {
        height: 140px !important;
    }
    .recipe-name {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }
    .recipe-desc {
        font-size: 0.88rem !important;
        line-height: 1.45 !important;
    }

    /* CTA-knoppen veel groter op mobile */
    .hero-btn, .nav-cta, .pijn-oplossing, .usp-btn {
        font-size: 1.05rem !important;
        padding: 14px 22px !important;
        border-radius: 12px !important;
    }

    /* Paragrafen: ademruimte */
    p {
        margin: 0 0 14px;
    }

    /* Lange leestekst niet té smal — geen krappe 18ch */
    main, .recept-wrap, .info-pagina, .blog-article {
        line-height: 1.65;
    }

    /* Headings strakker en niet té klein */
    h1 { font-size: clamp(26px, 6vw, 38px) !important; line-height: 1.18; }
    h2 { font-size: clamp(20px, 4.5vw, 26px) !important; line-height: 1.25; }
    h3 { font-size: clamp(17px, 3.8vw, 20px) !important; line-height: 1.3; }

    /* Buttons en CTA's — leesbaar */
    .hero-btn, .nav-cta, .dag-btn,
    button[type="submit"], .ctrl-btn {
        font-size: 0.95rem;
        padding: 12px 18px;
    }

    /* Links onder elkaar in tekst — meer ruimte tussen */
    p a, li a {
        padding: 2px 0;
        line-height: 1.7;
    }

    /* Cards meer padding voor lucht */
    .recipe-card, .dieet-pillen-blok,
    .pijn-sectie, .testimonial-card,
    .blog-card-body, .info-card, .ctrl-card {
        padding: 16px 18px;
    }

    /* Section-titles meer marge boven (lucht tussen secties) */
    .section-title, h1, h2 {
        margin-top: 22px;
    }

    /* Lijsten in body content */
    ul, ol {
        padding-left: 22px;
    }
    li {
        margin-bottom: 6px;
        line-height: 1.55;
    }

    /* Tabel-data leesbaarder */
    table { font-size: 14.5px; }
    th, td { padding: 8px 10px; }

    /* Lange paragrafen makkelijker lezen */
    .pijn-item, .testimonial-tekst, .info-tekst {
        line-height: 1.6;
        font-size: 1rem;
    }

    /* Cookie-banner mag iets minder dominant op mobiel */
    #cookie-banner {
        padding: 12px 14px !important;
    }
    .cookie-tekst strong { font-size: 0.95rem !important; }
    .cookie-tekst p { font-size: 0.85rem !important; }

    /* Forms — labels en inputs meer ademruimte */
    label {
        font-size: 0.92rem;
        margin-top: 14px;
    }

    /* Tablet-veiligheid: iframe / video schalen */
    iframe, video, embed { max-width: 100%; height: auto; }

    /* Voorkom horizontaal scrollen — alle content past in viewport */
    img, video, table, pre { max-width: 100%; }
    body, html { overflow-x: hidden; }
}

/* Extra-klein (oude/smalle telefoons, <380px) */
@media (max-width: 380px) {
    body { font-size: 16px; }
    .hero-title, h1 { font-size: 24px !important; line-height: 1.2; }
    .hero-sub { font-size: 14.5px !important; }
    .nav-cta { padding: 10px 14px; font-size: 0.88rem; }
    main { padding-left: 14px; padding-right: 14px; }
}

/* Reduceer animaties als gebruiker dat aangeeft */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Donkere modus (alleen als systeem-instelling, geen toggle) — komt later */
@media (prefers-color-scheme: dark) {
    /* Voorlopig: laat we de site licht houden, maar selectie-kleur netjes */
    ::selection { background: #EA6B2A; color: #fff; }
}