/* ============================================================================
   BUGFIX — Task #1291325
   Fix: Remove rogue borders, outlines, and box-shadow artifacts around text
   and non-interactive elements sitewide. Loads LAST in cascade to override
   all prior CSS with targeted resets.
   ============================================================================ */

/* ── 1. GLOBAL OUTLINE RESET ──────────────────────────────────────────────── */
/* Remove outlines from ALL non-interactive elements by default.
   Only interactive elements (buttons, links, inputs) should ever show outlines,
   and ONLY when keyboard-focused (focus-visible). */

/* Kill all default outlines — the unified focus-visible rule below handles a11y */
*:focus:not(:focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Text elements should NEVER have outlines or borders */
p, h1, h2, h3, h4, h5, h6,
span, em, strong, b, i, u, s,
blockquote, figcaption, caption,
li, dt, dd, label,
.sr-section__title,
.sr-section__sub,
.sr-section__eyebrow,
.sr-hero-value-prop,
.sr-step__title,
.sr-step__desc,
.sr-community-teaser__label,
.sr-community-teaser__desc {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ── 2. UNIFIED FOCUS-VISIBLE STYLE (ACCESSIBILITY) ──────────────────────── */
/* One focus ring to rule them all. Applied ONLY on keyboard navigation.
   Overrides the 4+ competing focus-visible rules in other CSS files. */
*:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* Non-interactive elements should not show focus rings even on keyboard nav.
   Only elements that can logically receive keyboard focus should show them. */
p:focus-visible, h1:focus-visible, h2:focus-visible, h3:focus-visible,
h4:focus-visible, h5:focus-visible, h6:focus-visible,
span:focus-visible, div:not([tabindex]):focus-visible,
section:focus-visible, article:focus-visible,
main:focus-visible, aside:focus-visible,
header:focus-visible, footer:focus-visible,
figure:focus-visible, figcaption:focus-visible,
blockquote:focus-visible, ul:focus-visible, ol:focus-visible,
li:not([tabindex]):focus-visible, dl:focus-visible, dt:focus-visible, dd:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ── 3. SECTION & CONTAINER BORDER CLEANUP ────────────────────────────────── */
/* Remove accidental borders on text-containing sections/containers.
   Cards, inputs, and intentional component borders are preserved via
   their specific class selectors (higher specificity). */
.sr-section,
.sr-container,
.sr-page > section:not(.sr-ctw-section):not(.sr-hero),
main > section {
  border: none !important;
  outline: none !important;
}

/* ── 4. LINK CLEANUP — No borders/outlines on links in normal state ─────── */
/* Links should only have visual effects on :hover and :focus-visible,
   never in their resting state. */
a:not(.sr-btn):not(.sr-share-btn):not(.nav-flat-link):not(.drop-preview-card):not(.ctw-file-btn):not(.dc-card-btn):not([class*="btn"]):not([class*="cta"]):not(.sr-settlement-card):not(.sr-cat-card) {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Restore link hover/focus effects — only visual feedback on interaction */
a:not([class*="btn"]):not([class*="card"]):not([class*="cta"]):hover {
  text-decoration: underline;
}

/* ── 5. BOX-SHADOW BORDER RING CLEANUP ────────────────────────────────────── */
/* Remove box-shadow "border rings" (0 0 0 Npx pattern) from non-interactive
   text elements. These create visible outlines around content. */
p, h1, h2, h3, h4, h5, h6,
span:not(.ctw-val):not(.ctw-badge):not(.sr-badge--blue):not(.sr-badge--green):not(.sr-badge--red):not([class*="badge"]):not([class*="pill"]):not([class*="tag"]),
div.sr-section__header,
div.sr-community-teaser__highlights,
.sr-step__content {
  box-shadow: none !important;
}

/* ── 6. HEADER BORDER CONSOLIDATION ───────────────────────────────────────── */
/* The header gets border-bottom from 3+ sources (critical-failsafe, nav-header-authority,
   premium-restyle-1143936). Consolidate to one clean border. */
.sr-header,
header[role="banner"] {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
}

/* ── 7. SECTION OVERFLOW — Fix clipping artifacts ─────────────────────────── */
/* The inline critical CSS sets section{overflow:hidden!important} which creates
   clipping contexts that can cause visual artifacts at edges. Override for
   homepage sections that need visible overflow (trust badges, step numbers). */
section.sr-section,
section#how-it-works,
section.sr-community-teaser,
section.sr-hero,
div.sr-trust {
  overflow: visible !important;
}

/* ── 8. NAV ELEMENT CLEANUP ───────────────────────────────────────────────── */
/* Nav links should not have borders/outlines in resting state */
.nav-flat-link,
.nav-more-btn,
.mega-btn,
.mega-item,
.mega-link {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Restore hover effect for nav links */
.nav-flat-link:hover {
  color: #2563eb !important;
}

/* ── 9. TEXT DECORATION CLEANUP ───────────────────────────────────────────── */
/* Remove any stray text-decoration that could appear as "lines around text" */
.sr-section__title,
.sr-section__sub,
.sr-section__eyebrow,
.sr-hero-value-prop,
h1, h2, h3, h4, h5, h6 {
  text-decoration: none !important;
}

/* ── 10. FOOTER BORDER CLEANUP ────────────────────────────────────────────── */
/* Footer should have a clean top border only */
footer, .sr-footer {
  outline: none !important;
  box-shadow: none !important;
}

/* ── 11. MOBILE-SPECIFIC CLEANUP ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Remove any rogue outlines on mobile tap */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile nav items — no borders */
  .nav-mobile-menu a,
  .nav-mobile-menu button {
    outline: none !important;
    border: none !important;
  }

  /* Keep focus-visible on mobile for accessibility */
  .nav-mobile-menu a:focus-visible,
  .nav-mobile-menu button:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
  }
}

/* ── 12. CARD/INPUT BORDER PRESERVATION ───────────────────────────────────── */
/* Explicitly preserve intentional borders on interactive elements.
   These selectors have higher specificity than the resets above. */
.sr-settlement-card,
.sr-cat-card,
.drop-preview-card,
.sr-ctw-card,
.sr-testi-card,
.sr-blog-card,
.dc-card,
.tool-card,
.aup-card {
  /* These keep their existing borders — this rule is a safety net */
  outline: none;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
  /* Inputs keep their borders — this rule is a safety net */
  outline: none;
}

/* Input focus states preserved */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}
