/* ============================================================
   SentinelPeak Insurance — theme-insurance.css
   Layer 2: Brand-specific token overrides + structural overrides
   needed to match the Figma master design (Brand - v3, Hifi v2).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand (Figma "Get a quote" pink + sentinel-icon magenta) ── */
  --color-brand:        #e5abd5;          /* light pink — primary button bg */
  --color-brand-hover:  #d08cb8;          /* hover pink */
  --color-brand-light:  #f2d4eb;          /* card hover tint */
  --color-brand-pale:   #faeef8;          /* hero/section soft tint */
  --color-brand-deep:   #b958cd;          /* sentinel-icon magenta */

  /* ── Dark plum nav/footer/CTA band ──────────────────────── */
  --color-dark:         #422c42;
  --color-dark-light:   #5c3d5c;
  --color-dark-deep:    #2a162c;          /* sentinel-icon dark plum */

  /* ── Surface and text ───────────────────────────────────── */
  --color-surface:      #ffffff;
  --color-surface-alt:  #f0f0f0;          /* Why-choose card, gray panels */
  --text-dark:          #0b1228;
  --color-border:       rgba(11, 18, 40, 0.2);

  /* ── Radius scale (from Figma variables) ────────────────── */
  --radius-sm:          10px;
  --radius-md:          16px;
  --radius-lg:          20px;
  --radius-xl:          24px;
  --radius-2xl:         32px;
  --radius-3xl:         40px;
  --radius-pill:        999px;

  /* ── Typography (Manrope for headings, Inter for body) ──── */
  --font-family:         'Inter', sans-serif;
  --font-family-heading: 'Manrope', sans-serif;
}

/* ── Nav structural override ─────────────────────────────────
   Figma shows a dark-plum nav with white links, centered logo,
   and a pink CTA button. This supersedes layout.css defaults. */
.navigation-bar {
  background: var(--color-dark);
  border-bottom: none;
  color: var(--color-white);
}

.nav-link {
  color: var(--color-white);
  font-weight: 400;
}

.nav-link:hover { color: var(--color-brand); opacity: 1; }
.nav-link[aria-current="page"] { color: var(--color-brand); font-weight: 500; }

.nav-account { color: var(--color-white); }
.nav-account:hover { color: var(--color-brand); }

/* On the dark nav, the standout Account CTA reads in the brand's deep
   plum text so the pink fill pops against the rest of the bar. */
.nav-account--cta { color: var(--color-dark-deep); }
.nav-account--cta:hover { color: var(--color-dark-deep); }

.nav-signin-btn {
  background: var(--color-brand);
  color: var(--color-dark-deep);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.nav-signin-btn:hover {
  background: var(--color-brand-hover);
  color: var(--color-dark-deep);
}

.nav-login-btn {
  color: var(--color-white);
  font-weight: 500;
}
.nav-login-btn:hover { color: var(--color-brand); }

/* ── Hero — base (light background, subtle pink chevron decor) ── */
.hero-section {
  background: var(--color-surface);
  padding-top: 60px;
  padding-bottom: 80px;
}

/* Generic decorative pink chevrons (used on bundles/claims/get-quote heroes).
   Uses the sentinel icon SVG via brand-pale color masking for a soft watermark. */
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-image: url("../images/logo-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.hero-section::before { top: -80px;  left: -120px;  transform: rotate(-18deg); }
.hero-section::after  { bottom: -100px; right: -100px; transform: rotate(168deg); }

@media (max-width: 768px) {
  .hero-section::before,
  .hero-section::after { width: 220px; height: 220px; opacity: 0.08; }
}

/* The home hero uses the full Figma chevron-collage background instead of the
   generic decoration. We disable the ::before/::after and let the image carry
   the brand hue. */
.hero-section--home {
  padding-top: 40px;
  padding-bottom: 80px;
}
.hero-section--home::before,
.hero-section--home::after { content: none; }

.hero-section--home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-section--home .hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 103%;
  object-fit: cover;
  object-position: center top;
}

.hero-section--home .hero-content {
  position: relative;
  z-index: 1;
}

.hero-section--home .hero-icon {
  width: 94px;
  height: auto;
  margin: 0 auto;
}

/* ── Heading typography uses Manrope ─────────────────── */
.hero-headline,
.section-title,
.cta-band-headline,
.split-content-title,
.process-step-number,
.pricing-card-amount,
.stat-number,
.case-detail-title,
.profile-name,
.confirm-modal-title {
  font-family: var(--font-family-heading);
}

/* ── Footer accent (logo accent uses brand) ──────────── */
.footer-disclaimer { color: var(--color-white); }
.footer-column a:hover { color: var(--color-brand); opacity: 1; }
.footer-legal a:hover { color: var(--color-brand); opacity: 1; }
.footer-legal a { opacity: 0.85; }

/* ── CTA band override — uses dark plum + brand chevron echo ── */
.cta-band {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -120px;
  width: 320px;
  height: 320px;
  background-image: url("../images/logo-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  transform: translateY(-50%) rotate(-18deg);
}

.cta-band::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-brand-deep) 0%, transparent 70%);
  opacity: 0.22;
  pointer-events: none;
}

.cta-band-inner { position: relative; z-index: 1; }

.cta-band .btn-primary {
  background: var(--color-white);
  color: var(--color-dark);
}
.cta-band .btn-primary:hover {
  background: var(--color-brand-pale);
  color: var(--color-dark-deep);
}

.cta-band .btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.cta-band .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

/* ── Btn primary — pink on dark text per Figma ───────── */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-dark-deep);
  border-radius: var(--radius-md);
}

.btn-primary:hover { background: var(--color-brand-hover); color: var(--color-dark-deep); }

/* Dark variant — used by Why-choose "Get insurance" and other dark CTAs per Figma */
.btn-primary--dark {
  background: var(--color-dark-deep);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.btn-primary--dark:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* ── Coverage card icon — brand-deep on pink-pale ────── */
.feature-card-icon {
  background: var(--color-brand-pale);
  color: var(--color-brand-deep);
}

.feature-card-icon svg path,
.feature-card-icon svg circle,
.feature-card-icon svg rect {
  stroke: var(--color-brand-deep);
}

/* ── Focus visible — universal ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-brand-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }