/* ============================================
   RIDEBUSTANG ACCESSIBILITY STYLES
   WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast, 3.3.1 Error Identification
   ============================================ */

/* -------------------------------------------
   1. GLOBAL FOCUS-VISIBLE STYLES
   Gold yellow (#c5abd0) chosen for ≥3:1 contrast
   on both light and dark backgrounds.
   Dark halo ensures visibility on white/light areas.
   ------------------------------------------- */

*:focus {
  outline: none;
}

/* Keyboard navigation - show focus */
.focus-visible,
:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.25) !important;
  transition: none !important;
}

/* Mouse click - hide focus */
.focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

a.focus-visible,
button.focus-visible,
input.focus-visible,
select.focus-visible,
textarea.focus-visible,
[role="button"].focus-visible,
[role="link"].focus-visible,
[role="tab"].focus-visible,
[role="option"].focus-visible,
[tabindex].focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.25) !important;
  transition: none !important;
}

/* -------------------------------------------
   2. CONTEXTUAL FOCUS OVERRIDES
   White outline on dark purple backgrounds
   ------------------------------------------- */

/* Dark purple sections - hide outline on mouse clicks */
.bg-\[\#702F8A\] .focus-mouse,
.bg-bustang-primary-500 .focus-mouse,
.bg-\[\#5B2573\] .focus-mouse,
.bg-\[\#551D6F\] .focus-mouse,
.bg-\[\#4C205E\] .focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark purple sections */
.bg-\[\#702F8A\] .focus-visible,
.bg-\[\#702F8A\] :focus-visible,
.bg-\[\#702F8A\]:focus-visible,
.bg-bustang-primary-500 .focus-visible,
.bg-bustang-primary-500 :focus-visible,
.bg-bustang-primary-500:focus-visible,
.bg-\[\#5B2573\] .focus-visible,
.bg-\[\#5B2573\] :focus-visible,
.bg-\[\#551D6F\] .focus-visible,
.bg-\[\#551D6F\] :focus-visible,
.bg-\[\#551D6F\]:focus-visible,
.bg-\[\#4C205E\] .focus-visible,
.bg-\[\#4C205E\] :focus-visible {
  outline-color: #c5abd0 !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* Dark/black sections (footer, download apps) - hide outline on mouse clicks */
.bg-\[\#111111\] .focus-mouse,
.bg-black .focus-mouse,
.bg-\[\#141414\] .focus-mouse,
footer .focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark/black sections (footer, download apps) */
.bg-\[\#111111\] .focus-visible,
.bg-\[\#111111\] :focus-visible,
.bg-\[\#111111\]:focus-visible,
.bg-black .focus-visible,
.bg-black :focus-visible,
.bg-black:focus-visible,
.bg-\[\#141414\] .focus-visible,
.bg-\[\#141414\] :focus-visible,
footer .focus-visible,
footer :focus-visible {
  outline-color: #c5abd0 !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* Sidebar / hamburger menu - hide outline on mouse clicks */
#sidebar-menu .focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

/* Sidebar / hamburger menu */
#sidebar-menu .focus-visible,
#sidebar-menu :focus-visible,
#sidebar-menu:focus-visible {
  outline-color: #c5abd0 !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 0.3) !important;
}

/* Main menu navigation - ensure focus visibility persists */
.main-menu a:focus-visible,
.main-menu button:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 0.35) !important;
  transition: none !important;
}

/* Schedule dropdown - direction and day buttons focus visibility */
#scheduleTabs button:focus-visible,
.schedule-option-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  transition: none !important;
}

/* Schedule buttons when selected (white background) - dark outline for contrast */
#scheduleTabs button[aria-selected="true"]:focus-visible,
.schedule-option-btn[aria-selected="true"]:focus-visible {
  outline-color: #c5abd0 !important;
  outline-width: 3px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* Download apps section - white outline on dark buttons for better contrast */
#download-apps a:focus-visible {
  outline-color: #ffffff !important;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.4),
    0 0 0 8px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   3. SKIP LINK (visible on focus)
   ------------------------------------------- */

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 100000 !important;
  padding: 12px 24px !important;
  background: #c5abd0 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* -------------------------------------------
   4. FORM ERROR STATES (WCAG 3.3.1)
   ------------------------------------------- */

.field-error,
input.field-error,
select.field-error,
textarea.field-error,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 3px solid #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3) !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

.field-error:focus-visible,
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
  outline: 3px solid #ef4444 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.4) !important;
}

/* Error messages should be highly visible */
[id$="Error"]:not(.hidden),
[role="alert"]:not(.hidden) {
  font-weight: 600 !important;
  display: block !important;
  color: #dc2626 !important;
}

/* Add icon indicator for errors */
[id$="Error"]:not(.hidden)::before,
[role="alert"]:not(.hidden)::before {
  content: "⚠ ";
  color: #dc2626;
}

/* Contact form specific - ensure error visibility */
.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: #ef4444 !important;
  border-width: 2px !important;
}

/* -------------------------------------------
   5. HAMBURGER MENU REFLOW (WCAG 1.4.10)
   Ensure sidebar content is accessible at 400%
   ------------------------------------------- */

@media (max-width: 400px) {
  #sidebar-menu {
    overflow-y: auto !important;
  }

  #sidebar-menu .flex-1 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent bottom buttons from overlapping menu items */
  #sidebar-menu > div:last-child {
    position: relative !important;
    flex-shrink: 0;
  }
}

/* -------------------------------------------
   6. ACCORDION / FAQ CONTENT REFLOW (1.4.10)
   Allow full content height instead of fixed max-h
   Note: JavaScript handles the animation, this only applies after transition
   ------------------------------------------- */

.accordion-content.expanded {
  /* Let JavaScript handle max-height during transition */
  /* Only set overflow after transition is complete */
  overflow-y: auto;
}

/* After animation completes (when max-height is 'none'), ensure content flows */
.accordion-content[style*="max-height: none"] {
  max-height: none !important;
  overflow: visible !important;
}

/* -------------------------------------------
   7. CAROUSEL PAUSE BUTTON STYLES
   ------------------------------------------- */

.carousel-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.carousel-pause-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.carousel-pause-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Hidden class for toggling carousel play/pause icons */
.carousel-pause-btn .hidden {
  display: none !important;
}

/* Screen reader only class for visually hidden content */
.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;
}

/* Skip to content link - visible on focus */
.skip-link,
.screen-reader-text {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  background: #c5abd0 !important;
  color: #000 !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  z-index: 10000 !important;
}

.skip-link:focus,
.screen-reader-text:focus {
  top: 0 !important;
}

/* Ensure target is visible when focused */
/* #content:focus,
main:focus {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
} */

/* Progress bar paused state - freeze animation when carousel is paused */
.z-slider-progress.progress-paused span {
  transition: none !important;
}

/* Focus visible for pause button */
.carousel-pause-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   8. DROPDOWN KEYBOARD FOCUS STATES
   ------------------------------------------- */

[role="listbox"] [role="option"]:focus-visible,
[role="listbox"] [role="option"].option-focused {
  background-color: #f3e8ff !important;
  outline: 2px solid #c5abd0 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* -------------------------------------------
   9. SEARCH AUTOCOMPLETE REFLOW (1.4.10)
   ------------------------------------------- */

@media (max-width: 500px) {
  .search-results-dropdown,
  .rlv-search-results {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
  }
}

/* -------------------------------------------
   10. HIGH MAGNIFICATION SUPPORT (200% - 400%)
   WCAG 1.4.10 Reflow, 2.4.11 Focus Not Obscured
   ------------------------------------------- */

/* At 200% zoom (1280px and below) */
@media (max-width: 1280px) {
  /* Ensure hamburger menu items don't overlap */
  #sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    max-height: 100vh !important;
  }

  /* Ensure bottom buttons don't obscure menu items */
  #sidebar-menu > div:last-child {
    position: relative !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }

  /* Ensure scrollable area has enough space */
  #sidebar-menu .flex-1 {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* FAQ dropdown reflow */
  .faq-dropdown-content,
  .accordion-content {
    max-height: none !important;
    overflow: visible !important;
    word-wrap: break-word !important;
  }

  /* Search suggestions at 200% */
  .search-suggestions,
  .autocomplete-results {
    max-width: 90vw !important;
    overflow-x: hidden !important;
    left: 5% !important;
    right: 5% !important;
  }
}

/* At 400% zoom (640px and below) */
@media (max-width: 640px) {
  /* Fix hamburger menu from breaking at 400% - prevent focus trap */
  #sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    max-height: 100vh !important;
  }

  /* Ensure all menu items are visible and accessible - no overlap with bottom buttons */
  #sidebar-menu .flex-1 {
    padding-bottom: 200px !important;
    /* Extra space for bottom buttons */
    min-height: calc(100vh - 300px) !important;
    /* Ensure scrollable area */
    overflow-y: auto !important;
  }

  /* Bottom buttons - stack vertically, ensure they don't trap focus */
  #sidebar-menu > div:last-child {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #551d6f !important;
    padding: 16px !important;
    z-index: 101 !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
  }

  #sidebar-menu > div:last-child a {
    width: 100% !important;
    margin: 0 !important;
    min-height: 54px !important;
    /* Ensure touch target size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ensure bottom buttons receive focus at 400% - strong visibility */
  #sidebar-menu > div:last-child a:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
    z-index: 102 !important;
  }

  /* Fix dropdown icons - use SVG scaling */
  .dropdown-arrow,
  .accordion-arrow {
    width: 24px !important;
    height: 24px !important;
  }

  .dropdown-arrow svg,
  .accordion-arrow svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* FAQ content ensure full visibility */
  .faq-dropdown-content {
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: 16px !important;
  }

  /* Sticky header - don't obscure content */
  .main-menu {
    position: relative !important;
  }

  /* Ensure page scrolls with keyboard focus */
  *:focus-visible {
    scroll-margin-top: 80px !important;
    scroll-margin-bottom: 20px !important;
  }

  /* Ensure hamburger button has visible focus at 400% */
  #hamburger-btn:focus-visible,
  #close-btn:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  }

  /* Ensure all sidebar menu links are accessible at 400% */
  #sidebar-menu a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ensure language dropdown is accessible at 400% */
  .language-dropdown2 {
    padding: 16px 32px !important;
  }

  /* Fix social media icons at 400% - ensure they're focusable */
  #sidebar-menu a:has(svg) {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* -------------------------------------------
   19.1 SCHEDULE DROPDOWN CALENDAR FOCUS FIX
   ------------------------------------------- */

/* Schedule option buttons (days of week) - persistent strong focus */
.schedule-option-btn:focus-visible,
button[value*="Monday"]:focus-visible,
button[value*="Tuesday"]:focus-visible,
button[value*="Wednesday"]:focus-visible,
button[value*="Thursday"]:focus-visible,
button[value*="Friday"]:focus-visible,
button[value*="Saturday"]:focus-visible,
button[value*="Sunday"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Schedule direction tabs (Northbound, Southbound, etc.) */
button[role="tab"][aria-controls*="schedule"]:focus-visible,
#scheduleTabs button:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Schedule dropdown toggle button */
.dropdown-toggle:focus-visible,
button[data-filter="schedule"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
}

/* Prevent hover effects from overriding focus - ensure focus always visible */
a:focus-visible:hover,
button:focus-visible:hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specific fix for navigation buttons - prevent focus fade */
a[href*="buy"]:focus-visible,
a[href*="ticket"]:focus-visible,
a[href*="route"]:focus-visible,
a[href*="map"]:focus-visible,
.main-menu a:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Buy Tickets and All Route Info buttons - persistent strong focus */
.main-menu a[href*="buy"]:focus-visible,
.main-menu a[href*="route"]:focus-visible,
a[class*="border"][class*="white"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Ensure focus doesn't fade on navigation links at any time */
.main-menu a {
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

.main-menu a:focus-visible {
  transition: none !important;
}

/* -------------------------------------------
   20. NAV LINKS FOCUS AT 400% ZOOM
   ------------------------------------------- */

@media (max-width: 640px) {
  /* Sidebar menu links need stronger focus at 400% */
  #sidebar-menu a:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
    background: rgba(197, 171, 208, 0.1) !important;
  }
}

/* -------------------------------------------
   11. PAGE SCROLL WITH KEYBOARD AT HIGH ZOOM
   WCAG 2.4.7, 2.4.11
   ------------------------------------------- */

/* Ensure focused elements scroll into view */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    scroll-behavior: smooth !important;
  }
}

/* Add scroll margins for all focusable elements at high zoom */
@media (max-width: 1280px) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    scroll-margin-top: 100px !important;
    scroll-margin-bottom: 50px !important;
  }

  /* Special handling for elements near top of page */
  .main-menu a:focus,
  .main-menu button:focus {
    scroll-margin-top: 20px !important;
  }
}

/* -------------------------------------------
   12. DOWNLOAD MAP BUTTON FOCUS FIX
   ------------------------------------------- */

/* Ensure footer links have proper focus */
footer a:focus-visible,
footer button:focus-visible {
  outline-color: #c5abd0 !important;
  outline-width: 3px !important;
  outline-style: solid !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   13. LET'S GO BUTTON FOCUS FIX
   ------------------------------------------- */

/* Plan My Trip form button focus - Gold on purple for high contrast */
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.form-submit-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Purple background button focus override - Use gold for WCAG 3:1 contrast */
.bg-\[\#702F8A\] input[type="submit"]:focus-visible,
.bg-\[\#702F8A\] button[type="submit"]:focus-visible,
.bg-\[\#551D6F\] input[type="submit"]:focus-visible,
.bg-\[\#551D6F\] button[type="submit"]:focus-visible,
.bg-\[\#4C205E\] input[type="submit"]:focus-visible,
.bg-\[\#5B1B74\] button[type="submit"]:focus-visible {
  outline-color: #c5abd0 !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* Ensure no transition causes focus to fade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  transition: none !important;
}

/* -------------------------------------------
   13a. BUY TICKETS BUTTON FOCUS PERSISTENCE
   ------------------------------------------- */

/* Ensure Buy Tickets and similar CTAs maintain visible focus */
.btn-buy-tickets:focus-visible,
a[class*="border"][class*="white"]:focus-visible,
[class*="bg-bustang"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  transition: none !important;
}

/* -------------------------------------------
   14. CAROUSEL/SLIDER BUTTONS FOCUS STYLES
   ------------------------------------------- */

/* Bus slider arrows */
.bus_slider_left_arrow:focus-visible,
.bus_slider_right_arrow:focus-visible,
.glide__arrow:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4) !important;
}

/* Disabled carousel buttons should not receive focus */
.bus_slider_left_arrow[disabled],
.bus_slider_right_arrow[disabled],
.glide__arrow[disabled],
button[aria-hidden="true"] {
  pointer-events: none !important;
}

/* Elements inside hidden sidebar should not be focusable */
#sidebar-menu[aria-hidden="true"] a,
#sidebar-menu[aria-hidden="true"] button,
#sidebar-menu[aria-hidden="true"] input,
#sidebar-menu[aria-hidden="true"] select,
#sidebar-menu[aria-hidden="true"] textarea,
#sidebar-menu[aria-hidden="true"] [tabindex] {
  pointer-events: none !important;
}

/* Ensure glide arrows are always focusable and visible when focused */
.glide__arrow:not([disabled]) {
  pointer-events: auto !important;
}

.glide__arrow:not([disabled]):focus {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure bus slider arrows are always focusable and visible when focused */
.bus_slider_left_arrow,
.bus_slider_right_arrow {
  pointer-events: auto !important;
}

.bus_slider_left_arrow:not([disabled]),
.bus_slider_right_arrow:not([disabled]) {
  pointer-events: auto !important;
}

.bus_slider_left_arrow:focus,
.bus_slider_right_arrow:focus,
.bus_slider_left_arrow:not([disabled]):focus,
.bus_slider_right_arrow:not([disabled]):focus {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Swap button in trip planner */
#swap-button:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   15. DROPDOWN TOGGLE BUTTONS FOCUS
   ------------------------------------------- */

/* Strong focus for dropdown toggle buttons on purple background */
.dropdown-toggle:focus-visible,
button[data-target*="DropdownContent"]:focus-visible,
button[aria-controls*="DropdownContent"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: -2px !important;
  box-shadow:
    0 0 0 4px rgba(197, 171, 208, 1),
    0 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

/* Schedule/Map/Fares dropdown buttons - white background focus */
.bg-\[\#702F8A\] .dropdown-toggle:focus-visible,
.bg-\[\#5B2573\] .dropdown-toggle:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Schedule option buttons */
.schedule-option-btn:focus-visible,
button[value][aria-selected]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* Tab buttons in schedule */
[role="tab"]:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   16. PROGRESS INDICATORS (TAB focus)
   ------------------------------------------- */

/* Progress dots in "Arrived at your destination" carousel */
.progress-dot:focus-visible,
button[data-index]:focus-visible,
.rounded-full.border-2:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 0 3px rgba(197, 171, 208, 1),
    0 0 0 5px rgba(112, 47, 138, 0.3) !important;
}

/* -------------------------------------------
   16.1 BUY TICKETS BUTTON IN BUSTANG SCHEDULING
   ------------------------------------------- */

/* Buy Tickets buttons in route intro - high contrast gold focus */
.buy-tickets-button a:focus-visible,
.bg-\[\#702F8A\] a[href*="buy"]:focus-visible,
.bg-\[\#702F8A\] a[href*="ticket"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 5px rgba(197, 171, 208, 1),
    0 0 0 8px rgba(197, 171, 208, 0.2) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* White buttons on purple background - ensure gold focus is visible */
.bg-\[\#702F8A\] .bg-white:focus-visible,
.bg-\[\#4C205E\] .bg-white:focus-visible {
  outline: 4px solid #c5abd0 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(197, 171, 208, 1) !important;
}

/* Outrider tickets buttons - persistent focus, prevent vanishing */
.btn.btn-primary:focus-visible,
a.btn:focus-visible,
a[class*="btn"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Prevent focus fade between button navigations */
.btn.btn-primary:hover:focus-visible,
a.btn:hover:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  outline: 3px solid #c5abd0 !important;
}

/* Snowstang and similar buttons - consistent focus identity */
a[href*="snowstang"]:focus-visible,
a[href*="breckenridge"]:focus-visible,
a[href*="copper"]:focus-visible,
a[href*="loveland"]:focus-visible,
a[href*="arapahoe"]:focus-visible,
a[href*="keystone"]:focus-visible,
a[href*="trip"]:focus-visible,
a[href*="planner"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Ensure all buttons and links have consistent focus */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
}

/* Purple background buttons - use white/gold focus for consistency */
.bg-bustang-primary-500 a:focus-visible,
.bg-\[\#702F8A\] a:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Carousel navigation arrows (prev/next buttons) */
#prev-btn:focus-visible,
#next-btn:focus-visible,
button[aria-label="Previous Slide"]:focus-visible,
button[aria-label="Next Slide"]:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* Generic slider progress indicators */

.z-slider-progress:focus-visible,
.glide__pagination button:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   17. CLOSE/X BUTTONS FOCUS
   ------------------------------------------- */

#close-btn:focus-visible,
.close-button:focus-visible,
button[aria-label*="Close"]:focus-visible,
button[aria-label*="close"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   18. ICON-ONLY BUTTONS ENSURE VISIBILITY
   ------------------------------------------- */

/* Ensure all icon-only buttons have proper hit area */
button:has(> svg:only-child),
button:has(> svg:only-child):not([aria-label]) {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Social media icons in footer */
footer a:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 0.3) !important;
}

/* -------------------------------------------
   21. LINK-BUTTON HYBRID ELEMENTS
   For CTAs that are links but styled as buttons
   Add hover/focus underline to indicate link behavior
   ------------------------------------------- */

/* Links styled as buttons - add underline on hover/focus to indicate navigation */
a[class*="border"][class*="white"]:hover,
a[class*="border"][class*="white"]:focus,
a[class*="bg-"][class*="rounded"]:hover,
a[class*="bg-"][class*="rounded"]:focus {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* Make it clearer these are links, not form buttons */
a[href*="buy"],
a[href*="ticket"],
a[href*="route"] {
  cursor: pointer !important;
}

/* Ensure links that look like buttons have proper ARIA indication */
a[role="button"],
a[class*="rounded"][class*="px-"] {
  text-decoration-skip-ink: none !important;
}

/* -------------------------------------------
   22. PLAN MY TRIP FORM FIELD FOCUS
   ------------------------------------------- */

/* Trip planner form selects - remove focus on mouse clicks */
.focus-mouse,
#trip-planner .focus-mouse,
.select-trigger.focus-mouse,
.r-select .focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

/* Trip planner form selects - use gold for ≥3:1 contrast on light backgrounds (keyboard only) */
.focus-visible,
#trip-planner .focus-visible,
.select-trigger.focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 0 4px rgba(197, 171, 208, 1),
    0 0 0 6px rgba(112, 47, 138, 0.25) !important;
}

/* Also target the r-select wrapper selects for stronger focus */
.r-select .focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 0 4px rgba(197, 171, 208, 1),
    0 0 0 6px rgba(112, 47, 138, 0.25) !important;
}

/* Date input field - remove focus on mouse clicks */
.focus-mouse input[type="date"],
.focus-mouse.date_input {
  outline: none !important;
  box-shadow: none !important;
}

/* Date input field focus - keyboard only */
.focus-visible input[type="date"],
.focus-visible.date_input {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Swap button focus - keyboard only */
#swap-button.focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Swap button - remove focus on mouse clicks */
#swap-button.focus-mouse {
  outline: none !important;
  box-shadow: none !important;
}

/* -------------------------------------------
   23. FAQ ACCORDION ACCESSIBILITY
   ------------------------------------------- */

/* FAQ dropdown buttons - ensure focus visibility */
.faq-dropdown-trigger:focus-visible,
.accordion-trigger:focus-visible,
button[aria-expanded]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* FAQ accordion - prevent focus from disappearing */
.accordion-item:focus-within button,
.accordion-item:focus-within {
  position: relative !important;
  z-index: 10 !important;
}

/* FAQ content at 400% zoom - fully accessible */
@media (max-width: 640px) {
  .faq-dropdown-content,
  .accordion-content {
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    scroll-behavior: smooth !important;
  }

  /* FAQ dropdown arrows - scale properly (SVG already used) */
  .dropdown-arrow svg,
  .accordion-arrow svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* Ensure FAQ panel content is scrollable and accessible */
  .accordion-content[role="region"] {
    position: relative !important;
    z-index: 100 !important;
    max-width: 95vw !important;
  }

  /* FAQ trigger buttons at 400% */
  .accordion-trigger {
    min-height: 60px !important;
    padding: 20px !important;
  }
}

/* FAQ focus indicator - never disappear */
#faq-container button:focus-visible,
#faq-container .accordion-trigger:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* FAQ content panel - ensure keyboard navigation */
.accordion-content[aria-expanded="true"] {
  position: relative !important;
  z-index: 50 !important;
}

/* FAQ question mark image - increase contrast for accessibility */
img[src*="faq.png"],
img[src*="/images/faq"],
img[alt*="faq"],
img[alt*="FAQ"] {
  filter: brightness(1.3) contrast(1.2) saturate(1.1) !important;
}

/* FAQ hero image on black background */
.bg-\[\#000000\] img[src*="faq"],
.bg-\[\#201122\] img[src*="faq"],
.bg-black img[alt*="faq"] {
  filter: brightness(1.5) contrast(1.3) saturate(1.2) !important;
}

/* Ensure FAQ hero section has proper contrast */
section.bg-\[\#000000\] img,
section.bg-black img {
  filter: brightness(1.2) contrast(1.1) !important;
}

/* -------------------------------------------
   25. CAREERS PAGE - APPLY NOW / EXPLORE MORE
   ------------------------------------------- */

/* Career job cards - ensure all interactive elements receive focus */
.bg-\[\#F0E6FF\] a:focus-visible,
.bg-\[\#F0E6FF\] button:focus-visible,
.see_more-toggle:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Apply Now buttons in career cards */
.btn.btn-primary[aria-label*="Apply"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* Explore More button - ensure it's focusable */
.see_more-toggle {
  display: inline-block !important;
  padding: 8px 16px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  cursor: pointer !important;
}

/* Prevent focus from disappearing between career card elements */
.career_job-desc:focus-within {
  position: relative !important;
  z-index: 50 !important;
}

/* Ensure sequential tab order in career cards */
.bg-\[\#F0E6FF\] a,
.bg-\[\#F0E6FF\] button,
.see_more-toggle {
  position: relative !important;
}

/* -------------------------------------------
   26. NAVIGATION BAR SECONDARY FOCUS FIX
   ------------------------------------------- */

/* Remove secondary black focus indicator in navigation */
header a:focus-visible,
header button:focus-visible,
.main-menu a:focus-visible,
.main-menu button:focus-visible,
nav a:focus-visible,
nav button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(197, 171, 208, 1),
    0 0 0 5px rgba(197, 171, 208, 0.2) !important;
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
}

/* Remove double outlines on navigation elements */
header a::after,
header button::after,
.main-menu a::after,
.main-menu button::after {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* At 400% zoom - eliminate secondary focus indicators */
@media (max-width: 640px) {
  header *:focus-visible,
  nav *:focus-visible,
  .main-menu *:focus-visible {
    outline: 4px solid #c5abd0 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------
   24. SEARCH AUTOCOMPLETE AT 400% ZOOM
   ------------------------------------------- */

@media (max-width: 640px) {
  /* Search suggestions dropdown - accessible at 400% */
  .search-suggestions,
  .autocomplete-results,
  .rlv-search-results,
  .search-results,
  [role="listbox"].search-results {
    max-width: 95vw !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    left: 2.5% !important;
    right: 2.5% !important;
    z-index: 10000 !important;
    position: absolute !important;
  }

  /* Search result items - full width and focusable */
  .search-suggestions li,
  .autocomplete-results li,
  .search-results li,
  [role="option"] {
    width: 100% !important;
    padding: 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  .search-suggestions li:focus-visible,
  .autocomplete-results li:focus-visible,
  .search-results li:focus-visible,
  [role="option"]:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: -2px !important;
    background: rgba(197, 171, 208, 0.1) !important;
    z-index: 10001 !important;
  }

  /* Ensure search input doesn't get covered */
  .search-input,
  .search-field,
  input[type="search"].rlv-search-input {
    position: relative !important;
    z-index: 9999 !important;
  }
}

/* Global search autocomplete accessibility - all screen sizes */
.search-suggestions li,
.autocomplete-results li,
.search-results li,
[role="option"],
.search-result-item {
  position: relative !important;
}

.search-suggestions li:focus-visible,
.autocomplete-results li:focus-visible,
.search-results li:focus-visible,
[role="option"]:focus-visible,
.search-result-item:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  background: rgba(197, 171, 208, 0.1) !important;
}

/* Ensure autocomplete dropdown is visible and keyboard accessible */
.search-suggestions,
.autocomplete-results,
.rlv-search-results,
.search-results,
[role="listbox"] {
  position: absolute !important;
  z-index: 9999 !important;
}

/* Prevent content from hiding behind autocomplete */
.search-suggestions *,
.autocomplete-results *,
.rlv-search-results * {
  visibility: visible !important;
}

/* -------------------------------------------
   25. CALENDAR DROPDOWN FOCUS (North Line, Estes, etc)
   ------------------------------------------- */

/* Schedule calendar days focus */
.schedule-calendar-day:focus-visible,
button[class*="day"]:focus-visible,
button[class*="date"]:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px rgba(197, 171, 208, 1) !important;
}

/* Calendar navigation buttons */
.calendar-nav-btn:focus-visible,
.schedule-nav-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   26. CAREERS PAGE - Apply Now Buttons
   ------------------------------------------- */

/* Job card buttons - continuous focus */
.job-card-apply-btn:focus-visible,
.job-card-explore-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   27. ROUTE CAROUSEL/SLIDER BUTTONS
   ------------------------------------------- */

/* Route slider buttons - strong focus */
.route-slider-btn:focus-visible,
.carousel-dot:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   28. MAP ACCESSIBILITY (Routes Page)
   ------------------------------------------- */

/* Route map images - ensure text is readable */
.route-map-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Add text-based city list alternative for map users */
.route-map-cities-list {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .route-map-cities-list {
    display: block !important;
    margin-top: 20px;
  }
}

/* -------------------------------------------
   29. PAGE SCROLL WITH FOCUS AT HIGH ZOOM
   ------------------------------------------- */

/* Ensure page scrolls when tabbing at 200%+ zoom */
@media (max-width: 1280px) {
  *:focus-visible {
    scroll-margin-top: 100px !important;
    scroll-margin-bottom: 50px !important;
  }
}

/* At 400% zoom - ensure all focus is visible */
@media (max-width: 640px) {
  *:focus-visible {
    scroll-margin-top: 120px !important;
    scroll-margin-bottom: 60px !important;
  }

  /* Ensure page scrolls to focused elements */
  html {
    scroll-behavior: smooth !important;
  }

  /* Fix any elements that might be off-screen */
  * {
    scroll-margin-top: 100px !important;
  }
}

/* -------------------------------------------
   29. PAGE SCROLL WITH FOCUS AT HIGH ZOOM
   ------------------------------------------- */

/* At 200% zoom (1280px and below) - ensure keyboard scroll works */
@media (max-width: 1280px) {
  html {
    scroll-behavior: smooth !important;
  }

  *:focus-visible {
    scroll-margin-top: 100px !important;
    scroll-margin-bottom: 50px !important;
  }

  /* Special handling for elements near top of page */
  .main-menu a:focus,
  .main-menu button:focus,
  header *:focus-visible {
    scroll-margin-top: 20px !important;
  }
}

/* At 400% zoom - ensure all focus is visible and page scrolls */
@media (max-width: 640px) {
  html {
    scroll-behavior: smooth !important;
    overflow-x: hidden !important;
  }

  *:focus-visible {
    scroll-margin-top: 150px !important;
    scroll-margin-bottom: 80px !important;
  }

  /* Ensure focused elements in sidebar are visible */
  #sidebar-menu *:focus-visible {
    scroll-margin-top: 80px !important;
    scroll-margin-bottom: 40px !important;
  }

  /* Prevent content from being hidden behind fixed headers */
  .main-menu.sticky,
  header.sticky,
  .sticky-header {
    position: relative !important;
  }
}

/* Force scroll when element receives focus */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    scroll-behavior: smooth !important;
  }
}

/* -------------------------------------------
   29.1 DOWNLOAD APPS BUTTON FOCUS FIX
   ------------------------------------------- */

/* App Store and Google Play download buttons - high contrast focus */
#download-apps a:focus-visible,
a[href*="itunes.apple.com"]:focus-visible,
a[href*="apps.apple.com"]:focus-visible,
a[href*="play.google.com"]:focus-visible,
a.bg-foreground[href*="app"]:focus-visible,
a[href*="/store/apps"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Download app buttons at 400% zoom - ensure focus is visible */
@media (max-width: 640px) {
  #download-apps a:focus-visible,
  a[href*="itunes.apple.com"]:focus-visible,
  a[href*="play.google.com"]:focus-visible {
    outline: 4px solid #c5abd0 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(197, 171, 208, 1) !important;
  }
}

/* Park Safety and similar purple buttons - high contrast gold focus */
a[href*="nps.gov"]:focus-visible,
a[href*="park"]:focus-visible,
a.bg-bustang-primary-500:focus-visible,
.bg-\[\#702F8A\]:focus-visible,
button.bg-bustang-primary-500:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Stay Safe section button focus */
.stay-safe a:focus-visible,
a[href*="wildlife_view"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   30. GLOBAL FIX FOR VANISHING FOCUS
   ------------------------------------------- */

/* Ensure any element that receives focus stays visible */
*:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Don't hide focused elements */
*:focus-visible[hidden],
*:focus-visible[style*="display: none"],
*:focus-visible[style*="visibility: hidden"] {
  display: block !important;
  visibility: visible !important;
}

/* -------------------------------------------
   31. FAQ PAGE SPECIFIC FIXES
   ------------------------------------------- */

/* FAQ hero image - ensure proper contrast on black background */
.bg-\[\#000000\] img[src*="faq"],
.faq-hero-image {
  filter: contrast(1.1) brightness(1.05) !important;
}

/* Purple icons on dark backgrounds - increase contrast */
.bg-\[\#000000\] .icon-purple,
.bg-\[\#201122\] img[src*="purple"],
.bg-black [style*="#702F8A"] {
  filter: brightness(1.3) contrast(1.2) !important;
}

/* FAQ dropdown on black background */
.bg-\[\#000000\] .faq-dropdown-trigger,
.bg-\[\#201122\] .faq-dropdown-trigger {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.bg-\[\#000000\] .faq-dropdown-trigger:focus-visible,
.bg-\[\#201122\] .faq-dropdown-trigger:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   32. DOWNLOAD MAP/SCHEDULE BUTTONS
   ------------------------------------------- */

/* Download Map and Schedule buttons - ensure keyboard access */
a[href*="map"],
a[href*="schedule"][download],
button[download],
a[target="_blank"][rel*="noopener"],
a[target="_blank"][rel*="noopener"]:has(~ *) {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Strong gold focus for download buttons */
a[href*="map"]:focus-visible,
a[href*="schedule"]:focus-visible,
button[download]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Download Map and Schedule button - specific class override */
.btn-outline:has(~ *):focus-visible,
.btn-outline[href*="map"]:focus-visible,
.btn-outline[href*="schedule"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  transition: none !important;
}

/* All download links with target blank */
a[target="_blank"][rel*="noopener"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   33. CAREERS PAGE SPECIFIC
   ------------------------------------------- */

/* Job cards - Apply Now and Explore More buttons */
.job-card a:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Search autocomplete at 400% - Career page */
@media (max-width: 640px) {
  /* Search icon focus */
  .search-icon-btn:focus-visible,
  button[aria-label*="Search"]:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: 2px !important;
  }
}

/* -------------------------------------------
   34. BUS TICKET/PURCHASE BUTTONS
   ------------------------------------------- */

/* Outrider tickets section link buttons */
a[href*="outrider"]:focus-visible,
a[href*="ticket"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Get Tickets button in Snag Seats section - strong gold focus */
a[href*="how-to-buy-tickets"]:focus-visible,
a[href="/how-to-buy-tickets"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  transition: none !important;
}

/* Bustang scheduling section - Buy Tickets button on dark purple */
.bg-\\[\#4C205E\\] .btn-buy-tickets:focus-visible,
.bg-\\[\#5B2573\\] .btn-buy-tickets:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   35. ESTES PAGE SPECIFIC
   ------------------------------------------- */

/* Learn More About Park Safety button - dark purple background */
a[href*="park-safety"]:focus-visible,
a[href*="safety"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Schedule dropdown at Estes */
.schedule-dropdown select:focus-visible,
.schedule-dropdown button:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
}

/* -------------------------------------------
   36. DOWNLOAD APPS SECTION
   ------------------------------------------- */

/* App Store and Google Play buttons */
a[href*="apple.com"][href*="app"]:focus-visible,
a[href*="play.google"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* -------------------------------------------
   37. HERO SLIDER/PROMO SECTION
   ------------------------------------------- */

/* Hero slider buttons - ensure visibility */
.glide__arrow:focus-visible,
.hero-slider-btn:focus-visible,
.promo-carousel-btn:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) !important;
}

/* Carousel progress dots */
.glide__pagination button:focus-visible {
  outline: 2px solid #c5abd0 !important;
  outline-offset: 2px !important;
}

/* -------------------------------------------
   38. STICKY HEADER AT 400% ZOOM
   ------------------------------------------- */

@media (max-width: 640px) {
  /* Ensure sticky header doesn't obscure content */
  .main-menu.sticky,
  header.sticky,
  .sticky-header {
    position: relative !important;
  }

  /* When content is focused, ensure header doesn't overlap */
  *:focus-visible ~ .main-menu,
  *:focus-visible ~ header {
    z-index: 1 !important;
  }
}

/* -------------------------------------------
   39. ALL ROUTE INFO BUTTONS
   ------------------------------------------- */

/* All Route Info button across all pages */
a[href*="all-route-info"]:focus-visible,
a[href*="route-info"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
}

/* Routes page "Go" button - strong focus on purple background */
.bg-\[\#702F8A\][type="submit"]:focus-visible,
button[type="submit"].bg-\[\#702F8A\]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 0 4px rgba(197, 171, 208, 1),
    0 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

/* Routes hero form button override */
#customSelect button[type="submit"]:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 0 4px rgba(197, 171, 208, 1),
    0 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

/* Routes hero dropdown select - gold focus on black background */
#customSelect select:focus-visible,
.bg-black select:focus-visible {
  outline: 3px solid #c5abd0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 171, 208, 1) !important;
  border-color: #c5abd0 !important;
}

/* -------------------------------------------
   40. NAVIGATION FOCUS AT 400%
   ------------------------------------------- */

@media (max-width: 640px) {
  /* Nav items in hamburger menu at 400% */
  #sidebar-menu a:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: -2px !important;
    background: rgba(197, 171, 208, 0.15) !important;
  }

  /* Close button in hamburger menu */
  #close-btn:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(197, 171, 208, 1) !important;
  }

  /* Buy Tickets CTA in hamburger */
  #sidebar-menu a[href*="buy"]:focus-visible,
  #sidebar-menu a[href*="ticket"]:focus-visible {
    outline: 3px solid #c5abd0 !important;
    outline-offset: -1px !important;
  }
}