/* Diabec Mobile Optimizations — 375px and below
   Loaded after page styles + diabec-a11y.css so it wins the cascade.
   Targets iPhone SE (375×667), Galaxy A series (360×800), and smaller. */

/* ── 900px: express pay 2-col on tablets, nav toggle WCAG fix ── */
@media (max-width: 900px) {
    .express-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }

    /* #10 Footer gap/padding reduction */
    .footer {
        padding: 2.5rem 1rem !important;
    }
    .footer-columns,
    .footer-grid,
    .footer > div[style*="grid-template-columns"] {
        gap: 1.5rem !important;
    }

    /* #12 Hero badge text: bump from 0.72rem to readable size */
    .hero-badge {
        font-size: 0.82rem !important;
        padding: 0.45rem 1rem !important;
    }
    .hero-badge-item {
        font-size: 0.9rem !important;
    }

}

/* ── 520px: shop page grid collapse + cookie banner mobile ── */
@media (max-width: 520px) {
    /* #5 Shop grids: single column on small phones */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px;
        margin: 0 auto;
    }
    .pack-option {
        padding: 14px 16px !important;
    }
    .pack-pricing .pack-price {
        font-size: 18px !important;
    }

    /* #11 Trust bar: bump from 0.7rem to legible size */
    .trust-bar {
        font-size: 0.78rem !important;
        gap: 8px !important;
        padding: 8px 12px !important;
    }

    /* #13 Blog category nav: bump from 0.78rem to WCAG AAA */
    .cat-btn {
        font-size: 0.88rem !important;
        padding: 0.5rem 0.95rem !important;
        min-height: 44px !important;
    }

    /* #6 Cookie banner: tighter padding + stacked buttons */
    #cookieConsent {
        padding: 0.9rem 1rem !important;
    }
    #cookieConsentMain {
        flex-direction: column !important;
        gap: 0.8rem !important;
        align-items: stretch !important;
    }
    #cookieConsentMain > div:last-child {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    #cookieConsentMain button,
    #cookieConsentPrefs button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* ── 480px: mid-range small phones ── */
@media (max-width: 480px) {

    /* #7 Sticky CTA: min-height 48px, tighter horizontal padding */
    .sticky-cta {
        padding: 0.6rem 0.8rem;
        min-height: 48px;
    }
    .sticky-cta a {
        font-size: 0.92rem;
        padding: 0.6rem 0.4rem;
    }

    /* Newsletter form: stack input + button */
    #nlForm,
    .newsletter-capture form {
        flex-direction: column;
    }
    #nlForm input[type="email"],
    .newsletter-capture input[type="email"] {
        min-width: 0;
        width: 100%;
    }

    /* Footer disclaimer box: less horizontal padding */
    .footer-disclaimer {
        padding: 1.5rem 1.2rem;
    }

    /* #18 Blog resources grid: force 1-col on small phones */
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }
}

/* ── 420px: bridge step for hero H1 between 520→375 ── */
@media (max-width: 420px) {
    .hero h1,
    h1 {
        font-size: 1.95rem !important;
        line-height: 1.2 !important;
    }
}

/* ── 376px: smallest phones (iPhone SE 375px, Galaxy A11 360px)
   Note: 375px doesn't reliably match on 2x-DPR 375px devices,
   so we use 376px to ensure coverage. ── */
@media (max-width: 376px) {

    /* Base type scale tightening */
    html {
        font-size: 16px;
    }

    /* Navbar: tighter padding, ensure toggle is tappable */
    .navbar {
        padding: 0 0.75rem !important;
    }
    .nav-logo img {
        height: 40px;
    }
    .nav-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
    }

    /* Mobile nav dropdown: tighter */
    .nav-links {
        padding: 0.8rem 1rem 1.2rem !important;
    }

    /* Hero section */
    .hero {
        padding: 2rem 0.9rem 3rem !important;
    }
    .hero h1 {
        font-size: 1.85rem !important;
        line-height: 1.18 !important;
    }
    .hero-sub {
        font-size: 0.92rem !important;
    }

    /* Section headings */
    h2 {
        font-size: 1.55rem !important;
    }
    .final-cta h2 {
        font-size: 1.7rem !important;
    }
    .product-info h1 {
        font-size: 1.6rem !important;
    }

    /* Hero badges: slightly larger for readability */
    .hero-badge {
        font-size: 0.68rem !important;
        padding: 0.35rem 0.75rem !important;
    }

    /* Buttons: full-width on smallest screens */
    .btn-primary,
    .btn-secondary {
        font-size: 0.9rem !important;
        padding: 12px 16px !important;
        width: 100%;
        text-align: center;
    }

    /* #9 Ingredients grid: flexible % width instead of hardcoded 400px */
    .ingredients-grid {
        max-width: 90% !important;
    }

    /* Testimonials / pricing: no fixed max-width */
    .testimonials-grid {
        max-width: 95% !important;
    }
    .pricing-grid {
        max-width: 95% !important;
    }

    /* #8 Supplement facts table: readable on 375px */
    .supplement-facts-panel {
        padding: 1rem 0.8rem !important;
    }
    .supplement-facts-panel td,
    .supplement-facts-panel th {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    .supplement-facts-panel caption,
    .supplement-facts-panel .sf-title {
        font-size: 1rem !important;
    }

    /* #14 Product image: flexible min() instead of hardcoded 320px */
    .product-image img {
        max-width: min(320px, 90vw) !important;
        width: auto !important;
    }

    /* Sections: tighter horizontal padding */
    .section,
    section {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Footer: tighter gap + padding */
    .footer {
        padding: 2rem 0.8rem !important;
    }
    .footer-columns,
    .footer-grid,
    .footer > div[style*="grid-template-columns"] {
        gap: 1.2rem !important;
    }

    /* Cookie consent banner */
    #cookieConsent {
        padding: 1rem 0.9rem !important;
    }
    #cookieConsentMain {
        flex-direction: column !important;
        gap: 0.8rem !important;
        align-items: stretch !important;
    }
    #cookieConsentMain > div:last-child {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    #cookieConsentMain button,
    #cookieConsentPrefs button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.65rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Trust bar (checkout) */
    .trust-bar {
        font-size: 0.7rem !important;
        gap: 3px !important;
        padding: 6px 8px !important;
    }

    /* #17 Checkout form cards: tighter padding at 375px */
    .section-card {
        padding: 14px 10px !important;
        border-radius: 12px !important;
    }

    /* Checkout summary card */
    .summary-card {
        padding: 16px 12px !important;
    }

    /* Guarantee hero badges */
    .guarantee-hero {
        padding: 0 8px !important;
    }
    .guarantee-hero-inner {
        padding: 12px 14px !important;
    }

    /* Sticky CTA: even tighter */
    .sticky-cta {
        padding: 0.5rem 0.6rem !important;
    }

    /* Blog category buttons: bigger touch + text */
    .cat-btn {
        font-size: 0.82rem !important;
        padding: 0.55rem 0.85rem !important;
    }

    /* #18 Blog resources grid: force 1-col at 375px (was 2-col) */
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    /* FAQ answers: tighter padding */
    .faq-a-inner {
        padding: 0.8rem 1rem !important;
    }

    /* Newsletter section */
    .newsletter-capture {
        padding: 2rem 0.9rem !important;
    }
    .newsletter-capture h2 {
        font-size: 1.4rem !important;
    }

    /* Dosage cards (shop) */
    .dosage-cards {
        gap: 0.8rem !important;
    }
    .dosage-card {
        padding: 1rem !important;
    }

    /* Founder strip (homepage) */
    .founder-strip {
        padding: 2rem 0.9rem !important;
    }

    /* What to Expect timeline (homepage) */
    .timeline-cards {
        gap: 1rem !important;
    }
}