/* =====================================================
   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;
    }
}

/* ── HARDE OVERFLOW-GUARD: geen enkele pagina mag horizontaal scrollen ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}
/* Voorkom dat lange woorden/URL's de pagina breken */
p, h1, h2, h3, h4, h5, h6, li, td, a, span {
    word-break: break-word;
    overflow-wrap: break-word;
}
/* Tabellen in scrollbare container ipv de hele pagina breed maken */
table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}
/* Voorkom dat flex-items hun container "openduwen" */
.recipe-grid > *, .kernpunten-grid > *, .testimonials-grid > *,
.hoe-stappen > *, .fase-deep-grid > *, .info-grid > *,
.dieet-pillen-rij > * {
    min-width: 0 !important;
}

/* Mobile-specifieke aanpassingen */
@media (max-width: 720px) {
    /* ── BASIS: alles groter en met meer lucht ── */
    body {
        font-size: 19px;          /* nog een tandje hoger — was 18 */
        line-height: 1.65;
    }

    /* Container max-widths nooit groter dan viewport */
    .container, main, section, article, .hero-card,
    .info-section, .recipe-grid, .kernpunten-grid,
    .testimonials-grid, .hoe-stappen, .pijn-sectie {
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box;
    }

    /* Mockup-frame: visueel breed maar mag niet overflowen */
    .mockup-frame {
        max-width: 100% !important;
        overflow: hidden;
    }
    .mockup-url { font-size: 0.78rem !important; }
    .mockup-profile-naam { font-size: 0.85rem !important; }
    .mockup-profile-dieet { font-size: 0.78rem !important; }
    .mockup-meal-titel { font-size: 1rem !important; }
    .mockup-meal-ingredienten { font-size: 0.85rem !important; }
    .mockup-meal-dag { font-size: 0.75rem !important; }
    .mockup-wissel { font-size: 0.78rem !important; }

    /* Cards min-width verlagen (was 240px → overflow op iPhone SE 320px) */
    .info-card, .testimonial-card, .kern-card {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .recipe-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .kernpunten-grid, .testimonials-grid, .hoe-stappen {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 14px !important;
    }

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

    /* Paragrafen + alinea-marges */
    p {
        font-size: 1rem;          /* erft 18px */
        line-height: 1.65;
        margin: 0 0 16px;
    }

    /* ── HEADINGS: zichtbaar groter ── */
    h1 { font-size: clamp(28px, 7vw, 42px) !important; line-height: 1.18; margin: 22px 0 14px; }
    h2 { font-size: clamp(22px, 5vw, 28px) !important; line-height: 1.25; margin: 22px 0 12px; }
    h3 { font-size: clamp(19px, 4vw, 22px) !important; line-height: 1.3; margin: 16px 0 10px; }

    /* ── RECEPT-KAARTEN: groter en duidelijker ── */
    .recipe-card { padding: 16px !important; }
    .recipe-foto-header, .recipe-foto-wrap { height: 160px !important; }
    .recipe-name {
        font-size: 1.12rem !important;  /* ±20px */
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    .recipe-desc {
        font-size: 0.95rem !important;  /* ±17px, was 0.88 */
        line-height: 1.5 !important;
        color: rgba(26,34,48,0.7) !important;
    }

    /* ── CTA's: vingervriendelijk en duidelijk ── */
    .hero-btn, .nav-cta, .pijn-oplossing, .usp-btn,
    .btn-primair, .btn-secundair, .dag-btn,
    button[type="submit"], .ctrl-btn {
        font-size: 1.05rem !important;
        padding: 14px 22px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
    }

    /* ── NAVIGATIE & MENU items ── */
    nav a, header a { font-size: 1rem !important; }
    .mbn-label { font-size: 12px !important; }       /* bottom-nav labels */
    .mbn-icon { font-size: 24px !important; }

    /* ── LABELS, META, TIJDSTEMPELS — niet ZO klein meer ── */
    .footer-link { font-size: 0.95rem !important; }
    .footer-tagline { font-size: 0.9rem !important; }
    small, .text-muted, .text-small,
    .recipe-meta, .modal-meta,
    .testimonial-sub, .info-faq-vraag {
        font-size: 0.92rem !important;  /* nooit kleiner dan ±16.5px */
    }

    /* ── TESTIMONIALS leesbaarder ── */
    .testimonial-tekst, .pijn-item {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    /* ── HOMEPAGE specifiek ── */
    .hero-sub { font-size: 1.05rem !important; line-height: 1.55 !important; }
    .hero-punch { font-size: 1.15rem !important; }
    .hero-note { font-size: 0.95rem !important; }
    .section-title { font-size: 1.55rem !important; line-height: 1.25; }
    .kern-titel, .usp-titel { font-size: 1.15rem !important; }
    .kern-tekst, .usp-sub { font-size: 1rem !important; line-height: 1.55 !important; }
    .hoe-titel { font-size: 1.05rem !important; }
    .hoe-sub { font-size: 0.95rem !important; }

    /* ── INFO-PAGINA leesbaarder ── */
    .info-faq-antwoord, .info-tekst,
    .fase-desc, .fase-deep-card li, .fase-deep-card p,
    .portie-rij span, .rule-card li, .suppl-item {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* ── PRIJZEN tabel ── */
    .prijzen-tabel td, .prijzen-tabel th { font-size: 0.95rem !important; padding: 12px 10px !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; }

    /* App-feel: header die wegschuift bij scrollen naar beneden */
    header {
        position: sticky;
        top: 0;
        z-index: 100;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(26,34,48,0.92) !important;
        /* Veel meer ruimte voor leesbare logo + grote tap-target */
        padding: 14px 18px !important;
        min-height: 64px;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: calc(14px + env(safe-area-inset-top)) !important;
    }
    header.pm-header-verborgen {
        transform: translateY(-100%);
    }

    /* Logo groter en duidelijker */
    header .logo {
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }
    header .logo-icon {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
    }
    header .logo-text {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1 !important;
    }
    header .logo-slogan {
        display: none !important; /* op mobiel weg — neemt ruimte in */
    }

    /* Hamburger als duidelijke knop met label */
    .hamburger {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(255,255,255,0.1) !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        cursor: pointer;
        min-height: 44px;
    }
    .hamburger > span:not(.hamburger-label) {
        width: 22px !important;
        height: 2.5px !important;
        background: #fff !important;
        border-radius: 2px;
        margin: 0 !important;
        position: relative;
    }
    .hamburger > span:nth-child(1) { margin-bottom: -6px !important; }
    .hamburger > span:nth-child(3) { margin-top: -6px !important; }
    .hamburger-label {
        color: #fff;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.01em;
        margin-left: 4px;
    }
    .hamburger.open .hamburger-label::after {
        content: " ✕";
    }
    .hamburger.open .hamburger-label { content: "Sluit"; }
    .hamburger.open > span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
    .hamburger.open > span:nth-child(2) { opacity: 0 !important; }
    .hamburger.open > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }

    /* Mobiel menu wanneer open — full-screen takeover, app-style */
    #main-nav.open {
        position: fixed !important;
        top: 64px !important; /* onder de header */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: var(--slate-blue, #1A2230) !important;
        padding: 24px 20px 100px !important;
        z-index: 999;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    #main-nav.open > a, #main-nav.open .nav-dropdown {
        padding: 18px 4px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        font-size: 1.1rem !important;
        font-weight: 600;
    }
    #main-nav.open > a:active, #main-nav.open .nav-dropdown-item:active {
        background: rgba(255,255,255,0.05);
    }
    #main-nav.open .nav-cta {
        margin-top: 12px;
        text-align: center;
        font-size: 1.1rem !important;
        padding: 14px !important;
    }
}

/* Extra-klein (oude/smalle telefoons, <380px) — nog wel ruim leesbaar */
@media (max-width: 380px) {
    body { font-size: 18px; }
    .hero-title, h1 { font-size: 26px !important; line-height: 1.22; }
    .hero-sub { font-size: 1rem !important; line-height: 1.55; }
    .nav-cta { padding: 11px 16px; font-size: 0.95rem; }
    main { padding-left: 12px !important; padding-right: 12px !important; }
    .recipe-name { font-size: 1.05rem !important; }
    .recipe-desc { font-size: 0.92rem !important; }
    /* Padding kleiner voor smalle schermen — anders past niets */
    .hero-card, .pijn-sectie, .info-section,
    .recipe-card, .kern-card, .testimonial-card,
    .blog-card-body, .dieet-pillen-blok {
        padding: 14px !important;
    }
}

/* App-feel: skeleton loading voor afbeeldingen tijdens laden */
.recipe-foto-img,
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0ece5 0%, #e8e3d8 50%, #f0ece5 100%);
    background-size: 200% 100%;
    animation: pm-skeleton 1.4s ease-in-out infinite;
}
.recipe-foto-img[src],
img[loading="lazy"][src] {
    /* Stop skeleton zodra image src geladen is */
    animation: none;
    background: transparent;
}
@keyframes pm-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Subtle tap-feedback op alle interactieve elementen */
button, a, [role="button"], .recipe-card, .info-card, .dieet-pil {
    -webkit-tap-highlight-color: transparent;
}
button:active, a:active:not(.nav-actief):not(.mbn-actief),
.recipe-card:active, .dieet-pil:active {
    transform: scale(0.97);
    transition: transform 0.1s;
}

/* 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; }
}