/* =========================================================
   INFINITI brand identity — applied only to inventory pages
   for INFINITI vehicles (.page-new, .page-cpo).

   Tokens, type, and CTA treatment follow the INFINITI digital
   guideline summarised in:
     rbm-infiniti-of-north-atlanta-assets/brand-guidelines/
     infiniti-brand-research.md

   The rest of the site (landing page and inventory-used)
   keeps the cream/persimmon "Austin on the Lot" identity.
   ========================================================= */


/* ---------- 1. INFINITI Brand typeface ---------- */

@font-face {
  font-family: "INFINITI Brand";
  src: url("assets/infiniti/fonts/InfinitiBrand-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "INFINITI Brand";
  src: url("assets/infiniti/fonts/InfinitiBrand-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "INFINITI Brand";
  src: url("assets/infiniti/fonts/InfinitiBrand-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. INFINITI palette + token overrides ---------- */

.page-new, .page-cpo {
  /* Primary */
  --inf-blue:        #020B24;
  --inf-gold:        #B0A591;
  --inf-white:       #FFFFFF;

  /* Secondary / supporting */
  --inf-gold-20:     #EFEDE9;
  --inf-gold-40:     #DFDBD3;
  --inf-blue-soft:   #6E8AA8;

  /* Functional grays */
  --inf-gray-dark:   #646464;
  --inf-gray:        #B4B4B4;
  --inf-gray-light:  #E7E7E7;

  /* Map onto the design-system variables already in styles.css.
     Background is INFINITI Gold 20% (the brand's primary cream),
     surfaces are pure white. Blue + gold are reserved for accents. */
  --bg:        var(--inf-gold-20);
  --paper:     var(--inf-gold-40);
  --paper-2:   var(--inf-white);
  --line:      var(--inf-gray-light);
  --line-2:    var(--inf-gray);

  --ink:       var(--inf-blue);
  --ink-soft:  #1a2440;
  --muted:     var(--inf-gray-dark);
  --dim:       var(--inf-gray);

  --accent:      var(--inf-blue);
  --accent-2:    #050f30;
  --accent-soft: rgba(2, 11, 36, .08);

  --page-accent: var(--inf-blue);
}


/* ---------- 3. Body type — INFINITI Brand Regular ---------- */

.page-new body,
.page-cpo body {
  background: var(--inf-gold-20);
  color: var(--inf-blue);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* Austin's personal wordmark stays in Anybody (his identity, not INFINITI's),
   but the separator picks up INFINITI Gold so the topbar reads cohesively. */
.page-new .mark__sig, .page-cpo .mark__sig,
.page-new .mark__plus, .page-cpo .mark__plus {
  font-family: "Anybody", ui-sans-serif, system-ui, sans-serif;
}
.page-new .mark__plus,
.page-cpo .mark__plus {
  color: var(--inf-gold);
}
.page-new .mark__sig,
.page-cpo .mark__sig {
  color: var(--inf-blue);
}
.page-new .mark__lot,
.page-cpo .mark__lot {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--inf-gray-dark);
  letter-spacing: .18em;
}


/* ---------- 4. Topbar handle pill ---------- */

.page-new .handle-pill,
.page-cpo .handle-pill {
  border-color: var(--inf-blue);
  background: var(--inf-white);
  color: var(--inf-blue);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}
.page-new .handle-pill:hover,
.page-cpo .handle-pill:hover {
  background: var(--inf-blue);
  color: var(--inf-white);
}


/* ---------- 5. RBM brand strip (sits below the topbar) ---------- */

.rbm-strip {
  max-width: var(--max);
  margin: clamp(10px, 1.6vh, 16px) auto 0;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rbm-strip__label {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inf-gray-dark);
  white-space: nowrap;
}
.rbm-strip__logo {
  height: 22px;
  width: auto;
  display: block;
}
.rbm-strip__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    var(--inf-gold) 0%,
    var(--inf-gold) 60%,
    transparent 100%);
  min-width: 24px;
}


/* ---------- 6. Breadcrumbs ---------- */

.page-new .crumbs,
.page-cpo .crumbs {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--inf-gray-dark);
}
.page-new .crumbs a,
.page-cpo .crumbs a {
  color: var(--inf-gray-dark);
}
.page-new .crumbs a:hover,
.page-cpo .crumbs a:hover {
  color: var(--inf-blue);
}
.page-new .crumbs__here,
.page-cpo .crumbs__here {
  color: var(--inf-blue);
}


/* ---------- 7. Hero band (inv__head) ---------- */

.page-new .inv__head,
.page-cpo .inv__head {
  border-bottom: 0;
  border-radius: 14px;
  padding: clamp(28px, 4vh, 48px);
  position: relative;
  overflow: hidden;
}

.page-new .inv__h1,
.page-cpo .inv__h1 {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: -.005em;
  font-variation-settings: normal;
  text-transform: none;
}
.page-new .inv__h1 em,
.page-cpo .inv__h1 em {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.page-new .inv__tag,
.page-cpo .inv__tag {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .2em;
}

.page-new .inv__blurb,
.page-cpo .inv__blurb {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}
.page-new .inv__meta,
.page-cpo .inv__meta {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .14em;
}

/* --- New page: dark INFINITI Blue hero band with gold horizon line --- */
.page-new .inv__head {
  background: var(--inf-blue);
  color: var(--inf-white);
}
.page-new .inv__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--inf-gold) 25%,
    var(--inf-gold) 75%,
    transparent 100%);
}
.page-new .inv__h1        { color: var(--inf-white); }
.page-new .inv__h1 em     { color: var(--inf-gold); }
.page-new .inv__blurb     { color: var(--inf-gold-40); }
.page-new .inv__meta      { color: var(--inf-gold-40); }
.page-new .inv__meta b    { color: var(--inf-white); }
.page-new .inv__meta .pulse { background: var(--inf-gold); }
.page-new .inv__tag {
  color: var(--inf-gold);
  border-color: var(--inf-gold);
  background: rgba(176, 165, 145, .14);
}

/* --- CPO page: same dark INFINITI Blue hero band as .page-new --- */
.page-cpo .inv__head {
  background: var(--inf-blue);
  color: var(--inf-white);
}
.page-cpo .inv__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--inf-gold) 25%,
    var(--inf-gold) 75%,
    transparent 100%);
}
.page-cpo .inv__h1        { color: var(--inf-white); }
.page-cpo .inv__h1 em     { color: var(--inf-gold); }
.page-cpo .inv__blurb     { color: var(--inf-gold-40); }
.page-cpo .inv__meta      { color: var(--inf-gold-40); }
.page-cpo .inv__meta b    { color: var(--inf-white); }
.page-cpo .inv__meta .pulse { background: var(--inf-gold); }
.page-cpo .inv__tag {
  color: var(--inf-gold);
  border-color: var(--inf-gold);
  background: rgba(176, 165, 145, .14);
}


/* ---------- 8. Filter chips + sort ---------- */

.page-new .chip, .page-cpo .chip {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  background: var(--inf-white);
  border-color: var(--inf-gray-light);
  color: var(--inf-blue);
}
.page-new .chip:hover, .page-cpo .chip:hover {
  border-color: var(--inf-blue);
}
.page-new .chip--active, .page-cpo .chip--active {
  background: var(--inf-blue);
  border-color: var(--inf-blue);
  color: var(--inf-white);
}
.page-new .chip--clear, .page-cpo .chip--clear {
  color: var(--inf-blue);
  background: transparent;
  border-color: transparent;
}
.page-new .chip--clear:hover, .page-cpo .chip--clear:hover {
  background: rgba(2, 11, 36, .06);
}

.page-new .sort, .page-cpo .sort {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  color: var(--inf-blue);
}
.page-new .sort__label, .page-cpo .sort__label {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--inf-gray-dark);
}
.page-new .sort__select, .page-cpo .sort__select {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  background-color: var(--inf-white);
  border-color: var(--inf-gray-light);
  color: var(--inf-blue);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--inf-blue) 50%),
    linear-gradient(-45deg, transparent 50%, var(--inf-blue) 50%);
}


/* ---------- 9. Vehicle cards ---------- */

.page-new .veh, .page-cpo .veh {
  background: var(--inf-white);
  border-color: var(--inf-gray-light);
}
.page-new .veh:hover, .page-cpo .veh:hover {
  border-color: var(--inf-blue);
  box-shadow: 0 18px 40px -22px rgba(2, 11, 36, .25);
}

.page-new .veh__img,
.page-cpo .veh__img {
  background:
    repeating-linear-gradient(
      135deg,
      var(--inf-gold-20) 0px,
      var(--inf-gold-20) 8px,
      var(--inf-gold-40) 8px,
      var(--inf-gold-40) 16px
    );
  border-bottom-color: var(--inf-gray-light);
  color: var(--inf-gray-dark);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}
.page-new .veh__img::after,
.page-cpo .veh__img::after {
  background: var(--inf-white);
  border-color: var(--inf-gray);
  color: var(--inf-gray-dark);
}

/* Badges: NEW uses solid gold; CERTIFIED uses solid blue.
   Both maintain WCAG contrast against their fills. */
.page-new .veh__badge {
  background: var(--inf-gold);
  border-color: var(--inf-gold);
  color: var(--inf-blue);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.page-cpo .veh__badge {
  background: var(--inf-blue);
  border-color: var(--inf-blue);
  color: var(--inf-white);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.page-new .veh__stock,
.page-cpo .veh__stock {
  background: var(--inf-white);
  border-color: var(--inf-gray-light);
  color: var(--inf-gray-dark);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}

.page-new .veh__year, .page-cpo .veh__year {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--inf-gray-dark);
}
.page-new .veh__title, .page-cpo .veh__title {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: normal;
  color: var(--inf-blue);
}
.page-new .veh__trim, .page-cpo .veh__trim {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  color: var(--inf-gray-dark);
}

.page-new .veh__price-num, .page-cpo .veh__price-num {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: normal;
  color: var(--inf-blue);
}
.page-new .veh__price-tag, .page-cpo .veh__price-tag {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--inf-gray-dark);
}

.page-new .veh__specs, .page-cpo .veh__specs {
  border-top-color: var(--inf-gray-light);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
}
.page-new .veh__specs li span:first-child,
.page-cpo .veh__specs li span:first-child {
  color: var(--inf-gray-dark);
}
.page-new .veh__specs li span:last-child,
.page-cpo .veh__specs li span:last-child {
  color: var(--inf-blue);
}

.page-new .veh__cta, .page-cpo .veh__cta {
  background: var(--inf-gold-20);
  border-top-color: var(--inf-gray-light);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}
.page-new .veh__cta a, .page-cpo .veh__cta a {
  color: var(--inf-blue);
  font-weight: 700;
}
.page-new .veh__cta a:hover, .page-cpo .veh__cta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-new .veh__cta-sec, .page-cpo .veh__cta-sec {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  color: var(--inf-gray-dark);
}


/* ---------- 10. Feed-note + load-more ---------- */

.page-new .feed-note, .page-cpo .feed-note {
  background: var(--inf-white);
  border-color: var(--inf-gold);
}
.page-new .feed-note__h, .page-cpo .feed-note__h {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--inf-blue);
}
.page-new .feed-note p, .page-cpo .feed-note p {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  color: var(--inf-gray-dark);
}

.page-new .btn--ghost, .page-cpo .btn--ghost {
  background: var(--inf-white);
  border-color: var(--inf-gray-light);
  color: var(--inf-blue);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.page-new .btn--ghost:hover, .page-cpo .btn--ghost:hover {
  border-color: var(--inf-blue);
}


/* ---------- 11. Sticky float CTA ---------- */

.page-new .float-cta, .page-cpo .float-cta {
  background: var(--inf-blue);
  color: var(--inf-white);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
  box-shadow: 0 12px 30px -10px rgba(2, 11, 36, .45);
}
.page-new .float-cta:hover, .page-cpo .float-cta:hover {
  background: #050f30;
}
.page-new .float-cta__dot, .page-cpo .float-cta__dot {
  background: var(--inf-gold);
}
.page-new .float-cta:hover .float-cta__dot,
.page-cpo .float-cta:hover .float-cta__dot {
  background: var(--inf-white);
}


/* ---------- 12. Skip link + focus ring ---------- */

.page-new .skip, .page-cpo .skip {
  background: var(--inf-blue);
  color: var(--inf-white);
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
}
.page-new *:focus-visible, .page-cpo *:focus-visible {
  outline-color: var(--inf-blue);
}
.page-new ::selection, .page-cpo ::selection {
  background: var(--inf-blue);
  color: var(--inf-white);
}


/* ---------- 13. Footer ---------- */

.page-new .foot, .page-cpo .foot {
  border-top-color: var(--inf-gray-light);
}
.page-new .foot__inner, .page-cpo .foot__inner {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  color: var(--inf-gray-dark);
}
.page-new .foot__lead p, .page-cpo .foot__lead p {
  font-family: "INFINITI Brand", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--inf-blue);
}
.page-new .foot__links a, .page-cpo .foot__links a {
  color: var(--inf-blue);
}
.page-new .foot__links a:hover, .page-cpo .foot__links a:hover {
  color: var(--inf-gold);
  border-bottom-color: var(--inf-gold);
}
.page-new .foot__fine, .page-cpo .foot__fine {
  color: var(--inf-gray);
}