/* ==========================================================================
   Mobile layer: makes the whole site usable on a phone.
   --------------------------------------------------------------------------
   Duda served this site as .dmDesktopBody and swapped that class client-side
   at narrow viewports; the migration removed that runtime, so the swap never
   happens. Two things follow, and both are fixed below.

   1. .dmDesktopBody .dmInner stays pinned to a 768px minimum, so every page
      renders on a 768px canvas and scrolls sideways on a phone.
   2. Duda's per-widget rules are pure desktop layout and all carry
      !important: fixed and calc() widths, 48-64px side padding, negative
      margins used for desktop overlap (one measured margin-top: -300px), and
      desktop type sizes. Those are what actually break the narrow layout, not
      the wrapper width. Releasing the wrapper alone leaves a 40px h1 inside a
      134px column, rendering one letter per line.

   The overrides use #dm #dmFirstContainer #allWrapper as their prefix. That
   is three IDs, which outranks Duda's per-widget selectors (shaped
   *#dm *.dmBody div.u_1597368912, a single ID) no matter how many classes
   they carry, so !important declarations can be beaten predictably.
   ========================================================================== */
@media (max-width: 900px) {
  /* --- A. release the 768px desktop canvas -------------------------------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  body.dmDesktopBody .dmInner,
  #dmStyle_innerContainer,
  #dmStyle_outerContainer,
  .dmLayoutWrapper,
  #site_content, .site_content,
  #dm_content, .dmContent,
  .p_hfcontainer {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  img, iframe, video, table { max-width: 100%; }

  /* --- B. rebuild Duda's small grid --------------------------------------- */
  /* The markup already declares its own mobile grid, and site-wide it uses
     exactly two classes: small-12 (full width) and small-6 (half). That is
     precisely what the removed runtime applied at narrow widths, so honouring
     those classes reproduces the intended mobile layout instead of guessing.
     The desktop spans (large-2.4 = 20%, large-3 = 25%) are what have to go. */
  #dm #dmFirstContainer #allWrapper .dmRespColsWrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespRow,
  #dm #dmFirstContainer #allWrapper div.dmRespRowsWrapper {
    display: block !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespRow,
  #dm #dmFirstContainer #allWrapper div.dmRespRowsWrapper,
  #dm #dmFirstContainer #allWrapper div.dmRespCol {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* the desktop 48px side padding is dropped here and one gutter is put
       back on the outermost row in D, so nesting cannot stack three of them */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespCol { flex: 0 0 100% !important; }
  /* Duda's own half-width-on-phones class, used by the icon card grids */
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* --- C. neutralise the desktop widget geometry -------------------------- */
  /* Side padding is zeroed here and reapplied once on the row (D), otherwise
     three levels of nesting stack three lots of 48px. Vertical margins go to
     zero because Duda uses them for desktop overlap effects that have no
     meaning in a single stacked column; padding carries the rhythm instead. */
  /* The :not() list matters: this block sets width:auto, and without it the
     grid elements match here too. Section B and this rule have identical
     specificity, so whichever is written last wins, and a column set to
     width:auto that Duda left as inline-block shrink-wraps to its text
     (measured 108px instead of 398px). Excluding them keeps B authoritative
     for layout and leaves this rule to the widgets it is meant for. */
  #dm #dmFirstContainer #allWrapper div[class*="u_"]:not(.dmRespCol):not(.dmRespRow):not(.dmRespColsWrapper):not(.dmRespRowsWrapper) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    white-space: normal !important;
  }
  /* anything Duda absolutely positioned for a desktop overlay */
  #dm #dmFirstContainer #allWrapper div[class*="u_"][style*="absolute"],
  #dm #dmFirstContainer #allWrapper div.dmWidget { position: relative !important; }

  /* --- D. one side gutter, on the outermost row only ---------------------- */
  #dm #dmFirstContainer #allWrapper div.dmRespRow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespRow div.dmRespRow {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- D2. vertical rhythm ------------------------------------------------ */
  /* Duda's desktop sections carry 48-96px of vertical padding, which reads as
     large dead gaps on a phone. Normalise to one section rhythm on the
     outermost row, and let stacked columns space themselves. */
  #dm #dmFirstContainer #allWrapper div.dmRespRow {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespRow div.dmRespRow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespCol {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
  }
  /* Duda's desktop grid spacers hold nothing but width */
  #dm #dmFirstContainer #allWrapper div.empty-column,
  #dm #dmFirstContainer #allWrapper div.empty-col { display: none !important; }

  /* A row or column holding a background photo but no content is a decorative
     band. Its height came from a Duda desktop rule, so content-driven height
     collapses it to its padding alone (measured 56px, which is exactly the
     28px + 28px added above). Give those bands a height back. :has() with
     element selectors is the only way to tell "decorative" from "has content"
     in CSS, since background-image itself cannot be matched. */
  /* Rows only, never columns: a content-free column is usually a small
     decorative flourish (a star strip, a rule), and giving those a 190px band
     inserts dead gaps mid-section. */
  #dm #dmFirstContainer #allWrapper div.dmRespRow:not(:has(h1, h2, h3, h4, h5, h6, p, a, img, li, input, button, iframe)) {
    min-height: 190px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* but never resurrect one Duda itself hides on small screens */
  #dm #dmFirstContainer #allWrapper .hide-for-small,
  #dm #dmFirstContainer #allWrapper div.dmRespRow.hide-for-small {
    display: none !important;
  }

  /* Duda's graphic widgets (the star strips and badges) are square SVG boxes
     whose size came from their desktop column. At full width one becomes a
     398px block that is almost entirely empty space, which is what put a
     ~250px hole in the middle of every vehicle-page hero. */
  #dm #dmFirstContainer #allWrapper div.graphicWidget {
    max-width: 200px !important;
    max-height: 92px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #dm #dmFirstContainer #allWrapper div.graphicWidget svg,
  #dm #dmFirstContainer #allWrapper div.graphicWidget img {
    width: 100% !important;
    height: 100% !important;
    max-height: 92px !important;
  }

  /* images keep their aspect ratio once their column is full width */
  #dm #dmFirstContainer #allWrapper img { max-width: 100% !important; height: auto !important; }

  /* --- D3. two-up cards ---------------------------------------------------- */
  /* A small-6 card is half of a 430px screen, so its icon and heading have to
     be sized for a ~190px track. Left at desktop scale a line icon becomes a
     full-bleed 400px illustration. */
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 img {
    max-height: 78px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 h3,
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 h4,
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 h3 span,
  #dm #dmFirstContainer #allWrapper div.dmRespCol.small-6 h4 span {
    font-size: 15px !important; line-height: 1.25 !important;
  }

  /* --- E. type scale ------------------------------------------------------ */
  /* Desktop sizes (40px+ headings) do not fit a 430px column. */
  #dm #dmFirstContainer #allWrapper h1,
  #dm #dmFirstContainer #allWrapper h1 span {
    font-size: 30px !important; line-height: 1.16 !important; letter-spacing: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper h2,
  #dm #dmFirstContainer #allWrapper h2 span {
    font-size: 24px !important; line-height: 1.2 !important; letter-spacing: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper h3,
  #dm #dmFirstContainer #allWrapper h3 span {
    font-size: 20px !important; line-height: 1.25 !important;
  }
  #dm #dmFirstContainer #allWrapper h4,
  #dm #dmFirstContainer #allWrapper h4 span {
    font-size: 18px !important; line-height: 1.3 !important;
  }
  #dm #dmFirstContainer #allWrapper h1,
  #dm #dmFirstContainer #allWrapper h2,
  #dm #dmFirstContainer #allWrapper h3,
  #dm #dmFirstContainer #allWrapper h4 { word-break: break-word; }

  /* --- F. buttons become full-width taps --------------------------------- */
  #dm #dmFirstContainer #allWrapper a.dmButtonLink,
  #dm #dmFirstContainer #allWrapper a.dmWidget {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 8px auto !important;
    text-align: center;
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------------------------
   Duda shipped a second header for tablet/phone widths: #hamburger-header-container
   plus #hamburger-drawer, both .showOnMedium, carrying a duplicate logo and a
   full 63-link duplicate of the nav. Desktop never showed them, which is why
   they only surfaced once the mobile unlock above let narrow widths render.
   The new header has its own burger and panel, and the drawer's Duda JS was
   removed in the migration, so this is dead weight. It is hidden rather than
   deleted because Duda's markup nests my header inside the hamburger wrapper
   and its divs are unbalanced, so cutting it out would take the new header too.
   -------------------------------------------------------------------------- */
#hamburger-header-container,
#hamburger-drawer,
#hamburger-header,
.hamburger-header-container,
.hamburger-drawer,
#dm .p_hfcontainer.showOnMedium,
#dmStyle_innerContainer .showOnMedium {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Sticky call / book bar, phones only. Sits above the iPhone home indicator
   via env(safe-area-inset-bottom), and the page gets matching bottom padding
   so it never covers the footer's last line.
   -------------------------------------------------------------------------- */
.fcbar { display: none; }
@media (max-width: 900px) {
  .fcbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: rgba(20,22,26,.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  .fcbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; border-radius: 12px;
    font-size: 15px; font-weight: 700; letter-spacing: .02em;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background .12s ease;
  }
  .fcbar a:active { transform: scale(.97); }
  .fcbar .fcbar-call { background: #c8362f; color: #fff; }
  .fcbar .fcbar-book { background: #fff; color: #14161a; }
  .fcbar svg { width: 17px; height: 17px; flex: 0 0 17px; }
  /* clear the bar so nothing hides behind it */
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  /* the UserWay accessibility button defaults to the bottom corner, right where
     the bar now sits; lift it above the bar */
  .userway_buttons_wrapper, #userwayAccessibilityIcon {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   Utility bar on a phone. All three items stay visible with their labels:
   the phone, the address and the hours. Laid out as icon + label above value
   so nothing wraps raggedly at 430px, rather than dropping information.

   Only .fch-main sticks on mobile, not the whole header. The full utility bar
   is about 95px tall on a phone, and sticking that plus the 70px logo bar
   would hold ~165px of the screen permanently. The white logo bar carries the
   burger and stays pinned; the utility bar scrolls away with the page.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fch { position: static; }
  .fch-main { position: sticky; top: 0; z-index: 900; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.05); }
}

@media (max-width: 760px) {
  /* Each item becomes its own compact lifted card, matching the raised look of
     the homepage "Why Drivers Choose Us" boxes but sized down, so the bar
     reads as three tappable cards instead of three plain lines. The social
     icons come off on mobile: the phone, address and hours are what get used
     on a phone, and dropping them keeps the bar short. */
  .fch-util { font-size: 12px; }
  .fch-util .fch-wrap {
    flex-direction: column; align-items: stretch;
    gap: 7px;
    padding-top: 10px; padding-bottom: 12px;
    padding-left: 14px; padding-right: 14px;
  }
  .fch-util-list {
    display: grid; grid-template-columns: 1fr; gap: 7px;
  }
  .fch-util-list li {
    display: grid;
    grid-template-columns: 13px 1fr;
    grid-template-areas: "icon label" "icon value";
    column-gap: 9px; row-gap: 0;
    align-items: start;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    padding: 8px 11px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.34);
  }
  .fch-util .fch-i { grid-area: icon; width: 13px; height: 13px; flex: 0 0 13px; margin-top: 3px; }
  .fch-util .fch-lbl { grid-area: label; display: block; font-size: 9.5px; }
  .fch-util-list li > a,
  .fch-util-list li > span:not(.fch-lbl) {
    grid-area: value; line-height: 1.3; font-size: 12.5px;
  }
  .fch-social { display: none; }
}

/* --------------------------------------------------------------------------
   Vehicle-page review line: keep it beside the stars, not under them.

   The star strip and the count are two half-width columns of one flex
   wrapper, reading "***** 470+ Reviews" on desktop. Section B gives every
   column flex: 0 0 100% so the grid stacks on a phone, which split the pair.
   This wrapper is the exception: the two halves belong on one line.

   The wrapper is matched by having a marked review paragraph in one direct
   child column AND at least two child columns. That second test is what
   separates it from the outer wrapper further up, which contains both the
   stars and the count but has a single child.

   The star widget's svg is a square viewBox at width/height 100%, so with the
   default preserveAspectRatio its rendered art is as wide as the box is tall.
   Sizing the box 84 square therefore gives a strip the same width as the 78px
   one desktop shows, rather than the 398px-wide box it inherits.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #dm #dmFirstContainer #allWrapper .dmRespColsWrapper:has(> div.dmRespCol p.fc-reviewline):has(> div.dmRespCol + div.dmRespCol) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }
  #dm #dmFirstContainer #allWrapper .dmRespColsWrapper:has(> div.dmRespCol p.fc-reviewline):has(> div.dmRespCol + div.dmRespCol) > div.dmRespCol {
    width: auto !important;
    flex: 0 0 auto !important;
    padding-bottom: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper .dmRespColsWrapper:has(> div.dmRespCol p.fc-reviewline):has(> div.dmRespCol + div.dmRespCol) div.graphicWidget {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    margin: 0 !important;
  }
  #dm #dmFirstContainer #allWrapper p.fc-reviewline {
    text-align: left !important;
    white-space: nowrap;
    margin: 0 !important;
  }
}