/* Custom CSS - D&G Auto LLC
   Project-specific styles. Do NOT edit template CSS directly.
   Shared design system: the 104 rules present in all 22 prototype comps, lifted from
   the <style> block of about.html (order kept). Rules that differ per page stay in each page head. */

body{margin:0;background:#0A1220;font-family:Poppins,system-ui,sans-serif;color:#EAF1FA}
a{color:#00DCFF}
a:hover{color:#EAF1FA}
.btn-gold,.btn-out,.btn-blue,.share,.chip,.chip-on,.arrow,.lb-btn,.menu-btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,185,60,.28)}
.btn-out:hover,.share:hover,.arrow:hover,.lb-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,220,255,.22)}
.arrow:hover{transform:translateY(-50%) scale(1.08)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,104,224,.35)}
.btn-gold:active,.btn-out:active,.btn-blue:active,.share:active{transform:translateY(0) scale(.98);transition-duration:.08s;box-shadow:none}
.btn-gold svg,.btn-blue svg,.btn-out svg,.lnk svg,.share svg{transition:transform .25s ease}
.btn-gold:hover svg,.btn-blue:hover svg,.lnk:hover svg{transform:translateX(4px)}
.share:hover svg{transform:translateY(-2px)}
.nl{position:relative;transition:color .2s ease}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:1px;background:#00DCFF;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nl:hover::after{transform:scaleX(1)}
.fl{transition:color .2s ease,padding-left .2s ease}
.fl:hover{padding-left:6px}
.card,.tile,.row{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.card:hover,.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.row:hover{transform:translateX(4px)}
.tile img,.card > div > img{transition:transform .7s ease}
.tile:hover img,.card:hover > div > img{transform:scale(1.06)}
.thumb{transition:transform .2s ease,border-color .2s ease}
.thumb:hover{transform:scale(1.06)}
.note{transition:border-color .25s ease,transform .25s ease}
.note:hover{border-color:#2A3B57;transform:translateY(-2px)}
.inp{transition:border-color .2s ease,box-shadow .2s ease}
.inp:focus{border-color:#00DCFF;box-shadow:0 0 0 3px rgba(0,220,255,.18);outline:none}
details summary .ic{transition:transform .3s ease,background-color .3s ease,color .3s ease}
details summary:hover .ic{background:#00DCFF;color:#0A1220}
@keyframes dgRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
section,footer{animation:dgRise .7s ease both}
section:nth-of-type(1){animation-delay:.05s}
section:nth-of-type(2){animation-delay:.15s}
section:nth-of-type(3){animation-delay:.25s}
section:nth-of-type(4){animation-delay:.35s}
section:nth-of-type(5){animation-delay:.45s}
section:nth-of-type(6){animation-delay:.55s}
section:nth-of-type(7){animation-delay:.65s}
section:nth-of-type(8){animation-delay:.75s}
@keyframes dgDraw{to{stroke-dashoffset:0}}
.draw path,.draw circle{stroke-dasharray:90;stroke-dashoffset:90;animation:dgDraw 1.4s ease forwards}
.draw:nth-of-type(2){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
.btn-gold:hover{background:#ffcb57;color:#0A1220}
.nl{font:500 15px Poppins,sans-serif;color:#EAF1FA;text-decoration:none}
.nl:hover{color:#00DCFF}
.btn-blue{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;background:#1668E0;color:#ffffff;font:600 14px Poppins,sans-serif;text-decoration:none;border-radius:6px;border:0;cursor:pointer}
.btn-blue:hover{background:#2f7cf0;color:#ffffff}
.fl{font:400 15px/1.5 Poppins,sans-serif;color:#93A6BC;text-decoration:none}
.fl:hover{color:#00DCFF}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;background:#F2B93C;color:#0A1220;font:600 14px Poppins,sans-serif;text-decoration:none;border-radius:6px;border:0;cursor:pointer}
html{scroll-behavior:smooth}
body{margin:0;background:#0A1220}
.page{width:100%!important;max-width:none;margin:0 auto;min-height:0!important}
.demo-bar{position:sticky;top:0;z-index:50;background:#F2B93C;color:#0A1220;font:600 12px/1.4 Poppins,sans-serif;text-align:center;padding:6px 16px;letter-spacing:.02em}
img{max-width:100%}
.site-nav{position:sticky;top:0;z-index:40}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#EAF1FA;cursor:pointer}
.demo-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:#101B2E;border:1px solid #00DCFF;color:#EAF1FA;font:500 14px Poppins,sans-serif;padding:14px 20px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #00DCFF;outline-offset:2px}
.track.manual{animation:none!important;transition:transform .5s ease}
@media (max-width: 1100px){
  .page > *[style*="padding"],.page section,.site-nav > div,.site-footer > div,.page > nav{padding-left:32px!important;padding-right:32px!important}
  .page h1{font-size:clamp(36px,7vw,72px)!important}
  .page h2{font-size:clamp(26px,4.5vw,44px)!important}
  .page [style*="repeat(6, minmax"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .page [style*="repeat(4, minmax"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page [style*="repeat(3, minmax"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page [style*="grid-template-columns: minmax"],.page [style*="grid-template-columns: 300px"],.page [style*="grid-template-columns: 260px"]{grid-template-columns:minmax(0,1fr)!important}
  .page [style*="position: sticky"]:not(.site-nav):not(.demo-bar){position:static!important}
  .site-nav > div{flex-wrap:wrap;height:auto!important;min-height:64px;padding-top:8px;padding-bottom:8px}
  .site-nav > div:first-child{display:none!important}
  .site-nav nav{display:none!important;width:100%;flex-direction:column;align-items:stretch!important;gap:4px!important;padding:8px 0 12px}
  .site-nav nav a{padding:12px 8px;border-top:1px solid #1d2c45}
  .site-nav.open nav{display:flex!important}
  .menu-btn{display:flex}
  .site-nav > div:last-child{gap:8px!important;justify-content:space-between!important}
  .site-nav > div:last-child > a > span > span:last-child{display:none}
  .site-nav > div:last-child > a img{width:40px!important;height:40px!important}
}
@media (max-width: 700px){
  .page{overflow-x:clip}
  .page > *[style*="padding"],.page section,.site-nav > div,.site-footer > div,.page > nav{padding-left:20px!important;padding-right:20px!important}
  .page section{padding-top:44px!important;padding-bottom:44px!important}
  .page h1{font-size:clamp(34px,10vw,48px)!important}
  .page h2{font-size:clamp(24px,7vw,32px)!important}
  .page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .page [style*="display: flex"][style*="justify-content: space-between"]{flex-wrap:wrap;gap:16px}
  .page [style*="min-height: 720px"],.page [style*="min-height: 760px"]{min-height:0!important}
  .page [style*="font: 700 84px"],.page [style*="font: 700 88px"],.page [style*="font: 700 112px"],.page [style*="font: 700 76px"]{font-size:44px!important;line-height:1!important}
  .track{gap:14px!important}
  .track .card{width:80vw!important}
  .arrow{display:none!important}
  .page [style*="height: 560px"]{height:260px!important}
  .page [style*="height: 460px"]{height:260px!important}
  .page [style*="height: 420px"]{height:240px!important}
  .page [style*="grid-auto-rows: 210px"]{grid-auto-rows:150px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page [style*="grid-column: span 2; grid-row: span 2"]{grid-column:span 2!important;grid-row:span 1!important}
  .page [style*="grid-template-columns: repeat(6, minmax"][style*="gap: 10px"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .page svg[width="600"]{width:100%;height:auto}
  .page .btn-gold,.page .btn-out,.page .btn-blue{width:100%;box-sizing:border-box}
  .page [style*="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0"] > div{border-left:0!important;padding-left:0!important}
  .page [style*="font: 700 44px"]{font-size:36px!important}
  .page .step{grid-template-columns:1fr!important}
  .page .tl{grid-template-columns:80px 24px minmax(0,1fr)!important}
}
@media print{
  .demo-bar,.menu-btn{display:none}
}

/* ==================== ARN Task 34: layout fixes (2026-10-01) ==================== */
/* (3) The sticky header is 126px tall from 1101px up and 65px below it: keep it off anchor targets. */
html{scroll-padding-top:170px} /* row 55b: 40px top bar + 116px logo bar (100px logo) + 14px */
@media (max-width: 1100px){
  html{scroll-padding-top:77px}
}
/* (3) Sticky panels (inventory filters, vehicle summary, FAQ, reserve) stick below the header, not under it.
   The inventory filter form is taller than the screen, so it scrolls inside itself. */
@media (min-width: 1101px){
  .page [style*="position: sticky"]:not(.site-nav){top:182px!important} /* row 55b: header is 32px taller (100px logo) */
  .page form[style*="position: sticky"]{box-sizing:border-box;max-height:calc(100vh - 206px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A3B57 transparent}
}
/* (6) Category filter row: every select at least as wide as its own text, so none is clipped. */
@media (min-width: 1300px){
  .page [style*="repeat(6, minmax(0, 1fr)) auto"]{grid-template-columns:minmax(max-content,1fr) minmax(120px,1fr) repeat(4,minmax(max-content,1fr)) auto!important}
}
@media (min-width: 1101px) and (max-width: 1299px){
  .page [style*="repeat(6, minmax(0, 1fr)) auto"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width: 701px) and (max-width: 839px){
  .page [style*="repeat(6, minmax(0, 1fr)) auto"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* (4) Vehicle shipping card: its 100px side margins follow the page gutters on smaller screens.
   Both spellings: the scroll-in script re-serialises section style attributes ("0 100px" -> "0px 100px"). */
@media (max-width: 1100px){
  .page section[style*="margin: 0 100px"],.page section[style*="margin: 0px 100px"]{margin-left:32px!important;margin-right:32px!important}
}
@media (max-width: 700px){
  .page section[style*="margin: 0 100px"],.page section[style*="margin: 0px 100px"]{margin-left:20px!important;margin-right:20px!important}
  /* (5) Vehicle gallery on phones: photo keeps a 4:3 shape, the expand badge shows its icon only,
     and the thumbnail strip keeps 4 columns instead of stacking. */
  [data-gallery-main]{height:auto!important;aspect-ratio:4/3}
  [data-gallery-main] > span:nth-of-type(2){font-size:0!important;gap:0!important}
  .page [style*="repeat(8, minmax"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* (8) Shipping illustration (600px SVG) shrinks with its column between phone and desktop widths. */
@media (max-width: 1299px){
  .page svg[width="600"]{max-width:100%;height:auto}
}

/* ==================== ARN row 45: QA fixes from the row 26 audit (2026-10-08) ==================== */
/* (1) Button rows, one rule for every page (replaces the page-scoped [data-*-btns] rules of rows 19-21 and 44).
   From 701px up a button never breaks inside its label and a row of buttons wraps whole buttons instead of squeezing them.
   On phones a row of buttons stacks, each button is full width (above), and a label too long for one line grows the button. */
@media (min-width: 701px){
  .page :is(.btn-gold,.btn-out,.btn-blue){white-space:nowrap;flex-shrink:0}
  .page :has(> :is(.btn-gold,.btn-out,.btn-blue)){flex-wrap:wrap}
}
@media (max-width: 700px){
  .page :is(div,p):has(> :is(.btn-gold,.btn-out,.btn-blue)):not(.site-nav *){flex-direction:column;align-items:stretch}
  .page :is(.btn-gold,.btn-out,.btn-blue){height:auto!important;min-height:46px;padding:12px 14px!important;text-align:center;text-wrap:balance}
}
/* (2) Header: the phone menu runs up to 1299px. The 8 nav links need 823px on one row and get 683px at 1150, 759px at 1280 (row 26 item 3).
   From 1300 to 1439px the links sit 20px apart instead of 30px (613px of text + 7 x 20px fits the ~771px row at 1300). */
/* ARN row 52: the phone menu now runs to 1359px (was 1299): 8 links + the 64px logo need about 1315px of window. */
@media (min-width: 1101px) and (max-width: 1359px){
  html{scroll-padding-top:77px}
  .site-nav > div{flex-wrap:wrap;height:auto!important;min-height:64px;padding-top:8px;padding-bottom:8px}
  .site-nav > div:first-child{display:none!important}
  .site-nav nav{display:none!important;width:100%;flex-direction:column;align-items:stretch!important;gap:4px!important;padding:8px 0 12px}
  .site-nav nav a{padding:12px 8px;border-top:1px solid #1d2c45}
  .site-nav.open nav{display:flex!important}
  .menu-btn{display:flex}
  .site-nav > div:last-child{gap:8px!important;justify-content:space-between!important}
  .site-nav > div:last-child > a > span > span:last-child{display:none}
  .site-nav > div:last-child > a img{width:40px!important;height:40px!important}
  .page [style*="position: sticky"]:not(.site-nav){top:89px!important}
  .page form[style*="position: sticky"]{max-height:calc(100vh - 113px)}
}
@media (min-width: 1300px) and (max-width: 1439px){
  .site-nav nav{gap:20px!important}
}
/* (3) Section H2s set at 40px fit their column from 1101 to 1299px (row 26 item 4: "INTERNATIONAL SHIPPING" needs 414px, its column is 343px at 1101). */
@media (min-width: 1101px) and (max-width: 1299px){
  .page h2[style*="40px"]{font-size:min(40px,calc(3.9vw - 11px))!important}
}
/* ARN row 54 (Danner 2026-10-14): the Vehicles dropdown. Desktop opens on hover or keyboard focus; the phone menu (to 1299px) lists the types indented under Vehicles.
   ARN row 55: the header logo is 100px on desktop (Clay 2026-10-14; was 46, then 64), 64px in the phone menu bar (was 40). */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd > .nl{display:inline-flex;align-items:center;gap:5px}
.nav-dd-menu{position:absolute;top:100%;left:-18px;margin-top:16px;min-width:220px;display:flex;flex-direction:column;padding:8px 0;background:#101B2E;border:1px solid #1d2c45;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:50}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd-menu a{padding:10px 18px;font:500 14px Poppins,sans-serif;color:#EAF1FA;text-decoration:none;white-space:nowrap}
.nav-dd-menu a:hover,.nav-dd-menu a:focus{background:#16243b;color:#00DCFF}
@media (max-width: 1359px){ /* row 55b: the phone menu runs to 1359px (row 52), so its dropdown + logo rules do too */
  .nav-dd{flex-direction:column;align-items:stretch}
  .nav-dd > .nl svg{display:none}
  .nav-dd-menu{position:static;margin:0;min-width:0;padding:0;background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .nav-dd-menu::before{display:none}
  .site-nav .nav-dd-menu a{padding-left:26px;font-size:14px;color:#93A6BC}
  .site-nav > div:last-child > a img{width:64px!important;height:64px!important} /* row 55b: 64px in the phone menu bar (100px on desktop) */
}
/* ARN row 50 (Danner 2026-10-14): the D&G logo in the lower right of every vehicle photo, on the site only (the uploads the feeds share stay clean).
   img/logo24-wm.png is a 220px copy of img/logo24.png. Cards and the detail photo are cover-fit, so the box corner is the photo corner;
   the lightbox photo is contain-fit, so custom.js places its logo on the photo's own corner. */
.dga-wm{position:absolute;right:10px;bottom:10px;width:16%;min-width:34px;max-width:64px;aspect-ratio:1;background:url(img/logo24-wm.png) center/contain no-repeat;opacity:.9;pointer-events:none;z-index:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.dga-wm-lg{right:16px;bottom:16px;width:13%;max-width:104px}
.dga-wm-lb{position:fixed;right:auto;bottom:auto;left:0;top:0;width:clamp(48px,7vw,110px);max-width:none;visibility:hidden}
/* ARN row 52: with "Sell Your Vehicle" the header has 8 links + Search Inventory (measured 747px of links + 8 gaps) beside the
   64px logo (row 55). 1300-1599px: the header rows use 40px side padding and the links sit 16px apart, so it stays on one row
   down to 1300 (narrower uses the phone menu). 1600px+ keeps the comp's 100px padding and 30px gaps. */
@media (min-width: 1360px) and (max-width: 1599px){
  .site-nav > div{padding-left:40px!important;padding-right:40px!important}
  .site-nav nav{gap:16px!important}
}
/* (4) Footer credit-line links (Creative Design Group, Smart Marketing, Login) never split. Row 45 step 3: this comment used to say Terms / Privacy, which the footer does not have. */
.site-footer p a{white-space:nowrap}
/* (5) Phone buttons (row 45 step 6, S4): dgaBtnLabel() puts the number in its own span. Wide screens: "Label: number" on one
   line; phones: the number sits on its own line under the label, without the colon. */
.page :is(.btn-gold,.btn-out,.btn-blue):has(> .btn-num){gap:0}
.btn-num{white-space:nowrap}
@media (max-width: 700px){
  .page :is(.btn-gold,.btn-out,.btn-blue):has(> .btn-num){flex-direction:column;gap:2px}
  .page :is(.btn-gold,.btn-out,.btn-blue) > .btn-num{font-size:14px;font-weight:500}
  .page :is(.btn-gold,.btn-out,.btn-blue) .btn-num-sep{display:none}
}