/* RG 2026 brand refresh — car header 2A + campervan header 2A, see-through search box, banana Search button (src/brand-2026.ts).
   Served at /_rg2026/header.css. Scoped to the hero (.prism-search-hero); the results pages never link it.

   Carla's picks (2026-11-03, docs rg-car-header-mocks 2A + rg-campers-header-mocks 2A; the CSS of the mock drivers
   hdrmock.mjs / campmock.mjs on branch rg-logo-header-mocks, photo 2 layout A, made a plain stylesheet):
   - car hero: the coast road with the white car; campervan hero: the river bridge with the motorhome. Today's rounded
     band, a light navy wash over the photo, the title and box on see-through glass, white title + standfirst.
   - the campervan band runs taller on computers so the motorhome and bridge show under the search box.
   - the Search button: banana fill, dark ink, no glow — the hero's form (its submit, the phones' dates button and the
     docked strip's button, the same form).
   Phones keep today's layout: only the photo strip and the button change.

   The `:root` lead on each rule outranks the page's own hero rules (publication.css, hero-assets.css) whatever the
   stylesheet order. The glass sits on the panel's ::before, not the panel: a backdrop-filter on the panel would make it
   the containing block of the docked strip (position: fixed, inside the form) and pin that strip to the panel. */

/* The refresh's colours live in packages/tokens (road-genius-2026.css: --rg26-cta, the glass, the chip); only the
   names that point at other tokens stay here. */
:root {
  --rg26-cta-ink: var(--rg26-navy); /* sailor navy (tokens road-genius-2026.css) */
  --rg26-chip-value-ink: var(--rg26-navy); /* sailor navy (tokens road-genius-2026.css) */
}

/* The campervan search box in the car search's blues (Carla 2026-11-04: "mobile still shows an old purple heading and
   colours"): road-genius-campers.css gives it Camper Champ's old purples — #1b1472 for the phones' heading, the labels
   and the field chrome, #5b4ccc for the accents, #eeeafc for the active field — re-pointed here to the roles the car
   search reads (publication.css). html:root outranks the tokens' :root. */
html:root {
  --color-campers-ink: var(--color-primary-strong);
  --color-campers-ink-hover: var(--color-primary-strong);
  --color-campers-accent: var(--color-primary-strong);
  --color-campers-active: var(--color-search-active);
}

/* The photos (brand/rg-2026/hero-sources.json): 2560w on computers, the 1200w cut on phones — the same switch point as
   hero-assets.css. */
:root .prism-publication .prism-search-hero--mhr-cars {
  --search-hero-photo: url('/_rg2026/hero/rg26-cars-stone-wall.873b2748.webp');
}

:root .prism-publication .prism-search-hero--mhr-campers {
  --search-hero-photo: url('/_rg2026/hero/rg26-campers-blue-sky.04032bc6.webp');
}

@media (max-width: 749px) {
  :root .prism-publication .prism-search-hero--mhr-cars {
    --search-hero-photo: url('/_rg2026/hero/rg26-cars-stone-wall-mobile.22c9e074.webp');
  }

  :root .prism-publication .prism-search-hero--mhr-campers {
    --search-hero-photo: url('/_rg2026/hero/rg26-campers-blue-sky-mobile.dae8474d.webp');
  }

  /* The phone strip's crop: the car at the right on the bend; the motorhome close up under the peaks (the phone file is
     the photo's motorhome-and-peaks cut, Carla 2026-11-04: "zoom a bit more on the camper there is too much lake"). */
  :root .prism-publication .prism-search-hero--mhr-cars .prism-search-hero__strip {
    background-position: 62% 78%;
  }

  :root .prism-publication .prism-search-hero--mhr-campers .prism-search-hero__strip {
    background-position: 50% 40%;
  }
}

/* ── Computers (≥750): the band, the wash and the glass box ── */
@media (min-width: 750px) {
  /* The photo under a light navy wash (one layer over it, clipped to the band's rounded corners). */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-hero__band {
    background:
      linear-gradient(var(--rg26-photo-wash), var(--rg26-photo-wash)),
      var(--search-hero-photo) 50% 78% / cover no-repeat;
  }

  /* The campervan band: the car band's height, the motorhome in the strip under the box (Carla 2026-11-04: "the header
     image for the campers is larger then the cars they need to look the same reduce the campers" + "crop/zoom the image
     to show the camper however needed"). It was 194px taller at the bottom; now its bottom padding only makes up the
     campervan box being shorter than the car's (58px at the 1092px box, ~50px on tablets — min(58px, 40px + 1.25vw)
     tracks it within 2px), so both bands stand the same height at every width.
     The photo (Image Studio's golden-peaks recomposition, Carla's pick "1" on docs rg-hero-photo-mocks 2026-11-04, its
     top-left sun toned to blue sky;
     aspect 2:1, the motorhome's roof on row 67.3%) hangs so the roof sits 8px under the box's bottom edge, with the
     peaks behind and above it and the river behind the bridge. At least 1120px wide, so it still reaches the band's
     top on narrow bands (their sides crop instead). */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-hero__band {
    --rg26-camp-pb: calc(clamp(40px, 5vw, 76px) + min(58px, 40px + 1.25vw));
    --rg26-camp-photo-w: max(var(--hero-bleed), 1120px);
    padding-bottom: var(--rg26-camp-pb);
    background:
      linear-gradient(var(--rg26-photo-wash), var(--rg26-photo-wash)),
      var(--search-hero-photo) left 10% bottom calc(var(--rg26-camp-pb) - 8px - 0.327 * var(--rg26-camp-photo-w) / 2) /
        var(--rg26-camp-photo-w) auto no-repeat;
  }

  /* The see-through box: an edge and a soft shadow on the panel, the frosted glass on its ::before, the contents lifted
     above the glass (positioned, no z-index — so no new stacking layer: the docked strip keeps its own). */
  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel {
    position: relative;
    border: 1px solid var(--rg26-glass-edge);
    background: none;
    box-shadow: var(--rg26-glass-shadow);
  }

  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rg26-glass);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    pointer-events: none;
  }

  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel > * {
    position: relative;
  }

  /* White title + standfirst on the glass, with a soft shadow (the campervan ones are white already). */
  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel :is(h1, .prism-search-hero__headline, .prism-search-hero__standfirst) {
    color: var(--rg26-title-ink);
    text-shadow: var(--rg26-title-shadow);
  }

  /* The campervan driver chip: today it is white-on-indigo for the dark box; on the light glass it takes the car page's
     look. */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-form__driver > summary {
    border: 1px solid var(--rg26-chip-edge);
    background: var(--rg26-chip-bg);
    box-shadow: var(--rg26-chip-shadow);
    color: var(--rg26-chip-ink);
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-form__driver > summary .prism-search-form__driver-title {
    color: var(--rg26-chip-ink);
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-form__driver > summary span:not(.prism-search-form__driver-title) {
    color: var(--rg26-chip-value-ink);
  }
}

/* ── The banana Search button, every width: the submit, the phones' dates button, the docked strip's button ── */
:root .prism-publication :is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) :is(.prism-search-form__submit, .prism-search-form__advance, .prism-search-form__dock-cta) {
  background: var(--rg26-cta);
  color: var(--rg26-cta-ink);
  box-shadow: none;
}

:root .prism-publication :is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) :is(.prism-search-form__submit, .prism-search-form__advance, .prism-search-form__dock-cta):hover {
  background: var(--rg26-cta-hover);
}

:root .prism-publication :is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) :is(.prism-search-form__submit, .prism-search-form__advance, .prism-search-form__dock-cta) * {
  color: var(--rg26-cta-ink);
}

/* The word and the magnifier a bit larger (Carla 2026-11-04: "make the search and magnifier a bit larger"): 17px → 19px
   text, 18px → 22px glyph. The hero's submit and the phones' dates button only — the docked strip's 44px button keeps
   its size. */
:root .prism-publication :is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) :is(.prism-search-form__submit, .prism-search-form__advance) {
  gap: 10px;
  font-size: 19px;
}

:root .prism-publication :is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) :is(.prism-search-form__submit, .prism-search-form__advance)::before {
  width: 22px;
  height: 22px;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Search box 4B (Carla 2026-11-04, docs rg-home-mocks; mock CSS on branch rg-logo-header-mocks
   apps/roadgenius/brand/logo-2026/mocks/home-2026-11-04/search/css-4B.css) — appended as mocked, plus the standfirst's
   final sentence on its own line ("…and save on another line"; SearchHeroBanner standfirstBreak) and the shade run one
   line deeper for it.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* RG 2026 search box — mock set 4B (Carla 2026-11-04): today's clear glass, white text on a soft navy shade behind the words + a stronger shadow; text left-set.
   Car box on computers (≥1000) takes the campervan box's shape: title, standfirst, ONE row of the four fields, then the
   driver chip left + the Search button under the dates. Written to append to apps/roadgenius/brand/rg-2026/assets/header.css
   as-is (same :root-led scoping, so it outranks publication.css whatever the order). Phones (<750) untouched; tablets
   (750–999) keep their wrapped shape and take only the colours. At go-live the colours move into packages/tokens. */

/* The set's colours. */
:root {
  --rg26-box-backdrop: blur(7px);
}

/* ── Tablets + computers (≥750): the glass and the text colours (both boxes) ── */
@media (min-width: 750px) {
  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel {
    border-color: var(--rg26-box-edge);
  }

  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel::before {
    background:
      linear-gradient(180deg, var(--rg26-box-scrim) 0, var(--rg26-box-scrim) var(--rg26-box-scrim-solid), transparent var(--rg26-box-scrim-end)),
      var(--rg26-box-glass);
    -webkit-backdrop-filter: var(--rg26-box-backdrop);
    backdrop-filter: var(--rg26-box-backdrop);
  }

  /* The shade's depth (layout, not colour): solid down to the standfirst / title, gone before the fields. */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-hero__panel::before {
    /* one line deeper than the mock: the standfirst runs two lines ("Search, compare and save." on its own) */
    --rg26-box-scrim-solid: 128px;
    --rg26-box-scrim-end: 158px;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-hero__panel::before {
    --rg26-box-scrim-solid: 70px;
    --rg26-box-scrim-end: 112px;
  }

  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel :is(h1, .prism-search-hero__headline) {
    color: var(--rg26-box-title-ink);
    text-shadow: var(--rg26-box-text-shadow);
  }

  :root .prism-publication .prism-search-hero--design-baseline:is(.prism-search-hero--mhr-cars, .prism-search-hero--mhr-campers) .prism-search-hero__panel .prism-search-hero__standfirst {
    color: var(--rg26-box-standfirst-ink);
    text-shadow: var(--rg26-box-text-shadow);
  }

  /* The campervan box's heading and the line under it left-set like the car box's (Carla 2026-11-04: "the heading in
     campers is still centered, its supposed to be left with the text under also left like cars"): publication.css
     centres the campervan panel (Camper Champ's skin) and its standfirst (margin 0 auto); the car box's are left with
     no max width. Phones keep both centred, as the car's is. */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-hero__panel {
    text-align: left;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-campers .prism-search-hero__standfirst {
    margin: 0;
    max-width: none;
  }
}

/* ── Computers (≥1000): the car box in the campervan box's shape ──
   Mirrors publication.css "baseline · campers": pickup | dropoff | the two date boxes on one row, then the driver chip
   under the locations and the Search button under the dates. The dates column is wider than the campervan's 320px
   floor because each car date carries its time ("Wed, Nov 18   10:00 AM"). */
@media (min-width: 1000px) {
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(480px, 1.7fr);
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__field--pickup {
    grid-column: 1;
    grid-row: 1;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__field--dropoff {
    grid-column: 2;
    grid-row: 1;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__field--dates {
    grid-column: 3;
    grid-row: 1;
  }

  /* The two date boxes side by side (today they stack). */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__dates-row {
    flex-direction: row;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__driver {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: start;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__submit {
    grid-column: 3;
    grid-row: 2;
    align-self: auto;
    min-width: 0;
  }

  /* The swap button rides the gap between the two location boxes (the campervan's horizontal swap). */
  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__divider[data-swap-anchor] {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: stretch;
    height: auto;
    margin: 0 0 0 -9px;
  }

  :root .prism-publication .prism-search-hero--design-baseline.prism-search-hero--mhr-cars .prism-search-form__divider[data-swap-anchor] .prism-search-form__swap::before {
    transform: none;
  }
}

/* "Search, compare and save." (the standfirst's final sentence) on its own line, every width. */
:root .prism-publication .prism-search-hero .prism-search-hero__standfirst-tail {
  display: block;
}