/* One Stop Lube — pit-night red + asphalt */

:root {
  --brand-50: #fef2f2;
  --color-brand-50: #fef2f2;
  --brand-100: #fee2e2;
  --color-brand-100: #fee2e2;
  --brand-200: #fecaca;
  --color-brand-200: #fecaca;
  --brand-300: #fca5a5;
  --color-brand-300: #fca5a5;
  --brand-400: #f87171;
  --color-brand-400: #f87171;
  --brand-500: #ef4444;
  --color-brand-500: #ef4444;
  --brand-600: #e11d2e;
  --color-brand-600: #e11d2e;
  --brand-700: #b91c1c;
  --color-brand-700: #b91c1c;
  --brand-800: #991b1b;
  --color-brand-800: #991b1b;
  --brand-900: #7f1d1d;
  --color-brand-900: #7f1d1d;
  --brand-950: #450a0a;
  --color-brand-950: #450a0a;
  --craft-theme-color: #e11d2e;
  --craft-page-bg: #0c0b09;
  --craft-selection-bg: #fecaca;
  --craft-selection-fg: #7f1d1d;
  --lube-ink: #0a0908;
  --lube-asphalt: #141210;
  --lube-pit-green: #16a34a;
}

html:not(.dark) body.craft-page,
html:not(.dark) body {
  background:
    radial-gradient(ellipse 80% 50% at 100% -5%, rgba(225, 29, 46, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 30%, rgba(22, 163, 74, 0.08), transparent 50%),
    linear-gradient(180deg, #f4f1ec 0%, #faf8f5 45%, #f4f1ec 100%) !important;
  color: #1c1917;
}

html.dark body.craft-page,
html.dark body {
  background:
    radial-gradient(ellipse 90% 55% at 90% -10%, rgba(225, 29, 46, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 40%, rgba(22, 163, 74, 0.1), transparent 50%),
    linear-gradient(180deg, #0a0908 0%, #141210 50%, #0a0908 100%) !important;
  color: #e7e5e4;
}

/* Dark chrome — night bay energy */
.craft-site-header,
body[data-nav-chrome="dark"] .craft-site-header {
  background: rgba(10, 9, 8, 0.94) !important;
  border-bottom: 1px solid rgba(225, 29, 46, 0.4) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.45);
}

.craft-site-header .craft-nav-link,
.craft-site-header .font-display {
  color: #fafaf9 !important;
}

.craft-site-header .craft-nav-link:hover,
.craft-site-header .craft-nav-link.is-active {
  color: #fecaca !important;
  background: rgba(225, 29, 46, 0.14) !important;
}

.craft-site-header .craft-nav-phone,
.craft-site-header a[href^="tel:"] {
  background: #e11d2e !important;
  color: #fff !important;
  font-weight: 700;
}

.craft-site-header .craft-nav-phone:hover,
.craft-site-header a[href^="tel:"]:hover {
  background: #ef4444 !important;
}

/* Display: pit-lane condensed impact */
.font-display,
h1.font-display,
h2.font-display {
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-style: normal;
}

/* Service cards */
html:not(.dark) section[data-qa-section="services"] article,
html:not(.dark) section[data-section="services"] article {
  border-color: rgba(225, 29, 46, 0.22) !important;
  background: linear-gradient(165deg, #ffffff, #faf7f4) !important;
  box-shadow: 0 16px 36px rgba(28, 25, 23, 0.08);
}

html.dark section[data-qa-section="services"] article,
html.dark section[data-section="services"] article {
  border-color: rgba(225, 29, 46, 0.35) !important;
  background: linear-gradient(165deg, #1a1714, #12100e) !important;
  color: #e7e5e4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

html.dark section[data-qa-section="services"] article h3 {
  color: #fafaf9 !important;
}

html.dark section[data-qa-section="services"] article p {
  color: #a8a29e !important;
}

/* CTAs — red like the shop sign */
.bg-brand-600,
a.bg-brand-600,
button.bg-brand-600 {
  background-color: #e11d2e !important;
  color: #ffffff !important;
}

.bg-brand-600:hover,
a.bg-brand-600:hover,
button.bg-brand-600:hover {
  background-color: #ef4444 !important;
}

/* Subtle Castrol-green accent rail on hero */
section[data-qa-section="hero"]::after,
.craft-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #e11d2e 0%, #16a34a 50%, #e11d2e 100%);
  z-index: 3;
  pointer-events: none;
}

/* Footer asphalt */
footer,
.craft-site-footer {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(225, 29, 46, 0.2), transparent 55%),
    linear-gradient(180deg, #141210 0%, #0a0908 100%) !important;
  color: #e7e5e4 !important;
  border-top: 2px solid #e11d2e;
}

footer a,
.craft-site-footer a {
  color: #fecaca !important;
}

footer a:hover,
.craft-site-footer a:hover {
  color: #ffffff !important;
}

html.dark .bg-cream,
html.dark section.bg-cream {
  background-color: #141210 !important;
  color: #e7e5e4;
}

html.dark article.bg-white,
html.dark .rounded-2xl.bg-white,
html.dark .rounded-xl.bg-white {
  background-color: #1a1714 !important;
  border-color: rgba(225, 29, 46, 0.28) !important;
  color: #e7e5e4;
}

html.dark .craft-cta-panel {
  background: linear-gradient(165deg, #1a1714, #0a0908) !important;
  border-color: rgba(225, 29, 46, 0.4) !important;
}

/* Mobile CTA photo: show full frame (no headless crop on portrait bay shot) */
@media (max-width: 767px) {
  [data-qa-section="cta"] .craft-cta-media img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top;
    background: #0a0908;
  }
}

@media (max-width: 767px) {
  section[data-qa-section="services"] h2.font-display,
  section[data-qa-section="services"] h3.font-display {
    letter-spacing: 0.04em !important;
  }

  .craft-mobile-panel {
    background: rgba(10, 9, 8, 0.98) !important;
    border-color: rgba(225, 29, 46, 0.4) !important;
    backdrop-filter: none !important;
  }

  .craft-mobile-panel .craft-nav-link {
    color: #fafaf9 !important;
  }

  .craft-mobile-panel .craft-nav-link.is-active,
  .craft-mobile-panel .craft-nav-link:hover {
    color: #fecaca !important;
    background: rgba(225, 29, 46, 0.16) !important;
  }
}