/* ═══════════════════════════════════════════════════════════════════════════
   BUGFIX — Task #1445386: Mobile hamburger gaps + text link bubbles

   Root cause:
     1. mobile-contrast-typography-1327415.css §3 forces ALL a[href] to
        min-height:44px!important; min-width:44px!important on ≤768px.
     2. mobile-motion-1327338.css §16 forces ALL a to min-height:44px;
        min-width:44px on ≤900px.
     3. mobile-contrast-typography-1327415.css §3 adds padding-top/bottom
        to article a, .content a, p a — creates visible "bubble" boxes.
     4. body line-height:1.55!important cascades into hamburger menu links,
        inflating their rendered height beyond intended design.

   These rules are correct for standalone interactive elements but
   destructive when applied to:
     a) Navigation menu links (already sized by .hn-mobile-link rules)
     b) Inline text links inside paragraphs/articles
     c) Logo links, breadcrumb links, badge links, etc.

   Fix: Targeted resets that undo the damage on specific contexts
   WITHOUT removing the WCAG touch target rules from actual buttons/CTAs.

   Loads AFTER mobile-motion-1327338.css — all rules use !important to
   override the prior !important declarations.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. HAMBURGER MENU — Reset forced sizing & line-height ────────────────
   .hn-mobile-link already has min-height:44px, padding:10px 24px, and
   font-size:0.875rem defined in header-new.ejs. The global a[href]
   min-height/min-width override is redundant and the min-width:44px
   forces links to be wider than their text needs.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Reset min-width on all hamburger menu links — they span full width
     naturally via display:flex, the 44px min-width is meaningless here */
  .hn-mobile-menu a,
  .hn-mobile-menu a[href],
  .hn-mobile-link,
  .hn-mobile-section-link,
  .hn-mobile-section summary {
    min-width: 0 !important;
    line-height: 1.3 !important;
  }

  /* Reset line-height inflation from body rule on menu container */
  .hn-mobile-menu,
  .hn-mobile-menu * {
    line-height: 1.3 !important;
  }

  /* Ensure hamburger menu links keep their intended compact sizing */
  .hn-mobile-link {
    min-height: 44px !important;
    padding: 10px 24px !important;
    font-size: 0.875rem !important;
  }

  /* Accordion section headers — keep 48px, no extra inflation */
  .hn-mobile-section summary {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  /* Section links (Pricing link at top) */
  .hn-mobile-section-link {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  /* Remove any rogue padding/margin from sections themselves */
  .hn-mobile-section {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Links container — keep tight 8px top, 12px bottom padding */
  .hn-mobile-links {
    padding: 8px 0 12px !important;
  }
}


/* ── 2. INLINE TEXT LINKS — Remove forced box sizing ──────────────────────
   a[href] { min-height:44px; min-width:44px } turns every inline link
   into a visible 44×44 box. Inline links in paragraphs, cards, breadcrumbs,
   etc. should flow naturally with text — touch target sizing is NOT needed
   for inline text links that are part of larger tappable areas or are
   surrounded by adequate spacing.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Inline links in body text — reset to natural flow */
  p a,
  li a,
  td a,
  dd a,
  span a,
  label a,
  figcaption a,
  blockquote a,
  article a,
  .content a {
    min-height: 0 !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline !important;
  }

  /* Breadcrumb links */
  .breadcrumb-nav a,
  .breadcrumb a,
  nav[aria-label="breadcrumb"] a {
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
  }

  /* Logo link */
  .hn-logo,
  a.hn-logo {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Footer inline links — these already have their own sizing */
  .sr-ft-nav-col a,
  .sr-ft-legal a,
  .sr-ft-terms-links a,
  .sr-ramsey-footer a {
    min-width: 0 !important;
  }

  /* Card metadata links — should flow with card text */
  .sr-card a:not(.btn):not([class*="cta"]),
  .settlement-card a:not(.btn):not([class*="cta"]),
  [class*="card"] a:not(.btn):not([class*="cta"]):not(.hn-mobile-link) {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Badge links */
  [class*="badge"] a,
  a[class*="badge"] {
    min-width: 0 !important;
  }

  /* Share/social links that are icon-based */
  [class*="share"] a,
  [class*="social"] a {
    min-width: 0 !important;
  }

  /* Accordion section-link and detail/summary a tags: keep min-height
     but reset min-width */
  details a,
  summary a {
    min-width: 0 !important;
  }
}


/* ── 3. FONT SIZE RESET FOR NAV — Undo body text inflation ────────────────
   mobile-contrast-typography forces body,p,li,td,th,dd,dt to
   font-size:max(16px,1rem)!important — this cascades into nav elements
   that should keep their own defined sizes (0.875rem for links, 0.95rem
   for section headers).
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Header nav elements — preserve original sizes */
  .hn-header,
  .hn-header * {
    /* Don't override body font-size cascade — just ensure menu elements
       keep their explicitly defined sizes (handled in section 1 above) */
  }

  /* Announcement bar / promo bar links — inline, not buttons */
  .announce-bar a,
  .promo-bar a {
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
  }

  /* Tab bar labels — keep small */
  #srTabBar a {
    min-width: 0 !important;
  }
}


/* ── 4. PRESERVE REAL BUTTON/CTA TOUCH TARGETS ───────────────────────────
   Ensure actual buttons, CTAs, and standalone interactive elements
   KEEP their 44px minimum. This section is a safeguard — the resets
   above target specific link contexts, not buttons.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Actual buttons keep 44px */
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .btn,
  [class*="cta-primary"],
  [class*="cta-secondary"],
  .sr-btn--primary,
  .sr-btn--secondary,
  .sr-cta-primary,
  .sr-cta-secondary {
    min-height: 44px !important;
  }
}


/* ── 5. STICKY CTA BAR — Prevent double bars ─────────────────────────────
   When the sr-mobile-cta-bar is visible (added by JS), hide the
   lower-priority .mobile-cta-bar to avoid stacking.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* When global CTA bar is active, hide the page-level one */
  body.sr-gcta-visible .mobile-cta-bar {
    display: none !important;
  }
}