/*
 * mobile-base.css — Phase 1 mobile hardening for the Vance Medical theme.
 *
 * This file is enqueued AFTER main.css (see functions.php → vance_health_hub_scripts)
 * so every rule here wins specificity ties against the equivalent rule in main.css.
 * Keep this file small and surgical — it exists to fix the "stop the bleeding"
 * P0/P1 mobile issues listed in MOBILE-AUDIT.md without touching desktop layout.
 *
 * Companion: MOBILE-PLAN.md → "Phase 1 — Foundations".
 */

/* ---------------------------------------------------------------------------
 * 1. Base HTML / body hardening
 * ------------------------------------------------------------------------- */

/* Prevent iOS Safari from inflating font-size after orientation change. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Stops decorative absolutely-positioned glow elements (front-page.php ~491,517,908)
 * from creating horizontal scroll on narrow phones. */
body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * 2. iOS Safari input zoom — keep at 16px exactly.
 *    Apple zooms any focused input whose computed font-size is below 16px.
 *    See MOBILE-AUDIT.md §5. Applies on all viewport widths because the audit
 *    found 13-15px inputs sprinkled across desktop and mobile inline styles.
 * ------------------------------------------------------------------------- */
input,
select,
textarea,
.chat-input,
.form-input {
    font-size: 16px;
}

/* Buttons aren't focusable inputs but inherit weird browser defaults — set a
 * sane minimum so Send / Submit don't shrink to 13px next to a 16px input. */
button,
.btn {
    font-size: max(14px, 1em);
}

/* ---------------------------------------------------------------------------
 * 3. Fixed-header content offset.
 *    main.css:2132-2139 makes .site-header position:fixed at <=768px but
 *    never offsets the page below it — first ~70px of every page sits under
 *    the header. Reserve that space, except where a template opts out via
 *    body.dashboard-body (uses its own layout) or body.no-header-offset.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body:not(.dashboard-body):not(.no-header-offset) {
        padding-top: 70px;
    }
}

/* ---------------------------------------------------------------------------
 * 4. Tap targets — meet Apple HIG (44pt) / Material (48dp) minimums.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .btn,
    .pagination a,
    .pagination span {
        min-height: 44px;
        padding-block: 12px;
    }

    /* Don't break Mega Menu Pro's own animated toggle button or its menu items. */
    button:not(.mega-toggle-animated):not(.mega-menu-link):not(.mobile-menu-toggle) {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------
 * 5. Resolve the dual-hamburger conflict.
 *    Mega Menu Pro is the keeper (see MOBILE-PLAN.md §1.2). When it's active
 *    WordPress adds body.mega-menu-{menu-id} — for the primary menu that's
 *    body.mega-menu-primary-menu. Hide the theme's bespoke hamburger and its
 *    .main-nav drawer whenever MM Pro is rendering, but leave them functional
 *    if MM Pro is ever deactivated (defence in depth — see audit §2.1).
 * ------------------------------------------------------------------------- */
body.mega-menu-primary-menu .mobile-menu-toggle {
    display: none !important;
}

/* IMPORTANT: Mega Menu Pro renders its own hamburger + menu INSIDE the theme's
 * <nav class="main-nav"> (that's where the theme calls wp_nav_menu). So we must
 * NOT hide .main-nav on mobile — doing so hides MM Pro's hamburger too, leaving
 * phones with NO menu at all. Instead, neutralise the theme's old off-canvas
 * styles on .main-nav so MM Pro's wrapper displays in normal flow and MM Pro can
 * run its own responsive toggle/menu. (Regression fix — see git history.) */
@media (max-width: 767.98px) {
    body.mega-menu-primary-menu .main-nav {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* When the bespoke hamburger IS being used (no MM Pro), make the open/close
 * state visible — main.css references .menu-icon / .close-icon classes that
 * don't exist in markup, so the icon-swap silently no-ops (audit §2.2).
 * Use the button's own .is-open class instead and animate the three bars. */
.mobile-menu-toggle {
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    margin: 5px auto;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * 6. Off-canvas drawer height — use dynamic viewport units where supported
 *    so the iOS Safari address-bar collapse doesn't leave a gap.
 * ------------------------------------------------------------------------- */
@supports (height: 100dvh) {
    @media (max-width: 767.98px) {
        .main-nav {
            height: calc(100dvh - 70px);
        }
    }
}

/* ---------------------------------------------------------------------------
 * 7. Inline-style escape hatches — bypass element-level specificity.
 *
 * The audit found ~1200 inline style="..." attributes; we can't strip them
 * all in Phase 1, but the worst offenders (min-width:300px in flex children)
 * cause real horizontal overflow on iPhone SE / 13 mini (375px). For those
 * specific patterns, override at <=767.98px with !important.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Footer newsletter bar — footer.php:11, 16 */
    .newsletter-bar > div[style*="min-width: 300px"],
    .newsletter-bar > form[style*="min-width: 300px"] {
        min-width: 0 !important;
        flex-basis: 100% !important;
    }

    /* Generic safety net for any flex child carrying inline min-width 300px */
    [style*="min-width: 300px"] {
        min-width: min(300px, 100%) !important;
    }
    [style*="min-width:300px"] {
        min-width: min(300px, 100%) !important;
    }
    [style*="min-width: 250px"] {
        min-width: min(250px, 100%) !important;
    }

    /* Footer newsletter form: stack input + button rather than crowd into one row */
    .newsletter-bar form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .newsletter-bar form .btn,
    .newsletter-bar form button[type="submit"] {
        width: 100% !important;
    }

    /* Hero inline padding 95/140 (front-page.php:387, page-about.php:69, etc.)
     * — element-level inline beats a class !important, but [style*=] selectors
     * have the same low specificity as inline; we still win because we're a
     * later cascade rule and use !important explicitly. */
    section[style*="padding: 95px 0 140px"],
    section[style*="padding:95px 0 140px"] {
        padding: 50px 0 60px !important;
    }
}

/* ---------------------------------------------------------------------------
 * 8. Small-phone breakpoint (≤480px) — squeeze container + headings further.
 *    main.css has a 480px block (line 1769) but it only touches hero, quick-nav
 *    and category header. Add the missing pieces.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h1 {
        font-size: clamp(24px, 7vw, 28px) !important;
    }

    h2 {
        font-size: clamp(20px, 6vw, 24px) !important;
    }

    .hero h1 {
        font-size: clamp(24px, 7.5vw, 30px) !important;
    }

    .hero p {
        font-size: 15px !important;
    }

    /* Footer column padding pinch */
    .footer-grid {
        gap: 24px !important;
    }

    .newsletter-bar {
        padding: 24px !important;
    }

    .newsletter-bar h3 {
        font-size: 20px !important;
    }

    /* Guest-save modal padding 40px eats 80px on 360px viewports */
    #guest-save-modal .modal-content {
        padding: 24px !important;
    }
}

/* ---------------------------------------------------------------------------
 * 9. Safe-area-inset for iPhones with notch / Dynamic Island.
 * ------------------------------------------------------------------------- */
@supports (padding: max(0px, env(safe-area-inset-top))) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    @media (max-width: 767.98px) {
        body:not(.dashboard-body):not(.no-header-offset) {
            padding-top: calc(70px + env(safe-area-inset-top));
        }
    }
}

/* ---------------------------------------------------------------------------
 * 10. Reduced motion — respect user preference for the lift transitions.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * 12. Dashboard header user meta (name + role).
 *     Replaces the broken inline `style="...@media(min-width:768px){...}"`
 *     at page-dashboard.php:260 (audit §4.2 / P0-D). An @media inside a style
 *     attribute is invalid CSS, so the block was display:none on every screen.
 *     Intent: show the name/role text beside the avatar on tablet/desktop,
 *     hide it on phones where space is tight (avatar alone remains).
 * ------------------------------------------------------------------------- */
.dash-user-meta {
    text-align: right;
    display: block;
}

@media (max-width: 767.98px) {
    .dash-user-meta {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * 11. Hover-only hover states — touch devices fire :hover on tap and the
 *     element stays "hovered" until next tap. Confine lift transforms to
 *     devices with a real pointer.
 * ------------------------------------------------------------------------- */
@media (hover: none) {
    .vance-category-card:hover,
    .social-link:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * 13. Mega Menu Pro mobile palette (admin-requested brand colours).
 *     toggle: transparent button, #2F4F6F bars on the white header
 *     mobile dropdown panel background: #2F4F6F
 *     top-level item text: #f4ffff
 *     2nd-level (sub-menu) background: #f4ffff ; 2nd-level item text: #2F4F6F
 *     Class-based selectors (not the wrap id) for resilience; scoped to phones
 *     so the desktop horizontal nav is unaffected.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Hamburger toggle: transparent background, navy bars. */
    body.mega-menu-primary-menu .mega-menu-toggle {
        background: transparent !important;
    }
    body.mega-menu-primary-menu .mega-menu-toggle .mega-toggle-animated-inner,
    body.mega-menu-primary-menu .mega-menu-toggle .mega-toggle-animated-inner::before,
    body.mega-menu-primary-menu .mega-menu-toggle .mega-toggle-animated-inner::after {
        background-color: #2F4F6F !important;
    }

    /* Mobile dropdown panel. */
    body.mega-menu-primary-menu ul.mega-menu,
    body.mega-menu-primary-menu #mega-menu-primary-menu {
        background-color: #2F4F6F !important;
    }

    /* Un-trap the off-canvas panel from the header's compositing layer.
     *
     * main.css gives .site-header `transform: translateZ(0)` as a Chromium
     * stale-paint workaround. A non-none transform makes an element a
     * containing block for `position: fixed` DESCENDANTS — and the drawer
     * (#mega-menu-primary-menu) is one. So the drawer resolves its top/left
     * against the 70px header box instead of the viewport.
     *
     * Today that is invisible, because the mobile header is itself
     * `position: fixed; top: 0`, so the two origins coincide. It is correct
     * by coincidence, not by design. Measured on the live site at 375px
     * (2026-08-28): pushing the header to `top: 40px` moved the drawer to
     * `top: 40px` with it, leaving a 40px gap above and 40px overflowing
     * below. Anything that offsets the header does that for real — the WP
     * admin bar (32px for logged-in editors), a promo strip, or a consent
     * banner that pushes content down.
     *
     * The paint workaround is not needed here: it targets a STICKY header
     * above an overflow:hidden hero, and this header is fixed, which already
     * gets its own layer. Verified with the same probe after the override:
     * the drawer's offsetParent becomes null (viewport-anchored), the header
     * stays fixed at top:0/h:70, all four drawer links stay hit-testable,
     * and the document gains no horizontal overflow.
     *
     * Do not replace this with `will-change: transform` — that creates the
     * same containing block and reinstates the bug. */
    body.mega-menu-primary-menu .site-header,
    .site-header {
        transform: none !important;
    }

    /* Top-level drawer rows: 40px -> 46px, clearing the 44px touch minimum.
     *
     * Max Mega Menu's generated stylesheet pins these at `height: 40px;
     * line-height: 40px` inside its own `@only screen and (max-width: 768px)`
     * block, using a DOUBLE-ID selector
     * (#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li > a). A
     * single-ID override loses to it outright — measured, not assumed: a
     * first attempt scoped to `body.mega-menu-primary-menu ...` left all four
     * rows at 40px. Hence the matching double-ID selector plus !important.
     *
     * height must be released to `auto` as well as setting min-height; the
     * plugin's explicit 40px would otherwise keep winning on the height
     * property itself. line-height drops from 40px to 1.4 so a label that
     * wraps to two lines does not inherit a 40px leading.
     *
     * Verified live at 375px (2026-08-28): all four rows 40px -> 46px, every
     * row still hit-testable at its centre, the expand arrow keeps its 14x20
     * box, the drawer stays 300x812 at x=0, and the document gains no
     * horizontal overflow. */
    body.mega-menu-primary-menu #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        min-height: 46px !important;
        line-height: 1.4 !important;
    }

    /* Reveal the off-canvas panel on open. Max Mega Menu Pro toggles the
     * `.mega-menu-open` class on click (confirmed: aria-expanded flips,
     * class is applied) but on this install its own generated stylesheet
     * never actually ships a matching `visibility`/`left` rule for the open
     * state, so the panel stays parked at left:-300px / visibility:hidden
     * forever — the hamburger looks tappable but never opens anything.
     * The plugin already sets position:fixed, width:300px, top:0,
     * height:100dvh and a left/visibility transition on the panel itself;
     * we only need to supply the missing "open" values. (Reported 2026-08-07.) */
    body.mega-menu-primary-menu .mega-menu-toggle.mega-menu-open + #mega-menu-primary-menu {
        visibility: visible !important;
        left: 0 !important;
    }

    /* Top-level menu items: near-white text on the navy panel. */
    body.mega-menu-primary-menu ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
        background-color: transparent !important;
        color: #f4ffff !important;
    }
    /* Top-level expand/collapse arrow visible on navy. */
    body.mega-menu-primary-menu ul.mega-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator::after {
        color: #f4ffff !important;
    }

    /* 2nd-level sub-menu: light background, navy items (e.g. "Contact Us"). */
    body.mega-menu-primary-menu ul.mega-menu .mega-sub-menu {
        background-color: #f4ffff !important;
    }
    body.mega-menu-primary-menu ul.mega-menu .mega-sub-menu li.mega-menu-item > a.mega-menu-link {
        background-color: #f4ffff !important;
        color: #2F4F6F !important;
    }
}