/* ============================================================================
   front-mobile.css — shared mobile/tablet overrides for all public/front pages
   ----------------------------------------------------------------------------
   Loaded after front-polish.css. Uses Bootstrap-standard breakpoints (576px,
   768px, 992px) and !important strategically to outweigh inline page styles
   that load AFTER the global stylesheets via @RenderSection("PageStyles").

   Cascade order in _CommonMasterLayout.cshtml:
     1. _StylesFront partial (vendor + front-polish + this file)
     2. PageStyles section  (per-page <style> blocks)

   Therefore: rules that page-level styles override unintentionally need
   !important. Rules with no page-level conflict do not.
   ============================================================================ */

/* ---------- < 992px : phones, tablets, landscape tablets ----------------- */
@media (max-width: 991.98px) {

    /* Section vertical rhythm — front-polish.css uses 5.5rem 0 on .rmx-section */
    .rmx-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Hero variants used across pages */
    .rmx-hero,
    .rmx-legal-hero,
    .amazon-hero,
    .contact-hero {
        padding-top: 6rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Hero typography downscale */
    h1.display-3 { font-size: 2.5rem !important; line-height: 1.15 !important; }
    h1.display-4 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    h1.display-5 { font-size: 2rem !important; line-height: 1.2 !important; }
    .lead        { font-size: 1rem !important; line-height: 1.55 !important; }

    /* Generic section heading used on most pages */
    .rmx-section-title { font-size: 1.75rem !important; line-height: 1.2 !important; }
    .rmx-section-subtitle { font-size: 0.95rem !important; }

    /* Stat values on Amazon/Walmart/Company pages */
    .stat-value { font-size: 2.25rem !important; }

    /* Legal pages — Privacy/Terms/Security tables stack to two lines */
    .rmx-legal-table-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
    .rmx-legal-table-value {
        text-align: left !important;
        font-weight: 600;
    }

    /* Legal section number/heading row wraps cleanly */
    .rmx-legal-heading {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .rmx-legal-heading h2 { font-size: 1.1rem !important; line-height: 1.3; }
    .rmx-legal-number { min-width: 2rem !important; height: 2rem !important; font-size: 0.75rem !important; }

    /* Legal card inner padding */
    .rmx-legal-card { padding: 1.25rem !important; }
    .rmx-legal-card.p-md-5 { padding: 1.25rem !important; }

    /* Homepage demo window is desktop-only artwork — hide on touch viewports.
       Hides the entire hover-float panel wrapper (not just the inner window). */
    .rmx-hero-panel,
    .rmx-demo-window,
    .rmx-hero-demo-window {
        display: none !important;
    }

    /* Pricing — 4 cards across collapses to 2 then 1 below 768 (handled there) */
    .pricing-cards-grid,
    .rmx-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Homepage ribbon — shrink scrolling pills so they don't overwhelm narrow screens */
    .rmx-hero-ribbon .rmx-ribbon-pill {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.75rem !important;
    }
}


/* ---------- < 768px : phones ----------------------------------------------- */
@media (max-width: 767.98px) {

    .rmx-section {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    .rmx-hero,
    .rmx-legal-hero,
    .amazon-hero,
    .contact-hero {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    h1.display-3 { font-size: 2rem !important; }
    h1.display-4 { font-size: 1.85rem !important; }
    h1.display-5 { font-size: 1.65rem !important; }

    /* Container side padding — Bootstrap default is too tight on phones */
    .container,
    .container-xxl,
    .container-xl,
    .container-lg {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Pricing — 1 column on phones */
    .pricing-cards-grid,
    .rmx-pricing-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tap-target floor for CTAs */
    .rmx-front-navbar__cta,
    .rmx-front-navbar__cta-outline,
    .pricing-card .btn,
    .btn-lg {
        min-height: 44px;
    }

    /* FAQ accordion buttons */
    .faq-section .accordion-button {
        padding: 1rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    /* Footer columns — _FooterFront already has 768px media query at 60px padding;
       just tighten gaps and ensure 2-col layout reads well */
    .goaura-footer .footer-col {
        margin-bottom: 1.5rem !important;
    }
    .goaura-footer h4 {
        margin-bottom: 1rem !important;
    }

    /* Stat cards on Amazon/Walmart — already col-md-3 col-6, just shrink values */
    .stat-value { font-size: 1.85rem !important; }

    /* Contact channel cards full width */
    .contact-channel-card {
        padding: 1.5rem !important;
    }

    /* Feature cards consistent padding */
    .feature-card-premium,
    .step-card,
    .testimonial-card {
        padding: 1.5rem !important;
    }

    /* Big CTA panels on Amazon/Walmart/Contact use 3.5rem 2rem by default */
    .cta-premium,
    .cta-gradient-card {
        padding: 2rem 1.25rem !important;
        border-radius: 1.25rem !important;
    }

    /* TOC trust badges row wraps to centered chips */
    .rmx-trust-grid {
        gap: 0.5rem !important;
    }
}


/* ---------- < 576px : small phones (iPhone SE, narrow Androids) ----------- */
@media (max-width: 575.98px) {

    .rmx-section {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    h1.display-3,
    h1.display-4,
    h1.display-5 {
        font-size: 1.65rem !important;
        line-height: 1.2 !important;
    }
    .lead { font-size: 0.95rem !important; }

    .rmx-section-title { font-size: 1.4rem !important; }
    .rmx-section-subtitle { font-size: 0.9rem !important; }

    /* Pills/badges wrap nicely */
    .rmx-pill {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.65rem !important;
    }

    .rmx-trust-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.85rem !important;
    }

    .rmx-eyebrow {
        font-size: 0.7rem !important;
    }

    /* CTA buttons full width on tiny phones so they're easy to tap */
    .rmx-hero .d-flex.flex-wrap > .rmx-front-navbar__cta,
    .rmx-hero .d-flex.flex-wrap > .rmx-front-navbar__cta-outline,
    .cta-premium .d-flex.flex-wrap > a,
    .cta-gradient-card .d-flex.flex-wrap > a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Stat cards — 2x2 instead of 4x1 */
    .stat-card { padding: 1.25rem !important; }
    .stat-value { font-size: 1.6rem !important; }

    /* Footer bottom row stacks centered */
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem !important;
    }

    /* Legal page card padding */
    .rmx-legal-card,
    .rmx-legal-card.p-md-5 {
        padding: 1rem !important;
    }
    .rmx-legal-block { padding: 1.25rem 0 !important; }

    /* Step number circles smaller */
    .step-number { width: 2.5rem !important; height: 2.5rem !important; font-size: 1rem !important; }
    .step-icon { width: 3rem !important; height: 3rem !important; font-size: 1.4rem !important; }

    /* Legal page grids force 1-col on narrow phones only (576 is mobile-first 2-col) */
    .rmx-data-categories,
    .rmx-security-grid,
    .rmx-rights-grid,
    .rmx-legal-use-grid,
    .rmx-legal-cards {
        grid-template-columns: 1fr !important;
    }

    /* Avoid layout-breaking long unbroken strings (e.g. API keys, links) */
    .rmx-legal-card a,
    .rmx-legal-card code {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}


/* ---------- Safety: prevent horizontal scroll across the whole front -----
   IMPORTANT: never apply overflow-x: hidden to html or body — the front
   navbar is a direct child of <body> and uses position: sticky. Any
   `overflow` value other than `visible` on an ancestor (html/body included)
   makes the navbar stop sticking. Clip horizontal overflow on the surface
   wrapper only, which is a sibling of the navbar, not its ancestor. */
@media (max-width: 991.98px) {
    .rmx-front-surface,
    .rmx-front-content {
        max-width: 100vw;
        overflow-x: clip; /* clip preserves sticky inside; falls back to hidden */
    }
}


/* ============================================================================
   Sticky-navbar overlap on mobile
   ----------------------------------------------------------------------------
   The front navbar is `position: sticky` with a translucent pill and
   backdrop-filter blur. On mobile, content sliding under it can look messy
   and TOC anchor clicks land with the section heading hidden behind the bar.
   Fix on phones/tablets:
     - Give the pill a solid (not blurred) background so content underneath
       does not bleed through visually.
     - Tighten scroll-margin-top on legal-block sections so anchor scrolls
       land just below the (shorter) mobile navbar.
   ============================================================================ */
@media (max-width: 991.98px) {
    /* Solidify the WHOLE navbar (not just the inner pill) so scrolled
       content can't show through the shell's transparent padding strip. */
    .rmx-front-navbar {
        background: var(--rmx-surface, #ffffff) !important;
        border-bottom: 1px solid var(--rmx-border, rgba(0, 0, 0, 0.08));
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    [data-theme='dark'] .rmx-front-navbar {
        background: var(--rmx-surface, #14141c) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    }

    /* Bar sits flush — drop the "in the page" padding that left a gap
       above the pill where scrolled content was peeking through. */
    .rmx-front-navbar__shell {
        padding: 0.55rem 0 0.55rem !important;
    }

    /* The inner pill loses its own background since the outer navbar now
       provides it; this prevents a double-layer look. */
    .rmx-front-navbar__bar {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Anchor sections land below the (shorter) mobile navbar. */
    .rmx-legal-block,
    .rmx-section[id],
    section[id] {
        scroll-margin-top: 80px !important;
    }
}

@media (max-width: 575.98px) {
    .rmx-legal-block,
    .rmx-section[id],
    section[id] {
        scroll-margin-top: 72px !important;
    }
}


/* ============================================================================
   Operating-entity / contact-card alignment on Privacy & Terms
   ----------------------------------------------------------------------------
   The address card (`Operating Entity`) was rendering with center-aligned
   lines on narrow viewports because the multi-line <br />-separated address
   inherited centering from elsewhere in the cascade. Force the contact-item
   text block to left-align across all screens, regardless of inheritance.
   ============================================================================ */
.rmx-contact-item {
    text-align: left;
}

.rmx-contact-item > div {
    text-align: left !important;
    flex: 1;
    min-width: 0;
}

.rmx-contact-item strong,
.rmx-contact-item p,
.rmx-contact-item a {
    text-align: left !important;
}

/* Long address lines (e.g. "California Secretary of State File No. ...")
   should break cleanly on narrow screens instead of overflowing the card. */
@media (max-width: 575.98px) {
    .rmx-contact-item p {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}