/* Scooter125 — gallery treatment
   ---------------------------------------------------------------------------
   Adapted from the Rivian style reference in DESIGN.md.

   Loaded AFTER scooter125.css and written entirely as token remapping, so the
   2,000 lines of component CSS underneath are untouched and this can be
   switched off by dequeuing one file. Nothing here changes markup or behaviour.

   Three deliberate departures from the reference, each explained where it
   happens: the accent colour, the typeface, and the density. Rivian is a
   four-product showcase with 80px section gaps and 360px monograms; this is a
   marketplace that has to put 24 listings on a screen and let someone compare
   them. Applied literally the reference would make the site unusable, so the
   monumental end of its scale is kept for marketing surfaces and tightened for
   listing surfaces.
   ------------------------------------------------------------------------ */

:root {
  /* ---- Reference palette, verbatim from DESIGN.md ---- */
  --color-solar-yellow: #ffac00;
  --color-graphite:     #151515;
  --color-pure-black:   #000000;
  --color-concrete:     #e5e7eb;
  --color-ash:          #cfd0d0;
  --color-fog:          #b8b8b8;
  --color-steel:        #616161;
  --color-paper:        #ffffff;
  --color-chalk:        #f2f2f2;
  --color-charcoal:     #212121;

  /* ---- Remap the site's tokens onto it ----
     The accent is the reference's Solar Yellow. The brand SVGs were recoloured
     to match - the lime was hard coded in them, and CSS cannot reach inside an
     SVG, so leaving them would have put a lime logo beside yellow buttons:
     exactly the two-yellow pairing the reference forbids. Originals are in
     assets/brand/_hivis-originals/. */
  --sc-hivis:     var(--color-solar-yellow);

  /* Solar Yellow darkened until it passes as text on Paper: 4.61:1 against
     1.88:1 for the fill value. Same hue, weighted for reading rather than for
     filling. Reach for this any time the accent has to be a text colour on a
     light surface; the fill value stays --color-solar-yellow. */
  /* The base sheet references --sc-accent in nine rules - the footer column
     headings, the live pill, several badges - and never defines it, so every
     one of them was falling through to a hard-coded #d8ff3e. That is not even
     the old brand lime (#D9FA3C); it is a third colour that was never in any
     palette. Defining the token fixes all nine at once, which is the right
     size of fix for a token that was only ever missing. */
  --sc-accent: var(--color-solar-yellow);

  --color-solar-text: #9E6B00;

  /* Kadence's .content-container, which every non-bleeding section sits inside.
     Anything that breaks out of the column has to come back to these numbers. */
  --sc-container-max: 1290px;
  --sc-container-gutter: 24px;
  --sc-ink:       var(--color-graphite);
  --sc-ink-60:    var(--color-steel);
  --sc-ink-30:    var(--color-fog);
  --sc-line:      var(--color-concrete);
  --sc-paper:     var(--color-paper);
  --sc-white:     var(--color-paper);
  --sc-surface:   var(--color-paper);
  --sc-surface-2: var(--color-chalk);

  /* Elevation by surface shift, not shadow. The reference is explicit that
     shadows are not how this system shows depth. */
  --sc-shadow: none;

  /* ---- Control typology ----
     The reference defines itself by two radii: 40px on actions, fully round on
     nav and chips. That contrast is the system's signature, so it is adopted
     whole. The plate radii survive on the plate device itself further down -
     that is the logo, not a button. */
  --sc-r-btn:    40px;
  --sc-r-btn-lg: 40px;
  --sc-r-chip:   9999px;
  --sc-r-badge:  9999px;
  --sc-r-input:  4px;
  --sc-r-card:   20px;
  --sc-radius:   20px;

  --sc-section-gap: 80px;
  --sc-card-pad:    24px;
}

/* ---- Type -----------------------------------------------------------------
   Adventure and Liga are Rivian's proprietary faces and cannot be licensed for
   this. DESIGN.md offers Inter or Neue Haas Grotesk as substitutes; Archivo is
   already self-hosted here, is a grotesque with the squared terminals the brief
   asks for, and adds no third-party request or extra page weight. Kept.

   What is adopted is the tracking discipline, which is most of what makes the
   reference look like itself: negative letter-spacing that tightens as size
   grows. */
h1, .sc-hero h1        { letter-spacing: -0.031em; line-height: 1.14; }
h2                     { letter-spacing: -0.025em; line-height: 1.2; }
h3                     { letter-spacing: -0.020em; }
.sc-card__title,
.sc-tile__name         { letter-spacing: -0.01em; }
body                   { letter-spacing: -0.14px; }

/* ---- Surfaces -------------------------------------------------------------
   Alternate white and chalk to give a long page rhythm, which is the reference's
   substitute for the section borders it refuses to draw. */
body { background: var(--color-paper); }

.sc-section:nth-of-type(even) {
  background: var(--color-chalk);

  /* Full bleed, then the content pulled back onto the same column every other
     section sits on. The inset MUST be derived from the real container or the
     alternating sections do not line up: .content-container is 1290px wide with
     a 24px gutter, so the column is 1242px and its edge is 50vw - 621px.
     A hard-coded 700px here put three sections 79px out of alignment. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(
    var(--sc-container-gutter),
    calc(50vw - (var(--sc-container-max) / 2) + var(--sc-container-gutter))
  );
  padding-block: var(--sc-section-gap);
}

/* ---- Flat, hairline-defined components ---- */
.sc-card,
.sc-panel,
.sc-tier,
.sc-boost,
.sc-special,
.sc-dealer,
.sc-prodealer,
.sc-stats__item,
.sc-ways__item {
  box-shadow: none;
  border: 1px solid var(--color-concrete);
  background: var(--color-paper);
}

.sc-card:hover,
.sc-prodealer:hover {
  box-shadow: none;
  border-color: var(--color-ash);
  transform: none;
}

/* ---- Buttons: pill, per the reference's two-radius rule ---- */
.sc-btn {
  border-radius: 40px;
  padding: 12px 24px;
  font-weight: 500;
  letter-spacing: normal;
  box-shadow: none;
}

/* One chromatic action per screen. */
.sc-btn--wa {
  background: var(--sc-hivis);
  color: var(--color-graphite);
  border: none;
}

/* The dark counterpart, for sections where the accent is already spent. */
.sc-btn--ink {
  background: var(--color-graphite);
  color: var(--color-paper);
  border: none;
}

.sc-btn--ghost {
  background: transparent;
  border: 1px solid var(--color-graphite);
  color: var(--color-graphite);
}

/* ---- Chips and badges: fully round ---- */
.sc-card__featured,
.sc-special__flag,
.sc-pill,
.sc-tier__flag,
.sc-special-note__flag {
  border-radius: 9999px;
  padding: 6px 14px;
  font-weight: 500;
}

/* ---- Navigation: white, hairline, not a dark bar ---- */
.site-header,
.site-header-wrap,
#masthead {
  background: var(--color-paper) !important;
  border-bottom: 1px solid var(--color-concrete);
  box-shadow: none;
}

.site-header .header-navigation a,
#masthead a { color: var(--color-graphite); }

/* Nav links take the fully round form, the counterpoint to the 40px actions. */
.main-navigation .primary-menu-container > ul > li > a {
  border-radius: 9999px;
  padding: 8px 16px;
}

/* ---- Imagery: architectural, not soft. 20px is the reference's ceiling ---- */
.sc-card__media,
.sc-gal__hero,
.sc-gal__tile,
.sc-tile,
.sc-brandhero,
.sc-map__frame,
.sc-special__banner { border-radius: 20px; }

/* ---- The plate keeps its own geometry -------------------------------------
   The 125 plate is the logo device from the brand guide, where the radius is
   16.5% of the plate's height. It is not a button and does not become a pill. */
.sc-tile__plate,
.sc-logo,
.custom-logo { border-radius: 0; }

/* ---- Density -------------------------------------------------------------
   The reference's 80px section gap is right for marketing surfaces and wrong
   for a results grid, where it would push the second row of listings off the
   screen. Marketing keeps the full measure; results tighten. */
.sc-grid,
.sc-dealers,
.sc-specials--index { gap: 24px; }

.sc-grid { margin-block: 32px; }

.sc-head { margin-bottom: 32px; }

/* Footer stays dark. The reference's own peers ground the page this way, and
   an all-white page with no floor reads as unfinished. */
.sc-footcols { background: var(--color-graphite); }

/* ---- Hero ----------------------------------------------------------------
   The base hero is a solid ink slab. In a light gallery system that reads as a
   leftover from the previous scheme - the reference's heroes are either
   full-bleed photography or generous white space carrying very large type, and
   never a flat dark box.

   No hero photograph exists here, so this takes the second route: chalk canvas,
   the type scaled up to do the work, search sitting on it as a plain object.
   Give it a background image later and this still holds - only the text colours
   would need inverting. */
.sc-hero {
  background: var(--color-chalk);
  color: var(--color-graphite);
  padding: 80px 0 72px;
}

.sc-hero h1 {
  color: var(--color-graphite);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -0.036em;
  line-height: 1.09;
}

.sc-hero__sub {
  color: var(--color-steel);
  font-size: 1.05rem;
  max-width: 52ch;
}

.sc-hero__search input {
  background: var(--color-paper);
  border: 1px solid var(--color-concrete);
  border-radius: 40px;
  padding: 14px 20px;
}

/* Hero quick-filter chips.
   The container is .sc-chips and the anchors inside carry no class of their
   own, so they have to be reached structurally. Left alone they inherit the
   old dark-hero treatment - white text on 10% white - which over chalk is
   white on near-white and effectively invisible. */
.sc-hero .sc-chips a {
  background: var(--color-paper);
  border: 1px solid var(--color-concrete);
  color: var(--color-graphite);
  border-radius: 9999px;
}

.sc-hero .sc-chips a:hover,
.sc-hero .sc-chips a:focus-visible {
  background: var(--color-concrete);
  border-color: var(--color-ash);
  color: var(--color-graphite);
}

/* Secondary hero link: Fog on chalk is 1.7:1. Steel clears AA. */
.sc-hero__link {
  color: var(--color-steel);
  border-color: var(--color-steel);
}

.sc-hero__link:hover { color: var(--color-graphite); }

/* The solid hero button is white-filled by default, which on chalk is a card,
   not a button. Give it the dark treatment the reference uses when the accent
   is already spent elsewhere on the screen - here, by the search button. */
.sc-hero .sc-btn--solid {
  background: var(--color-graphite);
  color: var(--color-paper);
  border-color: var(--color-graphite);
}

.sc-hero .sc-btn--ghost {
  border-color: var(--color-graphite);
  color: var(--color-graphite);
}

/* ---- Category tiles -------------------------------------------------------
   Image-led, label underneath in graphite - the reference is explicit that
   photography should not be buried under a dark scrim, and a scrim is the only
   reason these were ink-backed. The count keeps the accent, which is the one
   place a small chromatic note is useful for scanning. */
.sc-tile {
  background: var(--color-paper);
  border: 1px solid var(--color-concrete);

  /* The tile has to grow to fit the photo AND the label under it. Left as the
     base rule's fixed 520/340 box it keeps the photo's height and clips the
     label, which is what happened: overflow is hidden, so the name rendered one
     pixel past the bottom edge and vanished. */
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}

.sc-tile__img {
  /* The base rule pins this absolute and stretches it to height:100%. Once the
     body is in normal flow that is circular - the tile sizes to the photo, the
     photo sizes to the tile - and the browser resolves it by giving the photo
     the whole tile. It has to be a flow element with its own ratio. */
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 340;
  border-radius: 0;
}

.sc-tile__body {
  position: static;
  display: block;
  padding: 16px;
  background: none;
}

.sc-tile__name  { color: var(--color-graphite); font-weight: 600; }
.sc-tile__count { color: var(--color-steel); }

.sc-tile::after { display: none; }   /* the scrim */

/* Three across, not five. Five 210px tiles across a 1400px container leaves a
   single orphan on the second row; six categories want 3 + 3. */
.sc-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }


/* ---- Accent as text -------------------------------------------------------
   Solar Yellow is a fill colour, not a text colour. On the white nav it lands
   at about 1.9:1, so the hover state that used it has to change: on light
   surfaces the link darkens and underlines instead. On the dark footer the
   accent still reads (9.4:1) and is left alone. */
#masthead a:hover,
.site-header a:hover {
  color: var(--color-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The tile count sat in the accent against a dark scrim. The tiles are light
   now, so it takes the secondary text colour instead. */
.sc-tile__count { color: var(--color-steel); }


/* ---- Mobile: input zoom ---------------------------------------------------
   iOS Safari zooms the whole page when a focused input's text is under 16px,
   and it does not zoom back out. Every filter, the alert form and the finance
   calculator were between 14.4px and 15.2px, so tapping any of them threw the
   layout sideways mid-task. 16px is the threshold, not a preference. */
@media (max-width: 767px) {
  /* !important because this is a platform floor, not a preference. Half a
     dozen components set their own 0.9-0.95rem at two-class specificity, and
     naming each one here means the next component added quietly reintroduces
     the bug. Below 16px iOS zooms and does not zoom back. */
  input, select, textarea { font-size: 16px !important; }
}

/* ---- Mobile: tap targets --------------------------------------------------
   The menu button was 37x31 and the POPIA consent box 18x18. The consent box
   is the one that matters: it gates every enquiry, it cannot be pre-ticked,
   and a box that small on a phone is a lead lost to a mis-tap. The visual box
   stays its designed size; the touch area is what grows. */
@media (max-width: 767px) {
  .menu-toggle-open, .menu-toggle, button[class*="menu-toggle"] {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .sc-form input[type="checkbox"],
  input[name="sc125_consent"] {
    width: 24px; height: 24px;
    flex: 0 0 24px;
    position: relative;
  }

  /* The label is the larger target; the box just has to be reachable. */
  .sc-form label:has(input[type="checkbox"]) { min-height: 44px; display: flex; align-items: center; gap: .6rem; }

  .sc-chips a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ---- 404 ------------------------------------------------------------------
   The reference for this was a full-bleed magenta panel with white line art.
   The colour is the one thing that does not carry over: this system has a
   single chromatic note and spending it on a whole background would make the
   error page the loudest surface on the site. So the panel is Graphite and the
   accent draws the bike, which keeps Solar Yellow doing what it does
   everywhere else - marking the one thing worth looking at. */
.sc-404 {
  background: var(--color-graphite);
  color: var(--color-paper);
  padding: clamp(48px, 8vw, 96px) 24px;
}

.sc-404__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.sc-404__art img {
  width: 100%;
  height: auto;
  display: block;
  /* No radius: this is line art on transparency, not a photograph in a frame.
     Rounding the corners of a transparent PNG clips nothing and means nothing. */
}

.sc-404__code {
  font-size: clamp(56px, 9vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: var(--color-paper);
}

.sc-404__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--color-paper);
}

.sc-404__lede {
  font-size: 17px;
  line-height: 1.6;
  color: #b4b4b4;          /* 8.9:1 on Graphite */
  margin: 0 0 28px;
  max-width: 46ch;
}

/* The search reuses .sc-hero__search wholesale - same proportions, same accent
   button - so it only needs the dark-panel colours. Rolling a bespoke one is
   what broke it first time: .sc-btn is width:100%, which ate the input. */
.sc-404__search { margin: 0 0 22px; max-width: 460px; }

.sc-404__search input {
  border: 1px solid #3a3a3a;
  background: #1f1f1f;
  color: var(--color-paper);
}

.sc-404__search input::placeholder { color: #8a8a8a; }

.sc-404__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }

/* sc-btn is width:100% by design, which is right in a card and wrong in a row. */
.sc-404__actions .sc-btn { width: auto; }

.sc-404__home { color: var(--color-paper); text-decoration: underline; text-underline-offset: 3px; }

.sc-404__or {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a8a;
  margin: 0 0 12px;
}

.sc-404__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.sc-404__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #3a3a3a;
  border-radius: var(--sc-r-chip);
  color: var(--color-paper);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.sc-404__chips a:hover { border-color: var(--color-solar-yellow); color: var(--color-solar-yellow); }

@media (max-width: 860px) {
  .sc-404__inner { grid-template-columns: 1fr; }
  /* Copy first on a phone: the illustration is decoration, the way out is not. */
  .sc-404__art { order: 2; max-width: 420px; margin: 8px auto 0; }
  .sc-404__copy { order: 1; }
  .sc-404__search { max-width: none; }
}

@media (max-width: 520px) {
  .sc-404__search { flex-direction: column; }
  .sc-404__search button { width: 100%; }
}


/* ---- Kadence page header band ---------------------------------------------
   Kadence fills this with #EDF2F7, which is a BLUE grey. The whole palette is
   strictly neutral - Graphite, Steel, Concrete, Chalk, Paper - so a blue tint
   is the one colour in the system that cannot be there, and it sits at the top
   of every page that has no hero of its own: sell, advertise, pricing, and all
   three legal pages. Chalk is the equivalent tone with the blue taken out. */
.entry-hero-container-inner { background-color: var(--color-chalk); }

/* Kadence centres this title; everything else on the site is left-aligned to
   the same 24px gutter, so a centred H1 reads as a different website. */
/* .entry-header is a flex container with justify-content:center, so text-align
   does nothing here - the child has to be moved, not the text inside it. */
.entry-hero .entry-header {
  /* column direction swaps the axes: justify-content is now the vertical one,
     align-items the horizontal. Centred down, flush left across. */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* 200px of band for one line of text is Kadence's default, not a decision.
   Two thirds of that still reads as a header and gives the page back its
   first screen. */
.entry-hero-container-inner { min-height: 132px; }
.entry-hero .entry-header { min-height: 132px; }

.entry-hero .entry-header,
.entry-hero .entry-title { text-align: left; }

.entry-hero-container-inner .entry-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-graphite);
}


/* ---- Listing price --------------------------------------------------------
   The accent, in its text-safe weight. The fill value reads at 1.88:1 on this
   white panel, which is below the WCAG large-text minimum and would have made
   the most important number on the page the hardest one to read. */
.sc-price,
.sc-card__price { color: var(--color-solar-text); }