/**
 * Driver-position page sections (hero / intro / above-the-rest / earn / safety).
 *
 * ONE stylesheet shared by every driver position page (local, OTR, regional …).
 * The markup that uses it lives in inc/driver-position-body.php; the per-page
 * TEXT/images live in inc/driver-positions.php. Enqueued by functions.php only
 * on driver-position pages.
 *
 * Per-page values are CSS custom properties set inline by inc/driver-position-template.php:
 *   --hero-img-opacity  hero photo tint over the black underlay (converted pages 0.52–0.61;
 *                       regional pages 1 = no tint). Falls back to 1.
 *   --intro-text-maxw   intro paragraph max-width (default 496px; otr-flatbed 500px to keep
 *                       its forced .pag-br line breaks intact).
 *
 * Shared :root vars (--orange, --white, --maxw, --body-font) come from global.css.
 */

:root {
  --orange-border: #C74300;     /* button outline — rgb(199,67,0) */
  --slate: #576371;             /* rgb(87,99,113): intro heading/body, safety bg, card body text */
  --panel-gray: #FAFAFA;        /* rgb(250,250,250): 'Earn at Every Turn' panel background */
  --tab-inactive: #E8E6E6;      /* rgb(232,230,230): inactive tab button background */
  --card-border: rgba(87,99,113,0.23);  /* opportunity card 1px border */
}

/* === 01-HERO === */
.hero {
  position: relative;
  width: 100%;
  height: 625px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background-color: #000;       /* live Wix: black colorUnderlay behind the hero photo */
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  opacity: var(--hero-img-opacity, 1);  /* per-page tint over the black underlay */
}
.hero-title {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);       /* same content column as the breadcrumb, so they share a left edge */
  margin: 0 auto;
  padding: 0 24px 54px;
  font-family: var(--display-font);   /* Anton — the site's display headline face (same as the home hero) */
  font-size: 88px;
  font-weight: 400;                    /* Anton is a single condensed weight */
  line-height: 0.92;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #FBFBFB;                      /* matches the home hero headline */
  text-align: left;
}

/* === BREADCRUMBS (top-left of the hero, over the photo) === */
.breadcrumbs {
  position: absolute;
  top: 100px;                   /* clear the 84px fixed site-header (+ a 16px gap) */
  left: 0;
  right: 0;
  z-index: 2;                   /* above the hero photo (0) and title (1) */
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.4;
}
.breadcrumbs-item { color: rgba(255, 255, 255, 0.85); }
.breadcrumbs-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumbs-item a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumbs-item + .breadcrumbs-item::before {
  content: "\203A";           /* › separator */
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.55);
}
.breadcrumbs-current { color: #fff; font-weight: 700; }

/* === 02-INTRO === */
.intro {
  height: 378px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  background-color: transparent;
}
.intro-heading {
  font-family: var(--body-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: normal;
  color: var(--slate);
  text-align: center;
}
.intro-text {
  max-width: var(--intro-text-maxw, 496px);
  margin-top: 20px;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: normal;
  color: var(--slate);
  text-align: center;
}
.intro-buttons {
  display: flex;
  gap: 45px;                               /* measured: filled right edge ~687 → outline left ~732 */
  margin-top: 28px;
}
.intro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 40px;
  border-radius: 50px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;               /* measured live: all 0.2s ease */
}
.intro-btn--filled {
  background-color: var(--orange);
  border: 2px solid var(--orange-border);
  color: var(--white);
}
/* Hover (measured live): fill empties to transparent, label -> orange, weight 700->400, radius 50->20 */
.intro-btn--filled:hover {
  background-color: rgba(199, 67, 0, 0);
  border: 2px solid var(--orange-border);
  border-radius: 20px;
  color: var(--orange);
  font-weight: 400;
}
.intro-btn--outline {
  background-color: rgba(189, 81, 23, 0);
  border: 2px solid var(--orange-border);
  color: var(--orange);
}
/* Hover (measured live): fills orange-border, label -> white, weight 700->400, radius 50->20 */
.intro-btn--outline:hover {
  background-color: var(--orange-border);
  border: 2px solid var(--orange-border);
  border-radius: 20px;
  color: var(--white);
  font-weight: 400;
}

/* === 03-ABOVE-THE-REST === */
.above-the-rest {
  position: relative;
  min-height: 355px;
  background-color: rgb(189, 81, 23); /* solid brand orange (--orange) */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Truck-wheels photo behind the orange band at opacity 0.3, replicating the LIVE Wix
   parallax stack (measured 2026-07-15 at 1440x1125):
     section > bgLayers (absolute inset:0, overflow:clip) > sticky wow-image (100% x 100vh,
     opacity .3) > img (object-fit:cover, 50% 50%).
   Measured motion law: image viewport-top = 0.2 x section viewport-top, i.e. the photo
   scrolls at 0.2x page speed (NOT fully pinned). Wix clamps the offset to
   [-0.2*sectionH, +0.2*viewportH] once the band is offscreen. assets/js/driver-position.js
   reproduces that law exactly. The src is the full-aspect 3000x1019 master fill;
   object-fit:cover center-crops it per viewport, exactly like the per-viewport fill
   variants Wix serves live (variant tracks pageWidth x 100vh at load/resize). */
.above-the-rest-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;               /* = live bgLayers overflow:clip */
  overflow: clip;
  pointer-events: none;
  z-index: 0;                     /* behind .above-the-rest-inner (z-index:1) */
}
.above-the-rest-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                    /* full bleed (live: 100% of document width) */
  height: 100vh;                  /* viewport-tall, like the live sticky wow-image */
  object-fit: cover;
  object-position: 50% 50%;       /* centered crop (Wix al_c) */
  opacity: 0.3;                   /* measured on the WOW-IMAGE wrapper */
  will-change: transform;         /* JS sets translate3d(0, 0.2*secTop - secTop, 0) */
}
.above-the-rest-inner {
  position: relative; /* stack above the 0.3-opacity photo */
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  padding: 40px 24px;
  text-align: center;
}
.above-the-rest-heading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: center;
  margin-bottom: 20px;
}
.above-the-rest-list {
  display: inline-block;
  text-align: left;
  list-style: disc;
  padding-left: 22px;
}
.above-the-rest-item {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 25.2px;
  color: rgb(255, 255, 255);
}
.above-the-rest-item + .above-the-rest-item {
  margin-top: 0; /* measured: no gap between bullets — item tops step by ~25px (one line box) */
}
.above-the-rest-item strong {
  font-weight: 700;
}

/* === 04-EARN-AT-EVERY-TURN === */
.earn {
  width: 100%;
  min-height: 481px;
  background: var(--panel-gray);          /* rgb(250,250,250) */
  display: flex;
  align-items: flex-start;                /* measured: content top ~104px from section top, not centered */
  justify-content: center;
  padding: 104px 24px 34px;               /* heading/tabs top ~106px below section top */
}
.earn-wrap {
  width: 100%;
  max-width: 828px;                        /* tabs start ~left 306, panel ends ~1134 at 1440 viewport */
  margin: 0 auto;
  display: flex;
  gap: 66px;                               /* tab right edge 490 → panel left 556 */
  align-items: flex-start;
}

/* --- Left: vertical tab switcher --- */
.earn-tabs {
  flex: 0 0 184px;
  display: flex;
  flex-direction: column;
  gap: 29px;                               /* 93px top-to-top with 64px tall buttons */
}
.earn-tab {
  width: 184px;
  height: 64px;
  border: none;
  border-radius: 10px;
  background: var(--tab-inactive);         /* rgb(232,230,230) */
  color: var(--slate);                     /* rgb(87,99,113) label + emblem */
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 700;                        /* live: helvetica-w01-bold */
  letter-spacing: 1.4px;                   /* measured */
  display: flex;
  align-items: center;
  padding-left: 10px;
  cursor: pointer;                         /* pointer on all tabs */
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
/* Emblem zone: 10px left pad + 52px zone → label starts ~62px from button left */
.earn-tab-icon {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
}
.earn-tab-icon svg { fill: currentColor; display: block; }
/* per-tab emblem sizes (measured rendered px on live) */
.earn-tab[data-tab="pay"] .earn-tab-icon svg { width: 32px; height: 32px; }
.earn-tab[data-tab="benefits"] .earn-tab-icon svg { width: 35px; height: 35px; }
.earn-tab[data-tab="equipment"] .earn-tab-icon svg { width: 44px; height: 44px; }
.earn-tab[data-tab="qualifications"] .earn-tab-icon svg { width: 38px; height: 38px; }
.earn-tab.is-active {
  background: var(--orange);               /* rgb(189,81,23) */
  color: var(--white);
}
/* Live swaps to the orange "selected" variant on hover of an inactive tab */
.earn-tab:not(.is-active):hover {
  background: var(--orange);
  color: var(--white);
}
.earn-tab[data-tab="qualifications"] { font-size: 13px; letter-spacing: 1.3px; }  /* to fit the longer label */

/* --- Right: swapping content panel --- */
.earn-right { flex: 1 1 auto; min-width: 0; }
.earn-panel { display: none; }
.earn-panel.is-active { display: block; animation: earnFade .28s ease both; }
@keyframes earnFade {                       /* subtle content-swap entrance (scoped) */
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Per-panel H5 heading — text changes per tab, same slot (measured 27px bold #343B48) */
.earn-heading {
  font-family: var(--body-font);
  font-size: 27px;
  font-weight: 700;                        /* live: helvetica-w01-bold */
  line-height: 37.8px;
  color: #343B48;                          /* rgb(52,59,72) */
  margin: 0 0 28px;                        /* 66px heading-top to first content line */
}

/* Pay panel: two columns (Starting Pay | Potential Pay) */
.earn-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* col2 lands ~left 866 (~310 into the panel) */
  gap: 40px;
}
.earn-col-title {                          /* 17px bold #343B48 */
  font-family: var(--body-font);
  font-size: 17px;
  font-weight: 700;                        /* live: helvetica-w01-bold */
  line-height: 23.8px;
  color: #343B48;
  margin: 0;
}
.earn-pay-body {                           /* Potential Pay: plain paragraph, no bullet (aligns with title) */
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: var(--slate);
  margin: 0;
}
.earn-pay-list { list-style: none; margin: 0; padding: 0; }  /* Starting Pay: disc bullets, text indented 27px */
.earn-pay-list li {
  position: relative;
  padding-left: 27px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: var(--slate);
}
.earn-pay-list li::before { content: "\2022"; position: absolute; left: 8px; top: 0; }
.earn-pay-body strong, .earn-pay-list strong { font-weight: 700; }  /* helvetica bold $ amounts / % */

/* Benefits & Qualifications: orange check-mark lists (16px / 33.6px line-height) */
.earn-check { list-style: none; margin: 0; padding: 0; }
.earn-check li {
  position: relative;
  padding-left: 27px;                      /* text at x583; checkmark at 562 */
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 33.6px;
  color: var(--slate);
}
.earn-check-icon {
  position: absolute;
  left: 6px;
  top: 10px;                               /* aligns 12px mark to first text line */
  width: 12px;
  height: 12px;
  color: var(--orange);                    /* rgb(189,81,23) checkmark */
  display: inline-flex;
}
.earn-check-icon svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.earn-check strong { font-weight: 700; }   /* bold lead label */

/* Equipment: two columns of grouped bullet lists, continuous 22.4px flow */
.earn-eq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* left: Options/Amenities/Features · right: Maintenance/Trailers */
  gap: 40px;
}
.earn-eq-title {                           /* group title: 16px bold black */
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  color: #000;
  margin: 0;
}
.earn-eq-list { list-style: none; margin: 0; padding: 0; }
.earn-eq-list > li {
  position: relative;
  padding-left: 22px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--slate);
}
.earn-eq-list > li::before { content: "\2022"; position: absolute; left: 8px; top: 0; }
.earn-eq-sub { list-style: none; margin: 0; padding: 0 0 0 22px; }  /* nested dash sub-items */
.earn-eq-sub li {
  position: relative;
  padding-left: 14px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--slate);
}
.earn-eq-sub li::before { content: "-"; position: absolute; left: 0; top: 0; }

/* === 05-SAFETY === */
.safety {
  position: relative;
  width: 100%;
  min-height: 448px;
  background-color: var(--slate); /* rgb(87,99,113) */
}

/* Road photo behind the slate band at opacity 0.16 — same live Wix parallax stack as
   .above-the-rest (measured 2026-07-15 at 1440x1125): section-sized clip layer holding a
   100% x 100vh cover image whose viewport-top = 0.2 x section viewport-top (photo scrolls
   at 0.2x page speed; Wix clamps the offset to [-0.2*sectionH, +0.2*viewportH] offscreen).
   The src is the full-aspect 3000x942 master fill; object-fit:cover center-crops it per
   viewport, matching live's per-viewport fill variants at any size.
   Opacity 0.16 = measured on the wow-image wrapper. */
.safety-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;             /* = live bgLayers overflow:clip */
  overflow: clip;
  pointer-events: none;
  z-index: 1;                   /* behind .safety-inner (z-index:2) */
}
.safety-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* full bleed (live: 100% of document width) */
  height: 100vh;                /* viewport-tall, like the live sticky wow-image */
  object-fit: cover;
  object-position: 50% 50%;     /* centered crop (Wix al_c) */
  opacity: 0.16;
  will-change: transform;       /* JS sets translate3d(0, 0.2*secTop - secTop, 0) */
}

/* Content entrance: fades/slides up once when scrolled into view (JS-added classes) */
.safety-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.safety-reveal-in { opacity: 1; transform: translateY(0); }

.safety-inner {
  position: relative;
  z-index: 2;
  min-height: 448px;
  padding: 52px 40px 40px 281px; /* heading top ~52px from container top; left offset ~281px */
}

.safety-heading {
  font-family: var(--body-font); /* helvetica-w01-bold => 700 */
  font-size: 60px;
  font-weight: 700;
  line-height: 84px;
  color: var(--white);
  text-align: left;
  margin: 0;
}

.safety-text {
  font-family: var(--body-font); /* helvetica-w01-roman => 400 */
  font-size: 22px;
  font-weight: 400;
  line-height: 30.8px;
  color: var(--white);
  text-align: left;
  max-width: 757px; /* measured renderWidth */
  margin: 59px 0 0 0; /* measured: para top ~195px from inner top (heading 52+84, +59 gap) */
}

/* Outline button sits lower and to the right (measured left ~778 from section edge) */
.safety-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                 /* label margin-right 2px + icon margin-left 2px (measured) */
  width: 307px;
  height: 59px;
  margin: 64px 0 0 497px; /* left: 281 (inner padding) + 497 = ~778 from section left; top: button at ~321px from inner top (measured y 2165) */
  background-color: rgba(255, 255, 255, 0); /* transparent */
  border: 3px solid var(--white);
  border-radius: 30px;
  color: var(--white);
  font-family: var(--body-font);   /* helvetica-w01-bold */
  font-size: 18px;                 /* MEASURED label size (previous 13.3px was the wrong node) */
  font-weight: 700;
  letter-spacing: 1.8px;           /* 0.1em @ 18px (measured) */
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;   /* live transition 0.2s */
}
/* Live hover: border + label + icon turn orange, background stays transparent */
.safety-btn:hover {
  border-color: rgb(255, 132, 11);
  color: rgb(255, 132, 11);
}

.safety-btn-icon {
  width: 12px;                 /* measured 12x12 */
  height: 12px;
  flex: none;
  fill: currentColor;          /* white by default, orange on hover — follows label color */
}

/* ============================================================
   PAGE SECTION RESPONSIVE — hero / intro / above-the-rest /
   earn / safety. Shared header, CTA, and footer carry their own
   breakpoints. Desktop (1440) is left untouched; everything here
   is a max-width override only.
   ============================================================ */

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) {
  /* 01-hero: scale the 70px display heading down so it can't overflow */
  .hero { height: 520px; }
  .hero-title { font-size: 68px; line-height: 0.94; }

  /* 02-intro: drop the fixed height so wrapped copy can't clip */
  .intro { height: auto; padding: 56px 24px; }

  /* 03-above-the-rest */
  .above-the-rest-inner { padding: 44px 24px; }
  .above-the-rest-heading { font-size: 34px; line-height: 46px; }

  /* 04-earn: tab column becomes a horizontal row above the panel */
  .earn { padding: 56px 24px 48px; }
  .earn-wrap { max-width: 720px; flex-direction: column; gap: 34px; }
  .earn-tabs {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .earn-tab { width: auto; flex: 1 1 150px; min-width: 150px; }

  /* 05-safety: drop the 281px indent + the button's 497px left margin */
  .safety-inner { padding: 48px 40px 40px; }
  .safety-heading { font-size: 46px; line-height: 62px; }
  .safety-text { max-width: 100%; margin-top: 32px; }
  .safety-btn { margin: 40px 0 0 0; }

}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
  /* Pagination breaks (.pag-br): force live-page line wrapping on desktop; released on small
     screens where columns narrow and natural reflow takes over. */
  .pag-br { display: none; }

  /* 01-hero */
  .hero { height: 420px; }
  .breadcrumbs { top: 80px; }                 /* mobile header is 64px */
  .hero-title { font-size: 48px; line-height: 0.95; padding-bottom: 40px; }

  /* 02-intro */
  .intro { padding: 44px 24px; }
  .intro-heading { font-size: 30px; line-height: 40px; }
  .intro-text { font-size: 16px; line-height: 22.4px; }
  .intro-buttons { gap: 18px; margin-top: 24px; }
  .intro-btn { height: 44px; }   /* was 40px — grown to clear the 44px tap-target minimum */

  /* 03-above-the-rest */
  .above-the-rest-inner { padding: 40px 22px; }
  .above-the-rest-heading { font-size: 28px; line-height: 38px; }

  /* 04-earn: two tabs per row; Pay grid collapses to one column */
  .earn { padding: 44px 20px 40px; }
  .earn-wrap { gap: 28px; }
  .earn-tab { flex: 1 1 45%; min-width: 0; }
  /* Qualifications label was shrunk to 13px to fit a two-up row; instead give it a
     full-width row so the label can stay >=14px without shrinking the type. */
  .earn-tab[data-tab="qualifications"] { font-size: 14px; letter-spacing: 1.2px; flex: 1 1 100%; }
  .earn-heading { font-size: 24px; line-height: 33px; }
  .earn-pay-grid,
  .earn-eq-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Equipment: each column packs 2-3 title+list groups flush (0 gap, matching the live
     2-col desktop measurement — fine there since only 2-3 groups show per column). On the
     1-col mobile stack all 5 groups run together in one column with no separation at all,
     reading as one continuous list. Add breathing room only between a finished list and
     the next group's title; the flush title->list relationship inside a group is untouched. */
  .earn-eq-list + .earn-eq-title { margin-top: 16px; }

  /* 05-safety */
  .safety-inner { padding: 40px 24px; }
  .safety-heading { font-size: 38px; line-height: 50px; }
  .safety-text { font-size: 18px; line-height: 25.2px; margin-top: 24px; }
  .safety-btn { width: 100%; max-width: 307px; margin-top: 32px; }

}

/* ---------- Small mobile (<= 380px) ---------- */
@media (max-width: 380px) {
  .hero-title { font-size: 38px; line-height: 0.98; }
  .safety-heading { font-size: 32px; line-height: 42px; }
  .earn-tab { flex: 1 1 100%; }            /* one tab per row when very narrow */
}