/*!
 * Joyce Automotive — responsive bridge
 * Glue between the two media-gated Duda bundles (desktop ≥768px / mobile ≤767px).
 * The two crawls carry different header DOM:
 *   desktop crawl: #hamburger-header(-container) + #hamburger-drawer + .main-navigation
 *   mobile  crawl: #mobile-hamburger-header + #mobile-hamburger-drawer  (injected here)
 * Each bundle only styles/hides its own header, so we toggle the *other* one
 * at the breakpoint, and add a few things the stripped Duda runtime used to do.
 */

/* ---- Header swap at the 768px breakpoint ---------------------------------- */

/* Mobile (phone): the mobile bundle is active and styles #mobile-hamburger-*.
   Hide the desktop crawl's tablet header region + full nav + its drawer, which
   the mobile bundle never saw. NB: the single .layout-drawer-hamburger button
   lives in the shared content (not in this region) and stays visible — app.js
   routes it to the mobile drawer when the mobile header is showing. */
@media (max-width: 767px) {
  #site_content > .p_hfcontainer.showOnMedium,
  #hamburger-header-container,
  #hamburger-drawer,
  .main-navigation.unifiednav {
    display: none !important;
  }
  /* …but the mobile drawer has its OWN nav menu (same class) — keep it. */
  #mobile-hamburger-drawer .main-navigation.unifiednav {
    display: flex !important;
  }
}

/* Desktop/tablet: the desktop bundle handles its own nav⇄tablet-hamburger.
   Hide the injected mobile header/drawer. */
@media (min-width: 768px) {
  #mobile-hamburger-header,
  #mobile-hamburger-drawer {
    display: none !important;
  }
  /* mobile-only pages have no desktop header — keep their mobile header as nav */
  body.dm-singlesource #mobile-hamburger-header { display: block !important; }
}

/* ---- Sticky header (Duda's stripped runtime used to pin it on scroll) ----- */
@media (max-width: 767px) {
  #mobile-hamburger-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  /* keep the (fixed) hamburger button clickable above the sticky header */
  .layout-drawer-hamburger {
    z-index: 1001 !important;
  }
  /* .dmLayoutWrapper's overflow:hidden disables sticky for descendants, but
     plain `visible` lets off-canvas/positioned Duda elements cause horizontal
     scroll. `overflow: clip` clips the overflow WITHOUT establishing a scroll
     container, so it does both: no h-scroll AND the sticky header still pins. */
  .dmLayoutWrapper {
    overflow: clip !important;
  }
}

/* ---- Open mobile drawer: start the panel BELOW the header ----------------- */
/* The Duda mobile drawer is position:fixed; top:0; height:100% (z-index 13),
   but our sticky header sits above it (z-index 1000) and so paints over the
   drawer's first menu items. Two fixes, only while a drawer is open:
   1. Pin the header with position:fixed — `sticky` detaches to its in-flow
      position once app.js locks the body scroll (overflow:hidden), so it can't
      be relied on to stay at the top.
   2. Offset the drawer down by the header's measured height (--dm-header-h, set
      by app.js on open) and shrink it to match, so every item clears the header
      and the panel scrolls within the space beneath it. */
@media (max-width: 767px) {
  html.dm-drawer-open #mobile-hamburger-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  html.dm-drawer-open #mobile-hamburger-drawer {
    top: var(--dm-header-h, 120px);
    height: calc(100% - var(--dm-header-h, 120px));
  }
}

/* ---- Mobile sub-menu caret: tap to expand, label still navigates --------- */
/* Parent items (Services/Vehicles/Areas) keep a ▾ caret inside their link.
   app.js toggles .unifiednav__item-wrap_open (Duda's vertical HIDE-mode open
   class — it both drops the panel and flips the caret) when the caret is
   tapped, and cancels the navigation. Here we just turn that caret into a
   finger-sized target pinned to the right edge of the row, lifted above the
   link's underline pseudo-element so the tap lands on the caret. */
@media (max-width: 767px) {
  #mobile-hamburger-drawer .unifiednav__item_has-sub-nav .nav-item-text .icon {
    position: relative;
    z-index: 1;
    /* !important: Duda's own caret rule sets padding-left/right at higher
       specificity, which would otherwise shrink this hit area horizontally. */
    padding: 16px 22px !important;
    margin: -14px -6px -14px 2px;
    cursor: pointer;
  }
}

/* ---- Long sub-menu labels must wrap, not run off the drawer --------------- */
/* The nav inherits white-space:nowrap from the (horizontal) desktop menu, so
   long items like "Engine Rebuild & Replacement" overflow the 75vw drawer and
   get clipped on real devices. Force wrapping and keep every level inside the
   drawer. min-width:0 lets the flex text child shrink below its content size so
   it can actually wrap; the caret keeps nowrap so it never drops to its own line. */
@media (max-width: 767px) {
  #mobile-hamburger-drawer .nav-item-text {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #mobile-hamburger-drawer .unifiednav__item_has-sub-nav .nav-item-text .icon {
    white-space: nowrap;
  }
  #mobile-hamburger-drawer .unifiednav__item { min-width: 0; }
  #mobile-hamburger-drawer .unifiednav__container,
  #mobile-hamburger-drawer .unifiednav__container[data-depth],
  #mobile-hamburger-drawer .unifiednav__item-wrap,
  #mobile-hamburger-drawer .unifiednav__item {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---- Hero "push-down" fix: cancel Duda's fixed-header top spacers --------- */
/* Duda's mobile bundle gives the first hero/content a top margin sized to clear
   its *fixed* mobile header. We use an in-flow *sticky* header (block above),
   so those spacers no longer overlap anything — they render as an empty gap
   above the hero. Cancel them on phones only; desktop keeps its own margins
   (these rules are inside the max-width:767px query, and each matches the Duda
   rule's specificity so the override wins — bridge.css loads last). */
@media (max-width: 767px) {
  /* First hero/content row: cancel Duda's per-page top spacer (home 100px,
     warranty 50px, …). The #dm id raises specificity above Duda's per-element
     `#dm .dmBody div.u_XXXX{margin-top:N !important}` rules so this wins; it's a
     no-op on pages whose first row already has no top margin. */
  #dm .dmBody .dmHomeRespTmpl > .dmRespRow:first-of-type { margin-top: 0 !important; }
  /* Blog/utility "Hamburger" template: cancel the .site_content spacer (59px) */
  .runtime-module-container[dmtemplateid*="amburger"] .site_content { margin-top: 0 !important; }
}

/* ---- Drawer overlay backdrop (created by app.js) -------------------------- */
/* Low-specificity fallback in case a bundle doesn't fully style the overlay. */
.layout-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 9998;
}
.runtime-module-container.layout-drawer_open .layout-drawer-overlay {
  opacity: 1;
  visibility: visible;
}
/* Prevent body scroll while a drawer is open. */
html.dm-drawer-open,
html.dm-drawer-open body {
  overflow: hidden;
}

/* ---- Media slider (rebuilt; React CSS was unrecoverable) ------------------ */
/* The slides sit inside a styled-component flex track (random hash class) that,
   without React's CSS, lays all 12 out in a ~4700px row. app.js flattens that
   track inline and tags each slide .js-slide + the visible one .is-active. */
.d-ext-mediaSlider-slidesContainer {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.d-ext-mediaSlider-slidesContainer__slide.js-slide {
  width: 100% !important;
}
.d-ext-mediaSlider-slidesContainer__slide.js-slide:not(.is-active) {
  display: none !important;
}
.d-ext-mediaSlider-slidesContainer__slide.js-slide.is-active {
  display: block !important;
  animation: dm-slide-fade 0.6s ease;
}
@keyframes dm-slide-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- CTA visibility safety net -------------------------------------------- */
/* The crawl left some data-anim-* attributes; the inline #static-mirror-cta-fix
   block neutralises them, this is a duplicate guard for any we add later. */
[data-anim], [data-anim-desktop], [data-anim-mobile], .dmAnim, .hasAnim {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---- Partner-logo trust strip (replaces the collapsed React slider) ------- */
.dm-logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 52px; padding: 10px 16px; width: 100%; }
.dm-logo-strip img { height: 64px; width: auto; max-width: 170px; object-fit: contain; }
@media (max-width: 767px) { .dm-logo-strip { gap: 20px 30px; } .dm-logo-strip img { height: 46px; } }

/* ---- Form submit status message ------------------------------------------ */
.dm-form-status { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.dm-form-status.is-ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #a3d9b1; }
.dm-form-status.is-error { background: #fdecea; color: #b3261e; border: 1px solid #f3b4ae; }

/* ---- Store map (Google Maps embed — replaces Duda's empty runtime Mapbox) -- */
[data-element-type="mapextension"] { min-height: 320px; }
.dm-map { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ---- Testimonials (real Google reviews, static — replaces the empty widget) */
.d-ext-mediaSlider-slidesContainer:has(.dm-reviews) { overflow: visible; height: auto; max-width: none; }
.dm-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 16px 4px;
}
.dm-review-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.dm-stars { color: #fbbc04; font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; }
.dm-review-text { margin: 0 0 16px; padding: 0; border: 0; font-size: 15px; line-height: 1.55; color: #333; flex: 1 1 auto; quotes: none; }
.dm-review-meta { display: flex; flex-direction: column; }
.dm-review-name { font-weight: 700; color: #1a1a1a; font-size: 15px; }
.dm-review-src { font-size: 12px; color: #777; margin-top: 2px; }
@media (max-width: 1024px) { .dm-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .dm-reviews { grid-template-columns: 1fr; gap: 14px; } }

/* ---- Shop Details modal (replaces Duda's runtime popup/lightbox) ---------- */
/* Triggered by [data-modal-open]; opened/closed by app.js setupModals(). */
html.dm-modal-open, html.dm-modal-open body { overflow: hidden; }
.dm-modal[hidden] { display: none; }
.dm-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dm-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.dm-modal__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; padding: 40px 40px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: dm-modal-in 0.22s ease;
  /* Match the live Duda popup: Poppins body, Orbitron title (set below). */
  font-family: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, sans-serif;
}
@keyframes dm-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dm-modal__close {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer; color: #1a1a1a;
}
.dm-modal__close svg { width: 22px; height: 22px; }
.dm-modal__title {
  margin: 0 0 16px; padding: 0 0 14px;
  font-family: 'Orbitron', 'Orbitron Fallback', sans-serif;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 28px; line-height: 1.1; color: var(--color_1, #295459);
  border-bottom: 2px solid var(--color_2, #10c8d0);
}
.dm-modal__rows { margin: 0 0 26px; }
.dm-modal__row {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px; padding: 0;
  font-size: 16px; font-weight: 400; line-height: 1.5; color: #1a1a1a;
}
.dm-modal__row:last-child { margin-bottom: 0; }
.dm-modal__row:first-child a { font-weight: 600; } /* phone, like the live popup */
.dm-modal__row svg { flex: 0 0 auto; width: 22px; height: 22px; color: #0b0b0b; }
.dm-modal__row a { color: inherit; text-decoration: none; }
.dm-modal__row a:hover { text-decoration: underline; }
.dm-modal__cta {
  display: block; box-sizing: border-box; width: 100%;
  margin: 0; padding: 18px 24px;
  background: var(--color_2, #10c8d0); color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 700;
  text-align: center; text-decoration: none; border: 0; border-radius: 1px; cursor: pointer;
}
.dm-modal__cta:hover { filter: brightness(0.95); }
@media (max-width: 767px) {
  .dm-modal__dialog { padding: 32px 24px 28px; }
  .dm-modal__title { font-size: 23px; }
}

/* ---- Mobile font-size & text-align overrides ----------------------------- */
/* Duda's stripped runtime applied .m-size-N / .m-font-size-N (the mobile font
   sizes) and .m-text-align-* at phone widths; those classes otherwise carry no
   CSS, so responsive headings rendered at their desktop size on mobile.
   Reinstated declaratively for the size set actually used across the site. */
@media (max-width: 767px) {
  .m-size-10, .m-font-size-10 { font-size: 10px !important; }
  .m-size-12, .m-font-size-12 { font-size: 12px !important; }
  .m-size-13, .m-font-size-13 { font-size: 13px !important; }
  .m-size-14, .m-font-size-14 { font-size: 14px !important; }
  .m-size-15, .m-font-size-15 { font-size: 15px !important; }
  .m-size-16, .m-font-size-16 { font-size: 16px !important; }
  .m-size-19, .m-font-size-19 { font-size: 19px !important; }
  .m-size-26, .m-font-size-26 { font-size: 26px !important; }
  .m-size-29, .m-font-size-29 { font-size: 29px !important; }
  .m-size-32, .m-font-size-32 { font-size: 32px !important; }
  .m-size-35, .m-font-size-35 { font-size: 35px !important; }
  .m-text-align-center { text-align: center !important; }
  .m-text-align-left { text-align: left !important; }

  /* DIY content blocks store a desktop horizontal inset as
     width:calc(100% - Npx); margin:0 auto — far too large for a phone column.
     A small inset (190px) just over-narrows; a large one (e.g. 348px on the
     vehicle pages' ShopGenie "Book Appointment" button, or 462px on a heading)
     goes NEGATIVE in a ~230px column and collapses the element to its min width,
     stacking the text one character per line. Let content blocks fill the
     column. Descendant (not just direct child) so nested blocks are caught, and
     include <a> buttons; exclude the grid containers themselves so nested
     responsive columns keep their own widths. */
  #dm .dmBody .dmRespCol div[class*="u_"]:not(.dmRespRow):not(.dmRespCol):not(.dmRespColsWrapper):not(.dmRespRowsWrapper),
  #dm .dmBody .dmRespCol [data-element-type]:not(.dmRespRow):not(.dmRespCol):not(.dmRespColsWrapper),
  #dm .dmBody .dmRespCol a[class*="u_"] {
    width: auto !important;
    max-width: 100% !important;
    /* The same per-element desktop positioning is also baked as a big fixed
       horizontal margin (e.g. margin-right:418px !important) with no media
       query, which clamps width to ~0 on a phone column and stacks the text.
       Duda's own mobile rule (.dmNewParagraph{margin-right:0} @max-width:767px)
       intends 0 here but loses on specificity — restore that intent. */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---- Vehicle-page hero: kill the desktop headroom on mobile --------------- */
/* The hero row's per-element pagestyleDevice rule bakes desktop
   padding-top:350px / padding-bottom:150px with NO media query, leaving a huge
   empty band under the header on phones. Restore sane mobile padding. Scoped to
   the parallax hero class (dmSectionParallaxNew) — home's heroes use other
   classes (dmSectionNoParallax / fullBleedMode) so they're untouched. The
   (1,3,0) specificity beats the per-element `#dm .dmBody div.u_XXXX` (1,2,1). */
@media (max-width: 767px) {
  #dm .dmBody .dmRespRow.dmSectionParallaxNew {
    padding-top: 84px !important;
    padding-bottom: 52px !important;
  }
}

/* ---- Reviews grid: let it use the full column width on mobile ------------- */
/* The injected .dm-reviews grid sits inside a Duda image-slider widget whose
   row/column keep desktop horizontal padding + width insets, squeezing the
   cards to ~200px and shoving them to the right. Neutralise those on just the
   reviews subtree via :has(.dm-reviews) (same pattern already used above for
   .d-ext-mediaSlider-slidesContainer:has(.dm-reviews)). */
@media (max-width: 767px) {
  #dm .dmBody .dmRespRow:has(.dm-reviews),
  #dm .dmBody .dmRespRow:has(.dm-reviews) .dmRespColsWrapper,
  #dm .dmBody .dmRespRow:has(.dm-reviews) .dmRespCol,
  #dm .dmBody [data-element-type="ssrimageslider"]:has(.dm-reviews) {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}