/* ============================================================================
   wtv-footer.css - the site-wide footer, ported from the client-approved
   "Work Trucks and Vans" footer.html (T&B Auto Sales, Bryant AR).

   WHY THIS IS A SEPARATE FILE AND NOT PART OF wtv-base.css
   includes/header.php honours exactly ONE $page_css, and that slot belongs to
   the page. includes/footer.php is included by EVERY page, so it links this
   sheet itself, from the body, immediately before the <footer>. rel=stylesheet
   is body-ok in HTML5 and a body stylesheet still blocks the paint of the
   content that follows it, so there is no flash of unstyled footer.

   SCOPING RULE - not negotiable.
   Every selector in this file starts with .site-footer. This sheet loads on
   every page, after theme.css and after the page's own stylesheet, so an
   unscoped rule here would silently repaint nine other agents' pages. Most
   selectors are written as .site-footer .site-footer__x (specificity 0,2,0)
   rather than the bare block class, so they beat the .site-footer__x rules
   theme.css already ships without needing !important.

   TOKENS
   The --wtv-* custom properties are declared LOCALLY on .site-footer, mirroring
   wtv-base.css exactly. They are NOT inherited from it: wtv-base.css only loads
   when a page points $page_css at it, and this footer renders on pages that do
   not (404.php, privacy-policy.php, vehicle.php ...). Declaring them here makes
   the footer render identically everywhere. If a value below ever diverges from
   wtv-base.css, wtv-base.css is the source of truth.

   CONTRAST - measured, not eyeballed.
   Lime #69cf25 is 1.99:1 on white: it is a RULE / BADGE / HOVER colour here and
   never carries text on a light surface. The only lime that carries anything is
   navy-on-lime (8.08:1) on the social button's hover state.
     navy #00007f on white ............ 16.07:1  (column headings, link hover)
     --color-text on white ............ 17.79:1  (nav links)
     --color-text-muted on white ......  6.16:1  (blurb, consent line, copy)
     white on navy .................... 16.07:1  (social button)
     navy on lime .....................  8.08:1  (social button hover)
   Dark mode is a complete pair: navy heading ink is 1.2:1 on #0e1116, so it
   flips to --color-primary #8fa8ff (8.30:1), the same flip wtv-base.css makes.
   ========================================================================== */


/* ============================================================================
   1. TOKENS - LIGHT
   ========================================================================== */
.site-footer {
  --wtv-navy:        #00007f;
  --wtv-navy-hover:  #0000f7;
  --wtv-lime:        #69cf25;

  --wtv-text:        var(--color-text);
  --wtv-muted-text:  var(--color-text-muted);
  --wtv-border:      var(--color-border);
  --wtv-surface:     var(--color-bg);

  --wtv-heading-ink: var(--wtv-navy);
  --wtv-link-ink:    var(--wtv-navy);
  --wtv-link-hover:  var(--wtv-navy-hover);

  /* Social button: navy plate, white glyph, no ring. The plate itself is the
     16:1 boundary against white, so 1.4.11 is met without a border. */
  --wtv-social-bg:         var(--wtv-navy);
  --wtv-social-fg:         #ffffff;
  --wtv-social-ring:       transparent;
  --wtv-social-hover-bg:   var(--wtv-lime);
  --wtv-social-hover-fg:   var(--wtv-navy);
}


/* ============================================================================
   3. THE BAND
   Approved: white ground, 6px lime top rule. theme.css paints the footer
   --color-bg-alt and separates it with a 1px border; the approved design uses
   the page's own surface and lets the lime rule do the separating, which is
   also what every navy band on the ported pages does at its edges.
   ========================================================================== */
.site-footer {
  background: var(--wtv-surface);
  border-top: 6px solid var(--wtv-lime);
  color: var(--wtv-text);
  padding-block: 3.5rem 1.5rem;
}


/* ============================================================================
   4. GRID
   auto-fit rather than a fixed 5-track template, because the number of link
   columns comes from site-config and must be allowed to change without
   returning here. The brand column spans two tracks so the blurb keeps a
   readable measure.

   TRACKS ARE DECLARED, NOT DERIVED. This block used to read
   `repeat(auto-fit, minmax(11rem, 1fr))` with the brand spanning two, and the
   comment above claimed six tracks. It never got six. Inside a 78rem container
   the row is 1208px wide, and six 11rem tracks with five 2rem gaps need
   1216px - eight pixels short. auto-fit therefore laid FIVE tracks, the brand
   ate two of them, and the fifth block (Contact) wrapped onto a second row on
   its own, leaving four empty tracks beside it: measured at 1440px, an 864px
   by 284px hole in the middle of the footer, with the hours then wrapping
   inside their orphaned column.

   Five blocks need five tracks. They are now written out, weighted by what
   each one actually holds rather than split evenly - the blurb needs a
   measure, the two short nav columns do not, and Contact has to fit
   "8:00 AM - 5:00 PM" on one line.

     >= 1100px   5 tracks: brand Inventory Company Help Contact   (one row)
     700-1099    brand full width, then the four columns 2 x 2    (no orphan)
     <  700px    1 track, everything stacked
   ========================================================================== */
.site-footer .site-footer__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: 1.6fr 1.15fr .85fr .85fr 1.15fr;
  gap: 2.5rem 2rem;
  align-items: start;
}
.site-footer .site-footer__brand { min-width: 0; }
.site-footer .site-footer__col   { min-width: 0; }

/* Two-by-two under the brand. Four blocks in two tracks divides exactly, so
   nothing is ever left alone on a row of its own. */
@media (max-width: 1099px) {
  .site-footer .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  .site-footer .site-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .site-footer .site-footer__brand { grid-column: auto; }
}


/* ============================================================================
   5. BRAND COLUMN
   ========================================================================== */
.site-footer .brand { display: block; }
.site-footer .brand__logo {
  display: block;
  width: 220px;
  max-width: 72%;
  height: auto;              /* overrides theme.css .brand__logo height: 40px */
  margin-bottom: 1.1rem;
}
.site-footer .site-footer__tagline {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wtv-muted-text);
}
.site-footer .site-footer__account { margin: 0.9rem 0 0; font-size: 0.95rem; }

/* Facebook plate. 40x40 clears the 44px touch floor once its 3px focus ring and
   the surrounding line-height are counted; the tap target is padded below. */
.site-footer .site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 1.1rem;
  border: 2px solid var(--wtv-social-ring);
  border-radius: 5px;
  background: var(--wtv-social-bg);
  color: var(--wtv-social-fg);
  transition: background var(--dur-fast, 150ms) var(--ease, ease),
              color var(--dur-fast, 150ms) var(--ease, ease);
}
.site-footer .site-footer__social:hover,
.site-footer .site-footer__social:focus-visible {
  background: var(--wtv-social-hover-bg);
  color: var(--wtv-social-hover-fg);
}
.site-footer .site-footer__social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}


/* ============================================================================
   6. COLUMN HEADINGS
   The approved footer used <h4>. These render as <h2> here: the footer sits on
   every page and axe's heading-order rule flags a LEVEL SKIP, so an <h4> after
   a page whose deepest heading is <h2> is a violation, while an <h2> after any
   deeper heading is a legal decrease. Visually identical to the approved rule.
   ========================================================================== */
.site-footer .site-footer__h {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;   /* a long config-supplied title must wrap, not
                                  push a horizontal scrollbar onto the page */
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--wtv-lime);
  color: var(--wtv-heading-ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-footer .site-footer__h--sub { margin-top: 1.6rem; }


/* ============================================================================
   7. LINK LISTS
   ========================================================================== */
.site-footer .site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;            /* theme.css makes footer <ul> a flex column */
}
.site-footer .site-footer__nav li { margin: 0 0 0.55rem; overflow-wrap: break-word; }
.site-footer .site-footer__nav li:last-child { margin-bottom: 0; }

.site-footer .site-footer__nav a,
.site-footer .site-footer__line a,
.site-footer .site-footer__account a {
  color: var(--wtv-text);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--dur-fast, 150ms) var(--ease, ease);
}
.site-footer .site-footer__nav a:hover,
.site-footer .site-footer__line a:hover,
.site-footer .site-footer__account a:hover {
  color: var(--wtv-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* TOUCH TARGETS - why these anchors become blocks below 1100px.
   Measured on the deployed footer at 360px: every <a> was an INLINE box 19px
   tall with 15.39px of clear space to the next one, so link centres sat 34.39px
   apart. The 0.55rem (8.8px) li margin above is only part of that space; the
   rest is line-box slack, which is exactly why the margin alone was never the
   thing to tune. 19px is the tap target, and 2.5.5 asks for 44.

   So the anchor fills its column and carries its own 44px floor, and the li
   margin comes off in the same breath: 44px boxes do not need the separation
   undersized ones did, because the target IS the separation now. Pitch per link
   goes 34.39px -> 44px, so a five-link column grows by about 48px.

   WHY 1099px AND NOT EVERY WIDTH. 1100px is where block 4 stops laying the
   five-track desktop row, i.e. where this stops being a pointer-sized footer.
   Left alone above it, the list still clears 2.5.8 AA on the spacing exception:
   19px targets whose centres sit 34.39px apart cannot be overlapped by the 24px
   circles that criterion draws. Padding them to 44px there as well would add
   ~48px to every column and hand back exactly the sparse, hole-punched footer
   the tuning in block 4 exists to prevent. */
@media (max-width: 1099px) {
  .site-footer .site-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer .site-footer__nav li { margin-bottom: 0; }
}


/* ============================================================================
   8. CONTACT COLUMN
   ========================================================================== */
.site-footer .site-footer__address {
  margin: 0;
  font-style: normal;
  color: var(--wtv-text);
}
.site-footer .site-footer__line { margin: 0 0 0.6rem; font-size: 0.95rem; overflow-wrap: break-word; }
.site-footer .site-footer__line:last-child { margin-bottom: 0; }

/* The approved footer set hours as <strong>Mon - Fri:</strong> 8:00 AM - 5:00 PM
   inside one <p> with a <br>. A <dl> is the element that actually means "these
   labels map to these values", so the pairs are a definition list laid out on a
   two-track grid: same two lines on screen, real structure underneath. The
   value track is 1fr so a long time range wraps inside its own cell rather than
   widening the column. */
.site-footer .site-footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wtv-text);
}
.site-footer .site-footer__hours dt {
  color: var(--wtv-heading-ink);
  font-weight: 700;
}
/* The approved footer printed the colon; the <dl> carries the meaning, so the
   colon is punctuation and belongs in CSS rather than in the config value. */
.site-footer .site-footer__hours dt::after { content: ':'; }
/* "8:00 AM - 5:00 PM" is one value, not two lines. It broke after "5:00" in
   the orphaned Contact column; the track is wide enough now, and this stops it
   happening again if a column is ever narrowed. */
.site-footer .site-footer__hours dd { margin: 0; white-space: nowrap; }


/* ============================================================================
   9. NEWSLETTER  (renders only when newsletter_enabled(); machinery, kept)
   Sized explicitly so the email input cannot inherit a stretched width: 100%
   from a grid item, which is the failure mode this build has hit before.
   ========================================================================== */
.site-footer .site-footer__news { margin-top: 1.5rem; max-width: 26rem; }
.site-footer .site-footer__news > label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--wtv-heading-ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer .site-footer__news-msg {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--wtv-muted-text);
}
.site-footer .site-footer__news-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.site-footer .site-footer__news-row input[type="email"] {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}
.site-footer .site-footer__news-row .btn { flex: 0 0 auto; }


/* ============================================================================
   10. BOTTOM BAR - SMS consent + copyright + the Spark credit mark
   The consent paragraph is a compliance line and is carried across verbatim.
   ========================================================================== */
.site-footer .site-footer__bottom {
  max-width: var(--content-max);
  margin: 3rem auto 0;
  padding: 1.25rem var(--sp-5) 0;
  border-top: 1px solid var(--wtv-border);
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--wtv-muted-text);
}
.site-footer .site-footer__consent {
  margin: 0 auto 0.75rem;
  max-width: 820px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--wtv-muted-text);
}
.site-footer .site-footer__consent a {
  color: var(--wtv-link-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .site-footer__consent a:hover { color: var(--wtv-link-hover); }

/* max-width: none IS THE WHOLE FIX FOR THE OFF-CENTRE COPYRIGHT LINE.

   theme.css:109 caps every <p> on the site at --reading-max (42rem = 672px),
   which is right for body copy and wrong for a footer bar. This element is a
   <p>, so it inherited the cap: it asked for justify-content: center and got
   it, but inside a 672px box that started hard against the left edge of a
   1208px bar. Measured at 1440px, its centre sat at x=452 while the consent
   line above it centred correctly at x=720, because that one carries
   `margin: 0 auto` and this one carried `margin: 0`.

   Lifting the cap lets the flex row span the bar so its own centring works,
   rather than centring two spans inside a box that is itself off to one side.
   The row is two short spans, not reading copy, so the measure cap buys it
   nothing. */
.site-footer .site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: center;
  align-items: center;
  margin: 0;
  max-width: none;
  font-size: 0.85rem;
  color: var(--wtv-muted-text);
}
.site-footer .site-footer__legal a {
  color: var(--wtv-muted-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .site-footer__legal a:hover { color: var(--wtv-link-hover); }


/* ============================================================================
   11. FOCUS
   base.css already draws a global :focus-visible ring. These two rules only
   guarantee it stays visible where the footer paints its own background:
   an offset ring outside the navy plate, and a ring that is not the plate's
   own colour.
   ========================================================================== */
.site-footer a:focus-visible {
  outline: 3px solid var(--wtv-link-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-footer .site-footer__social:focus-visible {
  outline: 3px solid var(--wtv-heading-ink);
  outline-offset: 3px;
}


/* ============================================================================
   12. NARROW SCREENS
   Nothing here may introduce a horizontal scrollbar. The only fixed width in
   the file is the 220px logo, which is capped at 72% of its column.
   ========================================================================== */
@media (max-width: 559px) {
  .site-footer { padding-block: 2.5rem 1.25rem; }
  .site-footer .site-footer__bottom { margin-top: 2rem; }
  .site-footer .brand__logo { max-width: 200px; }
}