/* ==========================================================================
   Drive Smart Autos — components.css
   Buttons, forms, cards, chips, accordion, ticker, nav bits, misc UI.
   ========================================================================== */

/* ==========================================================================
   Logo
   ========================================================================== */
/* The official logo lockup (assets/img/official-logo.jpeg, keyed to
   transparent PNG/WebP in assets/img/logo/). It is chrome-on-black artwork,
   so it is only ever placed on a dark surface — header, footer, mobile
   panel — never on --paper. */
.logo{
  display:inline-flex;
  align-items:center;
  flex:none;
}
.logo__img{
  height:38px;
  width:auto;
  max-width:none;
}
@media (min-width:1024px){
  .logo__img{height:46px;}
}
.logo--panel .logo__img{height:34px;}
.logo--footer .logo__img{height:58px;}
@media (min-width:1024px){
  .logo--footer .logo__img{height:70px;}
}
/* Brand tagline, straight off the logo lockup */
.brand-tagline{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;
  margin-top:14px;
  font-size:12px;font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--onink-lo);
}
.brand-tagline span{white-space:nowrap;}
.brand-tagline span + span{
  padding-left:10px;
  border-left:2px solid var(--brand);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 24px;
  border-radius:var(--r-input);
  font-family:var(--f-body);
  font-weight:600;
  font-size:15px;
  overflow:hidden;
  isolation:isolate;
  /* nowrap keeps labels on one line where there is room; max-width stops an
     inline-flex button from pushing past its container when there is not.
     Below 480px the nowrap is lifted (see end of file) so a long label such as
     “Browse the fleet while you wait” wraps instead of being clipped by the
     overflow:hidden that the ::before fill sweep depends on. */
  white-space:nowrap;
  max-width:100%;
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translateX(-101%);
  transition:transform var(--dur-base) var(--ease-out);
}
.btn--primary{
  background:var(--brand-deep);
  color:#fff;
}
.btn--primary::before{background:var(--brand-press);}
.btn--primary:hover::before{transform:translateX(0);}
.btn--secondary-day{
  background:transparent;
  color:var(--text-hi);
  border:1px solid var(--text-hi);
}
.btn--secondary-day::before{background:var(--text-hi);}
.btn--secondary-day:hover{color:var(--paper);}
.btn--secondary-day:hover::before{transform:translateX(0);}
.btn--secondary-night{
  background:transparent;
  color:var(--onink-hi);
  border:1px solid var(--onink-lo);
}
.btn--secondary-night::before{background:var(--onink-hi);}
.btn--secondary-night:hover{color:var(--ink-950);}
.btn--secondary-night:hover::before{transform:translateX(0);}
.btn--ghost{
  min-height:auto;padding:0;
  color:inherit;font-weight:600;
  border-bottom:1px solid currentColor;
  border-radius:0;
}
.btn--sm{min-height:40px;padding:0 18px;font-size:14px;}
.btn--block{width:100%;}
.btn svg{width:18px;height:18px;flex:none;}

/* ==========================================================================
   Chips
   ========================================================================== */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:var(--r-input);
  font-size:14px;
  font-weight:500;
  border:1px solid var(--rule);
  color:var(--text-lo);
  transition:background var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear;
}
.on-night .chip{border-color:var(--ink-line);color:var(--onink-lo);}
.chip--filter{cursor:pointer;background:none;}
.chip--filter[aria-pressed="true"]{
  background:var(--brand-deep);
  border-color:var(--brand-deep);
  color:#fff;
}
.chip--anchor{cursor:pointer;}
a.chip:hover,.chip--filter:hover{border-color:currentColor;}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  font-size:12px;font-weight:600;
  border-radius:var(--r-input);
  background:var(--paper-2);
  color:var(--text-lo);
}
.on-night .badge{background:var(--ink-800);color:var(--onink-lo);}
.badge--open{background:var(--brand-deep);color:#fff;}
.badge--closed{background:var(--ink-800);color:var(--onink-lo);}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper-card);
}
.on-night .card{background:var(--ink-800);}

.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--ink-800);
}
.media-frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-base) ease-out;
}
/* Crop bias for portrait sources shown in a landscape frame — without it a
   centred cover-crop keeps the sky and throws away the subject. */
.img-focus-low{object-position:center 80%;}
.media-frame--tall{aspect-ratio:4/5;}
.media-frame--wide{aspect-ratio:21/9;}
.media-frame--square{aspect-ratio:1/1;}
.media-frame--placeholder{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--ink-800),var(--ink-800) 10px,#242a30 10px,#242a30 20px);
  color:var(--onink-lo);font-size:12px;font-weight:600;text-align:center;padding:var(--sp-2);
}

/* rule-draw + image scale hover, per motion spec — no lift, no shadow */
.card--interactive{position:relative;}
.card--interactive::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
  z-index:var(--z-card-hover);
}
.card--interactive:hover::after,
.card--interactive:focus-within::after{transform:scaleX(1);}
.card--interactive:hover .media-frame img,
.card--interactive:focus-within .media-frame img{transform:scale(1.05);}
.card--interactive .card__price{
  transition:transform var(--dur-base) var(--ease-out);
}
.card--interactive:hover .card__price,
.card--interactive:focus-within .card__price{transform:translateY(-4px);}

.card__body{padding:var(--sp-3);}
.card__title{margin-bottom:4px;}
.card__blurb{color:var(--text-lo);font-size:15px;margin-top:6px;}
.on-night .card__blurb{color:var(--onink-lo);}
.card__price{
  margin-top:var(--sp-2);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.card__price--enquiry{color:var(--text-lo);font-weight:500;}
.on-night .card__price--enquiry{color:var(--onink-lo);}
.card__meta{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{margin-bottom:var(--sp-3);}
.field__label{
  display:block;
  font-size:14px;font-weight:600;
  margin-bottom:8px;
}
.field__label .req{color:var(--brand-text);}
.on-night .field__label .req{color:var(--brand);}
.field__control{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border-radius:var(--r-input);
  border:1px solid var(--rule);
  background:var(--paper-card);
  color:var(--text-hi);
  /* 16px, not 15px, and not negotiable: iOS Safari zooms the whole page in
     when you focus a control whose font-size is under 16px, which throws the
     layout off and reads to the user as a broken mobile page. */
  font-size:16px;
  transition:border-color var(--dur-fast) linear;
}
textarea.field__control{min-height:120px;padding:12px 14px;resize:vertical;}
.field__control:focus-visible{border-color:var(--brand-text);}
.field__control[aria-invalid="true"]{border-color:#FF8A80;}
.field__hint{font-size:13px;color:var(--text-lo);margin-top:6px;}
/* Light red — the old #B3261E was a dark red, invisible on a dark field. */
.field__error{font-size:13px;color:#FF8A80;margin-top:6px;display:none;}
.field__control[aria-invalid="true"] + .field__error{display:block;}
.on-night .field__control{
  background:var(--ink-800);border-color:var(--ink-line);color:var(--onink-hi);
}
.on-night .field__hint{color:var(--onink-lo);}
.field--row{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
@media (min-width:640px){
  .field--row.field--2up{grid-template-columns:1fr 1fr;}
}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ==========================================================================
   Accordion
   ========================================================================== */
.accordion__item{border-top:1px solid var(--rule);}
.on-night .accordion__item{border-top-color:var(--ink-line);}
.accordion__item:last-child{border-bottom:1px solid var(--rule);}
.on-night .accordion__item:last-child{border-bottom-color:var(--ink-line);}
.accordion__trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);
  padding-block:var(--sp-2);
  text-align:left;
  font-family:var(--f-display);
  font-weight:600;
  font-stretch:110%;
  font-size:clamp(1.0625rem,1rem + 0.3vw,1.25rem);
}
.accordion__icon{
  flex:none;width:20px;height:20px;position:relative;
}
.accordion__icon::before,.accordion__icon::after{
  content:"";position:absolute;background:currentColor;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.accordion__icon::before{width:14px;height:2px;}
.accordion__icon::after{width:2px;height:14px;transition:transform var(--dur-base) var(--ease-out);}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-panel) var(--ease-out);
}
.accordion__trigger[aria-expanded="true"] + .accordion__panel{grid-template-rows:1fr;}
.accordion__panel-inner{overflow:hidden;}
.accordion__panel-content{padding-bottom:var(--sp-3);color:var(--text-lo);max-width:34em;}
.on-night .accordion__panel-content{color:var(--onink-lo);}

/* ==========================================================================
   Ticker / marquee
   ========================================================================== */
.ticker{
  position:relative;
  z-index:var(--z-ticker);
  overflow:hidden;
  background:var(--ink-950);
  padding-block:14px;
  border-block:1px solid var(--ink-line);
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:ticker-scroll 32s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__item{
  display:inline-flex;align-items:center;gap:14px;
  padding-inline:14px;
  font-family:var(--f-display);
  font-weight:600;
  font-stretch:115%;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--onink-hi);
  white-space:nowrap;
}
.ticker__item::before{content:"";width:14px;height:2px;background:var(--brand);flex:none;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;}
}

/* ==========================================================================
   Hours table
   ========================================================================== */
.hours-table{width:100%;}
.hours-table tr{
  display:flex;justify-content:space-between;
  padding-block:12px;
  border-top:1px solid var(--rule);
}
.on-night .hours-table tr{border-top-color:var(--ink-line);}
.hours-table tr:last-child{border-bottom:1px solid var(--rule);}
.on-night .hours-table tr:last-child{border-bottom-color:var(--ink-line);}
.hours-table td{padding:0;}
.hours-table tr.is-today{
  background:var(--brand-deep);
  border-radius:var(--r-input);
  padding-inline:12px;
  margin-inline:-12px;
}
.hours-table tr.is-today td{color:#fff;font-weight:700;}

/* ==========================================================================
   Rail (drag-scroll)
   ========================================================================== */
.rail{position:relative;}
.rail__track{
  display:flex;
  gap:var(--col-gap);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
  padding-bottom:4px;
}
.rail__track:active{cursor:grabbing;}
.rail__track::-webkit-scrollbar{display:none;}
.rail__track > *{scroll-snap-align:start;flex:none;}
.rail__nav{
  display:none;
  align-items:center;
  gap:8px;
  margin-top:var(--sp-3);
}
.rail__btn{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--ink-line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--onink-hi);
  transition:background var(--dur-fast) linear;
}
.on-day .rail__btn{border-color:var(--rule);color:var(--text-hi);}
.rail__btn:hover{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);}
.rail__progress{
  flex:1;height:2px;background:var(--ink-line);position:relative;overflow:hidden;
}
.on-day .rail__progress{background:var(--rule);}
.rail__progress-bar{
  position:absolute;left:0;top:0;bottom:0;
  width:20%;background:var(--brand);
}
@media (min-width:900px){
  .rail__nav{display:flex;}
}

/* ==========================================================================
   Icon sprite usage
   ========================================================================== */
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none;}

/* ==========================================================================
   Services list (two-column, icon-led)
   ========================================================================== */
.services-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:768px){
  .services-list{grid-template-columns:1fr 1fr;column-gap:var(--col-gap);}
}
.services-list__row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding-block:20px;
  border-top:1px solid var(--rule);
}
.services-list__row:hover{color:var(--brand-text);}
.services-list__row svg{flex:none;margin-top:2px;color:var(--brand-text);}
.on-night .services-list__row{border-top-color:var(--ink-line);}
.on-night .services-list__row:hover{color:var(--brand);}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast{
  position:fixed;
  left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  z-index:var(--z-toast);
  background:var(--ink-950);
  color:var(--onink-hi);
  padding:14px 20px;
  border-radius:var(--r-input);
  font-size:14px;font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0);}

/* ==========================================================================
   Sticky standards / photo-swap panel
   ========================================================================== */
.sticky-panel{align-self:start;}
@media (min-width:900px){
  .sticky-panel{position:sticky;top:96px;}
}

/* ==========================================================================
   Skeleton helpers for styleguide
   ========================================================================== */
.swatch{
  aspect-ratio:1/1;border-radius:var(--r-input);
  display:flex;align-items:flex-end;padding:8px;
  font-size:12px;font-weight:600;font-family:monospace;
}

/* ==========================================================================
   Narrow-phone overrides (<=479px)
   ========================================================================== */
@media (max-width:479px){
  /* Let long labels wrap rather than be cut off. The vertical padding replaces
     the centring that min-height alone gave a single-line label. */
  .btn{
    white-space:normal;
    text-align:center;
    padding:12px 18px;
    line-height:1.25;
  }
}

/* ==========================================================================
   Tap targets in link lists
   ==========================================================================
   Footer columns, the Services mega menu and the mobile panel's service list
   are all plain <a> inside <li>, which rendered 20px tall — under the 24px
   WCAG 2.5.8 (AA) minimum, and fiddly to hit on a phone. Padding the link
   itself (rather than the li) keeps the whole target clickable. */
.site-footer__grid ul a,
.mega-menu__grid ul a,
[data-panel-services-list] a{
  display:inline-block;
  padding-block:7px;
}