/* ==========================================================================
   CARB Clean Truck Check - theme tokens + small custom rules
   Loaded AFTER Bootstrap. Change the brand in the :root block below.
   ========================================================================== */

:root {
  /* Brand tokens (TODO: swap in the real brand colors / fonts) */
  --brand: #1E3A5F;
  --brand-hover: #162C48;
  --brand-rgb: 30, 58, 95;
  --accent: #F97316;          /* decorative, use on dark backgrounds */
  --accent-text: #C2410C;     /* AA-safe accent for text/icons on light backgrounds */
  --surface-alt: #F4F6F9;
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap variable overrides */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-hover);
  --bs-link-hover-color-rgb: 22, 44, 72;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: #1f2328;
  --bs-body-color-rgb: 31, 35, 40;
  --bs-secondary-color: #4b5563;      /* >= 4.5:1 on white and on surface-alt */
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-sm: .375rem;
  --bs-focus-ring-color: rgba(var(--brand-rgb), .35);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Fluid type scale */
.hero-title { font-size: clamp(2.25rem, 5vw + 1rem, 3.5rem); font-weight: 800; line-height: 1.08; }
h2.section-title { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); font-weight: 800; }
.eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.measure { max-width: 65ch; }

/* Buttons read their own component variables, not --bs-primary */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.5rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* Visible focus on everything interactive */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Helpers */
.bg-surface-alt { background-color: var(--surface-alt); }
.text-accent { color: var(--accent-text); }
.bg-brand { background-color: var(--brand); }
.py-section { padding-block: 4rem; }
@media (min-width: 992px) { .py-section { padding-block: 6rem; } }

/* Top utility bar */
.topbar { background: var(--brand); color: #fff; font-size: .875rem; }
.topbar a { color: #fff; }

/* Header */
.site-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.site-header .navbar-brand {
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.site-header .nav-link { font-weight: 500; padding-block: .75rem; }
.site-header .navbar-toggler { min-width: 48px; min-height: 48px; }
/* Keep business name + Call + hamburger on one row at 360px */
@media (max-width: 575.98px) {
  .site-header .navbar-brand { margin-right: 0; font-size: 1.1rem; }
  .site-header .container { gap: .5rem; }
}
.site-header .nav-link:hover { color: var(--brand); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--surface-alt) 0%, #fff 100%); }
.hero-badges li { display: flex; align-items: center; gap: .5rem; }
.hero-badges .check {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  color: var(--accent-text);
}

/* Mobile service feature: badge and hero card */
.feature-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--accent-text);   /* white on #C2410C is about 5.2:1 */
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.hero-mobile-card {
  padding: 1rem 1.25rem;
  border: 2px solid var(--accent);
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
  box-shadow: 0 .5rem 1.25rem rgba(249, 115, 22, .12);
  max-width: 34rem;
}
.hero-mobile-card a { color: var(--accent-text); }
.hero-mobile-icon {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-text);
  color: #fff;
}
.hero-mobile-icon svg { width: 1.5rem; height: 1.5rem; }
/* Cards */
.card { --bs-card-border-radius: var(--bs-border-radius-lg); }
.service-card { transition: transform .15s ease, box-shadow .15s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(var(--brand-rgb), .12) !important; }
.service-icon {
  width: 3rem; height: 3rem;
  display: inline-grid; place-items: center;
  border-radius: var(--bs-border-radius);
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
}
.service-icon svg { width: 1.5rem; height: 1.5rem; }

/* How it works */
.step-number {
  width: 3rem; height: 3rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
}

/* Accordion (FAQ) */
.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: rgba(var(--brand-rgb), .06);
  --bs-accordion-active-color: var(--brand);
  --bs-accordion-border-radius: var(--bs-border-radius-lg);
  --bs-accordion-inner-border-radius: var(--bs-border-radius-lg);
}
.accordion-button { font-weight: 600; min-height: 56px; }

/* Credentials strip */
.credential {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid #d5dbe3;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  font-size: .9375rem;
}

/* Hours table: today's row (set by main.js) */
.hours-table tr.is-today > * { background: rgba(var(--brand-rgb), .08); font-weight: 700; }
.hours-table .closed { color: var(--bs-secondary-color); }

/* Forms: inputs >= 48px tall and 16px font (prevents iOS zoom) */
.form-control, .form-select { font-size: 1rem; min-height: 48px; }
textarea.form-control { min-height: 7rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Final CTA band */
.cta-band { background: var(--brand); color: #fff; }
.cta-band .btn-light { color: var(--brand); }

/* Footer: text colors that pass AA on dark */
.site-footer { background: #11202f; color: #c7d0db; }
.site-footer a { color: #fff; }
.site-footer .text-white-muted { color: #c7d0db; }
.site-footer hr { border-color: rgba(255, 255, 255, .2); opacity: 1; }

/* Sticky mobile call bar: keep content clear of it */
@media (max-width: 991.98px) { body { padding-bottom: 4.5rem; } }