/* drivers.css — flatbed CDL-A recruiting page ("night road").
   Builds on styles.css for tokens, fonts, buttons, the header shell, form
   fields, and the footer. This page does not load dispatch.css.
   Colors stay inside the shared palette: navy #141931, amber #faa72c, the
   light page background, and the #1f284d navy the shared gradients use. */

.drivers-page {
  --road: #1f284d;
  --on-navy: rgba(255, 255, 255, 0.82);
  --on-navy-soft: rgba(255, 255, 255, 0.7);
  --lane: repeating-linear-gradient(
    90deg,
    var(--color-accent) 0 3.25rem,
    transparent 3.25rem 5.5rem
  );
}

.drivers-page .section {
  scroll-margin-top: 7rem;
}

/* ========================================================================
   Header: page strip on top, section links below
   ======================================================================== */

.page-switch {
  background: var(--color-brand);
  color: #ffffff;
}

.page-switch-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.35rem;
}

.page-switch-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: -0.7rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-switch-nav::-webkit-scrollbar {
  display: none;
}

.page-switch-nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--on-navy);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.page-switch-nav a:hover,
.page-switch-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.page-switch-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.page-switch-nav a[aria-current='page'] {
  color: var(--color-brand);
  background: var(--color-accent);
}

.page-switch-note {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--on-navy-soft);
}

.site-header .drivers-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
}

.site-header .page-logo {
  flex: none;
  width: 8.5rem;
}

.site-header .page-logo-image {
  width: 100%;
}

.drivers-bar .site-nav {
  width: auto;
  flex-wrap: nowrap;
}

/* ========================================================================
   Hero: night road
   ======================================================================== */

.hero.drivers-hero {
  padding: clamp(3.5rem, 6vw, 5rem) 0 0;
  background-color: var(--color-brand);
  background-image:
    radial-gradient(ellipse 55% 60% at 88% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, var(--color-brand) 55%, var(--road) 100%);
  color: #ffffff;
}

/* The shared hero glows are for light pages. */
.hero.drivers-hero::before,
.hero.drivers-hero::after {
  content: none;
}

/* The outline PNG is opaque (white ground, gray line). Inverting it and
   screening it onto the navy drops the ground and keeps a faint light line. */
.hero-map {
  position: absolute;
  top: 2rem;
  right: -6rem;
  width: min(62vw, 56rem);
  opacity: 0.09;
  filter: invert(1);
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  margin: 0 0 1.75rem;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 8px;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-accent);
}

.drivers-hero h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(2.75rem, 8.2vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.h1-line {
  display: block;
}

.drivers-hero .hero-text {
  max-width: 34rem;
  margin: 0;
  font-size: 1.15rem;
  color: var(--on-navy);
}

.drivers-hero .hero-actions {
  justify-content: flex-start;
  margin: 2.25rem 0 0;
}

.button-ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

.drivers-hero .button:focus-visible {
  outline-color: var(--color-accent);
}

/* ---- The road and the truck on it ---- */

.road {
  position: relative;
  height: 5.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background-color: var(--road);
  background-image: var(--lane);
  background-size: 100% 4px;
  background-position: 0 55%;
  background-repeat: no-repeat;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
  border-bottom: 2px solid rgba(255, 255, 255, 0.16);
}

.road-truck {
  position: absolute;
  right: clamp(1rem, 7vw, 7rem);
  bottom: 0.9rem;
  width: clamp(17rem, 44vw, 40rem);
  animation: truck-loop 10s linear 0.2s infinite both;
}

.road-truck-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.truck-body {
  fill: #ffffff;
}

.truck-load rect {
  fill: rgba(255, 255, 255, 0.34);
}

.truck-straps rect {
  fill: var(--color-accent);
}

/* One 10s loop: roll in from the left (1.8s), park (6s), pull away off the
   right edge (1.7s), empty road (0.5s), then the next pass rolls in. The hero
   clips overflow, so the off-screen stretches never cause sideways scroll. */
@keyframes truck-loop {
  0% {
    transform: translateX(-110vw);
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  18% {
    transform: none;
  }

  78% {
    transform: none;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.3);
  }

  95%,
  100% {
    transform: translateX(110vw);
  }
}

/* ---- Seat facts under the road ---- */

.seat-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0;
  margin: 0;
  padding: 1.5rem 0 1.75rem;
  list-style: none;
}

.seat-facts li {
  padding: 0 1.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-navy);
}

.seat-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Section headings use the shared .section-heading from styles.css (kicker
   label above, solid amber bar below), the same as index.html and dispatch.html. */

/* ========================================================================
   Pay: a route with two stops, then the apply panel
   ======================================================================== */

.pay-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-stop {
  position: relative;
  padding-top: 2.75rem;
}

.pay-stop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow:
    0 0 0 5px var(--color-bg),
    0 0 0 7px var(--color-accent);
}

.pay-stop:last-child::before {
  background: var(--color-accent);
}

/* Dashed road from each stop to the next one. The tile is half-gap, dash,
   half-gap, and "round" fits whole tiles so both ends stay symmetric. */
.pay-stop:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(0.675rem - 2px);
  left: 2.25rem;
  width: calc(100% - 1.15rem);
  height: 4px;
  background: linear-gradient(
      90deg,
      transparent 0 18.75%,
      var(--color-accent) 18.75% 81.25%,
      transparent 81.25%
    )
    0 0 / 2rem 100% round;
}

.pay-when {
  margin: 0 0 0.35rem;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-muted);
}

.pay-figure {
  margin: 0 0 0.5rem;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: clamp(3rem, 5.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
}

.pay-detail {
  margin: 0;
  color: var(--color-muted);
}

/* Apply panel at the end of the route, in the hero's night-road navy. */
.pay-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background-color: var(--color-brand);
  background-image: linear-gradient(120deg, var(--color-brand) 50%, var(--road) 100%);
  color: #ffffff;
}

.pay-cta-copy {
  flex: 1 1 24rem;
  max-width: 46rem;
}

.pay-cta h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.pay-cta p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--on-navy);
  text-wrap: pretty;
}

.pay-cta .button {
  flex: none;
}

.pay-cta .button:focus-visible {
  outline-color: var(--color-accent);
}

/* ========================================================================
   CDL band: full-width amber
   ======================================================================== */

.cdl-band {
  background-color: var(--color-accent);
  color: var(--color-brand);
}

/* A tighter band than the shared 5.5rem section padding. */
.section.cdl-band {
  padding-block: clamp(3rem, 5vw, 4rem);
}

.cdl-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.cdl-ask {
  margin: 0 0 0.9rem;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
}

.cdl-band h2 {
  margin: 0;
  font-size: clamp(2.2rem, 3.8vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.cdl-side p {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-wrap: pretty;
}

.button-navy {
  background: var(--color-brand);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(20, 25, 49, 0.22);
}

.button-navy:hover,
.button-navy:focus-visible {
  background: #1e2648;
  box-shadow: 0 12px 28px rgba(20, 25, 49, 0.3);
}

.cdl-band .button:focus-visible {
  outline-color: var(--color-brand);
}

/* ========================================================================
   Schedules: calendar strips
   ======================================================================== */

.runs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.run {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.run h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: var(--color-muted);
}

.run-figure {
  margin: 0 0 0.6rem;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.run-text {
  max-width: 30rem;
  margin-bottom: 1.75rem;
  color: var(--color-muted);
}

.cal {
  display: grid;
  grid-template-columns: 4rem repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: center;
  max-width: 22rem;
  margin-top: auto;
}

.cal-day {
  font-family: 'Figtree', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  color: var(--color-muted);
}

.cal-label {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-muted);
}

.cell {
  aspect-ratio: 1;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
}

.cell.is-out,
.key.is-out {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.cell.is-home,
.key.is-home {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.cell.is-flex,
.key.is-flex {
  border: 2px dashed var(--color-accent-hover);
  background: rgba(250, 167, 44, 0.12);
}

.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.cal-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.key {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px solid transparent;
  border-radius: 3px;
}

/* ========================================================================
   FAQ: heading pinned left, simple accordion right
   ======================================================================== */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 8.5rem;
}

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: 6px;
}

.faq-mark {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(250, 167, 44, 0.18);
  transition: background-color var(--transition-base);
}

.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-brand);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}

.faq-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-mark {
  background: var(--color-accent);
}

.faq-item[open] .faq-mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  max-width: 38rem;
  margin: -0.25rem 0 0;
  padding: 0 3.5rem 1.5rem 0;
  color: var(--color-muted);
}

/* ========================================================================
   Apply: navy, with a lane stripe along the top edge
   ======================================================================== */

.apply {
  position: relative;
  background-color: var(--color-brand);
  color: #ffffff;
}

.apply::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lane);
}

.apply-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.apply-copy h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.apply-copy p {
  max-width: 28rem;
  font-size: 1.1rem;
  color: var(--on-navy);
}

.apply-card {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.field select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.95rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.field select:hover {
  border-color: rgba(20, 25, 49, 0.22);
}

.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(250, 167, 44, 0.18);
}

.drivers-page .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================================================
   Sticky mobile Apply button (behavior in dispatch.js)
   ======================================================================== */

.sticky-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 60;
  display: none;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(120%);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear 0.25s;
}

.sticky-cta .button {
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 900px) {
  .cdl-inner,
  .faq-layout,
  .apply-layout {
    grid-template-columns: 1fr;
  }

  .cdl-inner {
    align-items: start;
  }

  /* Stacked on narrow screens the heading wraps more; balance the lines. */
  .cdl-band h2 {
    text-wrap: balance;
  }

  .faq-intro {
    position: static;
  }
}

/* Four facts stop fitting on one line below this width; a 2 x 2 grid keeps
   the rows clean instead of wrapping one fact under a stray divider. */
@media (max-width: 1040px) {
  .seat-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
  }

  .seat-facts li {
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .runs {
    grid-template-columns: 1fr;
  }

  .pay-route {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .pay-stop {
    padding: 0 0 0 2.75rem;
  }

  .pay-stop::before {
    top: 0.2rem;
  }

  .pay-stop:not(:last-child)::after {
    top: 2.45rem;
    left: calc(0.675rem - 2px);
    width: 4px;
    height: calc(100% - 0.9rem);
    background: linear-gradient(
        180deg,
        transparent 0 18.75%,
        var(--color-accent) 18.75% 81.25%,
        transparent 81.25%
      )
      0 0 / 100% 1.6rem round;
  }
}

@media (max-width: 640px) {
  .page-switch-inner {
    min-height: 2.2rem;
  }

  .page-switch-note {
    display: none;
  }

  .page-switch-nav {
    width: calc(100% + 1rem);
    justify-content: space-between;
    margin: 0 -0.5rem;
  }

  .page-switch-nav a {
    padding: 0.26rem 0.5rem;
    font-size: 0.76rem;
  }

  .site-header .drivers-bar {
    padding: 0.35rem 0;
  }

  .site-header .page-logo {
    width: 6.5rem;
  }

  /* Phones keep the header to one row: logo and Apply. */
  .drivers-bar .site-nav a:not(.nav-cta) {
    display: none;
  }

  .hero.drivers-hero {
    padding-top: 2.75rem;
  }

  /* On a phone the outline would sit behind the headline. */
  .hero-map {
    display: none;
  }

  .drivers-hero .hero-text {
    font-size: 1.05rem;
  }

  .road {
    height: 4rem;
  }

  .road-truck {
    right: 0.75rem;
    bottom: 0.6rem;
    width: 76vw;
  }

  .seat-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
  }

  .pay-cta .button {
    width: 100%;
  }

  .faq-item summary {
    font-size: 1.02rem;
  }

  .faq-answer {
    padding-right: 0;
  }

  .sticky-cta {
    display: flex;
  }
}

/* The smallest phones: tighten the page strip so all three links fit. */
@media (max-width: 360px) {
  .page-switch-nav {
    gap: 0;
  }

  .page-switch-nav a {
    padding: 0.26rem 0.4rem;
    font-size: 0.7rem;
  }
}

/* Visitors who ask for less motion get the truck parked, with no loop. */
@media (prefers-reduced-motion: reduce) {
  .road-truck {
    animation: none;
  }
}