/* ═══════════════════════════════════════════════════════════════════════════
   Task #1447055 — Mobile touch targets below 44px minimum

   Targeted min-height/min-width fixes for 8 interactive elements identified
   in QA audit at 375px viewport. Loads AFTER bugfix-mobile-nav-bubbles so
   !important overrides take effect on elements that were reset too broadly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Homepage email capture input ──────────────────────────────────────
   design-system.css sets height:56px but QA measured 24px at 375px.
   min-height safeguard ensures it never shrinks below 44px. */
@media (max-width: 768px) {
  .hp-email-capture__input {
    min-height: 44px !important;
  }
}

/* ── 2. Smart-page-CTA email input ────────────────────────────────────────
   Dynamically injected by smart-page-ctas.js with inline padding.
   Computed height ~30px. Width can collapse to 29px on narrow viewports.
   Fix: enforce 44px height and 100% width on mobile. */
@media (max-width: 768px) {
  .spc-email-strip input,
  #spc-ec-input {
    min-height: 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure the form wraps at small widths so input gets full row */
  .spc-email-strip form,
  #spc-ec-form {
    flex-wrap: wrap !important;
  }
}

/* ── 3 & 4. Community "Join Chat" and "Jump in" buttons ───────────────────
   padding:9px 18px = ~31px total. Needs 44px min-height. */
@media (max-width: 768px) {
  .ch-chat-jump-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
  }
}

/* ── 5. Footer accordion triggers ─────────────────────────────────────────
   summary.sr-ft-col-header has 0px padding, ~13px font-size = 21px tall.
   Only interactive on mobile (desktop disables pointer-events). */
@media (max-width: 768px) {
  .sr-ft-col-details > summary,
  .sr-ft-col-details > summary.sr-ft-col-header,
  summary.sr-ft-col-header {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
  }

  /* Chevron after pseudo-element — keep aligned */
  .sr-ft-col-details > summary::after {
    display: flex !important;
    align-items: center !important;
  }
}

/* ── 6. Back-to-top button ────────────────────────────────────────────────
   CSS declares 48×48 but QA measured 38×38. Add min-width/min-height
   safeguard against any overrides or inline styles. */
@media (max-width: 768px) {
  .sr-back-to-top-v2,
  #srBackToTop {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── 7. Announce bar link ─────────────────────────────────────────────────
   #announceBar is 40px, link inside reset to display:inline by
   bugfix-mobile-nav-bubbles. Restore proper touch target on the bar. */
@media (max-width: 768px) {
  #announceBar {
    min-height: 44px !important;
    height: auto !important;
  }

  #announceBarLink,
  .announce-bar-inner {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ── 8. Logo link ─────────────────────────────────────────────────────────
   SVG is 36px; bugfix-mobile-nav-bubbles resets min-height:0.
   Restore 44px touch target without adding visible padding. */
@media (max-width: 768px) {
  a.hn-logo,
  .hn-logo {
    min-height: 44px !important;
  }
}