:root {
  --wh-primary: #222831;
  --wh-secondary: #ffffff;
  --wh-accent: #0D505B;
  --wh-danger: #dc3545;
  --wh-bg-dark: #1a1f27;
  --wh-bg-card: #2d3441;
  --wh-bg-card-featured: #37404f;
  --wh-text: #ffffff;
  --wh-text-muted: rgba(255, 255, 255, 0.6);
  --wh-border: rgba(255, 255, 255, 0.12);
  --wh-heading-font: 'Roboto', system-ui, sans-serif;
}

body {
  background-color: var(--wh-primary);
  color: var(--wh-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wh-heading-font);
  font-weight: 700;
}

/* ── Hero ── */
.wh-hero {
  background-color: var(--wh-bg-dark);
}

.wh-hero-overlay {
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* ── Sections ── */
.wh-section {
  padding: 5rem 0;
}

.wh-section-dark {
  background-color: var(--wh-bg-dark);
}

/* ── Cards ── */
.wh-card {
  background-color: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 0.5rem;
  color: var(--wh-text);
  height: 100%;
}

/* ── Testimonial accent ── */
.wh-testimonial {
  border-left: 4px solid var(--wh-accent) !important;
}

/* ── CTA band ── */
.wh-cta-band {
  background-color: var(--wh-bg-dark);
  border-top: 3px solid var(--wh-accent);
  border-bottom: 3px solid var(--wh-accent);
  padding: 5rem 0;
  text-align: center;
}

/* ── Muted text ── */
.wh-text-muted {
  color: var(--wh-text-muted) !important;
}

/* ── Links ── */
a {
  color: var(--wh-accent);
}

a:hover {
  color: var(--wh-secondary);
}

/* ── Navbar ── */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--wh-secondary) !important;
}

/* ── Bootstrap card overrides ── */
.card {
  background-color: var(--wh-bg-card);
  border-color: var(--wh-border);
  color: var(--wh-text);
}

/* ── Form controls ── */
.form-control:focus {
  border-color: var(--wh-accent);
  box-shadow: 0 0 0 0.25rem rgba(13, 80, 91, 0.25);
}

/* ── Pull quote ── */
.wh-pull-quote {
  border-left: 4px solid var(--wh-accent);
  padding-left: 1.5rem;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--wh-text-muted);
}

/* ── Section subhead ── */
.wh-section-subhead {
  color: var(--wh-text-muted);
  font-size: 1.1rem;
}

/* ── Coach card ── */
.wh-coach-card {
  border-bottom: 3px solid var(--wh-accent) !important;
}

/* ── Program section accent heading ── */
.wh-program-heading {
  border-left: 4px solid var(--wh-accent);
  padding-left: 1rem;
}

/* ── Hours / data tables ── */
.wh-table {
  color: var(--wh-text);
  border-color: var(--wh-border);
}

.wh-table td,
.wh-table th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--wh-border);
  color: var(--wh-text);
  background-color: transparent;
}

/* ── Accent button ── */
.btn-wh-accent {
  background-color: var(--wh-accent);
  border-color: var(--wh-accent);
  color: #ffffff;
}

.btn-wh-accent:hover,
.btn-wh-accent:focus,
.btn-wh-accent:active {
  background-color: #0a3d45;
  border-color: #0a3d45;
  color: #ffffff;
}

/* ── Pricing ── */
.wh-price {
  color: var(--wh-danger);
}

.wh-card-featured {
  background-color: var(--wh-bg-card-featured);
  border-top: 4px solid var(--wh-danger) !important;
}