/* 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); }