/* Homepage palette and finishing touches. */
:root,
body.home {
  --brand-red: #b91c1c;
  --brand-red-hover: #991b1b;
  --brand-red-soft: #fff1f2;
  --brand-red-border: #fecdd3;
  --theme-color-text_link: var(--brand-red);
  --theme-color-text_hover: var(--brand-red-hover);
  --theme-color-text_link2: var(--brand-red);
  --theme-color-text_hover2: var(--brand-red-hover);
  --theme-color-text_link3: var(--brand-red);
  --theme-color-text_hover3: var(--brand-red-hover);
  --e-global-color-primary: var(--brand-red);
  --e-global-color-accent: var(--brand-red);
  accent-color: var(--brand-red);
}

body.home {
  margin: 0;
  background: #fffafa;
}

body.home ::selection {
  color: #fff;
  background: var(--brand-red);
}

body.home :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff;
}

#site-header {
  border-bottom: 1px solid #f3dddd;
  box-shadow: 0 4px 24px rgb(69 10 10 / 6%);
}

#site-header .cta-button {
  border-radius: 12px;
  box-shadow: 0 4px 14px rgb(185 28 28 / 18%);
}

#home-hero {
  background:
    radial-gradient(ellipse at 12% 15%, rgb(251 113 133 / 24%), transparent 52%),
    radial-gradient(ellipse at 90% 85%, rgb(69 10 10 / 40%), transparent 55%),
    linear-gradient(135deg, #b91c1c 0%, #991b1b 55%, #7f1d1d 100%) !important;
  isolation: isolate;
}

#home-hero a {
  border: 1px solid rgb(255 255 255 / 70%);
}

#home-hero a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px #7f1d1d;
}

.feature-card {
  border-color: #efdddd;
  border-radius: 20px;
  box-shadow: 0 3px 16px rgb(69 10 10 / 3%);
}

.feature-card:hover {
  border-color: var(--brand-red-border);
  box-shadow: 0 14px 36px rgb(153 27 27 / 10%);
}

.feature-card.featured {
  background: linear-gradient(180deg, var(--brand-red-soft), #fff);
  border-color: var(--brand-red);
}

#site-footer {
  background: #211416 !important;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  #site-header,
  #site-header .cta-button,
  #home-hero a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}