/* inc/textonly.css
   High-contrast, keyboard-friendly text-only stylesheet for SPOT Mobile.
   Activated via ?text=1 or the TextOnlyMode cookie.
   Meets WCAG 2.1 Level AA: contrast >= 4.5:1, visible focus, no image-only information.
*/

/* -- Base --------------------------------------------------------------- */
html, body {
  background: #ffffff !important;
  color: #000000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* -- Links -------------------------------------------------------------- */
a {
  color: #0000cc !important;
  text-decoration: underline !important;
}
a:visited {
  color: #551a8b !important;
}

/* -- Focus indicators (all interactive elements) ----------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 4px solid #ffbf47 !important;
  outline-offset: 2px !important;
}

/* -- Headings ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  color: #000000 !important;
  line-height: 1.3 !important;
}

/* -- Screen-reader-only content is revealed visibly in text-only mode --- */
/* In the standard JQM view, .sr-only hides headings from sighted users
   so JQM's own visible header bar serves as the visual heading.  In
   text-only mode there is no JQM header bar, so the heading must be
   shown to everyone — hiding it here creates visually-hidden-but-AT-
   exposed content that accessibility scanners correctly flag. */
.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 0.25em !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

/* -- Images ------------------------------------------------------------- */
img, svg {
  max-width: 100%;
  height: auto;
}

/* -- Forms -------------------------------------------------------------- */
input, select, textarea, button {
  font-size: 18px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* -- Hide jQuery Mobile visual decorations ------------------------------ */
[data-role="header"],
[data-role="footer"],
[data-role="content"],
.ui-btn,
.ui-header,
.ui-footer,
.ui-content,
.ui-bar-a, .ui-bar-b, .ui-bar-c, .ui-bar-d, .ui-bar-e {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* -- Header layout: position help button at top-right ------------------ */
[data-role="header"] {
  position: relative !important;
  min-height: 44px !important;
  padding: 6px 56px 6px 8px !important; /* right padding reserves space for the ? button */
  border-bottom: 1px solid #000000 !important;
}

.right-menu-button-container {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.left-menu-button-container {
  display: inline-block !important;
}

/* Header action buttons (back, ?) — WCAG 2.5.5 minimum 44×44 px tap target.
   Height is driven by padding + line-height (9 + 27 + 9 = 45 px) so it works
   regardless of how the browser handles min-height on inline elements. */
.menu-button {
  display: inline-block !important;
  padding: 9px 8px !important;
  line-height: 1.5 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* -- Hide purely decorative elements ----------------------------------- */
.logo,
.head-left,
.head-right {
  display: none !important;
}

/* -- List views: remove jQuery Mobile styling -------------------------- */
ul[data-role="listview"] {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  border: none !important;
}

ul[data-role="listview"] li {
  border-bottom: 1px solid #cccccc !important;
  padding: 8px 0 !important;
  background: none !important;
}

ul[data-role="listview"] li[data-role="list-divider"] {
  background: #f0f0f0 !important;
  color: #000000 !important;
  font-weight: bold !important;
  padding: 6px 8px !important;
}

/* Navigation lists have a visible <h1> heading — hide the redundant
   list-divider label that duplicates it in text-only mode.
   Arrival-info lists are not wrapped in <nav> so their dividers
   (vehicle/ETA headers) remain visible. */
nav ul[data-role="listview"] li[data-role="list-divider"] {
  display: none !important;
}

/* -- Footer ------------------------------------------------------------- */
[data-role="footer"],
[role="contentinfo"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-top: 2px solid #000000 !important;
  padding: 8px !important;
}

[data-role="footer"] a,
[role="contentinfo"] a {
  color: #0000cc !important;
}

/* -- Error states ------------------------------------------------------- */
div.error {
  color: #b91c1c !important;
  font-weight: bold !important;
}
input.error,
textarea.error {
  border: 2px solid #b91c1c !important;
}

/* -- Remove background images ------------------------------------------ */
* {
  background-image: none !important;
}

/* -- List-view tappable items — WCAG 2.5.5 minimum 44×44 px tap target -- */
[data-role="listview"] li:not([data-role="list-divider"]) > a {
  min-height: 44px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  box-sizing: border-box !important;
  display: block !important;
  line-height: 22px !important;
}

/* -- Content-area button links — WCAG 2.5.5 minimum 44×44 px ------------ */
/* In text-only mode JQM does not enhance data-role="button" anchors, so
   they remain inline <a> elements.  min-height has no effect on inline
   elements; display:inline-block is required for the height to apply. */
[data-role="content"] a[data-role="button"] {
  display: inline-block !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 9px 16px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* -- Footer action links — WCAG 2.5.5 minimum 44×44 px ------------------ */
.footer-link {
  display: inline-block !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 9px 8px !important;
  line-height: 1.5 !important;
  color: #0000cc !important;
  text-decoration: underline !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}