/* mobile-p0-fix-1349964.css — Task #1349964 + Task #1350602
   P0: PERMANENT defense layer for mobile homepage.
   Loaded ABSOLUTE LAST in layout-head.ejs.

   ──────────────────────────────────────────────────────────────
   ROOT CAUSES (Task #1350602 investigation, 2026-05-04):

   1. nav-header-authority.min.css has `section { overflow: hidden }`
      — bare element selector that clips content in ALL sections.

   2. premium-v2.css has `.sr-reveal { opacity: 0 !important }`
      — hides sections until IntersectionObserver adds .visible class.
      Observer often fails on mobile → sections stay invisible forever.
      Affected: stats-bar, testimonials, why-pro, recent-activity, final-cta.

   3. Hero inflated to 5400px on mobile — .sr-hero__left (2926px) and
      .sr-hero__right (2353px) stack vertically with 32px padding each.
      Creates massive white void after search bar / CTA.

   FIX STRATEGY:
   - Override nuclear `section { overflow: hidden }` sitewide
   - Force all .sr-reveal elements to opacity:1 (kill broken animation)
   - Compact hero columns on mobile ≤768px
   - Use html body main.sr-page specificity prefix for all critical rules
     (prevents future audit/polish CSS from overriding)
   ──────────────────────────────────────────────────────────────

   Original bugs fixed (Task #1349964):
   1. No hamburger menu — horizontal tabs showing instead
   2. Blank content below hero fold
   3. Trust badges clipped/overflow
   4. Random FAB button floating in void
   5. Ticker text clipped at start
   6. Competing CTAs (two sticky bars)
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. HAMBURGER MENU — ensure visible on mobile, proper bar styling
   ═══════════════════════════════════════════════════════════════════════ */

/* Hamburger button must display as flex on mobile */
@media (max-width: 900px) {
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10000 !important;
    position: relative !important;
  }

  /* Hamburger bars — DARK on light header */
  .nav-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #374151 !important;
    background-color: #374151 !important;
    -webkit-text-fill-color: initial !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
    min-height: 2px !important;
    max-height: 2px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide desktop nav row on mobile */
  .sr-nav,
  .nav-desktop,
  .nav-nav-row {
    display: none !important;
  }

  /* Show hamburger and mobile toggle */
  .sr-mobile-toggle {
    display: flex !important;
  }

  /* Mobile menu panel */
  .nav-mobile-menu {
    top: 56px !important;
  }

  /* Hide plain auth on mobile */
  .nav-plain-auth {
    display: none !important;
  }
}

/* Desktop: hide hamburger */
@media (min-width: 901px) {
  .nav-hamburger,
  .nav-mobile-pricing,
  .nav-mobile-go-pro {
    display: none !important;
  }
  .nav-nav-row {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BOTTOM TAB BAR — restore proper layout
   The sr-tab-bar and ms-tab-bar items need flex column layout,
   NOT inline-flex with horizontal padding.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* sr-tab-bar items (layout-foot.ejs) */
  .sr-tab-bar .sr-tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 0 2px !important;
    text-decoration: none !important;
    height: 64px !important;
  }

  .sr-tab-bar .sr-tab-item__label {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
  }

  .sr-tab-bar .sr-tab-item__icon {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  /* ms-tab-bar items (settlements-index.ejs) */
  .ms-tab-bar .ms-tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 4px 2px !important;
    min-height: 44px !important;
  }

  .ms-tab-bar .ms-tab-item__label {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
  }

  .ms-tab-bar .ms-tab-item__icon {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
  }

  /* Ensure tab bars don't have forced margins between items */
  .sr-tab-bar .sr-tab-item + .sr-tab-item,
  .ms-tab-bar .ms-tab-item + .ms-tab-item {
    margin-left: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. TRUST BADGES — fit within viewport, wrap properly
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .sr-trust-badges,
  .dir-hero-badges,
  .sr-gtb,
  .sr-hero__trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 8px 12px !important;
  }

  .sr-trust-badge,
  .dir-hero-badge {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. FAB BUTTON — hide on mobile homepage (no context in white void)
   The settlements-index.ejs already hides sr-fab-wrap via inline <style>,
   but the ms-fab-wrap may still show. Hide all FABs when in the
   white void below hero. Show only when scrolled to content.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Ensure FAB doesn't appear in empty void — JS can toggle visibility */
  .sr-fab-wrap,
  .me-fab-container,
  .ms-fab-wrap {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    z-index: 9000 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. TICKER / FOMO BAR — protect from padding/size overrides
   The marquee animation is correct in fomo-ticker.css. This just
   prevents other CSS from forcing wrong padding/sizes on ticker items.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  #fomo-ticker {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .fomo-ticker-msg {
    display: inline-flex !important;
    padding: 0 1.5rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    font-size: 12px !important;
  }

  .fomo-ticker-msg .fomo-ticker-num {
    min-height: auto !important;
    min-width: auto !important;
    padding: 0 !important;
  }

  /* Fire bar ticker — protect from overrides */
  #srFireBarTicker span {
    white-space: nowrap !important;
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. COMPETING CTAs — remove duplicate sticky bar on mobile
   Keep the hero CTA ("Check My Eligibility"), remove the bottom
   sticky "Find My Settlements" bar to avoid CTA conflict.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Hide legacy sticky CTA bar */
  #sr-mobile-cta-bar,
  #sr-mobile-cta-bar-legacy,
  .sr-mcta-wrap {
    display: none !important;
  }

  /* If there's a sticky bottom CTA from the mobile experience partial,
     hide it on the homepage to avoid competing with the hero CTA */
  body[data-page="home"] .me-sticky-cta,
  body[data-page="home"] .sr-sticky-cta {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. DEFENSIVE: Undo any remaining broad selector damage
   These rules ensure mobile navigation components aren't broken
   by ANY CSS file that uses bare element selectors.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Mobile accordion menu links — proper padding for touch targets */
  .nav-mobile-accordion-body .nav-mobile-link {
    padding: 10px 16px 10px 24px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
  }

  /* Mobile menu CTA row — proper layout */
  .nav-mobile-cta-row {
    display: flex !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem 0.5rem !important;
    flex-wrap: wrap !important;
  }

  /* Mobile accordion buttons — proper sizing */
  .nav-mobile-accordion-btn {
    padding: 12px 16px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 1rem !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  /* Settlement cards inside the content grid — ensure they render */
  .dir-card,
  .sr2-card,
  .s5-card {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card links — don't force giant padding on card CTA buttons */
  .dir-card a,
  .sr2-card a,
  .s5-card a {
    min-height: auto !important;
    min-width: auto !important;
  }

  /* Menu overlay links (full-screen menu) — proper styling */
  .sr-menu-overlay__item {
    padding: 16px 24px !important;
    min-height: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. CONTENT RENDERING — ensure homepage sections render below hero
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8a. SCROLL REVEAL NUCLEAR OVERRIDE ──────────────────────────────
   Root cause (Task #1350588): premium-v2.css sets .sr-reveal { opacity: 0 !important }
   and loads AFTER bugfix-1283328.css in the <head>, overriding its fix.
   JS in home.ejs adds .sr-reveal to ALL major homepage sections (#how-it-works,
   #categories, #testimonials, #pricing, #why-pro, #blog-preview, #recent-activity,
   .sr-community-teaser, etc.) making them invisible.
   The IntersectionObserver adds .sr-visible but premium-v2.css expects .visible —
   class name mismatch means the reveal animation NEVER triggers.
   Fix: Force all sr-reveal elements to full opacity. This file loads LAST in <head>,
   so this rule wins the cascade over premium-v2.css.
   Content visibility > scroll animations. ─────────────────────────── */
.sr-reveal,
.sr-reveal-scale,
.sr-reveal-from-left,
.sr-reveal-from-right,
.sr-scroll-reveal,
[class*='scroll-reveal'] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Also kill reveal delays — content must be visible immediately */
[class*="sr-reveal-delay"] {
  transition-delay: 0s !important;
  opacity: 1 !important;
}

/* ── 8b. HOMEPAGE SECTIONS — explicit visibility by ID ────────────────
   Belt-and-suspenders: even if .sr-reveal override fails (higher specificity
   elsewhere), force each homepage section visible by ID (specificity 0-1-0-0).
   NOTE: Only override opacity/visibility/transform — NOT display.
   Some sections (srNearYouSection, srForYouSection, weekly-show-section)
   start with display:none intentionally because JS populates them. */
#how-it-works,
#closing-this-week,
#the-drop-preview,
#categories,
#testimonials,
#pricing,
#why-pro,
#blog-preview,
#recent-activity,
#srWhySection,
#srCommunityCounter,
#srSotdSection,
#srMobileCallout,
#top-settlements,
#who-we-are,
#geo-fomo,
#community,
#srFoundingBanner {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: none !important;
}

/* Trust bar and trust badges — these have sr-reveal in the HTML source */
.sr-stats-bar,
.sr-trust {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Settlement cards grid on mobile — ensure proper display */
@media (max-width: 900px) {
  .dir-grid,
  .settlements-grid,
  #sr-discovery-feed,
  .sr-content-main,
  .dir-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
  }

  /* Ensure the main content area is visible */
  main,
  main.sr-page,
  .sr-page {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Category filter pills — proper horizontal scroll */
  .dir-filters,
  .dir-filter-row,
  .sr-filter-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }

  .dir-filters::-webkit-scrollbar,
  .dir-filter-row::-webkit-scrollbar,
  .sr-filter-pills::-webkit-scrollbar {
    display: none !important;
  }

  /* Filter pill items */
  .dir-filter-pill,
  .sr-filter-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    border-radius: 20px !important;
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. NUCLEAR OVERRIDE: Kill `section { overflow: hidden }` from
      nav-header-authority.min.css. This bare element selector clips
      content inside sections and is the #1 recurring cause of mobile
      layout collapses. Class-scoped specificity prefix ensures this
      can't be overridden by future audit/polish CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* Override the bare `section` rule — use element + class to win specificity */
html body section {
  overflow: visible !important;
}

/* Keep overflow:hidden ONLY where it's actually needed */
html body #fomo-ticker {
  overflow: hidden !important;
}
html body .ugc-video-section {
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. SR-REVEAL OPACITY FIX: Force all .sr-reveal elements to be
       visible by default. The premium-v2.css sets:
         .sr-reveal { opacity: 0 !important }
       and relies on IntersectionObserver JS to add .visible class.
       On mobile, the observer often fails → sections stay invisible.

       This override uses higher specificity (html body) to beat
       the premium-v2.css rule and ensures ALL content is visible
       regardless of whether the scroll animation JS fires.
   ═══════════════════════════════════════════════════════════════════════ */

html body .sr-reveal,
html body .sr-scroll-reveal,
html body [class*='reveal-'],
html body [class*='scroll-reveal'] {
  opacity: 1 !important;
  transform: none !important;
}

/* Still allow the animation to play if JS adds .visible — it just
   starts from opacity:1 so there's no flash. Sections are always
   visible, animation is a nice-to-have enhancement. */
html body .sr-reveal.visible,
html body .sr-scroll-reveal.visible,
html body .sr-reveal.in-view,
html body [class*='reveal-'].visible,
html body [class*='scroll-reveal'].in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. HERO COMPACTION: On mobile ≤768px, the hero's two columns
       (.sr-hero__left + .sr-hero__right) stack vertically and inflate
       to 5400px combined. Each column gets 32px padding that compounds.

       Fix: Reduce hero padding, compact individual elements, and
       hide the featured card on narrow mobile (it's redundant with
       the settlements below the fold).
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Compact hero section padding */
  html body .sr-hero {
    padding: 16px 0 12px !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Compact the inner wrapper */
  html body .sr-hero .sr-container {
    padding: 0 12px !important;
    overflow: visible !important;
  }

  html body .sr-hero .sr-hero__inner {
    padding: 12px 8px !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  /* Compact the left column (search, CTA, trust bar) */
  html body .sr-hero .sr-hero__left {
    padding: 8px 4px !important;
    overflow: visible !important;
  }

  /* Eyebrow badge — was inflating to 175px */
  html body .sr-hero .sr-hero__eyebrow {
    padding: 4px 12px !important;
    margin: 0 0 12px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    width: auto !important;
  }

  /* Title — keep compact */
  html body .sr-hero .sr-hero__title {
    margin: 0 0 8px !important;
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.15 !important;
  }

  /* Subtitle */
  html body .sr-hero .sr-hero__sub {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* Trust bar — was 549px, compact to reasonable size */
  html body .sr-hero .sr-hero__trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    margin: 0 0 12px !important;
  }

  html body .sr-hero .sr-hero__trust-bar-item {
    padding: 4px 8px !important;
    font-size: 12px !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
  }

  html body .sr-hero .sr-hero__trust-bar-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: auto !important;
    min-height: auto !important;
  }

  html body .sr-hero .sr-hero__trust-bar-value {
    font-size: 13px !important;
  }

  html body .sr-hero .sr-hero__trust-bar-label {
    font-size: 11px !important;
  }

  /* Trust badges row */
  html body .sr-hero .sr-trust-badges {
    padding: 4px 0 !important;
    gap: 4px !important;
    margin: 0 0 8px !important;
  }

  /* CTA group */
  html body .sr-hero .sr-hero__cta-group {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* Trust anchor line */
  html body .sr-hero .sr-hero__trust-anchor {
    font-size: 12px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  /* Live feed — was 731px, compact significantly */
  html body .sr-hero .sr-hero__live-feed {
    max-height: 160px !important;
    overflow: hidden !important;
    margin: 0 0 8px !important;
    padding: 8px !important;
  }

  /* Stats row — was 518px, compact */
  html body .sr-hero [class*="sr-hero-stats"] {
    padding: 8px 0 !important;
    gap: 4px !important;
  }

  html body .sr-hero .sr-hero-stat-item {
    padding: 6px 8px !important;
    min-height: auto !important;
  }

  /* HIDE the right column (featured card) on mobile
     — it's 2353px and redundant with settlements listed below */
  html body .sr-hero .sr-hero__right {
    display: none !important;
  }

  /* Hide scroll hint too — not needed when card is hidden */
  html body .sr-hero .sr-hero__scroll-hint {
    display: none !important;
  }
}

/* On tablet (769-900px), show right column but compact it */
@media (min-width: 769px) and (max-width: 900px) {
  html body .sr-hero .sr-hero__right {
    padding: 16px 8px !important;
    overflow: visible !important;
  }

  html body .sr-hero .sr-hero__left {
    padding: 16px 8px !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. SECTION VISIBILITY ARMOR: High-specificity rules that ensure
       ALL homepage content sections are visible on mobile. Uses
       html body main#main-content prefix (specificity: 0-1-4) which
       beats any class-only selector from audit/polish CSS.

       This is the permanent defense against future CSS audits that
       add broad rules hiding content.
   ═══════════════════════════════════════════════════════════════════════ */

/* All named content sections must be visible */
html body main#main-content #srWhySection,
html body main#main-content #who-we-are,
html body main#main-content #how-it-works,
html body main#main-content #categories,
html body main#main-content #trending-settlements,
html body main#main-content #testimonials,
html body main#main-content #pricing,
html body main#main-content #why-pro,
html body main#main-content #blog-preview,
html body main#main-content #recent-activity,
html body main#main-content #community,
html body main#main-content #geo-fomo,
html body main#main-content #srSotdSection,
html body main#main-content #srFoundingBanner,
html body main#main-content #sr-discovery-feed {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  overflow: visible !important;
}

/* Stats bar and trust sections */
html body main#main-content .sr-stats-bar,
html body main#main-content .sr-trust {
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Section content — ensure text is dark on white backgrounds */
html body main#main-content .sr-section__title,
html body main#main-content .sr-section__sub,
html body main#main-content .sr-section__eyebrow {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure white backgrounds everywhere (hard rule from task) */
html body main#main-content .sr-section,
html body main#main-content .sr-section--alt {
  background-color: #ffffff !important;
  overflow: visible !important;
}