/* ==========================================================================
   Header — utility bar over a white nav bar, logo at the left.
   Replaces the Duda header on every page. Sticky rather than fixed, so it sits
   in normal flow and no page needs to pad around it.
   Dropdowns are CSS only (:hover and :focus-within); the mobile panel uses a
   checkbox and <details>, so the whole header needs no JavaScript.
   ========================================================================== */
.fch {
  --ink: #1d1f21; --util: #14161a; --line: #e6e7e9; --accent: #c8362f; --soft: #5b6066;
  position: sticky; top: 0; z-index: 900;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.05);
}
.fch *, .fch *::before { box-sizing: border-box; }
.fch a { text-decoration: none; color: inherit; }
.fch ul { list-style: none; margin: 0; padding: 0; }
.fch-wrap {
  max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px;
  display: flex; align-items: center; gap: 20px;
}

/* utility bar */
.fch-util { background: var(--util); color: rgba(255,255,255,.82); font-size: 12.5px; }
.fch-util .fch-wrap { justify-content: space-between; min-height: 40px; }
.fch-util-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.fch-util-list li { display: flex; align-items: center; gap: 7px; }
.fch-util .fch-i { width: 14px; height: 14px; flex: 0 0 14px; color: var(--accent); display: block; }
.fch-util .fch-lbl { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.5); }
.fch-util a { color: #fff; font-weight: 600; }
.fch-util a:hover { color: #ffb3ae; }
.fch-social { display: flex; gap: 8px; }
.fch-social a {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.fch-social a:hover { background: var(--accent); }

/* main bar */
.fch-main { background: #fff; }
.fch-main .fch-wrap { min-height: 84px; }
.fch-logo { flex: 0 0 auto; margin-right: auto; display: flex; align-items: center; }
.fch-logo img { width: 240px; height: auto; display: block; }
.fch-nav { display: flex; align-items: center; gap: 26px; }
.fch-menu { display: flex; align-items: center; gap: 4px; }
.fch-menu > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.fch-menu > li > a:hover { color: var(--accent); background: rgba(200,54,47,.06); }
.fch .cr { width: 9px; height: 6px; opacity: .55; transition: transform .2s ease; }
.fch-has:hover .cr, .fch-has:focus-within .cr { transform: rotate(180deg); }

/* dropdowns */
.fch-has { position: relative; }
.fch-drop {
  /* No gap between trigger and panel: a gap makes the cursor lose :hover on the
     way down and the menu snaps shut. The offset is padding instead. */
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  padding: 10px; min-width: 268px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.fch-has:hover .fch-drop,
.fch-has:focus-within .fch-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.fch-drop a {
  display: block; padding: 9px 12px; border-radius: 7px; font-size: 13.5px; color: var(--soft); font-weight: 500;
}
.fch-drop a:hover { background: rgba(200,54,47,.07); color: var(--accent); }
/* the 38 vehicle makes need a mega panel */
.fch-drop--wide { min-width: 640px; left: 0; right: auto; }
.fch-cols { columns: 4; column-gap: 6px; }
.fch-cols li { break-inside: avoid; }

/* book appointment */
/* .fch a { color: inherit } is (0,2,2) and outranks a plain .fch-cta rule at
   (0,2,1), which made this button inherit Duda's black. Target the anchor. */
.fch a.fch-cta {
  background: var(--accent); color: #fff; padding: 15px 26px; border-radius: 6px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.fch a.fch-cta:hover { background: #a92a24; color: #fff; }

/* mobile */
.fch-toggle, .fch-burger { display: none; }
@media (max-width: 1100px) {
  .fch-logo img { width: 190px; }
  .fch-menu > li > a { padding: 12px 9px; font-size: 12.5px; }
  .fch-nav { gap: 14px; }
  .fch-drop--wide { min-width: 520px; }
  .fch-cols { columns: 3; }
}
@media (max-width: 900px) {
  .fch-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; cursor: pointer; margin-left: auto;
  }
  .fch-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .fch-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    /* padding stays 0 while collapsed: max-height cannot clip padding, so any
       vertical padding here leaks the first menu item under the logo bar */
    padding: 0 16px; max-height: 0; overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    transition: max-height .25s ease, padding .25s ease;
  }
  .fch-toggle:checked ~ .fch-nav {
    max-height: 78vh; overflow-y: auto; padding: 8px 16px 20px;
  }
  .fch-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .fch-menu > li > a { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .fch-drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; padding: 2px 0 10px 10px; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .fch-has:hover .fch-drop,
  .fch-has:focus-within .fch-drop { max-height: 640px; }
  .fch-drop--wide { min-width: 0; left: 0; right: auto; }
  .fch-cols { columns: 2; }
  .fch-cta { margin-top: 16px; text-align: center; }
  .fch-main .fch-wrap { min-height: 70px; position: relative; }
}


/* Duda's header was position:fixed, so it reserved space with this spacer and
   set its height from JS (208px on most pages, 0 on a few). The new header is
   in normal flow, which makes that spacer dead space at the top of the page.
   !important is needed because Duda's runtime sets the height inline. */
#stickyHeaderSpacer {
  height: 0 !important;
  min-height: 0 !important;
}

/* Same class of problem, second mechanism. Duda also reserved room for its
   fixed hamburger header with

     [dmtemplateid="Hamburger"] .site_content { margin-top: 157px !important }

   (and 186px in a tablet media query). Every page carries that template id,
   but Duda's own rule zeroes it again for .header-over-content pages, which
   is why only the 67 pages without that class showed a 157px band of white
   above the header: all 38 vehicle pages, all 23 blog posts, plus /warranty/,
   /privacy/, /sms-terms/, /vehicles/, /empty-page/ and 404.

   That header is hidden, so the reservation is dead space at every width.
   Their selector is an attribute plus a class; one ID outranks it. */
#dm .site_content {
  margin-top: 0 !important;
}