/* ========================================
   JAG Brand — Phase 2 Application
   Service Pages + /partners
   Patriotic Red · White · Blue
   ======================================== */

/* ── Core palette override ── */
:root {
  --navy:       #002868;    /* Old Glory Blue (deeper than legacy #0c1929) */
  --slate:      #0d1f45;    /* Deep navy for dark sections */
  --cream:      #f8f5f0;    /* Warm off-white */
  --text:       #2c3a4a;    /* Dark text */
  --text-light: #5a6472;    /* Body text */
}

/* ── Hero: patriotic navy gradient ── */
.page-hero {
  background: linear-gradient(150deg, #002868 0%, #001a50 55%, #0b1630 100%);
}

/* ── Patriotic accent stripe beneath hero ── */
.page-hero::after {
  height: 4px !important;
  background: linear-gradient(90deg,
    #002868 0%,
    #002868 25%,
    #B22234 35%,
    #B22234 65%,
    #002868 75%,
    #002868 100%
  ) !important;
  opacity: 1 !important;
}

/* ── Hero background glow: red hint ── */
.page-hero::before {
  background: radial-gradient(ellipse, rgba(178, 34, 52, 0.06) 0%, transparent 65%) !important;
}

/* ── Red primary CTAs ── */
.btn-primary {
  background: #B22234;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.btn-primary:hover {
  background: #cc2640;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(178, 34, 52, 0.28);
}

/* ── Secondary / ghost button ── */
.btn-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.65);
  color: #ffffff;
}

/* On light sections, outline goes navy */
.content-section.alt .btn-outline,
.form-section .btn-outline {
  color: #002868;
  border-color: rgba(0, 40, 104, 0.4);
}

.content-section.alt .btn-outline:hover,
.form-section .btn-outline:hover {
  background: rgba(0, 40, 104, 0.06);
  border-color: #002868;
  color: #002868;
}

/* ── Nav "Act Now" — red ── */
.nav-links .nav-cta {
  background: #B22234;
  color: #ffffff;
}

.nav-links .nav-cta:hover {
  background: #cc2640;
  color: #ffffff;
}

/* ── Form interactions ── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #002868;
  box-shadow: 0 0 0 3px rgba(0, 40, 104, 0.1);
}

.checkbox-item input[type="checkbox"],
.radio-item input[type="radio"] {
  accent-color: #B22234;
}

/* ── Early callout: red left accent ── */
.early-callout {
  border-left-color: #B22234;
}

/* ── Process step numbers: red circles ── */
.step-number {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #B22234;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.content-section.dark .step-number {
  background: rgba(178, 34, 52, 0.85);
  color: #ffffff;
}

/* ── Points grid: navy top border ── */
.point-card {
  border-top: 2px solid rgba(0, 40, 104, 0.18);
  padding-top: 2rem;
}

.point-card h4 {
  color: #002868;
}

.content-section.dark .point-card {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.content-section.dark .point-card h4 {
  color: var(--warm-light);
}

/* ── Section titles on light sections ── */
.content-section .section-title {
  color: #002868;
}

/* ── CTA banner: rich navy gradient ── */
.cta-banner {
  background: linear-gradient(150deg, #002868 0%, #001740 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #B22234 0%, #002868 50%, #B22234 100%);
}

/* ── PARTNERS PAGE: stat bar ── */
.stat-bar {
  background: #0d1f45;
  border-top-color: rgba(178, 34, 52, 0.2) !important;
  border-bottom-color: rgba(178, 34, 52, 0.2) !important;
}

/* ── PARTNERS PAGE: how-step icons ── */
.how-step-icon {
  background: #B22234;
  color: #ffffff;
}

.how-steps::before {
  background: linear-gradient(to right, #B22234, rgba(178, 34, 52, 0.2)) !important;
}

/* ── PARTNERS PAGE: diff cards ── */
.diff-card {
  border-top-color: #B22234;
}

.diff-card .diff-badge {
  color: #B22234;
  background: rgba(178, 34, 52, 0.08);
  border: none;
}

/* ── PARTNERS PAGE: compare table ── */
.compare-table th:nth-child(2) {
  color: #B22234;
}

/* ── PARTNERS PAGE: gap side ── */
.gap-side.attorney {
  background: #0d1f45;
}

/* ── Hero service icon ── */
.hero-service-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 1.75rem;
  color: var(--warm);
  opacity: 0.8;
}

.hero-service-icon svg {
  width: 52px;
  height: 52px;
}

/* ── Timeline CTA background ── */
.timeline-cta {
  background: #002868;
}

/* ── Section label on light backgrounds stays gold ── */
.content-section .section-label {
  color: var(--warm);
}