/* ============================================================
   Task #1291326: Premium Color Scheme + Contrast Enforcement

   ENFORCE THE PREMIUM PALETTE SITEWIDE:
   - Blue: #2563eb (primary), #1d4ed8 (hover)
   - Text: #111827 (primary), #6b7280 (secondary)
   - Background: #ffffff (main), #f9fafb (surface)
   - Border: #e5e7eb
   - Success: #059669
   - Warning: #d97706
   - Error: #dc2626
   - Accent: #eab308 (gold for gamification)

   WCAG AA Contrast Requirements:
   - Normal text: 4.5:1 ratio
   - Large text: 3:1 ratio

   This file loads AFTER all other CSS and enforces the system
   with !important only where necessary to override inline styles.

   CRITICAL FIX (Task #1291321): Previous version forced ALL <a> tags
   to blue text with !important, overriding inline color:#fff on CTA
   buttons that use <a> tags with blue/dark backgrounds. This created
   invisible blue-on-blue or dark-on-dark text on EVERY button sitewide
   except the homepage (which had .sr-page wrapper protection).
   Fix: Exclude button/CTA elements from generic link color rules,
   and add nuclear white-text override for ALL colored-background CTAs.
   ============================================================ */

:root {
  /* Premium color palette — locked */
  --color-primary: #2563eb !important;
  --color-primary-hover: #1d4ed8 !important;
  --color-primary-dark: #1d4ed8 !important;
  --color-primary-light: #eef3fd !important;

  --color-text-primary: #111827 !important;
  --color-text-secondary: #6b7280 !important;
  --color-text-body: #111827 !important;

  --color-bg-primary: #ffffff !important;
  --color-bg-surface: #f9fafb !important;
  --color-bg-alt: #f9fafb !important;

  --color-border: #e5e7eb !important;

  --color-success: #059669 !important;
  --color-warning: #d97706 !important;
  --color-error: #dc2626 !important;
  --color-accent: #eab308 !important;

  /* Aliases for backward compatibility */
  --sr-blue: #2563eb !important;
  --sr-blue-hover: #1d4ed8 !important;
  --sr-text: #111827 !important;
  --sr-text-secondary: #6b7280 !important;
  --sr-white: #ffffff !important;
  --sr-bg-alt: #f9fafb !important;
  --sr-border: #e5e7eb !important;
}

/* ── ENFORCE: All text meets 4.5:1 contrast ──────────────────── */

/* Primary text on light backgrounds.
   CRITICAL: Do NOT include <a> or <button> here — they have their own
   rules below. Including them here forces dark text on buttons with
   colored backgrounds, making CTA text invisible. */
body,
body p,
body span,
body div,
h1, h2, h3, h4, h5, h6,
label,
input,
select,
textarea {
  color: var(--color-text-primary, #111827) !important;
}

/* Secondary text must use ONLY gray-500 to gray-600, never light colors */
.text-secondary,
.text-muted,
.text-gray,
small,
.caption,
.hint,
[data-text="secondary"] {
  color: var(--color-text-secondary, #6b7280) !important;
}

/* Dark text on white backgrounds (minimum 4.5:1) */
body {
  background-color: var(--color-bg-primary, #ffffff) !important;
  color: var(--color-text-primary, #111827) !important;
}

/* Surface sections use subtle background, dark text */
.card,
.section,
[data-surface],
.panel,
.box {
  background-color: var(--color-bg-surface, #f9fafb) !important;
  color: var(--color-text-primary, #111827) !important;
}

/* ── ENFORCE: Buttons ──────────────────────────────────────────── */

/* Primary buttons: blue background, white text (100% contrast) */
.btn,
.btn-primary,
button[type="submit"],
button[type="button"],
a.button,
a.btn,
.primary-cta {
  background-color: var(--color-primary, #2563eb) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 28px !important;
  font-weight: 600 !important;
  padding: 13px 24px !important;
}

.btn:hover,
.btn-primary:hover,
button:hover,
a.button:hover,
a.btn:hover {
  background-color: var(--color-primary-hover, #1d4ed8) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Secondary buttons: white background, blue border, blue text */
.btn-secondary,
.btn-outline,
.secondary-cta {
  background-color: #ffffff !important;
  color: var(--color-primary, #2563eb) !important;
  -webkit-text-fill-color: var(--color-primary, #2563eb) !important;
  border: 1.5px solid var(--color-primary, #2563eb) !important;
  border-radius: 28px !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background-color: var(--color-primary-light, #eef3fd) !important;
  color: var(--color-primary, #2563eb) !important;
  -webkit-text-fill-color: var(--color-primary, #2563eb) !important;
}

/* ── ENFORCE: Links ────────────────────────────────────────────── */

/* CRITICAL FIX (Task #1291321): Only apply blue text to PLAIN links —
   NOT to <a> tags that function as buttons or CTAs.
   The :not() selectors exclude any <a> tag with:
   - Button classes (.btn, .sr-btn, etc.)
   - CTA classes (anything with "cta" in the class name)
   - Inline background styles (indicating a colored button)
   - Navigation CTA classes
   Without these exclusions, blue text overwrites white text on blue-background
   buttons, creating invisible ghost buttons sitewide. */
a:not([class*="btn"]):not([class*="cta"]):not([class*="Btn"]):not([class*="Cta"]):not([style*="background"]):not([class*="sr-btn"]):not([class*="sidebar-btn"]):not([class*="filing-"]):not(.nav-cta-go-pro):not(.nav-mobile-cta-pro):not(.nav-mobile-go-pro):not(.nav-upgrade-btn),
[role="link"] {
  color: var(--color-primary, #2563eb) !important;
  text-decoration: none !important;
}

a:not([class*="btn"]):not([class*="cta"]):not([class*="Btn"]):not([class*="Cta"]):not([style*="background"]):not([class*="sr-btn"]):not([class*="sidebar-btn"]):not([class*="filing-"]):visited {
  color: var(--color-primary-dark, #1d4ed8) !important;
}

a:not([class*="btn"]):not([class*="cta"]):not([class*="Btn"]):not([class*="Cta"]):not([style*="background"]):not([class*="sr-btn"]):not([class*="sidebar-btn"]):not([class*="filing-"]):hover,
a:not([class*="btn"]):not([class*="cta"]):not([class*="Btn"]):not([class*="Cta"]):not([style*="background"]):not([class*="sr-btn"]):not([class*="sidebar-btn"]):not([class*="filing-"]):focus {
  color: var(--color-primary-dark, #1d4ed8) !important;
  text-decoration: underline !important;
}

/* ── NUCLEAR OVERRIDE: White text on ALL colored-background CTAs ── */
/* Task #1291321: This is the sitewide ghost button fix.
   Any <a> or <button> with a colored inline background MUST have white text.
   Uses both color and -webkit-text-fill-color for cross-browser safety.
   These selectors use attribute matching on inline styles to catch buttons
   that get their background from inline styles (the most common pattern
   in this codebase's EJS templates). */

/* Blue backgrounds */
a[style*="background:#2563eb"],
a[style*="background: #2563eb"],
a[style*="background:#1d4ed8"],
a[style*="background: #1d4ed8"],
a[style*="background:#1e40af"],
a[style*="background: #1e40af"],
a[style*="background:#0055B8"],
a[style*="background: #0055B8"],
a[style*="background:#004494"],
a[style*="background: #004494"],
a[style*="background:#1e3a8a"],
a[style*="background: #1e3a8a"],
a[style*="background:#3b82f6"],
a[style*="background: #3b82f6"],
button[style*="background:#2563eb"],
button[style*="background: #2563eb"],
button[style*="background:#1d4ed8"],
button[style*="background: #1d4ed8"],
button[style*="background:#0055B8"],
button[style*="background: #0055B8"],
button[style*="background:#004494"],
button[style*="background: #004494"],
/* Gradient backgrounds (blue, dark, green) */
a[style*="background:linear-gradient"],
a[style*="background: linear-gradient"],
button[style*="background:linear-gradient"],
button[style*="background: linear-gradient"],
/* Red backgrounds */
a[style*="background:#dc2626"],
a[style*="background: #dc2626"],
a[style*="background:#b91c1c"],
a[style*="background: #b91c1c"],
button[style*="background:#dc2626"],
button[style*="background: #dc2626"],
/* Green backgrounds */
a[style*="background:#16a34a"],
a[style*="background: #16a34a"],
a[style*="background:#15803d"],
a[style*="background: #15803d"],
a[style*="background:#059669"],
a[style*="background: #059669"],
button[style*="background:#16a34a"],
button[style*="background: #16a34a"],
/* Orange backgrounds */
a[style*="background:#ea580c"],
a[style*="background: #ea580c"],
button[style*="background:#ea580c"],
button[style*="background: #ea580c"],
/* Purple backgrounds (alerts) */
a[style*="background:#7c3aed"],
a[style*="background: #7c3aed"],
button[style*="background:#7c3aed"],
button[style*="background: #7c3aed"],
/* Var-based backgrounds */
a[style*="background:var(--color-primary)"],
a[style*="background: var(--color-primary)"],
a[style*="background:var(--primary)"],
a[style*="background: var(--primary)"],
button[style*="background:var(--color-primary)"],
button[style*="background:var(--primary)"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover states — keep white text */
a[style*="background:#2563eb"]:hover,
a[style*="background: #2563eb"]:hover,
a[style*="background:#1d4ed8"]:hover,
a[style*="background:#0055B8"]:hover,
a[style*="background:#004494"]:hover,
a[style*="background:#1e3a8a"]:hover,
a[style*="background:linear-gradient"]:hover,
a[style*="background: linear-gradient"]:hover,
a[style*="background:#dc2626"]:hover,
a[style*="background:#16a34a"]:hover,
a[style*="background:#15803d"]:hover,
a[style*="background:#7c3aed"]:hover,
a[style*="background:var(--color-primary)"]:hover,
a[style*="background:var(--primary)"]:hover,
button[style*="background:#2563eb"]:hover,
button[style*="background:#0055B8"]:hover,
button[style*="background:linear-gradient"]:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── NUCLEAR OVERRIDE: Class-based CTA buttons ────────────────── */
/* These CTA classes are used across the site's EJS templates.
   Each gets white text on its colored background. */

/* Site-wide CTA button classes with dark/blue backgrounds */
[class*="-cta-btn"],
[class*="-cta "]:not(.btn-cta-secondary),
.qf-cta,
.dph-cta,
.filing-exit-cta,
.sidebar-btn,
.sidebar-btn-xl,
.tr-hero-cta,
.wos-cta-btn,
.sl-cta-primary,
.crh-sidebar-alert-cta,
.nav-cta-go-pro,
.nav-mobile-cta-pro,
.nav-mobile-go-pro,
.nav-upgrade-btn,
.sr-btn--primary,
.sr-btn.sr-btn--primary,
a.sr-btn--primary,
.sr-btn--secondary,
.sr-btn.sr-btn--secondary,
a.sr-btn--secondary,
.sr-btn--ctw-all,
.ctw-file-btn,
.dc-card-btn,
.rir-submit {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover states for class-based CTAs */
[class*="-cta-btn"]:hover,
.qf-cta:hover,
.dph-cta:hover,
.filing-exit-cta:hover,
.sidebar-btn:hover,
.sidebar-btn-xl:hover,
.tr-hero-cta:hover,
.wos-cta-btn:hover,
.sl-cta-primary:hover,
.sr-btn--primary:hover,
.sr-btn--secondary:hover,
.sr-btn--ctw-all:hover,
.ctw-file-btn:hover,
.dc-card-btn:hover,
.nav-cta-go-pro:hover,
.rir-submit:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── ENFORCE: Form Elements ────────────────────────────────────── */

input,
textarea,
select {
  background-color: #ffffff !important;
  color: var(--color-text-primary, #111827) !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 8px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary, #6b7280) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* ── ENFORCE: Status & Alert Colors ────────────────────────────── */

.alert-success,
.success,
[data-status="success"] {
  background-color: var(--color-success, #059669) !important;
  color: #ffffff !important;
}

.alert-warning,
.warning,
[data-status="warning"] {
  background-color: var(--color-warning, #d97706) !important;
  color: #ffffff !important;
}

.alert-error,
.error,
[data-status="error"] {
  background-color: var(--color-error, #dc2626) !important;
  color: #ffffff !important;
}

/* ── ENFORCE: Badges & Labels ──────────────────────────────────── */

.badge,
.label,
.tag,
[data-badge] {
  background-color: var(--color-bg-surface, #f9fafb) !important;
  color: var(--color-text-secondary, #6b7280) !important;
  border-radius: 100px !important;
}

.badge-primary {
  background-color: var(--color-primary-light, #eef3fd) !important;
  color: var(--color-primary, #2563eb) !important;
}

.badge-success {
  background-color: var(--color-success, #059669) !important;
  color: #ffffff !important;
}

/* ── ENFORCE: Borders & Dividers ───────────────────────────────── */

hr,
.divider,
[data-divider] {
  border-color: var(--color-border, #e5e7eb) !important;
}

/* Card borders */
.card,
.panel,
.box {
  border: 1px solid var(--color-border, #e5e7eb) !important;
}

/* ── ENFORCE: No Color Bleeding ────────────────────────────────── */

/* Block any random inline color styles */
[style*="color: rgb"],
[style*="color: #"],
[style*="background-color: rgb"],
[style*="background-color: #"] {
  /* These will be overridden by the specific rules above */
}

/* ── ENFORCE: Accessibility ────────────────────────────────────── */

/* Focus states must be visible */
*:focus {
  outline-color: var(--color-primary, #2563eb) !important;
  outline-width: 2px !important;
}

/* High contrast for focus indicators */
button:focus,
a:focus,
input:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* ── ENFORCE: Heading Hierarchy ────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary, #111827) !important;
  font-weight: 600 !important;
}

h1 { font-size: clamp(32px, 5vw, 48px) !important; }
h2 { font-size: clamp(24px, 4vw, 36px) !important; }
h3 { font-size: clamp(20px, 3vw, 28px) !important; }
h4 { font-size: clamp(16px, 2.5vw, 22px) !important; }

/* ── PREMIUM FEEL: Subtle Shadows & Spacing ────────────────────── */

.card,
.panel,
.box,
.section {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ── DARK BACKGROUNDS: Enforce light text ──────────────────────── */

/* If a section has a dark background, ensure text is white */
[style*="background-color: #1d1d1f"],
[style*="background-color: #111827"],
[style*="background-color: #1f2937"],
[style*="background-color: #374151"],
[style*="background-color: #4b5563"],
.dark-bg,
[data-theme="dark"] {
  color: #ffffff !important;
}

[style*="background-color: #1d1d1f"] h1,
[style*="background-color: #1d1d1f"] h2,
[style*="background-color: #1d1d1f"] h3,
[style*="background-color: #1d1d1f"] h4,
[style*="background-color: #1d1d1f"] h5,
[style*="background-color: #1d1d1f"] h6,
[style*="background-color: #1d1d1f"] p,
[style*="background-color: #1d1d1f"] span,
[style*="background-color: #1d1d1f"] label,
[style*="background-color: #111827"] h1,
[style*="background-color: #111827"] h2,
[style*="background-color: #111827"] h3,
[style*="background-color: #111827"] h4,
[style*="background-color: #111827"] h5,
[style*="background-color: #111827"] h6,
[style*="background-color: #111827"] p,
[style*="background-color: #111827"] span,
[style*="background-color: #111827"] label {
  color: #ffffff !important;
}

/* Dark-background sections: links inside must also be white/light */
[style*="background-color: #1d1d1f"] a,
[style*="background-color: #111827"] a,
[style*="background-color: #1f2937"] a,
.dark-bg a,
[data-theme="dark"] a {
  color: #93c5fd !important;
}

/* ── Print Styles ──────────────────────────────────────────────── */

@media print {
  * {
    background-color: #ffffff !important;
    color: var(--color-text-primary, #111827) !important;
  }
}

/* ── Mobile Responsiveness ─────────────────────────────────────── */

@media (max-width: 768px) {
  body {
    background-color: var(--color-bg-primary, #ffffff) !important;
    color: var(--color-text-primary, #111827) !important;
  }

  .btn,
  button,
  a.button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ── SECONDARY/LIGHT BUTTONS: Preserve non-white text ──────────── */
/* These buttons have light backgrounds and colored text — do NOT override
   to white. They must explicitly come AFTER the nuclear override above. */
.btn-cta-secondary {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* End of Task #1291326 Premium Color Scheme Enforcement */
/* Ghost button fix: Task #1291321 */