/* Central Car Wash — logo-matched cyan + black motion wash */

:root {
  --brand-50: #e8f6fc;
  --color-brand-50: #e8f6fc;
  --brand-100: #c5ebfa;
  --color-brand-100: #c5ebfa;
  --brand-200: #8ad7f5;
  --color-brand-200: #8ad7f5;
  --brand-300: #4fc0ef;
  --color-brand-300: #4fc0ef;
  --brand-400: #2bb3f0;
  --color-brand-400: #2bb3f0;
  --brand-500: #1898e0;
  --color-brand-500: #1898e0;
  --brand-600: #1898e0;
  --color-brand-600: #1898e0;
  --brand-700: #0e6499;
  --color-brand-700: #0e6499;
  --brand-800: #0c4f78;
  --color-brand-800: #0c4f78;
  --brand-900: #0a3a56;
  --color-brand-900: #0a3a56;
  --brand-950: #061821;
  --color-brand-950: #061821;
  --craft-theme-color: #1898e0;
  --craft-page-bg: #eef6fb;
  --craft-selection-bg: #8ad7f5;
  --craft-selection-fg: #061821;
  --ccw-ink: #05080c;
  --ccw-wave: #1898e0;
  --ccw-card: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(232, 246, 252, 0.9));
  --ccw-card-border: rgba(24, 152, 224, 0.28);
  --ccw-card-shadow: 0 18px 40px rgba(6, 24, 33, 0.08);
}

html.dark {
  --craft-page-bg: #05080c;
  --ccw-card: linear-gradient(165deg, rgba(12, 22, 34, 0.98), rgba(8, 18, 28, 0.95));
  --ccw-card-border: rgba(24, 152, 224, 0.32);
  --ccw-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html:not(.dark) body.craft-page,
html:not(.dark) body {
  background:
    radial-gradient(ellipse 90% 55% at 100% -10%, rgba(24, 152, 224, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 40% at 0% 20%, rgba(43, 179, 240, 0.1), transparent 50%),
    linear-gradient(180deg, #eef6fb 0%, #f7fbfe 40%, #eef6fb 100%) !important;
  color: #0f172a;
}

html.dark body.craft-page,
html.dark body {
  background:
    radial-gradient(ellipse 90% 50% at 100% -10%, rgba(24, 152, 224, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 30%, rgba(24, 152, 224, 0.08), transparent 50%),
    linear-gradient(180deg, #05080c 0%, #0a1218 45%, #05080c 100%) !important;
  color: #e2e8f0;
}

/* Dark chrome header — matches CCW logo plate */
.craft-site-header,
body[data-nav-chrome="dark"] .craft-site-header {
  background: rgba(5, 8, 12, 0.92) !important;
  border-bottom: 1px solid rgba(24, 152, 224, 0.35) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(5, 8, 12, 0.35);
}

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

.craft-site-header .craft-nav-link:hover,
.craft-site-header .craft-nav-link.is-active {
  color: #2bb3f0 !important;
  background: rgba(24, 152, 224, 0.12) !important;
}

.craft-site-header .craft-nav-phone,
.craft-site-header a[href^="tel:"] {
  background: #1898e0 !important;
  color: #061821 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

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

/* Hero: deep ink + cyan wash like the logo mark */
section[data-section="hero"],
.craft-hero,
[data-hero-recipe] {
  position: relative;
}

section[data-section="hero"]::after,
.craft-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 48px;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 10% 100%, transparent 42%, rgba(24, 152, 224, 0.55) 43%, rgba(24, 152, 224, 0.55) 48%, transparent 49%),
    radial-gradient(120% 100% at 55% 100%, transparent 40%, #fff 41%, #fff 46%, transparent 47%),
    linear-gradient(90deg, transparent, rgba(24, 152, 224, 0.35), transparent);
  opacity: 0.9;
  z-index: 2;
}

html.dark section[data-section="hero"]::after,
html.dark .craft-hero::after {
  background:
    radial-gradient(120% 100% at 10% 100%, transparent 42%, rgba(24, 152, 224, 0.55) 43%, rgba(24, 152, 224, 0.55) 48%, transparent 49%),
    radial-gradient(120% 100% at 55% 100%, transparent 40%, #05080c 41%, #05080c 46%, transparent 47%),
    linear-gradient(90deg, transparent, rgba(24, 152, 224, 0.35), transparent);
}

/* Display type: slight speed slant (logo energy) */
.font-display,
h1.font-display,
h2.font-display {
  font-style: italic;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* Service / content cards — theme-aware (was forcing white in dark) */
[data-services-layout] article,
.craft-service-card,
section[data-section="services"] article,
section[data-qa-section="services"] article {
  border-color: var(--ccw-card-border) !important;
  background: var(--ccw-card) !important;
  box-shadow: var(--ccw-card-shadow);
  backdrop-filter: blur(8px);
}

html.dark [data-services-layout] article,
html.dark .craft-service-card,
html.dark section[data-section="services"] article,
html.dark section[data-qa-section="services"] article {
  color: #e2e8f0;
}

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

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

[data-services-layout] article:hover,
.craft-service-card:hover,
section[data-section="services"] article:hover,
section[data-qa-section="services"] article:hover {
  border-color: rgba(24, 152, 224, 0.55) !important;
  box-shadow: 0 22px 48px rgba(24, 152, 224, 0.18);
  transform: translateY(-2px);
}

html.dark [data-services-layout] article:hover,
html.dark .craft-service-card:hover,
html.dark section[data-section="services"] article:hover,
html.dark section[data-qa-section="services"] article:hover {
  box-shadow: 0 22px 48px rgba(24, 152, 224, 0.12);
}

/* Kill accidental light surfaces in dark mode (cream bands / translucent white sections).
   Do NOT blanket-override .bg-white — brand CTAs on dark bands use solid white pills. */
html.dark .bg-cream,
html.dark section.bg-cream {
  background-color: #0a1218 !important;
  background-image: none !important;
  color: #e2e8f0;
}

html.dark section.bg-white\/70,
html.dark .bg-white\/70 {
  background-color: rgba(10, 18, 24, 0.72) !important;
}

html.dark article.bg-white,
html.dark li.bg-white,
html.dark .rounded-2xl.bg-white,
html.dark .rounded-xl.bg-white,
html.dark .rounded-3xl.bg-white {
  background-color: #0c1622 !important;
  background-image: none !important;
  color: #e2e8f0;
  border-color: rgba(24, 152, 224, 0.28) !important;
}

html.dark section[data-qa-section="services"],
html.dark section[data-section="services"] {
  background-color: rgba(5, 8, 12, 0.55) !important;
  border-color: rgba(24, 152, 224, 0.18) !important;
}

html.dark .craft-cta-panel {
  background: linear-gradient(165deg, #0a1218, #05080c) !important;
  border-color: rgba(24, 152, 224, 0.35) !important;
  color: #f8fafc !important;
}

html.dark .craft-field,
html.dark input.craft-field,
html.dark textarea.craft-field,
html.dark select.craft-field {
  background: #0a1218 !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  color: #f8fafc !important;
}

/* Mobile / tablet: drop italic slant on dense service titles; tighten cards */
@media (max-width: 767px) {
  section[data-qa-section="services"] h2.font-display,
  section[data-qa-section="services"] h3.font-display,
  section[data-section="services"] h2.font-display,
  section[data-section="services"] h3.font-display {
    font-style: normal;
    letter-spacing: 0.02em !important;
  }

  section[data-qa-section="services"] article,
  section[data-section="services"] article {
    box-shadow: 0 10px 24px rgba(6, 24, 33, 0.06);
  }

  html.dark section[data-qa-section="services"] article,
  html.dark section[data-section="services"] article {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  }

  section[data-qa-section="services"] article:hover,
  section[data-section="services"] article:hover {
    transform: none;
  }

  .craft-mobile-panel {
    background: rgba(5, 8, 12, 0.98) !important;
    border-color: rgba(24, 152, 224, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

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

  .craft-mobile-panel .craft-nav-link.is-active,
  .craft-mobile-panel .craft-nav-link:hover {
    color: #2bb3f0 !important;
    background: rgba(24, 152, 224, 0.14) !important;
  }
}

/* CTAs */
.bg-brand-600,
a.bg-brand-600,
button.bg-brand-600 {
  background-color: #1898e0 !important;
  color: #061821 !important;
}

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

/* Footer ink plate */
footer,
.craft-site-footer {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(24, 152, 224, 0.22), transparent 55%),
    linear-gradient(180deg, #0a1218 0%, #05080c 100%) !important;
  color: #e2e8f0 !important;
  border-top: 2px solid #1898e0;
}

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

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

/* Soft band accents (light only) */
html:not(.dark) section.bg-slate-50,
html:not(.dark) .bg-slate-50\/40,
html:not(.dark) .bg-slate-50\/70 {
  background-color: rgba(232, 246, 252, 0.7) !important;
}

/* Logo breathes on dark chrome */
.craft-site-header img[alt*="Central"],
.craft-site-header img[src*="logo"] {
  filter: drop-shadow(0 0 12px rgba(24, 152, 224, 0.35));
}

/* Reviews: long all-caps italic quotes are hard on mobile — tone down body quotes */
@media (max-width: 767px) {
  html.dark [data-qa-section="reviews"] .font-display,
  [data-qa-section="reviews"] blockquote,
  [data-qa-section="reviews"] .craft-review-quote {
    font-style: normal;
    letter-spacing: 0.01em !important;
    text-transform: none;
    font-weight: 500;
  }
}