/* Cheetah static-site additions.
   Loaded last so it wins over theme CSS without needing !important everywhere.
   Palette lifted from the live site: #fab700 gold, #161921 dark. */

:root {
  --ch-accent: #fab700;
  --ch-accent-dark: #e0a300;
  --ch-dark: #161921;
  --ch-ink: #161921;
}

/* ---------------------------------------------------------- top bar
   Pinned while scrolling (owner request 2026-07-22) so Apply Now is always
   visible; the theme's sticky nav is pushed below it, see the
   .sc_layouts_row_fixed_on rule further down. */
.ch-topbar {
  background: var(--ch-dark);
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  position: sticky;
  top: 0;
  z-index: 100000;
}
.ch-topbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ch-topbar__msg { color: #e9e9ee; letter-spacing: .01em; }
.ch-topbar__msg strong { color: var(--ch-accent); font-weight: 700; }
.ch-topbar__spacer { flex: 1 1 auto; }
.ch-topbar__tel {
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ch-topbar__tel:hover { color: var(--ch-accent) !important; }
.ch-topbar__cta {
  background: var(--ch-accent);
  color: var(--ch-ink) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.ch-topbar__cta:hover {
  background: #fff;
  color: var(--ch-ink) !important;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------- hero
   Replaces the dead Slider Revolution module. Three original photographs
   crossfade purely in CSS; the headline and CTAs never move, which was the
   whole point of the change. */
.ch-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ch-dark);
  /* The theme drops widgets into a flex row, so without these the section
     shrinks to its content width instead of spanning the page. */
  width: 100%;
  flex: 1 0 100%;
  align-self: stretch;
}
.ch-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: ch-fade 21s infinite;
  will-change: opacity;
}
.ch-hero__bg--1 {
  background-image: url("/wp-content/uploads/2024/05/Screen-Shot-2017-03-02-at-9.55.08-AM-1-1.jpg");
  animation-delay: 0s;
}
.ch-hero__bg--2 {
  background-image: url("/wp-content/uploads/2024/04/slidenumber1.jpg");
  animation-delay: 7s;
}
.ch-hero__bg--3 {
  background-image: url("/wp-content/uploads/2024/04/slidenumber3.jpg");
  animation-delay: 14s;
}
@keyframes ch-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}
.ch-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,14,20,.86) 0%, rgba(12,14,20,.66) 48%, rgba(12,14,20,.34) 100%);
}
.ch-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 90px 24px;
  color: #fff;
}
.ch-hero__eyebrow {
  color: var(--ch-accent);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 18px;
}
.ch-hero__title {
  color: #fff;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.06;
  font-weight: 800;
  margin: 0 0 20px;
  max-width: 16em;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.ch-hero__sub {
  font-size: clamp(17px, 1.7vw, 22px);
  color: #dcdce4;
  margin: 0 0 34px;
  max-width: 34em;
}
.ch-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ch-hero__note {
  margin: 22px 0 0;
  color: #b9b9c6;
  font-size: 15px;
}

.ch-btn {
  display: inline-block;
  padding: 17px 40px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.ch-btn--primary {
  background: var(--ch-accent);
  color: var(--ch-ink) !important;
  box-shadow: 0 10px 30px rgba(250, 183, 0, .3);
}
.ch-btn--primary:hover {
  background: #fff;
  color: var(--ch-ink) !important;
  transform: translateY(-2px);
}
.ch-btn--ghost {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .5);
}
.ch-btn--ghost:hover {
  background: #fff;
  color: var(--ch-ink) !important;
  border-color: #fff;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------- footer */
.ch-footer {
  background: var(--ch-dark);
  color: #c9c9d4;
  padding: 46px 24px 40px;
}
.ch-footer__inner { max-width: 1400px; margin: 0 auto; text-align: center; }
.ch-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 24px;
}
.ch-footer__nav a {
  color: #e4e4ec !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.ch-footer__nav a:hover { color: var(--ch-accent) !important; }
.ch-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-bottom: 20px;
  font-size: 15px;
}
.ch-footer__meta a { color: #b6b6c4 !important; text-decoration: none; }
.ch-footer__meta a:hover { color: var(--ch-accent) !important; }
.ch-footer__social { font-weight: 700; }
.ch-footer__copy { margin: 0; font-size: 14px; color: #83838f; }

/* ------------------------------------------- recovered fleet table
   Replaces the [wptb id=20174] shortcode left behind by WP Table Builder. */
.ch-table-wrap { overflow-x: auto; margin: 8px 0 4px; }
.ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 520px;
  background: #fff;
}
.ch-table thead th {
  background: var(--ch-dark);
  color: #fff;
  text-align: left;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 15px 18px;
  white-space: nowrap;
}
.ch-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #e6e6ec;
  color: #46464f;
}
.ch-table tbody tr:nth-child(even) { background: #fafafc; }
.ch-table tbody tr:hover { background: #fff8e2; }
.ch-table tbody td:first-child { font-weight: 700; color: var(--ch-ink); }

/* --------------------------------------------- button contrast fix
   The theme paints its buttons accent-gold with white text, which is close
   to unreadable (contrast ~1.9:1, well under the 4.5:1 minimum). The header
   "Contact Us" button was the worst offender and appeared on every page.
   Dark ink on gold reads cleanly and matches our own CTAs. */
.elementor-button,
.elementor-button:visited,
.elementor-button .elementor-button-text,
a.sc_button_default,
a.sc_button_default .sc_button_text {
  color: var(--ch-ink) !important;
}
.elementor-button:hover,
.elementor-button:hover .elementor-button-text,
a.sc_button_default:hover,
a.sc_button_default:hover .sc_button_text {
  color: var(--ch-ink) !important;
}

/* ---------------------------------------------------------- forms */
.ch-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}
.ch-form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.5;
  border: 2px solid transparent;
}
.ch-form-status.is-shown { display: block; }
.ch-form-status.is-ok { border-color: #1f9d55; background: #eaf8f0; color: #126034; }
.ch-form-status.is-error { border-color: #c82b1d; background: #fdecea; color: #8d1e13; }
.ch-form-status.is-busy { border-color: #d8d8de; background: #f6f6f8; color: #55555f; }
.ch-field-error { border-color: #c82b1d !important; }
form[data-ch-form] button[disabled],
form[data-ch-form] input[type="submit"][disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .ch-hero { min-height: 540px; }
  .ch-hero__inner { padding: 70px 22px; }
}
@media (max-width: 782px) {
  .ch-topbar__inner { justify-content: center; gap: 10px; padding: 8px 16px; }
  .ch-topbar__msg { width: 100%; text-align: center; font-size: 14px; }
  .ch-topbar__spacer { display: none; }
  /* 44px minimum touch target: this is the primary recruiting CTA and most
     driver applicants arrive on a phone. */
  .ch-topbar__cta, .ch-topbar__tel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
  }
  .ch-hero { min-height: 460px; }
  .ch-hero__inner { padding: 54px 18px; text-align: left; }
  .ch-hero__cta { gap: 10px; }
  .ch-btn { padding: 15px 26px; font-size: 14px; }
  .ch-hero__scrim { background: linear-gradient(180deg, rgba(12,14,20,.72) 0%, rgba(12,14,20,.82) 100%); }
  .ch-footer__nav { gap: 8px 16px; }
}

/* FAQ accordions. These replace the theme's hover-flip cards, whose answers
   were unreachable on touch devices. Colours match the original cards:
   question on black, answer on the brand yellow. */
.ch-faq {
  background: #000;
  margin: 0 0 4px;
}
.ch-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px 22px;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  min-height: 44px;
}
.ch-faq__q::-webkit-details-marker { display: none; }
.ch-faq__q:hover { color: var(--ch-accent); }
.ch-faq__icon { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.ch-faq__icon::before, .ch-faq__icon::after {
  content: "";
  position: absolute;
  inset: 7px 0;
  background: var(--ch-accent);
  transition: transform .2s ease;
}
.ch-faq__icon::after { transform: rotate(90deg); }
.ch-faq[open] .ch-faq__icon::after { transform: rotate(0deg); }
.ch-faq__a {
  background: var(--ch-accent);
  color: var(--ch-ink);
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.6;
}
/* The theme laid the flip cards out four across; accordions read better as a
   single full-width list, so widen any column that holds one. Browsers too
   old for :has() keep the four-column layout, which still works - it just
   looks closer to the original grid. */
.elementor-column .ch-faq { width: 100%; }
.elementor-column:has(> .elementor-widget-wrap .ch-faq) { width: 100%; }

/* Homepage "Dependable Around the Clock": the widget never got a colour in
   WordPress, so the heading inherited the near-black default on a black
   section and was unreadable. Present on the original site too; fixed here
   at the owner's request (readable beats faithful). */
.elementor-element.elementor-element-fa08ba1 .sc_item_title { color: #fff; }

/* Same section's Contact Us button: the widget is classed yellow-btn but was
   wired to the theme's red link colour style, making it the only red element
   on the site. Restyle to the brand yellow like every other button. */
.elementor-element.elementor-element-7e9988c .sc_button {
  background-color: var(--ch-accent) !important;
  border-color: var(--ch-accent) !important;
}
.elementor-element.elementor-element-7e9988c .sc_button:hover {
  background-color: var(--ch-accent-dark) !important;
  border-color: var(--ch-accent-dark) !important;
}
.elementor-element.elementor-element-7e9988c .sc_button .sc_button_title {
  color: var(--ch-ink) !important;
}

/* The sticky nav fixes itself to top:0 via inline style (Elementor sticky on
   desktop, the theme's own row-fixing on mobile), so when either engages we
   push it down by the pinned bar's measured height; cheetah.js keeps
   --ch-topbar-h in sync with the rendered height at every breakpoint. */
.sc_layouts_row_fixed_on,
.elementor-sticky--active { top: var(--ch-topbar-h, 0px) !important; }

/* The contact page's map section carried enough bottom padding on phones to
   read as a broken empty block between the map and the footer. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-9de3998 { padding-bottom: 12px !important; }
}
/* The widget that used to hold the Google Maps iframe keeps the iframe's
   fixed height; with the static image inside, the leftover height rendered
   as blank space below the map. */
.elementor-widget-container:has(> .ch-map),
.elementor-element:has(.ch-map) > .elementor-widget-container {
  height: auto !important;
  min-height: 0 !important;
}

/* Static map (replaces the Google Maps embed) */
.ch-map { display: block; position: relative; max-width: 1200px; margin: 0 auto; }
.ch-map img { width: 100%; height: auto; display: block; }
.ch-map__cta {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--ch-accent);
  color: var(--ch-ink);
  font-weight: 700;
  padding: 12px 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.ch-map:hover .ch-map__cta { background: var(--ch-accent-dark); }

/* Privacy policy draft. The double class outweighs Elementor's flex rule on
   .elementor-widget-wrap; without it, a short heading and its paragraph
   become flex items and sit side by side. */
.elementor-widget-wrap.ch-policy__body,
.ch-policy__body { display: block; padding: 30px 20px 60px; max-width: 860px; margin: 0 auto; }
.ch-policy__updated { color: #777; font-size: 14px; }
.ch-policy__body h3, .ch-policy__body p {
  float: none;
  clear: both;
  display: block;
  width: 100%;
}
.ch-policy__body h3 { margin: 34px 0 10px; }
.ch-policy__body p { line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .ch-hero__bg { animation: none; }
  .ch-hero__bg--1 { opacity: 1; }
  .ch-hero__bg--2, .ch-hero__bg--3 { opacity: 0; }
  .ch-btn, .ch-topbar__cta { transition: none; }
}

@media print {
  .ch-topbar { display: none; }
}