/* ============================================================================
   page-home.css - the ported homepage.
   PAIRS WITH: pages/home.php
   SOURCE:     Claude/Website/HTML Pages/homepage.html + homepage.css
               (client-approved, scope class .wtv-home)

   HOW LITTLE IS HERE IS THE POINT. includes/header.php honours exactly one
   $page_css, so this file imports the shared foundation and then adds ONLY the
   handful of things the homepage needs that no other page does:

     1. the <h1> that the approved fragment never had (see the note below)
     2. the live category-count pill under each category card
     3. the "Just arrived" rail head, which is live data, not approved markup
     4. a phone-width guard on the large buttons

   Everything else - the video hero, the navy band, the lime band, the card
   media plate, the ruled plan grid, every uk-* replacement - is in
   wtv-base.css and is deliberately NOT restated here. If a homepage rule
   belongs to more than one page, it belongs in wtv-base.css, not in this file.
   ============================================================================ */



/* ============================================================================
   0. FLOW - restore the vertical rhythm base.css removes

   THIS IS NOT OPTIONAL AND IT IS NOT COSMETIC. base.css line 64 is
   `* { margin: 0 }`, and neither theme.css nor wtv-base.css puts a default
   bottom margin back on a paragraph or a heading. The approved markup was
   written against UIkit, which does, so a straight port renders every run of
   prose as one solid block: the h2 welded to its lead, the two #home-positioning
   paragraphs with no gap, the card blurb touching the count pill.

   Restated in UIkit's own model, wrapped in :where() so it carries ZERO
   specificity. That matters: every uk-margin-* in the approved markup became a
   wtv-margin-* class of specificity (0,1,0), and each one has to keep winning
   against this baseline exactly the way it won against UIkit's. A plain
   `.wtv p + p` rule would be (0,1,1) and would quietly beat
   .wtv-margin-small-top everywhere it appears.

   Grids are deliberately given no margin: in the approved markup the gap before
   and after a grid came from the neighbouring heading's own margin (the two
   .wtv-heading-line panels in #home-inventory), and adding one here would
   double every one of those gaps.

   pages/city/work-trucks-vans-memphis-tn.php carries the identical block. It
   belongs in wtv-base.css - it is a foundation gap, not a page style - but that
   file is owned elsewhere, so both pages restate it rather than drifting.
   ========================================================================== */
:where(.wtv) :where(p, h1, h2, h3, h4, table) { margin-bottom: 20px; }
:where(.wtv) :where(:last-child) { margin-bottom: 0; }


/* ============================================================================
   1. HERO

   THE H1. The approved fragment has no <h1> anywhere on the page: the logo
   image carried the visual headline and the tagline was a <p>. A page with no
   h1 fails the semantic bar and gives a screen-reader user nothing to land on,
   so the approved tagline - unchanged, word for word - is promoted to the h1
   and styled back down to exactly the size and weight it had as a paragraph.
   No copy moved; only the element name did.
   ========================================================================== */
/* Paint the band colour BEHIND the video. wtv-base.css only does this under
   prefers-reduced-motion, so on a normal load there is a window - first paint,
   a slow connection, a blocked or missing file - where the .52 black overlay
   sits on the page background instead and white hero text lands on mid grey.
   Navy underneath means the hero is legible in every one of those states. */
.wtv-hero-video-section { background: var(--wtv-band-bg); }

.wtv-hero-video-section > .wtv-container { text-align: center; }

h1.wtv-hero-tagline {
  /* colour is left to .wtv-light h1 in wtv-base.css (#fff on the .52 overlay) */
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 1.5rem auto 0;
  text-wrap: balance;
}

/* The logo is the LCP element, so it is eager and never revealed on scroll.
   Sizing lives in wtv-base.css (.wtv-hero-logo). */


/* ============================================================================
   2. CATEGORY CARDS - the live count line

   CRM TASK 230 / the live-inventory rule: the count under each card comes from
   category_counts() and an empty category says "Coming soon" instead of
   inviting a click into an empty grid.

   Contrast: --wtv-accent-ink #3f7d13 on the 14% lime tint measures 4.57:1,
   which clears AA for this 13px text. Raw --wtv-lime would be 1.9:1 and is
   never used as ink on a light surface.

   The selector carries p as well as the class because .wtv-card-body p already
   paints every paragraph in the card muted grey, and a bare .wtv-cat-count
   would lose to it on specificity.
   ========================================================================== */
.wtv-card-body p.wtv-cat-count {
  display: inline-block;
  /* The blurb above already contributes its own 20px bottom margin, and the
     "View Inventory" meta below contributes .6rem of top margin, so the pill
     itself adds none. */
  margin: 0;
  padding: .2rem .65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wtv-accent-tint);
  color: var(--wtv-accent-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}
/* Empty category: no green promise, just a quiet note. */
.wtv-card-body p.wtv-cat-count-soon {
  background: var(--wtv-surface-alt);
  border-color: var(--wtv-border);
  color: var(--wtv-muted-text);
}


/* ============================================================================
   2b. THE 01-04 NUMERALS INSIDE A CARD BODY

   wtv-base.css paints .wtv-num-accent / .wtv-fin-num with --wtv-accent-ink,
   but the #valueprops and #financing numerals also carry .wtv-text-meta and
   sit inside .wtv-card-body, and `.wtv-card-body .wtv-text-meta` is a
   two-class selector that outranks the one-class accent rule. Left alone the
   value-prop numerals come out navy, not green - the approved design's one
   deliberate contrast correction silently reverted. Re-stated here at (0,2,1)
   so the token wins, and the .6rem top margin that rule adds is removed
   because these numerals are the first thing in the card.

   Colour still comes from the token, so it is #3f7d13 (4.72:1 on the tinted
   card) in light mode, #8ee04a on the navy band, and #8ee04a in dark mode.
   ========================================================================== */
.wtv-card-body p.wtv-num-accent,
.wtv-card-body p.wtv-fin-num {
  margin-top: 0;
  color: var(--wtv-accent-ink);
  font-weight: 700;
  letter-spacing: .16em;
}
/* The approved homepage CSS sized only the #valueprops numerals (.85rem); the
   #financing ones keep the .875rem they inherit from .wtv-text-meta. */
.wtv-card-body p.wtv-num-accent { font-size: .85rem; }
.wtv-band .wtv-card-body p.wtv-num-accent,
.wtv-band .wtv-card-body p.wtv-fin-num,
.wtv-light .wtv-card-body p.wtv-num-accent,
.wtv-light .wtv-card-body p.wtv-fin-num { color: var(--wtv-lime); }


/* ============================================================================
   3. BUTTON ROWS
   The approved markup spaced stacked buttons with uk-margin-small-right and
   uk-margin-small-bottom, which leaves a dangling right margin on the last
   button and overflows a 360px viewport. A flex row with a gap is the same
   picture and cannot overflow.
   ========================================================================== */
.wtv-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  justify-content: center;
  margin-top: 40px;
}
.wtv-btn-row-left { justify-content: flex-start; }
/* uk-margin-large-top on the "See Full Inventory" row: 40px, 70px from @m. */
.wtv-btn-row-lg { margin-top: 40px; }
@media (min-width: 960px) { .wtv-btn-row-lg { margin-top: 70px; } }


/* ============================================================================
   4. "JUST ARRIVED" RAIL

   Not in the approved fragment: it is the live vehicles_featured() rail the
   Spark homepage already carried, kept because it is the only place on the
   page that shows actual trucks rather than categories.

   This section deliberately does NOT carry the .wtv scope class. .wtv h3 would
   repaint every .v-card__title, and the vehicle card must look identical here
   and on /inventory/. So the heading is styled by hand instead.
   ========================================================================== */
.home-latest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.home-latest__head h2 {
  margin: 0;
  color: var(--wtv-heading-ink);
  font-weight: 900;
  letter-spacing: -.02em;
}
.home-latest__all {
  flex: 0 0 auto;
  color: var(--wtv-link-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--wtv-lime);
}
.home-latest__all:hover {
  color: var(--wtv-link-hover);
  text-decoration-color: currentColor;
}
.home-latest__all:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--wtv-radius);
}


/* ============================================================================
   5. PHONE GUARD
   "Call (501) 847-2727" is 20 uppercase characters at 1.05rem inside a button
   with 2.5rem of padding on each side. At 360px that is wider than the
   viewport, so the padding and the label both come down a step. wtv-base.css
   already allows the label to wrap below 400px; this stops it needing to.
   ========================================================================== */
@media (max-width: 480px) {
  .wtv-button-large { padding-inline: 1.25rem; font-size: 1rem; }
  .home-latest__head { align-items: flex-start; }
}


/* ============================================================================
   6. POSITIONING INTRO - the claim beside the detail

   This was a centred stack, and it read as a wall once the band that used to
   follow it was removed: three centred paragraphs with nothing setting a
   hierarchy between them. Split into a claim column and a detail column, both
   left-aligned, so the heading is the thing you land on and the prose has an
   edge to run against instead of a ragged centre.

   The heading column is the narrower of the two. It carries four or five words
   per line by design - that is what makes it read as a statement rather than a
   paragraph that happens to be bold.
   ========================================================================== */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 2rem 4rem;
  align-items: start;
}
.home-intro__head .wtv-eyebrow { color: var(--wtv-accent-ink); }
/* The lime rule is centred by default (margin: .85rem auto 0). Left-aligned
   here, under the words rather than under the column. */
.home-intro__head .wtv-heading-rule::after { margin-inline: 0 auto; }
.home-intro__body > p:last-child { margin-bottom: 0; }

/* One column below the site's column-switch line, still left-aligned - the
   split is a desktop idea and the reading order (claim, then detail) survives
   the stack unchanged.

   959.98px, NOT the 900 this rule shipped with. Everything else in this page's
   chassis switches at UIkit's @m tier: .wtv-child-*-m and .wtv-width-*-m
   (wtv-base.css 284/292/310), .wtv-section padding (wtv-base.css:171) and
   .wtv-margin-large-* (wtv-base.css:772), and the nav moved to 959.98 to join
   them (theme.css:280). This was the last content rule left on the old line,
   so between 901 and 959px the page ran a two-column intro inside mobile
   section padding, under a hamburger nav, for no reason anyone chose.

   Measured at 930px: two columns of 351 / 475 before, one column of 890 after.
   At 961px nothing moves - 364 / 493 on both sides of the change. */
@media (max-width: 959.98px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   HOW IT WORKS, FIVE STEPS (2026-09-22 site review). One flow on the navy band
   in Carl's order. Five across needs ~1200px before the cards stop wrapping
   every line, so between 960 and 1200 it runs three over two instead of the
   base grid's five.
   --------------------------------------------------------------------------- */
.home-steps { list-style: none; padding: 0; margin: 0; }
@media (min-width: 960px) and (max-width: 1199.98px) {
  .home-steps.wtv-child-1-5-m > * { grid-column: span 20; }
}
.home-steps h3 { font-size: 1.1rem; }
/* White links on the band need their underline to read as links at all. */
.home-steps a { text-decoration: underline; text-underline-offset: 2px; }
.home-steps a:hover { color: var(--wtv-lime); }
/* Five across at the site's 78rem container left ~140px of text per card, three
   or four words a line. The section widens to the inventory family's 92rem and
   the cards give back some padding. */
@media (min-width: 1200px) {
  #home-plan .wtv-container { max-width: 92rem; }
  .home-steps .wtv-card-body { padding: 1.6rem 1.35rem; }
}
.home-steps a[href^="tel:"] { white-space: nowrap; }

/* "In Stock Now" eyebrow removed and the gap above "Shop work trucks and vans
   by category" closed somewhat (Chance, 2026-09-24): the section's desktop top
   padding drops from the default 4.5rem to 2.5rem. Phones keep theirs. */
@media (min-width: 960px) {
  #home-inventory { padding-top: 2.5rem; }
}
#home-inventory h2 { margin-top: 0; }