/* Promotion bar, the "one of one" line, and the offer countdown.
   Loaded on every page from the base layout. */

/* ---- Promotion bar ------------------------------------------------------- */

:root {
  --promo-h: 40px;
}

.promo-bar {
  position: relative;
  z-index: 200;
  display: flex;
  align-items: center;
  height: var(--promo-h);
  background: var(--rnx-ink);
  color: var(--rnx-white);
}

/* The header sits at the top of the document, so it has to be pushed down past
   the bar. Once it goes sticky it is fixed to the viewport and the bar has
   scrolled away, so the offset is dropped again. */
body.has-promo .site-header:not(.is-stuck) {
  top: var(--promo-h);
}

/* The hero fills the screen. Without this the bar adds its own height on top
   and the homepage gains a scrollbar it did not have. */
body.has-promo .hero-slide {
  min-height: calc(100vh - var(--promo-h));
  min-height: calc(100svh - var(--promo-h));
}

.promo-bar__viewport {
  flex: 1;
  overflow: hidden;
  /* When motion is off the visitor scrolls it by hand instead. */
  overflow-x: auto;
  scrollbar-width: none;
}

.promo-bar__viewport::-webkit-scrollbar {
  display: none;
}

.promo-bar__track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
}

/* Centred while it fits; once it is long enough to scroll, it starts at the
   left edge so the first item is not already half gone. */
.promo-bar__track:not(.is-scrolling) {
  justify-content: center;
}

.promo-bar__item {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* An amber diamond between items, never before the first one. */
.promo-bar__item + .promo-bar__item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 18px;
  transform: rotate(45deg);
  background: var(--rnx-accent);
  vertical-align: 2px;
}

.promo-bar__track.is-scrolling {
  animation: promo-scroll var(--promo-dur, 40s) linear infinite;
  justify-content: flex-start;
}

/* Readable on purpose: stop the line so it can actually be read, and stop it
   for keyboard users too, not only for a mouse. */
.promo-bar:hover .promo-bar__track.is-scrolling,
.promo-bar:focus-within .promo-bar__track.is-scrolling {
  animation-play-state: paused;
}

/* Exactly two copies of the item list, so -50% lands on a seam. */
@keyframes promo-scroll {
  to {
    transform: translateX(-50%);
  }
}

.promo-bar__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--promo-h);
  height: var(--promo-h);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color var(--rnx-dur) var(--rnx-ease);
}

.promo-bar__close:hover,
.promo-bar__close:focus-visible {
  color: var(--rnx-white);
}

.promo-bar__close:focus-visible {
  outline: 2px solid var(--rnx-accent);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .promo-bar__track.is-scrolling {
    animation: none;
  }
}

/* ---- One of one ---------------------------------------------------------- */

/* Only the top margin: the aside puts everything outside the amber panel in
   a 30px well, and a margin shorthand here would fight it. */
.car-sole {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--rnx-radius-sm);
  background: rgba(245, 183, 84, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rnx-ink-soft);
}

.car-sole strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  color: var(--rnx-accent-ink);
  margin-bottom: 3px;
}

/* ---- Countdown ----------------------------------------------------------- */

.promo-countdown {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(245, 183, 84, 0.45);
  border-radius: var(--rnx-radius-sm);
  background: rgba(245, 183, 84, 0.07);
}

.promo-countdown__offer {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rnx-ink);
}

.promo-countdown__clock {
  display: flex;
  gap: 6px;
  margin: 0;
}

/* The clock carries `hidden` until promo.js has real digits for it. The browser
   default for [hidden] is display:none, but that is a user-agent rule and the
   author rule above outranks it -- without this the four boxes of "--" show
   through. */
.promo-countdown__clock[hidden] {
  display: none;
}

.promo-countdown__unit {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 6px;
  background: var(--rnx-white);
}

.promo-countdown__unit b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--rnx-ink);
  /* Digits change every second; without this the box jitters as they do. */
  font-variant-numeric: tabular-nums;
}

.promo-countdown__unit span {
  font-size: 9px;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  opacity: 0.6;
}

.promo-countdown__ends {
  margin: 9px 0 0;
  font-size: 11px;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  opacity: 0.65;
}

/* ---- Fleet nudge --------------------------------------------------------- */

/* The corner card. Bottom-left, clear of the back-to-top button on the right.
   One card at a time; promo.js swaps them. */
.fleet-nudge {
  position: fixed;
  z-index: 150;
  left: 24px;
  bottom: 24px;
  width: 330px;
  max-width: calc(100vw - 48px);
  border-radius: var(--rnx-radius-card-all);
  background: var(--rnx-white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

/* On a phone it spans the width and sits tight to the bottom edge, out of the
   way of the content rather than floating over the middle of it. It was hidden
   outright here to begin with, which was wrong: most of this traffic is a phone,
   so hiding it there hid it from nearly everyone. */
@media (max-width: 600px) {
  .fleet-nudge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }

  .fleet-nudge__img {
    width: 88px;
  }

  .fleet-nudge__name {
    -webkit-line-clamp: 1;
  }
}

.fleet-nudge__card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  animation: nudge-in var(--rnx-dur-slow) var(--rnx-ease) both;
}

.fleet-nudge__card[hidden] {
  display: none;
}

@keyframes nudge-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.fleet-nudge__img {
  flex: none;
  width: 106px;
  height: auto;
  object-fit: cover;
  align-self: stretch;
  /* Something to look at for the moment between the card appearing and the
     photograph arriving, rather than a white hole beside the text. */
  background: var(--rnx-bg-soft);
}

.fleet-nudge__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 34px 12px 0;
  min-width: 0;
}

.fleet-nudge__flag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  color: var(--rnx-accent-ink);
}

.fleet-nudge__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rnx-ink);
  /* Two lines then ellipsis: "Rolls-Royce Cullinan Black Badge" is long, and a
     card that grows to fit it jumps every time the next one swaps in. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fleet-nudge__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
}

.fleet-nudge__price s {
  opacity: 0.5;
}

.fleet-nudge__price strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--rnx-ink);
}

.fleet-nudge__price em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  opacity: 0.6;
}

.fleet-nudge__card:hover .fleet-nudge__name,
.fleet-nudge__card:focus-visible .fleet-nudge__name {
  color: var(--rnx-accent-ink);
}

.fleet-nudge__card:focus-visible {
  outline: 2px solid var(--rnx-accent);
  outline-offset: -2px;
}

.fleet-nudge__close {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rnx-muted);
  cursor: pointer;
  transition: color var(--rnx-dur) var(--rnx-ease);
}

.fleet-nudge__close:hover,
.fleet-nudge__close:focus-visible {
  color: var(--rnx-ink);
}

.fleet-nudge__close:focus-visible {
  outline: 2px solid var(--rnx-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .fleet-nudge__card {
    animation: none;
  }
}


/* ---- Countdown, band variant -------------------------------------------- */

/* The card version lives in the narrow aside on a car page. On the homepage
   there is a full-width row to fill, so the offer and the clock sit side by
   side instead of stacked. */
.promo-countdown--band {
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-radius: 0;
  background: rgba(245, 183, 84, 0.09);
}

.promo-countdown--band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 32px;
}

.promo-countdown--band .promo-countdown__offer {
  margin: 0;
  font-size: 15px;
  text-align: center;
}

.promo-countdown--band .promo-countdown__clock {
  gap: 8px;
}

.promo-countdown--band .promo-countdown__unit {
  flex: none;
  min-width: 62px;
  padding: 9px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.promo-countdown--band .promo-countdown__unit b {
  font-size: 22px;
}

.promo-countdown--band .promo-countdown__ends {
  margin: 0;
  font-size: 11px;
}

/* The scarcity line on the nudge card. Quiet: it is a fact about the fleet, not
   a second price, and it must not compete with the rate underneath it. */
.fleet-nudge__sole {
  font-size: 10px;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  color: var(--rnx-muted);
}