/* ==========================================================================
   SHOP FLOOR - the Work Trucks and Vans skin
   --------------------------------------------------------------------------
   Carl picked option 3, "Shop Floor", from the five styling directions
   (www\mock-ups\TB-Styling-Directions.pdf, 2026-09-21). Every device here is
   lifted from T&B's own Bulk Emailer header: the diamond plate, the heavy
   condensed uppercase (Anton), the lime "& VANS" block, the swash, the lime
   rules. Option 3 is the daylight version of that artwork:

     ground    brushed steel (the plate, inverted and held back to 16%)
     chrome    the dark plate: masthead, nav bar, homepage hero
     headings  Anton, uppercase, NAVY - lime measures only 4.03 on steel
     corners   rounded, pill buttons (Carl: "I don't like the sharp corners")

   Carl's two additions on 2026-09-25: the T&B logo under the swash in the
   hero (pages/home.php), and the header made like the emailer header. That
   became concept A, "One Emailer Bar" (nav bar section below), after the
   first attempt stacked a masthead on the nav and repeated itself.

   THIS FILE IS A SKIN, NOT A LAYOUT. It is linked last in header.php and only
   changes colour, type, borders and corners. Remove that one <link> and the
   site is exactly as it was on 2026-09-25, every recent change intact.

   Contrast, measured for this file:
     ink #14181f on steel #e5e7e8 ........ 14.3   muted #4d5560 on steel ... 6.1
     navy #00007f on steel ............... 13.0   lime on the dark plate ... 9.4
     green ink #326510 on steel .......... 5.6
     ink #14181f on lime #69cf25 ......... 8.9    white on the dark plate .. 18+
   Lime is never text on steel or white (1.99 on white).
   ========================================================================== */

:root {
  --sf-plate: url("../../images/shopfloor/t-and-b-diamond-plate-texture.webp");
  /* ONE WIDE SHEET, NOT A MIRRORED TILE (Chance, 2026-10-02): the current plate
     regenerated without the kaleidoscope repeat, with soft shadow fading in and
     out. 2172x724; shown once, never tiled. */
  --sf-plate-wide: url("../../images/shopfloor/t-and-b-diamond-plate-shadows-wide.webp");
  /* At least 3x the whole header's height wide, so the 3:1 sheet always covers
     the band and the bar together. */
  --sf-plate-size: max(100vw, 1100px) auto;
  --sf-steel-tile: url("../../images/shopfloor/t-and-b-brushed-steel-texture.webp");
  --sf-steel: #e3e6e9;
  --sf-sunk: #d7dbdf;
  --sf-ink: #14181f;
  --sf-muted: #4d5560;
  --sf-line: #c3c9cf;
  --sf-navy: #00007f;
  --sf-lime: #69cf25;
  --sf-dark: #0a0d11;

  --sf-disp: "Anton", "Arial Narrow", Impact, sans-serif;
  --sf-sub: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --sf-rad: 14px;
  --sf-card-rad: 18px;

  /* the site's own tokens, retuned so every component that reads them follows */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --wtv-radius: 14px;
  --color-border: var(--sf-line);
  --wtv-border: var(--sf-line);
  --color-text-muted: var(--sf-muted);
  --wtv-muted-text: var(--sf-muted);
  --color-bg-alt: #eef0f2;
  --wtv-surface-alt: #eef0f2;
  /* the green text ink (eyebrows, figures) was #3f7d13, which is 4.07 on the
     steel. #326510 is 5.6 on the steel and 6.2 on the lime tint cards. */
  --wtv-accent-ink: #326510;
}

/* ---- the steel ground ------------------------------------------------- */
body {
  background: var(--sf-steel) var(--sf-steel-tile) repeat;
  background-size: 400px 200px;
  color: var(--sf-ink);
}
/* white page sections become the steel; cards stay white on top of it */
.wtv-section-default { background: transparent; }
.wtv-section-muted { background: rgba(0, 0, 0, .045); }

/* ==========================================================================
   NAV BAR - concept A, "One Emailer Bar" (Chance, 2026-09-25)
   One plate band does the Bulk Emailer header's job: the stacked WORK TRUCKS /
   & VANS lockup is the home link, the nav sits in the middle, the phone is set
   big on the right, and a lime chevron closes the band as it does the emailer.
   Replaced a masthead + nav pair that repeated the words, the phone and the
   T&B name.
   ========================================================================== */
.site-header {
  /* The same sheet as the van band, shifted up by the band's height (set by the
     script after the band in header.php), so the two read as one piece. */
  background: var(--sf-dark) var(--sf-plate-wide) no-repeat;
  background-size: var(--sf-plate-size);
  background-position: center calc(-1 * var(--sf-band-h, 190px));
  backdrop-filter: none;
  border-bottom: 4px solid var(--sf-lime);
}
.site-header { position: sticky; }
.site-header::after {             /* the emailer's lime chevron, under the band */
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 120px;
  height: 16px;
  margin-left: -60px;
  background: var(--sf-lime);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  z-index: 1;
}
/* the chevron is drawn after the nav in the header, so without this it painted
   over the Inventory dropdown's first item */
.nav-desktop .dropdown { z-index: 5; }
@media (max-width: 639.98px) {
  .site-header::after { width: 80px; height: 11px; margin-left: -40px; }
}

/* ---- the van band above the nav (Carl, 2026-10-01, option A) ---------- */
.sf-vanband {
  background: var(--sf-dark) var(--sf-plate-wide) no-repeat;
  background-size: var(--sf-plate-size);
  background-position: center top;
}
.sf-vanband__inner {           /* full width: the logos sit in the corners (Chance, 2026-10-01) */
  padding: .9rem clamp(16px, 4.5vw, 96px);
  padding-top: 3.25rem;   /* "Most" (Chance, 2026-10-02): space above the vans to match the sides */   /* breathing room off the edges (Carl, 2026-10-01: not so crammed to the sides) */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sf-vanlogo {
  display: grid;
  justify-items: center;
  gap: .15rem;
  color: #fff;
  text-decoration: none;
}
.sf-vanlogo:hover { text-decoration: none; }
.sf-vanlogo:hover .sf-vanlogo__phone,
.sf-vanlogo:focus-visible .sf-vanlogo__phone { color: var(--sf-lime); }
.sf-vanlogo__line {
  display: flex;
  align-items: baseline;
  gap: .28em;
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sf-vanlogo__and {                 /* the billboard's cocked lowercase "and" */
  display: inline-block;
  font-family: var(--sf-sub);
  font-style: normal;
  font-weight: 800;
  font-size: .95em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--sf-lime);            /* lime on the plate: 9.4 */
  /* tilted hard, like the WorkTrucks and Vans.com art (Chance, 2026-10-01) */
  transform: rotate(-48deg) translateY(-.1em);
  margin-inline: -.24em;   /* tilted, it is narrower than its box: pull the words in */
  align-self: center;
}
.sf-vanlogo__van { display: block; width: 240px; height: auto; }
.sf-vanlogo__phone {
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .02em;
}
@media (max-width: 639.98px) {
  /* one corner on a phone: van left, words and number beside it */
  .sf-vanband__inner { justify-content: center; padding: .6rem 16px; }
  .sf-vanlogo--right { display: none; }
  .sf-vanlogo { grid-template-columns: auto auto; column-gap: .75rem; align-items: center; justify-items: start; }
  .sf-vanlogo__van { width: 130px; grid-row: 1 / span 2; grid-column: 1; }
  .sf-vanlogo__line { font-size: 1.05rem; grid-column: 2; }
  .sf-vanlogo__phone { font-size: 1.35rem; grid-column: 2; }
}

/* ---- the nav bar: T&B Auto Sales left, the menu beside it -------------- */
.site-header__inner { justify-content: flex-start; gap: 2.75rem; }
.sf-vanband + .site-header { border-top: 0; }  /* no line between the band and the bar (Chance, 2026-10-01) */
.site-header__actions { margin-left: auto; }
/* MENU CENTRED in the bar, T&B Auto Sales left, phone/menu button right
   (Chance, 2026-10-01). Three columns, the middle one auto, so the menu sits
   on the true centre of the bar whatever the logo width. */
@media (min-width: 960px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; }
  .site-header__inner > .brand { justify-self: start; }
  .site-header__inner > .nav-desktop { justify-self: center; }
  .site-header__inner > .site-header__actions { justify-self: end; margin-left: 0; }
}
.sf-brand-logo { display: block; height: 40px; width: auto; }
/* T&B Auto Sales moves up to the centre of the van band on a desktop; the
   nav bar's copy keeps its space (so the menu stays centred) but is hidden. */
.sf-vanband__brand { display: none; }
@media (min-width: 960px) {
  .sf-vanband__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .sf-vanlogo--left { justify-self: start; }
  .sf-vanlogo--right { justify-self: end; }
  .sf-vanband__brand { display: block; justify-self: center; }
  .sf-vanband__brand img { display: block; height: clamp(56px, 4.6vw, 84px); width: auto; }
  .site-header__inner > .brand { visibility: hidden; }
}
@media (max-width: 639.98px) {
  .sf-brand-logo { height: 30px; }
}
/* the band above carries the number on a desktop; on a phone the sticky bar
   keeps the lime call button, because the band scrolls away */
@media (min-width: 640px) {
  .site-header .header-call { display: none; }
}
/* BIGGER MENU TEXT (Brian could not read it, 2026-10-01): 1.2rem bold ->
   1.5rem semibold with more spacing, so the condensed letters stop running
   together. */
.nav-desktop > ul > li > a {
  font-family: var(--sf-sub);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
.nav-desktop > ul > li > a:hover { color: #fff; }
.nav-desktop > ul > li > a[aria-current="page"] { color: var(--sf-lime); }
.nav-desktop .dropdown a { color: var(--sf-ink); }
.nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* the phone, set the way the emailer sets it: a small lime label over a big number */
.header-call {
  background: transparent;
  border: 0;
  color: #fff;
  padding: .25rem 0;
}
.header-call:hover,
.header-call:focus-visible { background: transparent; color: var(--sf-lime); }
.header-call__number {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: .01em;
  line-height: 1;
}
.header-call__label {
  font-family: var(--sf-sub);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-lime);
  margin-bottom: .2rem;
}
@media (min-width: 640px) {
  .header-call > svg { display: none; }
}
@media (max-width: 639.98px) {
  /* inventory.css hides the number here and keeps the icon as a 44px button */
  .header-call {
    background: var(--sf-lime);
    color: var(--sf-ink);
    border-radius: 999px;
    padding: .55rem .65rem;
  }
  .header-call:hover,
  .header-call:focus-visible { background: #fff; color: var(--sf-ink); }
}

/* ==========================================================================
   TYPE - Anton, uppercase, navy on the steel
   ========================================================================== */
h1, h2,
.wtv h1, .wtv h2 {
  font-family: var(--sf-disp);
  font-weight: 400;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.02;
}
main h1, main h2 { color: var(--sf-navy); }
.wtv h2 { font-weight: 400; }
.wtv h3, .wtv h4,
.wtv-card-title,
.wtv-heading-line > span {
  font-family: var(--sf-disp);
  font-weight: 400;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.08;
}
.wtv-heading-line > span { font-weight: 400; }
.wtv-card-title { font-size: 1.4rem; color: var(--sf-ink); }

/* dark grounds keep white headings */
.wtv-light h1, .wtv-light h2, .wtv-light h3, .wtv-light h4,
.wtv-band h1, .wtv-band h2, .wtv-band h3, .wtv-band h4,
.v-head--band h1,
.wtv-hero-band h1 { color: #fff; }

/* eyebrows: the emailer's small uppercase label */
.wtv-text-meta,
.wtv-eyebrow,
.wtv-eyebrow-tight {
  font-family: var(--sf-sub);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
}

/* ==========================================================================
   BUTTONS - pills, condensed uppercase; lime is the call to action
   ========================================================================== */
.wtv-button,
.btn {
  border-radius: 999px;
  font-family: var(--sf-sub);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-width: 2px;
}
.wtv-button-large, .btn-lg { font-size: 1.25rem; }

/* primary on a light ground: a lime pill with dark ink (8.9). Navy on hover. */
.wtv a.wtv-button-primary,
.wtv .wtv-button-primary,
.btn-primary,
.btn-accent {
  background: var(--sf-lime);
  border-color: var(--sf-lime);
  color: var(--sf-ink);
}
.wtv a.wtv-button-primary:hover,
.wtv .wtv-button-primary:hover,
.btn-primary:hover,
.btn-accent:hover {
  background: var(--sf-navy);
  border-color: var(--sf-navy);
  color: #fff;
}
/* outline on a light ground: a white pill */
.wtv a.wtv-button-default,
.wtv .wtv-button-default {
  background: #fff;
  border-color: var(--sf-line);
  color: var(--sf-ink);
}
.wtv a.wtv-button-default:hover,
.wtv .wtv-button-default:hover {
  background: var(--sf-navy);
  border-color: var(--sf-navy);
  color: #fff;
}
/* on dark grounds the outline stays a white ghost (wtv-base.css), primary stays lime */
.wtv-light a.wtv-button-primary,
.wtv-band a.wtv-button-primary { color: var(--sf-ink); }
.wtv-light a.wtv-button-default,
.wtv-band a.wtv-button-default {
  background: transparent;
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
.wtv-light a.wtv-button-default:hover,
.wtv-band a.wtv-button-default:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sf-ink);
}

/* ==========================================================================
   HOMEPAGE HERO - the video stays; the plate and the emailer lockup go over it
   ========================================================================== */
.wtv-hero-video-section {
  background: var(--sf-dark);
  border-bottom: 6px solid var(--sf-lime);
}
/* Lighter, and NO texture over the video (Carl + Chance, 2026-10-01: "too dark";
   the diamond-plate overlay was most of it). Was .55 -> .82 plus the plate at .3. */
.wtv-hero-overlay {
  background:
    linear-gradient(180deg, rgba(6, 9, 12, .45), rgba(6, 9, 12, .70));
}
.sf-hero-lockup {
  position: relative;
  z-index: 2;
  padding-inline: 20px;
  text-align: center;
}
.sf-hero-lockup p { margin: 0 auto; max-width: none; }
/* WORK TRUCKS & VANS over the brush, set like the nav lockup (client, 2026-09-28) */
.sf-hero-lockup p.sf-hero-name {
  margin-bottom: .9rem;
  font-family: var(--sf-disp);
  font-weight: 400;               /* Anton has one weight; 800 would fake-bold it */
  font-size: clamp(2.4rem, 5.5vw + .5rem, 5rem);
  line-height: 1;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.sf-hero-name span { color: var(--sf-lime); }
/* "and" spelled out and cocked, as in the van logo (Chance, 2026-10-01) */
.sf-hero-lockup p.sf-hero-name .sf-vanlogo__and { transform: rotate(-48deg) translateY(-.42em); margin-inline: -.06em -.38em; }   /* at hero size the tilted word sat below the line */
.sf-brush {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(620px, 94%);
  aspect-ratio: 1239 / 167;
  margin: 0 auto;
  background: url("../../images/shopfloor/built-to-work-priced-right-brush.webp") center / 100% 100% no-repeat;
}
.sf-hero-lockup p.sf-brush { max-width: none; margin-inline: auto; }
.sf-brush span {
  display: block;
  transform: rotate(-1.6deg);     /* the brush rises left to right */
  font-family: var(--sf-sub);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw + .6rem, 2.55rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sf-ink);             /* ink on lime: 8.9 */
  white-space: nowrap;
}
/* Carl: the T&B logo goes UNDER the brush */
.sf-hero-lockup .wtv-hero-logo-wrap { margin: 1.4rem 0 0; padding: 0; }
.sf-hero-lockup .wtv-hero-logo { width: min(440px, 70%); }
/* the tagline is the page's h1 but reads as a sentence, so it opts out of the
   Anton treatment above (.wtv h1 is 0,1,1, hence the longer selector) */
.wtv h1.wtv-hero-tagline {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   CARDS - white on the steel, 2px line, 18px corners
   ========================================================================== */
.wtv-card,
.v-card,
.v-filters {
  border: 2px solid var(--sf-line);
  border-radius: var(--sf-card-rad);
  background: #fff;
}
.wtv-card-tinted { background: #f4f5f7; }
.wtv-band .wtv-card,
.wtv-light .wtv-card { border-color: rgba(255, 255, 255, .28); }

/* ---- inventory cards ---- */
.v-card__title {
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--sf-ink);
}
.v-card__now {
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: .01em;
  color: var(--sf-navy);
}
.v-card__flag {
  border-radius: 999px;
  font-family: var(--sf-sub);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- filters ---- */
.v-filters__title {
  font-family: var(--sf-disp);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.v-filters__label {
  font-family: var(--sf-sub);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.v-filters__box { border-radius: 6px; border-width: 2px; }
.v-filters__opt.is-on .v-filters__box {
  background-color: var(--sf-lime);
  border-color: var(--sf-lime);
}
.v-toolbar__sort select { border-radius: 999px; border-width: 2px; padding-inline: .9rem; }

/* ==========================================================================
   VEHICLE PAGE
   ========================================================================== */
.vdp__title { letter-spacing: .012em; }
.vdp-price { border-radius: var(--sf-card-rad); border-width: 2px; }
.vdp-price__now {
  font-family: var(--sf-disp);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--sf-navy);
}
.vdp-h2, .vdp-subhead, .vdp-form__title, .vdp-cta__title, .vdp-hours__title {
  font-family: var(--sf-disp);
  font-weight: 400;
  letter-spacing: .012em;
  text-transform: uppercase;
}

/* ==========================================================================
   FORMS - rounded fields, condensed labels
   ========================================================================== */
.lead-form input:not([type="checkbox"]):not([type="radio"]),
.lead-form textarea,
.lead-form select {
  border: 2px solid var(--sf-line);
  border-radius: var(--sf-rad);
  background: #fff;
}
.lead-form label {
  font-family: var(--sf-sub);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* the email opt-in is a sentence, not a field label */
.lead-form .lead-form__optin label,
.lead-form__optin label {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* VDP group headings + option lists, bigger (Chance, 2026-09-28: "too small,
   can't really see them"). Was .82rem heads / .9rem items. .vdp-subhead is
   shared by the Specifications and the Manufacturer options groups, so both
   grow together and stay one system. */
.vdp-subhead { font-size: 1.2rem; padding-bottom: .4rem; margin-bottom: .6rem; }
.vdp-notes__list { font-size: 1rem; }

/* ANTON HAS ONE WEIGHT (Chance, 2026-10-01: "these texts are too bold"). Page
   rules set headings to 700/900 (.wtv h2, .home-latest__head h2, the contact
   card titles), and the browser fakes a bold Anton by smearing it. Pinned to
   its real weight here, last in the cascade. */
h1, h2, .wtv h1, .wtv h2, .wtv h3, .wtv h4,
.wtv h2.wtv-card-title, .wtv h3.wtv-card-title, .wtv-card-title,
.home-latest__head h2, .wtv-heading-line > span, .wtv-stat-num { font-weight: 400 !important; }

/* reCAPTCHA badge hidden: on phones it sat over the page's bottom-right corner (2026-10-02).
   Allowed by Google when the form carries their notice, which contact.php and vehicle.php print. */
.grecaptcha-badge { visibility: hidden; }

/* VISIBLE FOCUS ON DARK GROUNDS (a11y gate 2026-10-02, WCAG 2.4.7). The navy
   ring measured 1.0-1.2:1 on the plate, navy bands and the consent bar. White
   is 16-19:1 on all of them. White panels inside the header keep navy. */
.sf-vanband, .site-header, .wtv-hero-video-section, .wtv-hero-band, .wtv-band,
.vdp-cta, .consent-banner, .vdp-stickybar { --focus-ring: #fff; }
.site-header .dropdown, .nav-mobile { --focus-ring: #00007f; }
/* The cookie bar never sits on top of a focused control (height set by its script). */
html { scroll-padding-bottom: calc(var(--consent-banner-h, 0px) + .5rem); }
body { padding-bottom: var(--consent-banner-h, 0px); }