/*
  design-fixes.css — CustodyProviders.com
  Solves: dark background leak, hamburger on desktop, white text on light blue,
          search-to-results spacing, mobile menu color.
  Load LAST — after all other CSS files.
*/

/* ============================================================
   1. NUKE THE DARK BACKGROUND — force page to white/light
   final-audit-fixes.css sets navy background on html,body.
   We override it here with maximum specificity.
   ============================================================ */
html,
html body,
html body.cp-body {
  background: #f8fafc !important;
  color: #172033 !important;
}

body {
  background: #f8fafc !important;
  color: #172033 !important;
}

/* Ensure main content areas are never dark */
main,
.section,
.hero,
.hero-subpage {
  background: transparent !important;
  color: #172033 !important;
}

/* ============================================================
   2. HAMBURGER / MOBILE TOGGLE — hide on desktop, show on mobile
   final-audit-fixes.css and ultimate-contrast-mobile-fix.css
   conflict on display values.
   ============================================================ */
.mobile-toggle,
.mobile-menu-toggle,
#subpage-mobile-menu-toggle,
.hamburger {
  display: none !important;
}

@media (max-width: 1100px) {
  .mobile-toggle,
  .mobile-menu-toggle,
  #subpage-mobile-menu-toggle,
  .hamburger {
    display: flex !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #071a2f !important;
    border-radius: 12px !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
  }
  .mobile-toggle span,
  .mobile-menu-toggle span,
  #subpage-mobile-menu-toggle span,
  .hamburger span {
    background: #071a2f !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
  }
}

/* ============================================================
   3. MOBILE MENU PANEL — white background, dark text
   final-audit-fixes.css forces navy, institutional-theme.css
   forces white. We settle this: white, always.
   ============================================================ */
.mobile-panel,
.mobile-nav,
#global-mobile-menu-panel,
.mobile-menu-panel,
.subpage-mobile-menu-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(7, 26, 47, 0.14) !important;
  color: #172033 !important;
}

.mobile-panel a,
.mobile-nav a,
#global-mobile-menu-panel a,
.mobile-menu-panel a,
.subpage-mobile-menu-panel a {
  background: #f8fafc !important;
  color: #172033 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
}

.mobile-panel a:hover,
.mobile-nav a:hover,
#global-mobile-menu-panel a:hover,
.mobile-menu-panel a:hover,
.subpage-mobile-menu-panel a:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* ============================================================
   4. WHITE TEXT ON LIGHT BLUE — fix contrast failures
   .eyebrow, .revenue-badge, .profile-status-badge on light
   blue backgrounds (#eff6ff, #bfdbfe) must use dark text.
   ============================================================ */
.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.revenue-badge,
.provider-lead-cta .eyebrow,
[class*="eyebrow"] {
  color: #1d4ed8 !important;
  background: transparent !important;
}

/* The pill-style eyebrow badges with light blue bg */
.hero .eyebrow,
.section .eyebrow,
.eyebrow[style],
span.eyebrow {
  color: #1e40af !important;
}

/* Revenue badge (appears on pricing cards) */
.revenue-badge,
.profile-status-badge {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  color: #1e3a8a !important;
}

/* Lead economics cards — navy bg, white text (correct) */
.lead-economics-card {
  background: #071a2f !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.lead-economics-card strong {
  color: #ffffff !important;
}
.lead-economics-card span {
  color: #b9c8e0 !important;
}

/* Pricing lead cards on white — dark text */
.pricing-lead-card {
  background: #ffffff !important;
  color: #172033 !important;
  border: 1px solid #e2e8f0 !important;
}
.pricing-lead-card h3,
.pricing-lead-card .pricing-lead-price {
  color: #071a2f !important;
}
.pricing-lead-card .muted,
.pricing-lead-card p.muted {
  color: #475569 !important;
}
.pricing-lead-card ul li {
  color: #334155 !important;
}
.pricing-lead-card.featured {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15) !important;
}

/* ============================================================
   5. SEARCH BAR → RESULTS SPACING
   Add clear margin between the filters shell and the provider
   grid below it on provider-filter.html
   ============================================================ */
.filters-shell {
  margin-bottom: 32px !important;
}

#providers .filters-shell,
#providers > .filters-shell.container {
  margin-bottom: 36px !important;
}

/* Provider filter page: gap between search and cards */
.provider-grid,
#providers .provider-grid,
.directory-grid,
#providers .directory-grid {
  margin-top: 8px !important;
}

/* Extra top margin on the section following the hero on filter page */
.hero-subpage + .section,
.hero + .section {
  padding-top: 36px !important;
}

/* ============================================================
   6. CARDS AND CONTENT — ensure white on light pages
   ============================================================ */
.card,
.content-card,
.sidebar-card,
.contact-card,
.hero-card,
.pricing-card,
.provider-card,
.notice-card,
.topic-card,
.faq-card,
.results-shell,
.cta-panel {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #e2e8f0 !important;
}

/* Headings inside cards always dark navy */
.card h2, .card h3, .card h4,
.content-card h2, .content-card h3,
.sidebar-card h3, .sidebar-card h2,
.hero-card h3, .cta-panel h2,
.provider-card h3, .provider-name {
  color: #071a2f !important;
}

/* Body text inside cards — readable grey */
.card p, .card li, .card span:not(.eyebrow):not(.badge),
.content-card p, .content-card li,
.sidebar-card p, .sidebar-card li,
.hero-card p, .hero-card span,
.cta-panel p,
.provider-card p, .provider-card .provider-sub,
.mini-metrics span, .muted, .small, .lead {
  color: #334155 !important;
  opacity: 1 !important;
}

strong, b {
  color: #071a2f !important;
}

/* ============================================================
   7. HEADER — always clean white
   ============================================================ */
.header,
.site-header {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #071a2f !important;
}

.navlinks a,
.main-nav a {
  color: #334155 !important;
  background: transparent !important;
}

.navlinks a:hover,
.main-nav a:hover {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

.nav-cta {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

/* ============================================================
   8. FOOTER — dark navy (intentional)
   ============================================================ */
.footer,
.site-footer {
  background: #071a2f !important;
  color: #ffffff !important;
}

.footer p,
.footer .footer-copy,
.footer-copy {
  color: #b9c8e0 !important;
}

.footer h4,
.footer strong {
  color: #ffffff !important;
}

.footer a,
.site-footer a {
  color: #e8f1ff !important;
}

/* ============================================================
   9. BUTTONS — consistent
   ============================================================ */
.btn-primary,
.btn.primary,
a.btn-primary,
button.btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

.btn-primary:hover,
.btn.primary:hover {
  background: #1d4ed8 !important;
}

.btn-secondary,
.btn.secondary,
a.btn-secondary,
button.btn-secondary {
  background: #ffffff !important;
  color: #071a2f !important;
  border: 1.5px solid #cbd5e1 !important;
}

.btn-secondary:hover,
.btn.secondary:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

/* ============================================================
   10. PROVIDER FILTER PAGE — "Lead access not activated" badge
   Should be visible but not alarming. Not red, not white-on-white.
   ============================================================ */
.provider-card [class*="lead-access"],
.provider-card .badge-pending,
.directory-card [class*="lead-access"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 11px !important;
}