/* STP Core: home-hero. Design contract: docs/2026-07-10-home-hero-design.md +
 * docs/design/preview-v13-reference.html (parent repo). Loaded sitewide (the
 * header-tightening block below must apply on every page); hero rules are
 * inert off the front page (no matching markup). */

/* ---- Anton (self-hosted latin subset, SIL OFL — see assets/OFL-Anton.txt) ---- */
@font-face {
  font-family: 'Anton';
  src: url('../assets/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A;
}
/* Metric-matched stand-in so the swap doesn't shift layout. */
@font-face {
  font-family: 'Anton-fallback';
  src: local('Impact'), local('Arial Narrow Bold'), local('Arial Narrow');
  size-adjust: 97%;
  ascent-override: 105%;
  descent-override: 26%;
}

/* ---- Hero band ---- */
.stp-home-hero {
  position: relative;
  background-color: #0d0e10;
  background-repeat: no-repeat;
  background-position: 115% 59%;
  background-size: 85% auto;
}
.stp-hh-grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,9,.92) 0%, rgba(6,7,9,.70) 36%, rgba(6,7,9,.30) 68%, rgba(6,7,9,.06) 88%);
}
.stp-hh-wrap {
  position: relative; z-index: 2;
  max-width: 1290px; margin: 0 auto; padding: 44px 32px 104px;
}
.stp-hh-hl {
  font-family: Anton, 'Anton-fallback', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400; text-transform: uppercase; color: #fff;
  font-size: clamp(36px, 4.1vw, 60px); line-height: 1.02;
  letter-spacing: .015em; max-width: 660px; margin: 0;
}
.stp-hh-hl-y { display: block; color: #ffcd05; }
.mbr { display: none; }
.stp-hh-rule { width: 70px; height: 4px; background: #ffcd05; margin: 18px 0 16px; }
.stp-hh-sub { font-size: 17px; line-height: 1.55; color: #e8e9eb; max-width: 540px; margin: 0; }

/* Benefits: content-sized grid columns + fixed gap. NEVER reintroduce a
 * max-width on the wrapped subs and NEVER use 1fr columns here — grid sizes
 * the column to the cap/fraction while the text renders narrower, leaving
 * invisible slack that makes the gaps look uneven (the V6 bug). */
.stp-hh-bens {
  display: grid; grid-auto-flow: column; justify-content: start;
  column-gap: 40px; margin-top: 26px; width: max-content;
}
.stp-hh-ben { display: flex; gap: 13px; align-items: flex-start; }
.stp-hh-ben-ico { width: 34px; height: 34px; flex: none; }
.stp-hh-ben-ico svg, .stp-hh-ben-ico img { width: 100%; height: 100%; }
.stp-hh-ben-tx b {
  display: block; color: #fff; font-size: 14.5px; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap; text-transform: uppercase;
}
.stp-hh-ben-tx i {
  display: block; font-style: normal; color: #cfd2d6;
  font-size: 13px; line-height: 1.4; margin-top: 4px;
}

/* ---- Straddling cards row ---- */
.stp-hh-cards {
  max-width: 1290px; margin: -78px auto 10px; padding: 0 32px;
  /* flex-start, not stretch: the finder grows when its no-match panel appears
   * and the stats card must not stretch along with it (empty white void).
   * Matched min-heights below keep the two cards equal in the default state. */
  display: flex; gap: 20px; align-items: flex-start; position: relative; z-index: 3;
  flex-wrap: wrap;
  /* #stp-results anchor target: filtered-page loads land here with breathing room. */
  scroll-margin-top: 14px;
}
/* Yellow brand cap + a 2px dark border so the white cards separate cleanly from
 * the white page below the hero (a soft shadow alone vanishes on white — worst
 * on mobile). Full border on all sides, all corners rounded 14px. */
.stp-hh-card {
  background: #fff; border-radius: 14px;
  border: 2px solid #111827; border-top: 4px solid #ffcd05;
  box-shadow: 0 14px 40px rgba(13,14,16,.16);
}
.stp-hh-finder {
  flex: 1.55 1 560px; padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.stp-hh-f-title {
  display: flex; gap: 10px; align-items: center;
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  color: #111827; text-transform: uppercase;
}
.stp-hh-f-title svg, .stp-hh-f-title img { width: 25px; height: 25px; flex: none; }
.stp-hh-f-sub { color: #6b7280; font-size: 13.5px; margin: 5px 0 14px; }

/* The embedded [stp_vehicle_finder]: the hero card provides the chrome and the
 * heading, so strip the widget's own card chrome and hide its JS-built head
 * (that's how the title stays settings-editable with zero stp-garage.js edits). */
.stp-hh-finder .stp-finder { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.stp-hh-finder .stp-finder-head { display: none; }
.stp-hh-finder .stp-finder-btn { text-transform: uppercase; font-weight: 800; letter-spacing: .03em; }
/* Keep the hero finder visible even when a garage vehicle is set —
 * updateFinderVisibility() sets inline display:none on [data-stp-finder]. */
.stp-hh-finder [data-stp-finder] { display: block !important; }

/* Duplicate-finder guard: when the hero owns the front page, any in-loop
 * .stp-shop-finder (e.g. re-inserted by an AJAX filter swap) is a dupe. */
body.home:not(.paged) main .stp-shop-finder { display: none; }

/* Trim the shop container's top padding on the hero homepage — the cards row
 * already provides the separation above the grid. */
body.home:not(.paged) main .ct-container[data-vertical-spacing] { padding-top: 18px; }

/* "Showing parts that fit … · Clear" strip above the filtered grid. */
.stp-hh-filter-note {
  margin: 0 0 18px; padding: 12px 16px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #713f12; font-size: 14.5px;
}
.stp-hh-filter-note strong { color: #4a2f0b; }
.stp-hh-filter-clear {
  display: inline-block; margin-left: 14px; font-weight: 700;
  color: #713f12; text-decoration: underline;
}
/* Close-match: a touch more cautionary than the exact-match strip. */
.stp-hh-filter-near { background: #fef3c7; border-color: #fcd34d; }

.stp-hh-why { flex: 1 1 380px; padding: 20px 22px; display: flex; align-items: center; }
/* Equal card heights in the default state (finder's natural height); the
 * finder alone grows past this when its no-match panel appears. */
.stp-hh-finder, .stp-hh-why { min-height: 178px; }
.stp-hh-stats { display: flex; flex: 1; }
.stp-hh-stat { flex: 1; text-align: center; padding: 2px 8px; }
.stp-hh-stat + .stp-hh-stat { border-left: 1px solid #e5e7eb; }
.stp-hh-chip {
  display: flex; width: 44px; height: 44px; margin: 0 auto 8px;
  align-items: center; justify-content: center;
  background: #ffcd05; border-radius: 50%; padding: 10px;
}
.stp-hh-chip svg, .stp-hh-chip img { width: 100%; height: 100%; }
.stp-hh-stat b { display: block; font-size: 20px; font-weight: 800; color: #111827; }
.stp-hh-stat i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #6b7280; font-weight: 700;
  line-height: 1.45; margin-top: 3px;
}

/* ---- Header tightening (CSS-only; exact values tuned on staging) ----
 * Blocksy's generated global.css uses [data-header*="type-1"] .ct-header
 * [data-row*=…] (0,3,0) and loads after this file, so these rules carry an
 * html prefix (0,3,1 / 0,4,1) to win on specificity. Bases (desktop, header
 * type-1): top 57, middle 87, bottom 123, logo 110. Desktop-only — the mobile
 * header keeps its stock metrics. */
@media (min-width: 1000px) {
  html [data-header*="type-1"] .ct-header [data-row*="top"] { --height: 44px; }
  /* Logo enlarged 30% (72→94px); the middle row grew to match so the logo stays
   * centered with ~5px breathing room above/below rather than overflowing the
   * yellow top bar or the My Garage bar. */
  html [data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 104px; }
  html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 94px; }
  /* Search lives in the garage bar now (stp-garage.js); the header's desktop
   * bottom row and end-middle slot are empty and render nothing. Align the
   * header container with the hero band's box (1290 + 32px gutters) so the
   * logo's left edge lines up with the hero text at any viewport width. */
  html [data-header*="type-1"] .ct-header .ct-container {
    max-width: 1290px;
    padding-left: 32px;
    padding-right: 32px;
  }
  /* The logo item carries a legacy customizer margin, applied via Blocksy's
   * --margin variable WITH !important — override the variable at higher
   * specificity. Left stays 0 so the logo box starts at the shared content edge
   * (left-aligned with the hero text); the top margin is zeroed (was 20px) so
   * the logo centers vertically in the row — equal gap to the yellow top bar
   * and the My Garage bar. */
  html [data-header*="type-1"] .ct-header [data-id="logo"] {
    --margin: 0px 0px 0px 0px !important;
  }
  /* Pull the active/hover menu underline up against the link text (the <a>
   * stretches the full row height; Blocksy anchors the indicator to
   * bottom: var(--menu-indicator-y-position, 0) of it). Raised from 23px to
   * track the taller middle row (104px) so it stays snug under the text. */
  html [data-header*="type-1"] .ct-header [data-row*="middle"] [data-menu] > ul > li {
    --menu-indicator-y-position: 36px;
  }
}

/* ---- Mobile header (≤999.98px) ----
 * Blocksy's base logo is 110px (later 101px) with a +20px top margin, but the
 * middle row is only 87px — so on mobile the logo overflowed its row. Before
 * go-live the header's search row sat below the logo and absorbed that
 * overflow; moving search into the garage bar removed that buffer, so the
 * oversized logo landed on the "My Garage" bar. Cap the logo to fit its row,
 * zero the offset so it centers, and tighten the row a touch. */
@media (max-width: 999.98px) {
  html [data-header*="type-1"] .ct-header [data-id="logo"] {
    --margin: 0px 0px 0px 0px !important;
  }
  /* Logo enlarged 30% (60→78px); the middle row grew (76→92px) to keep the
   * bigger logo centered and clear of the My Garage bar (the overflow this
   * block originally fixed). Margin stays 0 — mobile position is already good. */
  html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    --logo-max-height: 78px;
  }
  html [data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 92px; }
}

/* ---- Top-bar center trust text (markup lives in the header_placements text
 * item; these rules are an exact copy of the LIVE site's Additional CSS so the
 * two match — keep in sync if live's customizer CSS changes). */
.stp-header-trust {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #111;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.stp-header-trust-text { display: inline-block; }
.stp-header-line { width: 58px; height: 1px; background: #111; opacity: 0.75; }
.stp-header-dot { width: 4px; height: 4px; background: #111; border-radius: 50%; display: inline-block; }
/* Slightly tighten on tablets (live: @media 999px) */
@media (max-width: 999px) {
  .stp-header-trust { font-size: 12px; letter-spacing: 0.16em; gap: 8px; }
  .stp-header-line { width: 34px; }
}
/* Mobile header trust strip (live: @media 689px) */
@media (max-width: 689px) {
  .stp-header-trust {
    width: 100%; padding: 7px 12px 8px;
    background: #ffcc00;
    border-top: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    font-size: 11px; font-weight: 800; letter-spacing: 0.13em; gap: 7px;
  }
  .stp-header-line { width: 24px; }
  .stp-header-dot { width: 3px; height: 3px; }
}

/* ---- ≤1080px: benefits 2×2, content-sized (never 1fr) ---- */
@media (max-width: 1080px) {
  .stp-hh-bens {
    grid-auto-flow: row; grid-template-columns: repeat(2, max-content);
    column-gap: 48px; row-gap: 18px; width: auto;
  }
}

/* ---- Mobile ≤782px (matches the sticky-call breakpoint) ---- */
@media (max-width: 782px) {
  .stp-home-hero {
    background-position: 65% -71px;
    background-size: 150% auto;
  }
  .stp-hh-grad {
    background:
      linear-gradient(180deg, rgba(6,7,9,0) 52%, rgba(6,7,9,.82) 82%),
      linear-gradient(90deg, rgba(6,7,9,.90) 0%, rgba(6,7,9,.60) 40%, rgba(6,7,9,.16) 62%, rgba(6,7,9,.04) 100%);
  }
  .stp-hh-wrap { padding: 20px 16px 76px; }
  .stp-hh-hl { font-size: 26px; max-width: 212px; }
  .mbr { display: inline; }
  .stp-hh-rule { margin: 12px 0 10px; }
  .stp-hh-sub { font-size: 12.5px; max-width: 200px; }
  /* 4-across icon-above-text columns: equal 1fr columns ARE the design here
   * (the slack bug only bites the desktop icon-beside-text layout). */
  .stp-hh-bens {
    grid-auto-flow: row; grid-template-columns: repeat(4, 1fr);
    column-gap: 10px; row-gap: 0; margin-top: 24px; width: auto;
  }
  .stp-hh-ben { flex-direction: column; gap: 6px; }
  .stp-hh-ben-ico { width: 24px; height: 24px; }
  .stp-hh-ben-tx b { font-size: 9.5px; white-space: normal; letter-spacing: .02em; }
  .stp-hh-ben-tx i { font-size: 9px; line-height: 1.35; margin-top: 2px; }
  .stp-hh-ben-tx i br { display: none; }
  .stp-hh-cards { margin-top: -58px; padding: 0 12px; gap: 11px; }
  .stp-hh-finder { padding: 16px 15px; flex-basis: 100%; }
  .stp-hh-f-title { font-size: 14px; }
  .stp-hh-f-title svg, .stp-hh-f-title img { width: 21px; height: 21px; }
  .stp-hh-f-sub { font-size: 12px; margin: 4px 0 11px; }
  .stp-hh-why { flex-basis: 100%; padding: 14px 4px; box-shadow: 0 6px 16px rgba(13,14,16,.16); }
  .stp-hh-finder, .stp-hh-why { min-height: 0; }
  .stp-hh-chip { width: 34px; height: 34px; padding: 7px; margin-bottom: 6px; }
  .stp-hh-stat b { font-size: 14.5px; }
  .stp-hh-stat i { font-size: 7px; letter-spacing: .05em; }
}