/*
 * Homepage Premium Design — Task #1162519
 * Dark navy hero overrides + shimmer CTAs + stat card hover effects
 * Mobile-first, no overflow:hidden on full-page containers
 */

/* ── Dark hero inner content container ──────────────────── */
.rs-hero-content.rs-hero-new-layout {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(1px);
}

/* ── Brand name — white on dark navy ──────────────────── */
.sr-hero-brand-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* "Radar" — bright blue (readable on dark, brand-distinctive) */
.sr-hero-brand-name .sr-brand-radar {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}

/* ── AMERICA'S SETTLEMENT PLATFORM tagline ───────────── */
.sr-hero-tagline {
  background: rgba(96,165,250,0.12) !important;
  border-color: rgba(96,165,250,0.3) !important;
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
}

/* ── Value prop headline — white ──────────────────────── */
.sr-hero-value-prop {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Social proof pill — glass on dark ──────────────── */
.sr-hero-social-proof {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.08) !important;
}
.sr-hero-social-proof strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Trust badges on dark hero ──────────────────────── */
.sr-hero-trust-badges {
  color: rgba(255,255,255,0.78) !important;
}

/* ── Mini live activity ticker on dark hero ─────────── */
.sr-hero-mini-ticker {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.35) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* ── Radar rings — more visible on dark bg ──────────── */
.sr-hero-radar-ring   { border-color: rgba(96,165,250,0.45) !important; }
.sr-hero-radar-ring-2 { border-color: rgba(96,165,250,0.32) !important; }
.sr-hero-radar-ring-3 { border-color: rgba(96,165,250,0.22) !important; }
.sr-hero-radar-pulse  { border-color: rgba(96,165,250,0.65) !important; }

/* ── Sub text (pricing line) on dark hero ────────────── */
.sr-hero-sub {
  color: rgba(255,255,255,0.82) !important;
}
.sr-hero-sub strong {
  color: #ffffff !important;
}
.sr-hero-trust-line {
  color: rgba(255,255,255,0.6) !important;
}
.sr-hero-trust-line span:not([aria-hidden]) {
  color: rgba(255,255,255,0.72) !important;
}

/* ── CTA button shimmer animation ──────────────────────── */
.sr-hero-cta-main {
  position: relative;
  overflow: hidden;
}
.sr-hero-cta-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 50%,
    transparent 100%
  );
  animation: srCtaShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes srCtaShimmer {
  0%   { left: -100%; }
  60%  { left: 200%; }
  100% { left: 200%; }
}

/* Also shimmer the primary dominant button in the stats section */
.rs-btn-primary-dominant {
  position: relative;
  overflow: hidden;
}
.rs-btn-primary-dominant::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  animation: srCtaShimmer 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Stat card hover effects ──────────────────────────── */
.rs-stat {
  transition: transform 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
  cursor: default;
  border-radius: 8px;
}
.rs-stat:hover {
  transform: translateY(-3px);
  background: rgba(37,99,235,0.06);
}
.rs-stat-number {
  transition: color 0.2s ease;
}
.rs-stat:hover .rs-stat-number {
  color: #2563eb;
}

/* ── Stats bar — elevated on dark hero ──────────────── */
.rs-stats-bar {
  box-shadow: 0 -4px 0 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* ── Urgency strip — keep visible over dark hero ─────── */
.rs-hero.rs-hero-redesigned .urgency-strip {
  position: relative;
  z-index: 5;
}

/* ── Trust item separators (| dividers) on dark bg ───── */
.rs-hero-redesigned .rs-hero-trust-sep {
  color: rgba(255,255,255,0.25) !important;
}

/* ── Featured settlement hero below — preserve light style ─ */
#featured-settlement-hero {
  position: relative;
  z-index: 1;
}

/* ── Breathing room adjustments for mobile ──────────── */
@media (max-width: 640px) {
  .rs-hero.rs-hero-redesigned {
    padding: clamp(2rem,5vw,3rem) clamp(1rem,4vw,1.5rem) clamp(2.5rem,5vw,3.5rem) !important;
  }
  .rs-hero-content.rs-hero-new-layout {
    padding: 1.75rem 1rem 1.5rem !important;
  }
}

/* ── Canvas radar on dark hero — slightly brighter ────── */
#srRadarBgCanvas {
  opacity: 0.18 !important;
}
@media (max-width: 768px) {
  #srRadarBgCanvas { opacity: 0.12 !important; }
}


/* Task #1165780: Fix WCAG contrast for LIVE badge on dark hero background */
/* .sr-hlb-live uses dark green (#15803d) which fails 4.5:1 on dark navy hero */
.sr-hero-live-badge .sr-hlb-live,
.sr-hero-live-badge .sr-hlb-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* The green dot is bright enough (#22c55e = 5.2:1 on dark) to pass WCAG AA — keep it */
.sr-hero-live-badge .sr-hlb-text strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
/* Task #1165780: Tighten hero card top padding — less whitespace above logo */
.rs-hero.rs-hero-redesigned {
  padding-top: clamp(1.25rem, 3vw, 2.5rem) !important;
}
/* Task #1165780: Remove gap between sticky nav and hero on mobile */
@media (max-width: 640px) {
  .rs-hero.rs-hero-redesigned {
    padding-top: clamp(0.75rem, 2.5vw, 1.5rem) !important;
    margin-top: 0 !important;
  }
  /* Task #1165780: Static clean radar logo on mobile — animations look cheap at 120px */
  @media (prefers-reduced-motion: no-preference) {
    .sr-hero-radar-sweep { animation: none !important; transform: none !important; background: transparent !important; }
    .sr-hero-radar-dot { animation: none !important; opacity: 0.85 !important; }
    .sr-hero-radar-pulse { animation: none !important; opacity: 0.6 !important; }
    .sr-hero-radar-ring { border-color: rgba(96, 165, 250, 0.5) !important; }
    .sr-hero-radar-ring-2 { border-color: rgba(96, 165, 250, 0.35) !important; }
    .sr-hero-radar-ring-3 { border-color: rgba(96, 165, 250, 0.25) !important; }
    .sr-hero-radar-center { background: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,0.3) !important; }
  }
}