/* Speedpack Express public-site accessibility layer
   Target: WCAG 2.2 Level AA. Loaded after page-specific styles. */

:root {
  --a11y-focus: #fff500;
  --a11y-focus-shadow: #07130f;
  --a11y-error: #ffb4b4;
  --a11y-nav-bg: rgba(3, 14, 10, 0.98);
}

html { scroll-padding-top: 120px; }
html, body { max-width: 100%; }
body { overflow-x: clip; }

.skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2147483647 !important;
  padding: 12px 16px !important;
  border: 3px solid #111827 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transform: translateY(-180%) !important;
  transition: transform .12s ease !important;
}
.skip-link:focus { transform: translateY(0) !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--a11y-focus-shadow) !important;
}

:where(button, input, select, textarea) { font: inherit; }
:where(button, [type="button"], [type="submit"], [role="button"]) { min-height: 44px; }
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
:where(input[type="checkbox"], input[type="radio"]) { min-width: 20px; min-height: 20px; }

.required-marker { color: #ffdbdb; font-weight: 900; }
.form-help, .required-note, .recaptcha-help {
  margin: 7px 0 0;
  color: rgba(255,255,255,.86);
  font-size: .9rem;
  line-height: 1.55;
}
.required-note { margin: 0 0 20px; }


/* Placeholder text is instructional content and must remain readable. */
.contact-form :where(input, textarea)::placeholder,
.careers-form :where(input, textarea)::placeholder,
.driver-form :where(input, textarea)::placeholder {
  color: rgba(255,255,255,.72) !important;
  opacity: 1 !important;
}
.signin-card :where(input, textarea)::placeholder,
.reset-card :where(input, textarea)::placeholder,
.password-card :where(input, textarea)::placeholder,
.legal-card :where(input, textarea)::placeholder {
  color: #475569 !important;
  opacity: 1 !important;
}

/* Disabled submit states remain visually legible while processing. */
:where(button, input, select, textarea):disabled { opacity: .72; }

[aria-invalid="true"] {
  border-color: var(--a11y-error) !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 180, .24) !important;
}
.field-error {
  display: block;
  margin-top: 7px;
  color: #ffd5d5;
  font-weight: 800;
  line-height: 1.4;
}
.form-status[tabindex="-1"]:focus,
.result-box[tabindex="-1"]:focus,
.submit-status-message[tabindex="-1"]:focus { outline-offset: 5px !important; }

/* Increase contrast of small muted labels and controls. */
.contact-detail span,
.career-point span,
.driver-point span,
.about-stats p,
.metric p { color: rgba(255,255,255,.76) !important; }

.contact-form input,
.contact-form select,
.contact-form textarea,
.careers-form input,
.careers-form select,
.careers-form textarea,
.driver-form input,
.driver-form select,
.driver-form textarea {
  border-color: rgba(255,255,255,.44) !important;
}

/* Shared navigation behavior. */
body > nav { overflow: visible !important; }
body > nav.nav-hidden { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
body > nav .navbar-logo-container a { display: inline-flex !important; align-items: center; min-width: 44px; min-height: 44px; }
body > nav .navbar-container > ul > li > a,
body > nav .navbar-container > ul > li > button { min-height: 44px; display: inline-flex; align-items: center; }

.nav-toggle, .submenu-toggle {
  appearance: none;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px;
  background: rgba(5, 20, 14, .94);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 13px;
  min-width: 48px;
  min-height: 44px;
}
.nav-toggle-icon { font-size: 1.3rem; line-height: 1; }
.submenu-toggle {
  margin-left: -8px;
  padding: 0 7px;
  min-width: 28px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  line-height: 1;
}
.submenu-toggle:hover { background: rgba(255,255,255,.10); }
.submenu-chevron {
  display: inline-block;
  font-size: .72rem;
  transition: transform .15s ease;
}
nav li.dropdown > .submenu-toggle { vertical-align: middle; }
nav li.dropdown.submenu-open > .submenu-toggle .submenu-chevron { transform: rotate(180deg); }
nav li.dropdown.submenu-open > .dropdown-content { display: block !important; }

/* Links inside body content remain identifiable without color alone. */
main a:not([class]), footer a { text-decoration: underline; text-underline-offset: 3px; }

/* Make video purely decorative and safe for reduced-motion users. */
.homepage-bg-video[aria-hidden="true"] { pointer-events: none !important; }

@media (max-width: 900px) {
  body > nav {
    top: 0 !important;
    padding: 0 !important;
    background: var(--a11y-nav-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  body > nav .navbar-container {
    position: relative !important;
    min-height: 80px !important;
    height: auto !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body > nav .navbar-logo-container {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body > nav .navbar-logo {
    display: block !important;
    width: auto !important;
    height: 72px !important;
    max-width: 130px !important;
    object-fit: contain !important;
  }
  .nav-toggle { display: inline-flex !important; }
  body > nav .navbar-container > ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px 16px !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    background: var(--a11y-nav-bg) !important;
    border-top: 1px solid rgba(255,255,255,.18);
    overflow: visible !important;
    white-space: normal !important;
  }
  body > nav .navbar-container > ul.nav-menu-open { display: flex !important; }
  body > nav .navbar-container > ul > li {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  body > nav .navbar-container > ul > li > a {
    flex: 1 1 auto !important;
    padding: 11px 12px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  .submenu-toggle {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(5, 20, 14, .94);
  }
  body > nav .dropdown-content,
  body > nav ul li.dropdown .dropdown-content {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 5px !important;
    padding: 3px 0 3px 16px !important;
    transform: none !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: none !important;
  }
  body > nav li.dropdown.submenu-open > .dropdown-content { display: block !important; }
  body > nav .dropdown-content li { width: 100% !important; }
  body > nav .dropdown-content a { padding: 10px 12px !important; font-size: .95rem !important; }
  body > main { padding-top: 104px !important; }
}

@media (max-width: 420px) {
  body > nav .navbar-logo { height: 64px !important; max-width: 110px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .homepage-bg-video { display: none !important; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid CanvasText !important;
    box-shadow: none !important;
  }
  .nav-toggle, .submenu-toggle { border: 1px solid ButtonText; }
}


/* Discreet WCAG control for automatically playing decorative background video. */
.background-video-control {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(4,12,9,.86);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .72;
  transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
}
.background-video-control:hover,
.background-video-control:focus-visible {
  opacity: 1;
  background: rgba(4,12,9,.98);
}
.background-video-control:active { transform: scale(.97); }
.background-video-control-icon {
  display: inline-block;
  width: 1.1em;
  text-align: center;
  font-weight: 900;
}
.background-video-control[hidden] { display: none !important; }

@media (max-width: 700px) {
  .background-video-control {
    left: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-video-control { display: none !important; }
}