/* ---- mobile nav behaviour (all pages) ---- */
@media (max-width:1024px){
  /* once scrolled, the bar spans the full width instead of sitting inset;
     the inner keeps its own gutter so content alignment is unchanged */
  .gnav.scrolled .gnav-container{padding-left:0!important;padding-right:0!important}
  /* --gnav-gutter is the container's own unscrolled padding, measured at
     runtime (nav-mobile.js) because it differs by page and breakpoint. */
  .gnav.scrolled .gnav-inner{padding-left:var(--gnav-gutter,24px)!important;
    padding-right:var(--gnav-gutter,24px)!important;border-radius:0!important}
}
/* hamburger turns into an X while the menu is open.
   The button is 44px with gap:5px between two 1.5px lines, so their
   centres are 6.5px apart - half that to bring them together. */
.gnav-menu-button__line{transition:transform .25s ease}
[data-menu-status="open"] .gnav-menu-button__line:first-child{transform:translateY(3.25px) rotate(45deg)}
[data-menu-status="open"] .gnav-menu-button__line:last-child{transform:translateY(-3.25px) rotate(-45deg)}
/* Nothing behind the open menu moves. Lenis drives scrolling on every
   page and its own stop() adds .lenis-stopped{overflow:clip}, which
   freezes the page without changing the scroll offset - so no position
   restore is needed. overflow:hidden is the fallback for any page where
   Lenis has not initialised. */
html.nav-locked{overflow:hidden!important;overscroll-behavior:none}
html.nav-locked body{overscroll-behavior:none}
[data-menu-status="open"] .gnav-center{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* The open menu scrolls BELOW the bar, never behind the logo and the X.
   The panel came from the design as top:0 with 100px of padding, and it
   stacks above the bar's white background but under the logo and X - so
   once the menu became scrollable (and the Service tiles made it taller
   than a phone), scrolled items passed between the two and the logo and X
   sat on top of the photo tiles. The panel now starts at the bar's measured
   height (--gnav-h, nav-mobile.js), and the bar stays plain white while the
   menu is open - on the homepage the red wash would otherwise tint it. */
@media (max-width:1024px){
  [data-menu-status="open"] .gnav-center{
    top:var(--gnav-h,76px)!important;
    padding-top:24px!important;
  }
  [data-menu-status="open"] .gnav-inner{--wash:0!important;background:#fff!important}
}

/* The homepage's red wash paints nav text white. The mobile menu panel is
   a white sheet, so while it is open the links, CTA and icons have to go
   back to ink regardless of --wash. */
[data-menu-status="open"] .gnav-center,
[data-menu-status="open"] .gnav-center *{--wash:0!important}
[data-menu-status="open"] .gnav-center .gnav-link__label,
[data-menu-status="open"] .gnav-center .gnav-link,
[data-menu-status="open"] .gnav-center a:not(.gnav-dropdown__link){color:#1a1a1a!important}
/* dropdown items sit on photos - their labels stay white */
[data-menu-status="open"] .gnav-center .gnav-dropdown__link,
[data-menu-status="open"] .gnav-center .gnav-dropdown__link *,
[data-menu-status="open"] .gnav-center .gnav-dropdown__link-label{color:#fff!important}
[data-menu-status="open"] .gnav-center .gnav-icon{filter:none!important}
[data-menu-status="open"] .gnav-center .gnav-cta{
  background:var(--brand-600,#c8102e)!important;color:#fff!important}
/* Automarkt carries both .gnav-link and .gnav-cta, so the menu's ink rule for
   .gnav-link tied with the CTA's white and the label came out black on the red
   pill. One selector carrying both classes settles it. */
[data-menu-status="open"] .gnav-center .gnav-link.gnav-cta,
[data-menu-status="open"] .gnav-center .gnav-link.gnav-cta .gnav-link__label{
  color:#fff!important}

/* Keep the hero image clear of the bar at any nav height. 78px was the
   old hard-coded value; --gnav-h is measured at runtime. */
@media (max-width:1024px){
  .hero-bg,.hero-overlay{top:calc(var(--gnav-h,62px) + 14px)!important}
}

/* The wash crossfades the wordmark to its white variant. With the menu
   open the sheet behind it is white, so the logo disappeared - put the
   dark wordmark back while the menu is open. */
[data-menu-status="open"] .gnav-logo::after{opacity:0!important}
[data-menu-status="open"] .gnav-logo>img{opacity:1!important}

/* --- Werkstatt-Termin: red from page load -------------------------------
   It used to start white and turn red once .gnav.scrolled was set. It is now
   the same red at every scroll position, so nothing about it depends on
   scrolling. (The homepage still re-mixes it as the red wash comes in, or a
   red pill would vanish into a red bar.) */
.gnav .gnav-cta{background:var(--brand-600,#c8102e)!important;color:#fff!important;border:none}

/* --- bigger nav type, and never bold ------------------------------------
   The hover state used to jump the label to weight 800, which both bolded it
   and shifted the items around it. Size carries the emphasis instead. */
.gnav .gnav-link__label{font-size:18px;font-weight:400}
.gnav .gnav-link:hover .gnav-link__label,
.gnav .gnav-center .gnav-link:hover .gnav-link__label{font-weight:400!important}
.gnav .gnav-cta{font-size:14.5px;font-weight:600;padding:12px 24px}
.gnav .gnav-end .gnav-icon{width:22px;height:22px}

/* --- the nav no longer moves on scroll ----------------------------------
   Desktop: .gnav.scrolled added 12px of horizontal padding to .gnav-inner,
   sliding the logo and the icon group inward at the threshold.
   Scoped above 1024px on purpose. Under it, the bar goes full-bleed on
   scroll and the inner re-adds the 24px gutter to hold the content still
   (the block at the top of this file) - zeroing it here as well removed the
   gutter entirely and threw the logo and burger out to the screen edges. */
@media (min-width:1025px){
  .gnav.scrolled .gnav-inner{padding-left:0!important;padding-right:0!important}
}

/* --- scroll chaining ------------------------------------------------------
   Scrolling past the top or bottom of a modal, drawer or panel used to carry
   on scrolling the page behind it. data-lenis-prevent already marks every
   container that owns its own scrolling, so it doubles as the hook here;
   the named classes cover the few scrollers that predate it.
   The JS pass below catches anything created at runtime. */
[data-lenis-prevent],
.modal-card,
.gnav-fav-panel,
.gnav-center,
.avd-siblings-list,
.adv-panel,
.mkt-scroller,
.v-listing-thumbs,
.modal-grid{overscroll-behavior:contain}

/* Form controls do not inherit font-family from the page - browsers give
   them their own default, which is why buttons, selects and inputs were
   rendering in Arial next to Lato text on every page, not just the new one. */
button,input,select,textarea{font-family:inherit}

/* Page freeze while a modal is open. Lenis owns the scroll, so stopping it is
   what actually holds the page; these are the belt-and-braces for pages or
   states where Lenis is not running. */
html.modal-locked,html.modal-locked body{overflow:hidden!important}
html.modal-locked{scrollbar-gutter:stable}


/* Nothing floats above the open mobile menu. The filter button is fixed at
   z-index:150 on the results pages, well above the menu panel's 99, so it
   showed through. nav-locked is set by nav-mobile.js for exactly this state. */
html.nav-locked .mkt-filter-toggle-btn,
html.nav-locked .mkt-results-bar,
html.nav-locked .mkt-scroll-arrow,
html.nav-locked .avd-tabs-wrap{display:none!important}

/* --- no zoom-in when a field is focused ----------------------------------
   iOS Safari zooms the page whenever a focused field's text is under 16px,
   and it does not zoom back out - leaving the visitor stranded at 1.2x with
   no obvious way back. Every form here ran at 13.5-15px.
   The fix is the field size, not the viewport: capping zoom with
   maximum-scale/user-scalable would stop the zoom by taking pinch-zoom away
   from everyone, which is a worse trade.
   Scoped to touch pointers and narrow widths, so the desktop type scale is
   untouched. !important because most of these fields carry inline styles
   from the React components. */
@media (pointer:coarse),(max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
  select,
  textarea{font-size:16px!important}
  /* the results pages pin their own 14px on these two with !important, at a
     higher specificity than the blanket rule above */
  html .mkt-filter-grid select,
  html .mkt-filter-grid button,
  html .mkt-results-bar select{font-size:16px!important}
}

/* The saved-search drawer builds its grids with inline styles, which a media
   query cannot override on its own - so below 640px it stayed two columns at
   128px each while the homepage form stacked. Same breakpoint as .modal-grid,
   so both saved-search forms now stack at the same width. */
@media (max-width:640px){
  .ss-grid{grid-template-columns:1fr!important}
}

/* Compact desktop bar, 1025-1339px. The full bar (logo, five menu items, the
   Werkstatt-Termin button and five icons) needs about 1300px; below that the
   icons ran off the right edge and the menu slid under them - on small
   laptops, 1280px screens and zoomed browsers. Same layout, tighter: menu
   items closer together at 16px, a smaller button, 20px icons. From 1340px
   the full-size bar is untouched; up to 1024px the burger menu takes over. */
@media (min-width:1025px) and (max-width:1339px){
  .gnav .gnav-center__list{gap:0}
  .gnav .gnav-center .gnav-link{padding:.55em .62em}
  .gnav .gnav-link__label{font-size:16px}
  .gnav .gnav-end{gap:6px}
  .gnav .gnav-cta{font-size:13px;padding:10px 15px}
  .gnav .gnav-end .gnav-icon{width:20px;height:20px}
  .gnav .gnav-end .gnav-icon-link{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
}
/* the narrowest desktop widths also give up some side padding */
@media (min-width:1025px) and (max-width:1149px){
  .gnav .gnav-container{padding:0 24px}
  .gnav .gnav-center .gnav-link{padding:.55em .5em}
  .gnav .gnav-logo img{height:13px!important}
}

/* The vehicle page's section tabs scroll sideways where they do not fit the
   column (VehicleDetailV2Export sets overflow-x); no visible scrollbar, the
   same as on phones. */
.avd-tabs-wrap::-webkit-scrollbar{display:none}