/* ===== Salem “Success-first” theme layer =====
   Keeps your current Bootstrap "success" color as the brand anchor.
   Add this AFTER Bootstrap CSS so it wins. */

:root{
  --font-heading: "Libre Baskerville", Georgia, serif;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Brand anchor = Bootstrap success */
  --brand: var(--bs-success);
  --brand-rgb: var(--bs-success-rgb);

  /* Nice “success” tints/shades (no hard-coded green) */
  --brand-600: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-700: color-mix(in srgb, var(--brand) 78%, #000);
  --brand-050: color-mix(in srgb, var(--brand) 12%, #fff);

  --accent: #C7A24B;

  /* Surfaces */
  --surface-1: var(--bs-body-bg);
  --surface-2: color-mix(in srgb, var(--brand-050) 55%, var(--bs-body-bg));
  --border-color: color-mix(in srgb, var(--brand) 16%, var(--bs-border-color));

  /* Hero overlay derived from success */
  --hero-grad-1: rgba(var(--brand-rgb), .90);
  --hero-grad-2: rgba(var(--brand-rgb), .55);

  /* Focus ring derived from success */
  --focus-ring: rgba(var(--brand-rgb), .35);
}

/* Dark mode tuning */
html[data-bs-theme="dark"]{
  --surface-2: color-mix(in srgb, var(--brand) 10%, var(--bs-body-bg));
  --border-color: color-mix(in srgb, var(--brand) 22%, rgba(255,255,255,.12));

  /* Dark hero overlay: slightly darker for readability */
  --hero-grad-1: rgba(0,0,0,.62);
  --hero-grad-2: rgba(0,0,0,.45);

  --focus-ring: rgba(var(--brand-rgb), .30);
}

/* Scope everything to your homepage wrapper so you don’t “break” other pages */
.salem-home h1,
.salem-home h2,
.salem-home h3,
.salem-home h4,
.salem-home h5,
.salem-home h6{
  font-family: var(--font-heading);
}

.salem-home .text-secondary-emphasis{
  color: rgba(var(--bs-body-color-rgb), .75) !important;
}

/* Make .btn-primary match your success theme (so you can keep using btn-primary) */
.salem-home .btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  font-weight: 600;
}

/* Optional accent button */
.salem-home .btn-accent{
  --bs-btn-color: #0b1220;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, white);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, white);
  --bs-btn-focus-shadow-rgb: 199,162,75;
  font-weight: 600;
}

/* Cards + sections */
.salem-home .card-soft{
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.06);
}

.salem-home .bg-surface-2{ background: var(--surface-2); }

/* Hero */
.salem-home .hero{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
}

.salem-home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, var(--hero-grad-1), var(--hero-grad-2)),
    url("https://images.unsplash.com/photo-1529070538774-1843cb3265df?auto=format&fit=crop&w=2400&q=80");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.salem-home .hero > .inner{
  position: relative;
  z-index: 1;
}

/* Icons */
.salem-home .icon-circle{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
}

/* Focus ring */
.salem-home :focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
  border-radius: .5rem;
}