/* ============================================================
   lib/styles/responsive/mobile.css — Fishermens Academy
   Breakpoint: 0px – 639px (max-width: 639px)
   Focus: Low-end mobile devices, max readability, min 44px tap targets.
   ============================================================ */

@media screen and (max-width: 639px) {

    /* 1. CSS Variable Overrides */
    :root {
        --container-padding: 16px;
        --fs-h1: 28px;
        --fs-h2: 24px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-body: 16px;
        /* Keep body highly readable on small screens */
        --space-3xl: 40px;
        /* Tighter section spacing */
    }

    /* 2. Typography Adjustments */
    h1 {
        letter-spacing: -0.25px;
    }

    h2 {
        margin-top: var(--space-xl);
    }

    p {
        max-width: 100%;
    }

    /* 3. Tap Targets & Accessibility (Enforced for Mobile) */
    button,
    a.button-link,
    input,
    select,
    .touch-target {
        min-height: var(--min-touch-target) !important;
        /* 44px minimum */
        min-width: var(--min-touch-target);
    }

    /* 4. Layout & Grids (Single Column) */
    .card-grid,
    .form-grid,
    .grid-layout {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

/* 5. Navigation */
    .navbar__desktop-menu,
    .sidebar {
        display: none !important;
    }

    .navbar__mobile-menu {
        display: flex;
    }

    /* Scale down the logo and text for mobile screens */
    .academy-navbar__logo {
        gap: 8px; /* Tighter spacing */
    }

    .academy-navbar__logo-image {
        height: 28px; /* Scaled down to fit smaller header */
    }

    .academy-logo-text {
        font-size: 16px; /* Keep text from wrapping */
    }

    /* 6. Utility Overrides */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }
}