/* ============================================================
   SettlementRadar — Design System Refinements (Task #1248864)

   Loaded AFTER design-tokens.css + settlementradar.css.
   Applies premium polish and enforces the global design system.

   BUTTON RADIUS: 28px (pill) — not 980px, not 12px.
   SECTION SPACING: 100px desktop, 64px mobile.
   COLOR PALETTE: White, Blue, Grey, Black. Nothing else.
   WCAG AA minimum: 4.5:1 normal text, 3:1 large text.
   ============================================================ */

/* ── Typography Refinements ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--sr-text, #1d1d1f);
}

h1 {
  font-weight: 700;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.1;
}
h2 {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15;
}
h3 {
  font-weight: 600;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.2;
}

body {
  letter-spacing: -0.005em;
  color: var(--sr-text-body, #333333);
}

p {
  line-height: 1.6;
  font-size: 17px;
  color: var(--sr-text-body, #333333);
}

/* ── Button Refinements — 28px pill radius ─────────────────── */
.btn,
.sr-btn,
.sp-btn {
  border-radius: var(--sr-radius-button, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  height: 52px;
  font-size: 16px;
}

.btn-primary,
.sr-btn--primary {
  background: var(--sr-blue, #2563eb);
  color: #fff;
  box-shadow: none;
}

.btn-primary:hover,
.sr-btn--primary:hover {
  background: var(--sr-blue-hover, #1d4ed8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sr-shadow-sm);
}

.btn-primary:active,
.sr-btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-secondary,
.sr-btn--secondary {
  border: 1.5px solid var(--sr-border, #e5e5e7);
  font-weight: 500;
  background: transparent;
  color: var(--sr-text, #1d1d1f);
}

.btn-secondary:hover,
.sr-btn--secondary:hover {
  border-color: var(--sr-blue, #2563eb);
  color: var(--sr-blue, #2563eb);
  background: transparent;
}

.btn-lg,
.sr-btn--lg,
.sr-btn--xl {
  border-radius: var(--sr-radius-button, 28px);
  padding: 0 36px;
  height: 52px;
}

/* ── Card Refinements ─────────────────────────────────────────── */
.card,
.settlement-card,
.sr-cat-card,
.testi-card,
.sr-testi-card,
.tool-card,
.guide-card {
  border: 1px solid var(--sr-border, #e5e5e7);
  box-shadow: var(--sr-shadow-sm);
  border-radius: var(--sr-radius, 16px);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.card-hover:hover,
.settlement-card:hover,
.sr-cat-card:hover,
.tool-card:hover,
.guide-card:hover {
  box-shadow: var(--sr-shadow-md);
  transform: translateY(-1px);
  border-color: var(--sr-border, #e5e5e7);
}

.price-card,
.sr-pricing-card {
  border: 1px solid var(--sr-border, #e5e5e7);
  border-radius: var(--sr-radius, 16px);
  box-shadow: var(--sr-shadow-sm);
}

.price-card--featured,
.sr-pricing-card--featured {
  border-color: var(--sr-blue, #2563eb);
  box-shadow: 0 0 0 1px var(--sr-blue, #2563eb), var(--sr-shadow-md);
}

/* ── Header Refinements ──────────────────────────────────────── */
.sr-header {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sr-border, #e5e5e7);
}

.sr-header--scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.sr-nav__link {
  border-radius: var(--sr-radius-button, 28px);
  color: var(--sr-text, #1d1d1f);
  font-weight: 400;
  font-size: 14px;
}

.sr-nav__link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--sr-text, #1d1d1f);
}

.sr-nav__link.active {
  color: var(--sr-blue, #2563eb);
  background: transparent;
  font-weight: 500;
}

.sr-mega-menu {
  border-radius: var(--sr-radius, 16px);
  border: 1px solid var(--sr-border, #e5e5e7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ── Footer Refinements ──────────────────────────────────────── */
.sr-footer {
  background: var(--sr-bg-alt, #f5f5f7);
  border-top: 1px solid var(--sr-border, #e5e5e7);
}

/* ── Section Spacing — 100px/64px (Task #1248864) ──────────── */
.section {
  padding: var(--sr-section-pad, 100px) 0;
}

@media (max-width: 640px) {
  .section { padding: var(--sr-section-pad-mobile, 64px) 0; }
}

.section-header {
  margin-bottom: 56px;
}

/* ── Hero Sections ────────────────────────────────────────────── */
.hero {
  padding: 120px 0 var(--sr-section-pad, 100px);
}

@media (max-width: 640px) {
  .hero { padding: 80px 0 var(--sr-section-pad-mobile, 64px); }
}

.hero__eyebrow,
.section-eyebrow,
.sr-badge {
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Badge Refinements ────────────────────────────────────────── */
.badge,
.sr-badge {
  border-radius: var(--sr-radius-pill, 100px);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 11px;
  text-transform: uppercase;
}

/* ── Form Inputs ──────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea,
.sr-exit-modal__input,
.ei-email-input,
.sr-exit-input,
.sr-scroll-input,
.tools-email-input {
  border-radius: var(--sr-radius-sm, 8px);
  border: 1.5px solid var(--sr-border, #e5e5e7);
  height: 52px;
  font-size: 16px;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--sr-blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ── Filter Tabs ──────────────────────────────────────────────── */
.filter-tab,
.sr-filter-tab {
  border-radius: var(--sr-radius-button, 28px);
  font-weight: 500;
  border: 1px solid var(--sr-border, #e5e5e7);
}

.filter-tab--active,
.sr-filter-tab--active {
  box-shadow: none;
}

/* ── Modals ───────────────────────────────────────────────────── */
.sr-exit-modal,
.sr-exit-card,
.rir-modal,
.sas-modal,
.oq-modal,
.sr-upgrade-modal,
#sr-fi-box,
#sr-exit-popup,
#exitIntentModal {
  border-radius: var(--sr-radius, 16px);
  box-shadow: var(--sr-shadow-lg);
}

/* Modal buttons: 28px pill */
.sr-exit-btn,
.sr-scroll-btn,
.sr-ep-form input[type="submit"],
#sr-ep-btn,
.rir-submit,
.sas-submit,
.ei-submit-btn,
.lm-bar-btn,
#sr-fi-assisted {
  border-radius: var(--sr-radius-button, 28px);
  font-weight: 600;
}

/* ── Testimonial Cards ─────────────────────────────────────────── */
.testi-card__outcome,
.sr-testi__outcome {
  border-radius: var(--sr-radius-pill, 100px);
}

/* ── Social Proof: Compact line ──────────────────────────────── */
.hero__proof {
  font-size: 14px;
  color: var(--sr-text-secondary, #6e6e73);
  gap: 8px;
}

/* ── Trust Bar ─────────────────────────────────────────────────── */
.trust-bar {
  background: var(--sr-bg-alt, #f5f5f7);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── Settlement Card Arrow ─────────────────────────────────────── */
.settlement-card__arrow {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: var(--color-primary-light);
  transition: background 0.2s ease-out, transform 0.2s ease-out;
}

.settlement-card:hover .settlement-card__arrow {
  background: var(--sr-blue, #2563eb);
  color: #fff;
  transform: translateX(2px);
}

/* ── Mobile Sticky CTA ─────────────────────────────────────────── */
.sr-mobile-cta {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--sr-border, #e5e5e7);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Final CTA Sections ────────────────────────────────────────── */
.final-cta,
.sr-final-cta {
  background: var(--sr-bg-alt, #f5f5f7);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── Contrast Safety Net ──────────────────────────────────────── */
/* Force WCAG-safe palette on inline-style buttons */
a[style*="background:#0570de"],
a[style*="background: #0570de"],
a[style*="background:#2563eb"],
a[style*="background: #2563eb"],
a[style*="background:#1d4ed8"],
a[style*="background: #1d4ed8"],
button[style*="background:#0570de"],
button[style*="background: #0570de"],
button[style*="background:#2563eb"],
button[style*="background: #2563eb"],
span[style*="background:#0570de"],
span[style*="background: #0570de"],
span[style*="background:#2563eb"],
span[style*="background: #2563eb"] {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
  border-radius: var(--sr-radius-button, 28px) !important;
}

a[style*="background:#111827"],
a[style*="background: #111827"] {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
  border-radius: var(--sr-radius-button, 28px) !important;
}

a[style*="background:#16a34a"],
a[style*="background: #16a34a"] {
  background: #15803d !important;
}

a[style*="background:#ea580c"],
a[style*="background: #ea580c"] {
  background: #c2410c !important;
}

/* Inline-style blue buttons — expanded catch-all */
a[style*="background:#0055B8"],
a[style*="background: #0055B8"],
a[style*="background:#0066cc"],
a[style*="background: #0066cc"],
button[style*="background:#0055B8"],
button[style*="background: #0055B8"],
button[style*="background:#0066cc"],
button[style*="background: #0066cc"] {
  color: #fff !important;
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .sr-btn--primary:hover {
    transform: none;
  }
  .settlement-card:hover,
  .card-hover:hover,
  .tool-card:hover,
  .guide-card:hover {
    transform: none;
  }
}

/* ── Auth Pages ───────────────────────────────────────────────── */
.aup-mkt,
.aup-sp-panel {
  background: var(--sr-blue, #2563eb);
}

/* ── Pro Gate CTAs ─────────────────────────────────────────────── */
.pro-gate-cta,
.sr-content-gate-card-cta,
.sr-upgrade-modal-cta {
  background: var(--sr-blue, #2563eb);
  border-radius: var(--sr-radius-button, 28px);
}
.pro-gate-cta:hover,
.sr-content-gate-card-cta:hover,
.sr-upgrade-modal-cta:hover {
  background: var(--sr-blue-hover, #1d4ed8);
}

/* ── Focus Visible ────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Link Hover: Smooth underline ─────────────────────────────── */
a {
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out;
}
a:hover {
  text-decoration-color: currentColor;
}

/* ── Grid spacing ─────────────────────────────────────────────── */
.grid { gap: var(--sr-gap, 24px); }
.sr-cat-grid { gap: 20px; }
.hiw-grid { gap: 48px; }
.sr-testi-grid { gap: 28px; }

/* ── WCAG AA Enforcement (Task #1248806) ──────────────────── */

/* 1. CTA BUTTONS: Force white text on ALL blue buttons */
.btn-primary,
.sr-btn--primary,
.sr-btn--primary.sr-btn--lg,
.sr-btn--primary.sr-btn--stripe,
a.btn-primary,
a.sr-btn--primary,
a.sr-btn--stripe {
  color: #fff !important;
  background-color: var(--sr-blue, #2563eb) !important;
}
.btn-primary:hover,
.sr-btn--primary:hover,
a.btn-primary:hover,
a.sr-btn--primary:hover {
  color: #fff !important;
  background-color: var(--sr-blue-hover, #1d4ed8) !important;
}

/* Footer CTA buttons */
.fp-cta-btn-primary,
a.fp-cta-btn-primary {
  color: #fff !important;
  background: var(--sr-blue, #2563eb) !important;
}
.fp-cta-btn-primary:hover,
a.fp-cta-btn-primary:hover {
  color: #fff !important;
  background: var(--sr-blue-hover, #1d4ed8) !important;
}
.fp-cta-btn-secondary,
a.fp-cta-btn-secondary {
  color: var(--sr-blue, #2563eb) !important;
}

/* Header nav Get Started button */
.sr-header a.btn-primary,
.sr-header .btn.btn-primary {
  color: #fff !important;
  background: var(--sr-blue, #2563eb) !important;
}

/* Email capture subscribe button */
.fp-email-capture__btn {
  color: #fff !important;
  background: var(--sr-blue, #2563eb) !important;
}

/* 2. TRUST BAR ICONS */
.sr-trust__icon {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
.sr-trust__icon svg {
  color: #fff !important;
  stroke: #fff !important;
}
.sr-trust__icon svg path[fill="#00b67a"] {
  fill: #fff !important;
}

/* 3. CATEGORY CARD ICONS */
.sr-cat-card__icon {
  background: #dbeafe !important;
  color: var(--sr-blue, #2563eb) !important;
}
.sr-cat-card__icon svg {
  color: var(--sr-blue, #2563eb) !important;
  stroke: var(--sr-blue, #2563eb) !important;
}

/* 4. HERO SUBTITLE */
.sr-hero__sub {
  color: #424245 !important;
}
.sr-hero__eyebrow {
  color: var(--sr-text, #1d1d1f) !important;
  background: var(--sr-bg-alt, #f5f5f7) !important;
  border: 1px solid var(--sr-border, #e5e5e7) !important;
}

/* 5. SECTION SUBTITLES */
.sr-section__sub,
.sr-section__eyebrow {
  color: #424245;
}

/* 6. BLOG/GUIDE CATEGORY BADGES */
.blog-category-chip {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--sr-text-secondary, #6e6e73) !important;
  background: var(--sr-bg-alt, #f5f5f7) !important;
  border: none !important;
  padding: 4px 12px !important;
  border-radius: var(--sr-radius-pill, 100px) !important;
}

.blog-featured-chip {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
  border: none !important;
}

.blog-card-excerpt {
  color: var(--sr-text-body, #333333) !important;
}

.blog-card h2 {
  color: var(--sr-text, #1d1d1f) !important;
  font-family: var(--sr-font) !important;
}
.blog-card:hover h2 {
  color: var(--sr-blue, #2563eb) !important;
}

.blog-card-date,
.blog-card-read-time {
  color: var(--sr-text-secondary, #6e6e73) !important;
}

.blog-card-cta {
  color: var(--sr-blue, #2563eb) !important;
}

/* 7. SOCIAL ICONS */
.fp-social-link {
  background: #d2d2d7 !important;
  color: var(--sr-text, #1d1d1f) !important;
}
.fp-social-link:hover {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
}

/* 8. COLOR PALETTE ENFORCEMENT */
.sr-badge--green {
  background: var(--sr-bg-alt, #f5f5f7) !important;
  color: var(--sr-text-secondary, #6e6e73) !important;
  border-color: transparent !important;
}

.sr-badge--red {
  background: var(--sr-bg-alt, #f5f5f7) !important;
  color: var(--sr-danger, #dc2626) !important;
}

.sr-stats-bar {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
}
.sr-stats-bar__num {
  color: #fff !important;
}
.sr-stats-bar__label {
  color: rgba(255, 255, 255, 0.85) !important;
}

.sr-step__num {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
}

.filter-tab--active,
.sr-filter-tab--active {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
}

.sr-trust__label {
  color: var(--sr-text, #1d1d1f) !important;
  font-weight: 600;
}
.sr-trust__sub {
  color: var(--sr-text-secondary, #6e6e73) !important;
}

/* 9. FOOTER TEXT CONTRAST */
.fp-cta-banner__eyebrow {
  color: var(--sr-text-secondary, #6e6e73) !important;
}
.fp-cta-banner__headline {
  color: var(--sr-text, #1d1d1f) !important;
}
.fp-cta-banner__sub {
  color: #424245 !important;
}

/* 10. PLAN COMPARE & PRICING */
.sr-plan-compare__badge {
  background: var(--sr-blue, #2563eb) !important;
  color: #fff !important;
}

.hub-card__badge {
  background: var(--sr-bg-alt, #f5f5f7) !important;
  color: var(--sr-text-secondary, #6e6e73) !important;
}

/* 11. SECTION EYEBROW */
.sr-section__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sr-blue, #2563eb);
}