/* ============================================================
   Motoring With Mike — shared design system
   Mirrors the mycar.ca editorial system: Instrument Sans,
   tight weight-600 headings, flat hairline cards, small-radius
   buttons. Brand colors (gold #d4af37, dark #0b1220) unchanged.
   Linked from every page; page-specific CSS stays inline.
   ============================================================ */

:root{
  --gold:#d4af37;
  --gold-hover:#e6c766;
  --gold-brand:#C9A54A;
  --gold-deep:#a8862a;  /* gold that passes 3:1 on white -- focus rings */
  --ink:#0f172a;      /* headings */
  --body:#475569;     /* body text */
  --muted:#64748b;    /* secondary text */
  --line:#e2e8f0;     /* hairline borders */
  --paper:#ffffff;    /* section bg — pure white (uniform) */
  --dark:#0b1220;     /* hero / footer */
}

html { scroll-behavior: smooth; }

body{
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Typography: mycar.ca editorial scale ----
   Scoped to `body` so these win over Tailwind CDN Preflight,
   which injects `h1{font-size:inherit;font-weight:inherit}`
   into the head after this stylesheet loads. */
body h1,body h2,body h3,body h4{
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-weight:600;
}
body h1{ font-size:clamp(32px,6.4vw,54px); line-height:1.04; letter-spacing:-.035em; }
body h2{ font-size:clamp(24px,3.6vw,34px); line-height:1.1;  letter-spacing:-.02em; }
body h3{ font-size:19px; line-height:1.25; letter-spacing:-.01em; }
p{ color:var(--body); }
.font-brand{ font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; letter-spacing:-.01em; }
.lead{ font-size:clamp(17px,2.2vw,19px); line-height:1.55; }

/* Small gold eyebrow / accent rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.rule-gold{ width:52px; height:3px; background:var(--gold); border-radius:3px; }

/* ---- Buttons: mycar.ca small-radius, flat ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:15px; line-height:1;
  padding:14px 22px; border-radius:6px; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease,
             box-shadow .2s ease, transform .15s ease;
  white-space:nowrap; cursor:pointer;
}
.btn-gold{
  background:var(--gold); color:#231a04;
  box-shadow:0 2px 12px rgba(212,175,55,.45);
  animation:cta-glow 3s ease-in-out infinite;
}
.btn-gold:hover{
  background:var(--gold-hover); transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(212,175,55,.75), 0 0 12px rgba(212,175,55,.55);
  animation:none;  /* steady, stronger glow on hover */
}
@keyframes cta-glow{
  0%,100%{ box-shadow:0 2px 12px rgba(212,175,55,.40); }
  50%    { box-shadow:0 4px 20px rgba(212,175,55,.70); }
}
@media (prefers-reduced-motion:reduce){ .btn-gold{ animation:none; } }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#1e293b; }
.btn-outline{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-outline:hover{ background:#f1f5f9; }  /* keep hover feedback now that --paper is white */
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); }
.btn-sm{ padding:10px 16px; font-size:14px; }

/* ---- Cards: flatter, hairline ---- */
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; }

/* ---- Header ---- */
header .logo img { max-width: 100%; }  /* sizing comes from the h-12 md:h-14 utilities */
@media (max-width: 768px) { header nav { display: none; } }

/* ---- Marquee (lender / brand logos) ---- */
.marquee{ position:relative; overflow:hidden; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:10; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(to right, var(--paper), transparent); }
.marquee::after { right:0; background:linear-gradient(to left,  var(--paper), transparent); }
@keyframes marqueeLeft { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-track{ display:flex; width:max-content; gap:18px; will-change:transform; }
.marquee-left .marquee-track{ animation:marqueeLeft 35s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.logo-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 18px; border-radius:9999px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,23,42,.04); white-space:nowrap;
}
.logo-pill img{ height:28px; width:auto; max-width:140px; object-fit:contain; opacity:.9; }

/* ---- Section watermark logo (used on the apply block) ---- */
.overlay-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.07; z-index:0;
}
.overlay-logo img{ max-width:600px; width:60vw; height:auto; }
.section-inner{ position:relative; z-index:10; }

/* ---- Featured auto-slider (homepage) ---- */
.feat-marquee::before{ background:linear-gradient(to right, #fff, transparent); }
.feat-marquee::after { background:linear-gradient(to left,  #fff, transparent); }
.feat-marquee .marquee-track{ gap:20px; animation-duration:75s; }
.feat-card{
  display:block; flex:0 0 300px; width:300px; background:#fff;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.feat-card:hover{ border-color:#cbd5e1; box-shadow:0 8px 24px rgba(15,23,42,.07); }
.feat-card .img{ aspect-ratio:16/10; background:var(--dark); }
.feat-card .img img{ width:100%; height:100%; object-fit:cover; object-position:50% 72%; display:block; }
.feat-card .body{ padding:15px 18px 17px; }
.feat-card .body h3{ font-size:16px; color:var(--ink); }

/* Inventory grid: same downward crop as the featured cards, to push the MyCar
   gold-foil studio backdrop out of frame and center the vehicle. */
#inv-grid img{ object-position:50% 72%; }

/* ---- Accessibility: skip-to-content link (visible only on keyboard focus) ---- */
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:6px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; outline:2px solid var(--gold); outline-offset:2px; }

/* ---- Form fields ---- */
.field{
  margin-top:.25rem; width:100%; border-radius:8px; border:1px solid #cbd5e1;
  padding:10px 12px; font-size:15px; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; outline:none;
}
.field:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 2px var(--gold-deep); }

/* ---- Mobile action bar ----
   The sticky header hides its nav under 768px (see `header nav` above), which
   left phones — the ad funnel's main surface — with no CTA and no tap-to-call
   while scrolling. Those two actions live here instead. The spacer keeps the
   bar from covering the footer; on index.html a short script tucks the bar away
   while the apply form is on screen, so it never sits over the submit button. */
.mobile-cta-spacer{ height:76px; }
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(15,23,42,.06);
  transition:transform .2s ease, opacity .2s ease;
}
.mobile-cta .btn{ min-height:48px; }          /* ≥44px tap target */
.mobile-cta .btn-gold{ flex:1 1 auto; }
.mobile-cta .btn-outline{ flex:0 0 auto; gap:.4rem; }
.mobile-cta.is-tucked{ transform:translateY(120%); opacity:0; pointer-events:none; }
.mobile-cta[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .mobile-cta{ transition:none; } }
@media (min-width:768px){ .mobile-cta,.mobile-cta-spacer{ display:none; } }

/* ---- Marquee motion controls ----
   Three marquees run indefinitely on the homepage; the featured one holds
   links. Reduced motion stops them outright, keyboard focus inside one pauses
   it, and mwm-marquee.js injects the pause toggle WCAG 2.2.2 asks for. */
@media (prefers-reduced-motion:reduce){
  /* Two classes, to match `.marquee-left .marquee-track` above -- a bare
     `.marquee-track` here loses on specificity and the strip keeps scrolling. */
  .marquee .marquee-track{ animation:none; }
}
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track{ animation-play-state:paused; }

.marquee-wrap{ position:relative; }
.marquee-toggle{
  position:absolute; top:50%; right:10px; transform:translateY(-50%); z-index:11;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border-radius:9999px;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  cursor:pointer; box-shadow:0 1px 3px rgba(15,23,42,.10);
  transition:color .15s ease, border-color .15s ease;
}
.marquee-toggle:hover{ color:var(--ink); border-color:#cbd5e1; }
.marquee-toggle:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .marquee-toggle{ transition:none; } }

/* ---- Social icon links ----
   The icons are 20px, which was also the whole tap target. The pseudo-element
   widens the hit area to the icon pitch x 44px without moving anything. */
a[aria-label^="Motoring with Mike on "]{ position:relative; }
a[aria-label^="Motoring with Mike on "]::after{
  content:""; position:absolute; top:50%; left:50%;
  width:32px; height:44px; transform:translate(-50%,-50%);
}