/* ==========================================================================
   Karma of Fuquay — site updates (2026-11)
   Loaded after style.css on every page (header.php).

   Rollout rule (live site): every block below is scoped to classes that exist
   ONLY in the new markup of its section, so this file is inert until that
   section's template is switched. Sections are added one at a time.

   Planned blocks:
     0. Motion scale (shared tokens)
     1. Footer — live map, stripe, minimal footer   (all pages)
     2. Service Department — legibility             (home)
     3. Beauty Through Balance — CTA + award        (home)
     4. Current Models — alternating rows           (home)
     5. Hero slider — rail, shutter, video          (home)
   ========================================================================== */

/* ---------- 0. Motion scale (shared tokens; custom properties only) ---------- */

:root {
  --fq-dur-1: 0.25s;
  --fq-dur-2: 0.6s;
  --fq-dur-3: 0.9s;
  --fq-dur-4: 1.2s;
  --fq-ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entering */
  --fq-ease-in: cubic-bezier(0.55, 0, 1, 0.45);      /* exiting */
  --fq-ease-wipe: cubic-bezier(0.7, 0, 0.2, 1);      /* shutter */
}

/* ==========================================================================
   1. Footer (all pages) — scoped to footer.fq-v2 (marker set in footer.php)
   ========================================================================== */

/* 1a. Map box takes the map's own proportions — no empty band under the map.
   style.css sizes the box by viewport height but the picture by width. */
footer.fq-v2 .footer-map-section {
  min-height: 0;
  aspect-ratio: 2728 / 1150;
  background-size: cover;
  background-position: center;
  background-color: #242424;
}

@media (max-width: 1024.98px) {
  footer.fq-v2 .footer-map-section {
    aspect-ratio: auto;
    min-height: 260px;
  }
}

/* 1b. Live monochrome map (Leaflet + OpenStreetMap). Only the tile layer is
   desaturated/inverted, so the dealer's red pin keeps its colour.
   Without JS the static map + pin link stay. */
footer.fq-v2 .footer-map-section.is-live {
  background-image: none;
}

footer.fq-v2 .fq-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #242424;
}

footer.fq-v2 .footer-map-section:not(.is-live) .fq-map {
  display: none;
}

footer.fq-v2 .footer-map-section.is-live .footer-pin-btn {
  display: none;
}

footer.fq-v2 .fq-map .leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(0.82) contrast(0.92);
}

footer.fq-v2 .fq-map.leaflet-container {
  font-family: "Nexa", sans-serif;
  background-color: #242424;
}

footer.fq-v2 .fq-map .fq-pin {
  transition: transform var(--fq-dur-2) var(--fq-ease-out);
  transform-origin: 50% 100%;
}

footer.fq-v2 .fq-map .fq-pin:hover,
footer.fq-v2 .fq-map .fq-pin:focus-visible {
  transform: scale(1.25);
}

footer.fq-v2 .fq-map .fq-pin:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

footer.fq-v2 .fq-map .leaflet-bar {
  border: 1px solid #656565;
  border-radius: 0;
  box-shadow: none;
}

footer.fq-v2 .fq-map .leaflet-bar a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-color: #242424;
  color: #fff;
  border-bottom-color: #656565;
  border-radius: 0 !important;
}

footer.fq-v2 .fq-map .leaflet-bar a:hover,
footer.fq-v2 .fq-map .leaflet-bar a:focus-visible {
  background-color: #656565;
  color: #fff;
}

footer.fq-v2 .fq-map .leaflet-control-attribution {
  background: rgba(36, 36, 36, 0.8);
  color: #d9d9d9;
  font-size: 11px;
}

footer.fq-v2 .fq-map .leaflet-control-attribution a {
  color: #fff;
}

/* 1c. Diagonal stripe — confined to the car block (it used to run on through the
   copyright lines). Same angle and width; solid black, faded at the top by ::after. */
footer.fq-v2 .footer-copyright::before {
  display: none;
}

footer.fq-v2 .footer-copyright.py-5 {
  padding-bottom: 0 !important;
}

footer.fq-v2 .footer-copyright .fc-car {
  position: relative;
  overflow: hidden;
}

footer.fq-v2 .footer-copyright .fc-car.mb-5 {
  margin-bottom: 0 !important;
}

footer.fq-v2 .footer-copyright .fc-car::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -50%;
  height: 200%;
  width: 220px;
  margin: 0 auto;
  background-color: #000;
  transform: rotate(22deg);
  pointer-events: none;
}

footer.fq-v2 .footer-copyright .fc-car::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    #fff 0%,
    rgba(255, 255, 255, 0.99) 10%,
    rgba(255, 255, 255, 0.95) 20%,
    rgba(255, 255, 255, 0.86) 30%,
    rgba(255, 255, 255, 0.72) 40%,
    rgba(255, 255, 255, 0.54) 50%,
    rgba(255, 255, 255, 0.35) 60%,
    rgba(255, 255, 255, 0.18) 70%,
    rgba(255, 255, 255, 0.06) 80%,
    rgba(255, 255, 255, 0) 88%);
}

footer.fq-v2 .footer-copyright .fc-car img {
  position: relative;
  z-index: 1;
}

@media (max-width: 450.98px) {
  footer.fq-v2 .footer-copyright .fc-car::before {
    width: 160px;
  }
}

/* 1d. Minimal black footer under the car: logo + links, legal line.
   Tokens: #000 field, #313131 hairline, #d9d9d9 links. */
footer.fq-v2 .fq-footer {
  background-color: #000;
  color: #9a9a9a;
  padding: clamp(48px, 5vw, 72px) 0 clamp(28px, 3vw, 40px);
  font-family: "Nexa", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.5px;
}

footer.fq-v2 .fq-footer p {
  margin: 0;
}

footer.fq-v2 .fq-footer a {
  color: #d9d9d9;
  text-decoration: none;
  transition: color var(--fq-dur-1) var(--fq-ease-out);
}

footer.fq-v2 .fq-footer a:hover,
footer.fq-v2 .fq-footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

footer.fq-v2 .fq-footer a:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

footer.fq-v2 .fq-footer__top,
footer.fq-v2 .fq-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
}

footer.fq-v2 .fq-footer__logo img {
  display: block;
  width: 160px;
  height: auto;
  filter: brightness(0) invert(1);
}

footer.fq-v2 .fq-footer__links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

footer.fq-v2 .fq-footer__links span {
  color: #656565;
}

footer.fq-v2 .fq-footer__legal {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-top: 24px;
  border-top: 1px solid #313131;
}

@media (max-width: 767.98px) {
  footer.fq-v2 .fq-footer__top,
  footer.fq-v2 .fq-footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }
}