/* ============================================================================
   custom.css — Eau Claire Auto Detail bespoke design pack (Midnight + Gold).
   Loaded AFTER styles.css + the inline brand tokens, so it wins the cascade.
   Owns: minimal header, floating CTA, 3-up services, video-hero service pages,
   per-service galleries, footer form, ambient star-trails backdrop, dark-theme
   text fixes. base.css is intentionally left untouched.
   ============================================================================ */

/* ---- Minimal header: logo + one button, NOT sticky --------------------- */
.site-header--minimal {
  position: static;                 /* not sticky */
  background: var(--brand-bg);
  border-bottom: 1px solid rgba(201,161,74,.18);
}
.site-header--minimal .nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px;
}
.site-header--minimal .nav-logo img { height: 48px; width: auto; }
.site-header--minimal .nav-cta {
  display: inline-flex; align-items: center;
  background: var(--brand-primary); color: #0B0B0D;
  font-weight: 700; letter-spacing: .02em;
  padding: 12px 22px; border-radius: 4px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-header--minimal .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,161,74,.3); text-decoration: none; }

/* ---- Floating CTA: always visible while scrolling ---------------------- */
.x-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-primary); color: #0B0B0D;
  font-weight: 800; letter-spacing: .02em; font-size: .95rem;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(201,161,74,.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.x-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201,161,74,.4); text-decoration: none; color:#0B0B0D; }
.x-fab svg { width: 18px; height: 18px; }
@media (max-width: 520px){ .x-fab { right: 14px; bottom: 14px; padding: 12px 18px; font-size: .9rem; } }

/* ---- Services: 3 across on desktop, clean stack on mobile -------------- */
.x-services { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .x-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .x-services { grid-template-columns: 1fr; } }
.x-svc { min-height: 420px; }

/* ---- Service-page hero: full-bleed video/poster, text overlaid -------- */
.x-banner--video {
  position: relative;
  min-height: 78vh; display: flex; align-items: center;
  text-align: center; overflow: hidden;
}
.x-banner--video .x-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.x-banner--video .x-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.45) 45%, rgba(8,8,10,.8) 100%);
}
.x-banner--video .container { position: relative; z-index: 2; margin: 0 auto; max-width: 880px; }
.x-banner--video .x-crumbs { justify-content: center; opacity: .85; }
.x-banner--video h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 10px 0 14px; }
.x-banner--video .x-sub { max-width: 640px; margin: 0 auto; font-size: 1.15rem; }
.x-banner--video .x-eyebrow { color: var(--brand-primary); }

/* ---- Per-service gallery grid ----------------------------------------- */
.x-svc-gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px){ .x-svc-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.x-svc-gallery-item { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.x-svc-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display:block; }
.x-svc-gallery-item:hover img { transform: scale(1.05); }

/* ---- Footer contact form (above the footer columns) ------------------- */
.x-footer-form { background: var(--brand-bg-alt); padding: var(--space-10) 0; border-top: 1px solid rgba(201,161,74,.15); }
.x-footer-form .x-footer-form-embed { max-width: 760px; margin: 0 auto; }
.x-footer-form iframe { display: block; }

/* ---- Online booking block (auto detailing only) ----------------------- */
.x-booking .x-booking-embed { max-width: 820px; margin: 0 auto; }

/* ---- Dark-theme text fix: base.css hardcodes dark prose text ----------- */
.x-body p, .x-body ul li, .x-body .x-lead { color: var(--brand-text); }

/* ---- Ambient star-trails backdrop behind content sections ------------- */
/* Heavily faded (~88% near-black) so the streaks read as subtle atmosphere.
   Fixed = parallax on desktop; mobile shows it static (graceful). */
.section:not(.section-alt) {
  background-image: linear-gradient(rgba(10,10,12,.9), rgba(10,10,12,.86)), url('/assets/texture-247395c6.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-attachment: fixed;
}