/*
 * landing-page-mobile-first.css
 *
 * Mobile-first overrides applied to EVERY rendered landing page via
 * `_landing-body.blade.php`. ThemeForest imports are desktop-first by
 * design (1200px-grid hero compositions, multi-column forms, 32px
 * buttons). On MK COD funnels >70% of traffic is mobile — this stylesheet
 * is the safety net so even an unmodified imported template still
 * converts on a 360x780 viewport.
 *
 * Scoped to `.nh-lp` so only the rendered landing-page tree is affected —
 * the FunnelHub admin chrome (`/fh/*` Mosaic UI) is untouched.
 *
 * Three layers:
 *   1. Touch-target enforcement: every clickable element inside .nh-lp
 *      gets a min 44x44 px hit area on viewports under 768 px (WCAG 2.5.5).
 *   2. Form ergonomics: single-column COD form on mobile, 16 px font on
 *      inputs (prevents iOS auto-zoom on focus), 14 px+ tap-friendly
 *      labels, native phone/numeric keypads via inputmode hints (those
 *      already live in the _cod-form partial but we reinforce font-size).
 *   3. Sticky-bottom buy bar: `[data-fh-sticky-buy]` element auto-shows
 *      after 320 px scroll on viewports under 768 px. Element is rendered
 *      conditionally by `_sticky-mobile-cta.blade.php` so admin previews
 *      and template lab don't paint it.
 *
 * The injected vendor JS (Swiper / Slick / AOS) is unaffected — slider
 * animations run as configured at the breakpoint Swiper detects.
 */

/* Layer 1 — Touch-target enforcement (mobile only).
   `padding: 12px 16px` brings the hit box up to ~44 px on the smallest
   tap-friendly fonts (14 px line-height). Doesn't paint padding on
   anchor elements with explicit width/height (e.g. icon-only buttons). */
@media (max-width: 767.98px) {
    .nh-lp a:not([class*="sr-only"]):not([role="presentation"]),
    .nh-lp button,
    .nh-lp [role="button"],
    .nh-lp input[type="submit"],
    .nh-lp input[type="button"] {
        min-height: 44px;
    }
    /* CTA-class anchors specifically — these are the buy/order buttons
       imported templates style at 32 px. Force at least 48 px for thumb-
       friendly tap. */
    .nh-lp a[data-fh-cta],
    .nh-lp a[href="#cart"],
    .nh-lp a[href*="order"],
    .nh-lp .btn-primary,
    .nh-lp .btn-cta,
    .nh-lp .order-btn,
    .nh-lp .buy-now-btn {
        min-height: 48px;
        padding-block: 12px;
        padding-inline: 20px;
        font-size: max(15px, 1em);
    }

    /* Layer 2 — Form ergonomics.
       16 px input font-size is the iOS auto-zoom threshold; below 16 px
       Safari zooms in on focus + scrolls the layout, which crashes COD
       form completion rates. */
    .nh-lp form input[type="text"],
    .nh-lp form input[type="email"],
    .nh-lp form input[type="tel"],
    .nh-lp form input[type="number"],
    .nh-lp form select,
    .nh-lp form textarea {
        font-size: max(16px, 1em);
        min-height: 44px;
        padding: 10px 12px;
    }
    .nh-lp form label {
        font-size: max(14px, 0.9em);
        line-height: 1.4;
    }
    /* Single-column form: ThemeForest packs commonly do
       `.row > .col-md-6` two-column layouts that wrap badly on phones.
       Forcing every form .row child to full width keeps the order form
       scannable. */
    .nh-lp form .row > [class*="col-"],
    .nh-lp form .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
        padding-block: 6px;
    }
}

/* Layer 3 — Sticky-bottom buy bar.
   Hidden until the visitor scrolls past 320 px (controlled in
   `_sticky-mobile-cta.blade.php` via Alpine + IntersectionObserver). The
   bar floats above the page body, respects safe-area-inset (iPhone
   notch) and never paints on tablets/desktops. */
.nh-lp [data-fh-sticky-buy] {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    background: var(--fh-sticky-buy-bg, #0f172a);
    color: var(--fh-sticky-buy-fg, #fff);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px -8px rgba(0, 0, 0, 0.25);
    transform: translateY(110%);
    transition: transform 240ms ease-out;
    will-change: transform;
}
.nh-lp [data-fh-sticky-buy][data-fh-show="1"] {
    transform: translateY(0);
}
@media (max-width: 767.98px) {
    .nh-lp [data-fh-sticky-buy] {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
    }
}
.nh-lp [data-fh-sticky-buy] .fh-sticky-buy__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nh-lp [data-fh-sticky-buy] .fh-sticky-buy__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fh-sticky-buy-cta-bg, #22c55e);
    color: var(--fh-sticky-buy-cta-fg, #fff);
    padding: 10px 18px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    flex: 0 0 auto;
    min-height: 40px;
}
.nh-lp [data-fh-sticky-buy] .fh-sticky-buy__cta:hover,
.nh-lp [data-fh-sticky-buy] .fh-sticky-buy__cta:focus {
    background: var(--fh-sticky-buy-cta-bg-hover, #16a34a);
}

/* Pad the page bottom so sticky bar doesn't cover the order form on
   mobile. The COD form sits at #cart; we add scroll-margin so smooth
   scrolls land above the bar. */
@media (max-width: 767.98px) {
    .nh-lp #cart,
    .nh-lp #order,
    .nh-lp [data-fh-cart-section] {
        scroll-margin-bottom: 80px;
    }
}