/* ==========================================================
   Driver’s Ed Online — Combined Grayscale CSS
   - Merged & de-duplicated from provided snippets
   - Mobile-first, Bootstrap-friendly, PWA-safe
   ========================================================== */

/* ---------------------------
   Core palette (Ink + Neutrals)
   --------------------------- */
:root {
  /* Ink / Neutrals */
  --ink-900: #1f1f1f;
  --ink-800: #2f2f2f;
  --ink-600: #444444;
  --ink-400: #666666;
  --ink-200: #999999;
  --ink-100: #bbbbbb;

  /* Backgrounds & lines */
  --bg-100:  #f6f7f8;
  --bg-200:  #f1f2f3;
  --line:    #e5e5e5;

  /* Radius */
  --radius:  14px;

  /* Back-compat vars (map older names to new palette) */
  --bg:     var(--bg-100);
  --text:   var(--ink-900);
  --muted:  var(--ink-400);
  --soft:   var(--bg-200);
  --border: var(--line);
  --accent: #6c757d; /* neutral gray accent */
}

/* ---------------------------
   Base & Typography
   --------------------------- */
html, body {
  background: var(--bg-100);
  color: var(--ink-900);
}

h1, h2, h3, h4, h5 {
  color: var(--ink-900);
  letter-spacing: 0.2px;
}

/* Links */
a { color: var(--ink-800); }
a:hover { color: #000; }

/* ---------------------------
   Buttons
   --------------------------- */
.btn-neutral {
  background: var(--ink-800);
  color: #fff !important;
  border: 1px solid var(--ink-800);
}
.btn-neutral:hover {
  background: #1f1f1f;
  color: #fff !important;
}

/* Danger button (kept from gradient section) */
.btn-danger {
  background-color: #dc3545;
  border: none;
}
.btn-danger:hover {
  background-color: #bb2d3b;
}

/* ---------------------------
   Cards / Sections / Utilities
   --------------------------- */
.section-block,
.feature-block,
.hero-card,
.card-wrap,
.sb-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.text-muted { color: var(--ink-400) !important; }
.text-muted-2 { color: var(--muted); }
.bg-soft { background: var(--soft); }
.border-line { border: 1px solid var(--line); border-radius: var(--radius); }
.border-soft { border-color: var(--border) !important; }
.badge.bg-secondary { background: var(--ink-600) !important; }

/* Tables */
.table > :not(caption) > * > * { background-color: #fff; }
.table thead th { border-bottom: 2px solid var(--line); }

/* Forms & validation hints */
.form-text.text-success { color: #1b5e20 !important; }
.form-text.text-danger  { color: #b00020 !important; }
.is-valid { border-color: #1b5e20 !important; }
.is-invalid { border-color: #b00020 !important; }

/* Video */
video { border-radius: 10px; background: #000; }

/* ---------------------------
   Navbar / Offcanvas / Footer
   --------------------------- */
.navbar-light.bg-light {
  background: var(--bg-200) !important;
  border-bottom: 1px solid var(--line);
}
.offcanvas-top { border-bottom: 1px solid var(--line); }
.offcanvas .list-group-item { border-color: var(--line); }

/* Global site footer wrapper */
.site-footer, footer {
  background: var(--bg-200);
  border-top: 1px solid var(--line);
}

/* Legacy .footer helpers (kept for back-compat) */
.footer h5 { margin-bottom: 1rem; }
.footer a:hover { text-decoration: underline; }
.footer .bi { vertical-align: middle; }

/* ---------------------------
   HERO VARIANT A: Image + Overlay
   Use: <section class="hero-image">...</section>
   --------------------------- */
.hero-image {
  position: relative;
  width: 100%;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/placeholder.jpg') center center / cover no-repeat;
}
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.hero-image .container { position: relative; z-index: 2; }
.hero-image h1, .hero-image p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

/* Mobile tweak for image hero */
@media (max-width: 767.98px) {
  .hero-image { min-height: 450px; padding: 2rem 1rem; }
  .hero-image h1 { font-size: 2rem; }
  .hero-image p { font-size: 1rem; }
}

/* ---------------------------
   HERO VARIANT B: Grayscale Gradient
   Use: <section class="hero">...</section>
   --------------------------- */
.hero {
  background: linear-gradient(180deg, #f8f9fa 0%, #eeeeee 100%);
  min-height: 520px;
  display: flex;
  align-items: center;
  text-align: center;
}
.hero .lead { color: var(--muted); }
.hero .btn { margin-top: 1rem; }

@media (max-width: 576px) {
  .hero { min-height: 420px; }
}

/* ---------------------------
   Gradient Callout Section
   --------------------------- */
.gradient-callout {
  background: linear-gradient(135deg, #dc3545 0%, #6c63ff 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.gradient-callout__headline {
  font-size: 2rem;
  font-weight: 700;
}
.cta-base__arrow-icon { flex-shrink: 0; }

/* ---------------------------
   Print niceties
   --------------------------- */
@media print {
  a[href]:after { content: "" !important; } /* avoid long URLs in print */
  .btn, .navbar, .offcanvas, .site-footer { display: none !important; }
  body { background: #fff; }
}