/* jl-city-skin-v1 — give the mirrored state city pages the SAME canvas as the
   generated main-site pages (build-fleet-pages.mjs template): the DJ-mixer
   photo behind a centered 1140px dark shell with the orange edge glow.
   Loaded AFTER /citypages/styles.css so these rules win. Values copied from
   the main template's body/.shell — keep them in sync if that changes. */
body {
  background: #000 url(/img/main-bg.jpg) center top/cover fixed no-repeat;
}
.shell {
  max-width: 1140px;
  margin: 0 auto;
  background: rgba(6, 6, 10, .97);
  border-left: 1px solid rgba(249, 140, 10, .35);
  border-right: 1px solid rgba(249, 140, 10, .35);
  box-shadow: 0 0 26px rgba(249, 140, 10, .18), 0 0 70px rgba(0, 0, 0, .85);
  min-height: 100vh;
  overflow-x: hidden;
}

/* The old stylesheet assumed a light page — text sitting directly on the (now
   dark) shell needs light colors: headings were navy (--secondary-color
   #1a1a2e), body copy #666/#555, and unstyled testimonials/fleet h3s inherited
   near-black. White panels re-assert their dark-on-white text below, because
   this file loads last and would otherwise win the cascade inside them. */
.city-content { color: #cfd5e2; }
.city-content h2 { color: #f4f6fb; }
.city-content h3,
.city-content h4 { color: #eef1f8; }
.city-content p { color: #c7cddb; }
.city-content li { color: #c3c9d7; border-bottom-color: rgba(255, 255, 255, 0.14); }
.city-content blockquote { color: #ccd2e0; }
.city-content cite { color: #9aa3b5; }

/* jl-video-facade-v1 — click-to-play poster inside .fleet-video-wrapper
   (same absolute 16:9 slot the old eager iframe used) */
.fleet-video-wrapper .jl-video-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
}
.fleet-video-wrapper .jl-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}
.fleet-video-wrapper .jl-video-facade .jl-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(220, 38, 38, 0.9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, transform 0.2s ease;
}
.fleet-video-wrapper .jl-video-facade:hover .jl-video-play {
  background: #f00;
  transform: translate(-50%, -50%) scale(1.08);
}

/* White panels — keep the original dark-on-white text */
.city-content .fleet-card,
.city-content .pricing-card,
.city-content .location-card,
.city-content .video-card,
.city-content .video-caption { color: var(--text-dark, #333); }
.city-content .fleet-card h3,
.city-content .pricing-card h3,
.city-content .location-card h3,
.city-content .location-card h4,
.city-content .video-caption h3 { color: var(--secondary-color, #1a1a2e); }
.city-content .fleet-card p,
.city-content .pricing-card p,
.city-content .location-card p,
.city-content .video-caption p { color: #666; }
.city-content .pricing-card li { color: #555; border-bottom-color: #f0f0f0; }

/* city-menu-dark-v1 (2026-07-12): the shared location menu (city-menu.js)
   still carried its light-page colors — near-black title and navy city links
   were invisible on this dark skin. Silver/light-gray per Mike. State names
   stay orange (--primary-color) on purpose. */
.city-menu-title { color: #c4cad4; }
.city-menu-state-sub { color: #a7adb8; }
.city-menu-count { opacity: 0.85; }
.city-menu-list a { color: #b9c0cc; border-bottom-color: rgba(255, 255, 255, .12); }
.city-menu-list a:hover { color: #fff; }
.city-menu-state:hover { background: rgba(255, 255, 255, .05); }
.city-shared-menu { background: rgba(255, 255, 255, .03); }

/* ---- 2026-07-27 readability fixes (Westminster-template pages) ---- */
/* Guarantee cards: page-inline styles paint them light (#f8f9fa) while the
   skin's light-on-dark body text inherits inside — repaint the cards dark to
   match the skin so the copy reads. !important because the pages' inline
   <style> blocks come after this sheet in the cascade. */
.guarantee-item { background: rgba(15, 15, 24, .92) !important; border: 1px solid rgba(255, 255, 255, .12); }
.guarantee-item h3 { color: #fff !important; }
.guarantee-item p { color: #c3c9d7 !important; }
/* Checkmark bullets: some page templates reset li padding (padding: .75rem 0),
   sliding the text under the ✓ badge from styles.css — guarantee the gutter. */
.city-content ul li { padding-left: 30px !important; }
.city-content .nearby-cities ul li, .nearby-cities li { padding-left: 35px !important; }
/* Section headings: the Westminster-template pages carry inline <style>
   blocks that re-darken h2/h3 (#1a1a1a) after this sheet loads — enforce the
   skin's light headings, then re-assert the intentionally-dark headings that
   sit on light cards. */
.city-content h2 { color: #f4f6fb !important; }
.city-content h3 { color: #e8ebf2 !important; }
.city-content .fleet-card h3,
.city-content .pricing-card h3,
.city-content .location-card h3,
.city-content .video-caption h3 { color: var(--secondary-color, #1a1a2e) !important; }
/* Light-card templates (Westminster/Towson/Potomac/Aspen Hill family): their
   inline <style> paints .faq-item / .fleet-item as light #f8f9fa cards, so the
   enforced light headings above wash out on them. Repaint the cards dark to
   match the skin (same treatment as .guarantee-item) — the 350+ pages whose
   faq-items are already dark are visually unchanged by these values. */
.faq-item,
.fleet-item {
  background: rgba(15, 15, 24, .92) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
.faq-item h3,
.fleet-item h3 { color: #fff !important; }
.faq-item p,
.fleet-item p { color: #c3c9d7 !important; }