/* ============================================
   Версия для слабовидящих — Jazyl Clinic
   WCAG 2.1 AA (контраст ≥ 4.5:1, шрифт ≥ 18px, фокус видим)
   Один комбинированный режим (toggle on/off)
   ============================================ */

/* Trigger button in ribbon */
.a11y-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-right: 16px;
  background: #fff;
  color: #0d3b56;
  border: 2px solid #0d3b56;
  border-radius: 4px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.a11y-trigger:hover, .a11y-trigger:focus { background: #0d3b56; color: #fff; outline: none; }
.a11y-trigger svg { flex: none; }

@media (max-width: 720px) {
  .a11y-trigger { padding: 5px 10px; font-size: 10px; margin-right: 8px; }
  .a11y-trigger-label { display: none; }
}

/* Skip-to-content link (WCAG) */
.skip-link {
  position: absolute; top: -40px; left: 0;
  padding: 8px 16px; background: #0d3b56; color: #fff;
  text-decoration: none; font-weight: 700; z-index: 999999;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ===========================================================
   Когда включён режим (один тумблер html.a11y-on):
   - Высокий контраст: белый текст на чёрном (по WCAG лучше всего читается)
   - Шрифт: Arial 20px (sans-serif, без декоративности)
   - Межбуквенный интервал, межстрочный — увеличены
   - Все декоративные элементы скрыты (паттерны, баннеры, фон)
   - Подчёркивание ссылок, явные границы инпутов
   - Картинки оставлены (кроме декоративных)
   =========================================================== */

html.a11y-on {
  font-size: 20px !important;
}

html.a11y-on,
html.a11y-on body,
html.a11y-on main,
html.a11y-on section,
html.a11y-on header,
html.a11y-on footer,
html.a11y-on nav,
html.a11y-on article,
html.a11y-on aside,
html.a11y-on div {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: Arial, Verdana, sans-serif !important;
  letter-spacing: 0.04em !important;
  line-height: 1.6 !important;
}

html.a11y-on h1, html.a11y-on h2, html.a11y-on h3, html.a11y-on h4, html.a11y-on h5, html.a11y-on h6,
html.a11y-on p, html.a11y-on span, html.a11y-on li, html.a11y-on td, html.a11y-on th,
html.a11y-on label, html.a11y-on small {
  color: #fff !important;
  font-family: Arial, Verdana, sans-serif !important;
  text-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

html.a11y-on h1 { font-size: 2em !important; }
html.a11y-on h2 { font-size: 1.6em !important; }
html.a11y-on h3 { font-size: 1.3em !important; }

html.a11y-on a {
  color: #ffeb3b !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
}
html.a11y-on a:hover, html.a11y-on a:focus {
  background: #ffeb3b !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  outline: 2px solid #ffeb3b !important;
}

html.a11y-on button, html.a11y-on input, html.a11y-on select, html.a11y-on textarea {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 1em !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.a11y-on button:hover, html.a11y-on button:focus,
html.a11y-on input:focus, html.a11y-on select:focus, html.a11y-on textarea:focus {
  background: #ffeb3b !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border-color: #ffeb3b !important;
  outline: 3px solid #ffeb3b !important;
  outline-offset: 2px !important;
}
/* Send-to-form button etc. should still look like CTA */
html.a11y-on .nav-btn, html.a11y-on .btn-primary {
  background: #ffeb3b !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 2px solid #ffeb3b !important;
  font-weight: 800 !important;
}

/* Keep trigger looking inverted (so user can find toggle-off) */
html.a11y-on .a11y-trigger {
  background: #ffeb3b !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border-color: #ffeb3b !important;
}

/* Hide purely decorative elements */
html.a11y-on .hero-bg-pattern,
html.a11y-on .hero-fade,
html.a11y-on .orn-strip,
html.a11y-on .hero-ornament-bottom,
html.a11y-on .hero-image,
html.a11y-on .hero-eyebrow .eyebrow-logo,
html.a11y-on .doc-photo::before,
html.a11y-on .doc-photo {
  display: none !important;
}

/* Make doctor photos still visible but normalized */
html.a11y-on .doc-card--photo .doc-photo-img {
  filter: grayscale(0%) contrast(1.1) !important;
  border: 2px solid #fff !important;
}

/* Make sure focus is always visible (WCAG 2.4.7) */
html.a11y-on *:focus-visible {
  outline: 3px solid #ffeb3b !important;
  outline-offset: 2px !important;
}

/* Form fields: bigger and clear */
html.a11y-on .field span,
html.a11y-on .form-step,
html.a11y-on .form-title { color: #fff !important; }
html.a11y-on .form-times-row .time-chip {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.a11y-on .form-times-row .time-chip.active {
  background: #ffeb3b !important;
  color: #000 !important;
  border-color: #ffeb3b !important;
}

/* Slot cards readable */
html.a11y-on .slot {
  background: #000 !important;
  border: 2px solid #fff !important;
}
html.a11y-on .slot:hover, html.a11y-on .slot-active {
  background: #ffeb3b !important;
  color: #000 !important;
  border-color: #ffeb3b !important;
}
html.a11y-on .slot:hover *, html.a11y-on .slot-active * { color: #000 !important; -webkit-text-fill-color: #000 !important; }

/* Ribbon stays visible */
html.a11y-on .ribbon { background: #000 !important; border-bottom: 2px solid #fff !important; }
html.a11y-on .ribbon-lang { color: #fff !important; }
html.a11y-on .ribbon-lang.active { color: #ffeb3b !important; text-decoration: underline !important; }

/* Nav menu */
html.a11y-on .nav { background: #000 !important; border-bottom: 2px solid #fff !important; }
html.a11y-on .nav-menu a { color: #fff !important; padding: 8px 12px !important; }
html.a11y-on .nav-menu a:hover, html.a11y-on .nav-menu a:focus { background: #ffeb3b !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
html.a11y-on .nav-phone { color: #ffeb3b !important; }
html.a11y-on .logo-img { filter: grayscale(1) brightness(2) contrast(2) !important; }