/* ═══════════════════════════════════════════════════════════════
   Task #841195 — 375px Mobile Audit P1 Fixes
   Nine accessibility + overflow issues from responsive audit.
   NOTE: This <link> is placed AFTER the second inline <style> block
   in layout-head.ejs (line ~2686), so these rules take cascade
   priority over that block's !important rules. All mobile overrides
   intentionally use !important to beat the inline block.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix #1: Logo tagline too small (8.7px → 11px) ─────────────
   layout-head.ejs second <style> block sets .nav-logo-tagline
   to 0.75rem!important at all mobile breakpoints. At root 14.5px
   (styles.css ≤375px), 0.75rem = 10.875px; audit measured 8.7px.
   Using absolute 11px to guarantee legibility at all root sizes.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-logo-tagline {
    font-size: 11px !important;
  }
}
@media (max-width: 600px) {
  .nav-logo-tagline {
    font-size: 11px !important;
  }
}
@media (max-width: 375px) {
  .nav-logo-tagline {
    font-size: 11px !important;
  }
}

/* ── Fix #2: Hero headline hyphenation ("Settlemen-ts") ─────────
   pass-3-consistency.css (in combined.min.css) sets hyphens:auto
   on ALL h1-h6 at ≤37.4375em (~599px). This causes "Settlements"
   to break as "Settlemen-ts" in the hero headline. Disable only
   for the hero so other headings keep their word-break behaviour.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .rs-hero-redesigned .rs-hero-headline,
  .rs-hero-headline {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* ── Fix #3: Annual billing links — 44px tap target ─────────────
   .pro-price-alt a / .proplus-price-alt a.pp-cta-link / .fam-price-alt a
   only have color + underline — no height/padding. Audit: 15px tall.
   Add min-height:44px with flex centering (WCAG 2.5.5).
   ─────────────────────────────────────────────────────────────── */
.pro-price-alt a,
.proplus-price-alt a.pp-cta-link,
.fam-price-alt a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}

/* ── Fix #4: "Get Started →" buttons on /pricing — 44px ─────────
   .onetime-link has padding:0.3rem 0.75rem → ~29px tall.
   Increase to 44px minimum via min-height + flex centering.
   ─────────────────────────────────────────────────────────────── */
.onetime-link {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Fix #5: FAQ quick-link pills on blog posts ──────────────────
   Inline-styled pills in blog-post.ejs get class bp-tool-pill.
   min-height:44px upgrades them to WCAG 2.5.5 touch target.
   (No !important needed — inline styles don't set min-height.)
   ─────────────────────────────────────────────────────────────── */
.bp-tool-pill {
  min-height: 44px;
}

/* ── Fix #6: Free PDF / urgency-strip overflow (~1100px) ─────────
   .urgency-strip already has overflow:hidden but lacks max-width:100%
   containment. #closing-this-month-banner has no overflow:hidden.
   Belt-and-suspenders: explicit overflow + box-sizing on both.
   ─────────────────────────────────────────────────────────────── */
#closing-this-month-banner {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.urgency-strip {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.urgency-strip-inner {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ── Fix #7: Trust bar / featured-roundup overflow (~1200px) ─────
   .rs-trust-bar (inner max-width:1200px) has no overflow:hidden.
   .featured-roundup-bar (inner max-width:1200px) also lacks it.
   Add explicit overflow containment; allow badge wrapping on mobile
   so no single badge can push beyond viewport width.
   ─────────────────────────────────────────────────────────────── */
.rs-trust-bar {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.featured-roundup-bar {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .rs-trust-badge {
    white-space: normal !important;
  }
  .rs-trust-bar-inner {
    justify-content: flex-start !important;
  }
}

/* ── Fix #8: /family example cards overflow ──────────────────────
   .fam-why-wrap wraps the example cards grid but has no overflow
   containment. Cards grid: repeat(3,1fr) → 1fr at ≤640px via CSS,
   but wrapper doesn't enforce max-width:100%.
   ─────────────────────────────────────────────────────────────── */
.fam-why-wrap {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.fam-example-cards {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .fam-example-cards > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── Fix #9: Category filter scroll hint on /settlements ─────────
   .dir-cat-nav scrolls horizontally (overflow-x:auto) but shows no
   visual cue that more content is off-screen. CSS mask-image fades
   the right 48px to transparent — clean, no extra HTML required.
   Applied only on mobile where horizontal space is limited.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dir-cat-nav {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 48px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 48px),
      transparent 100%
    ) !important;
  }
}