/* MY OTC — Senior-Friendly Theme
   High contrast, large text, accessible design for elderly users
   Include after main styles to override defaults */

/* ============================================
   ACCESSIBILITY OVERRIDES FOR SENIORS
   ============================================ */

/* Base: larger default font, better line height */
:root {
  --senior-font-size: 18px;
  --senior-line-height: 1.8;
  --senior-letter-spacing: 0.02em;
  --green-primary: #047857;
  --green-dark: #065f46;
  --text-dark: #111827;
  --text-medium: #374151;
  --bg-light: #f8faf9;
  --focus-ring: 3px solid #f59e0b;
}

body {
  font-size: var(--senior-font-size) !important;
  line-height: var(--senior-line-height) !important;
  letter-spacing: var(--senior-letter-spacing) !important;
  -webkit-font-smoothing: antialiased;
}

/* High Contrast Mode */
body.high-contrast {
  --text-dark: #000000;
  --text-medium: #1a1a1a;
  --bg-light: #ffffff;
  background: #ffffff !important;
}

body.high-contrast * {
  border-color: #000 !important;
}

body.high-contrast a {
  color: #0000EE !important;
  text-decoration: underline !important;
}

body.high-contrast a:visited {
  color: #551A8B !important;
}

/* Large text mode */
body.text-xl {
  font-size: 22px !important;
}

body.text-xxl {
  font-size: 26px !important;
}

/* Touch targets: minimum 44x44px per WCAG 2.5.5 */
a, button, input[type="submit"], input[type="button"],
.btn, .cta-btn, [role="button"] {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 12px 24px !important;
}

/* Focus indicators — visible for keyboard navigation */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus {
  outline: var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  z-index: 10000;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
}

/* Form inputs: larger, clearer */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  font-size: 18px !important;
  padding: 14px 16px !important;
  border: 2px solid #9ca3af !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--text-dark) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--green-primary) !important;
}

/* Labels: always visible, above input */
label {
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: var(--text-dark) !important;
}

/* Buttons: large, clear, high contrast */
button, .btn, .cta-btn, input[type="submit"] {
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

button:hover, .btn:hover, .cta-btn:hover {
  transform: scale(1.02) !important;
}

/* No hover-only interactions — everything clickable */
[title]:not([aria-label]) {
  cursor: help;
}

/* Images: always have alt text indicator if missing */
img:not([alt]), img[alt=""] {
  outline: 3px dashed #ef4444 !important;
}

/* Tables: readable */
table {
  font-size: 16px !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

th, td {
  padding: 12px 16px !important;
  border: 1px solid #d1d5db !important;
  text-align: left !important;
}

th {
  background: var(--green-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

tr:nth-child(even) {
  background: #f3f4f6 !important;
}

/* Phone numbers: always tappable */
a[href^="tel:"] {
  font-size: 1.2em !important;
  font-weight: 700 !important;
  color: var(--green-primary) !important;
  white-space: nowrap !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast OS preference */
@media (prefers-contrast: high) {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  a { color: #0000EE !important; text-decoration: underline !important; }
}

/* Print: clean, readable */
@media print {
  body { font-size: 14pt !important; color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  .accessibility-toolbar, nav, footer { display: none !important; }
}

/* ============================================
   ACCESSIBILITY TOOLBAR (floating)
   ============================================ */
.accessibility-toolbar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #fff;
  border: 2px solid #d1d5db;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 200px;
}

.accessibility-toolbar button {
  background: var(--green-primary);
  color: #fff;
  border: none;
  padding: 10px 16px !important;
  border-radius: 8px;
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.accessibility-toolbar button:hover {
  background: var(--green-dark);
}

.accessibility-toolbar .toolbar-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
}

@media (max-width: 640px) {
  .accessibility-toolbar {
    bottom: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}