/**
 * Accessibility Mode Styles
 * High contrast, enlarged fonts, simplified layout for visually impaired users
 */

/* ============================================
   CSS VARIABLES FOR FONT SIZE
   ============================================ */
:root {
  --accessibility-font-size: 16px;
}

/* ============================================
   BASE ACCESSIBILITY MODE
   ============================================ */
body.accessibility-mode {
  font-size: var(--accessibility-font-size) !important;
  line-height: 1.8 !important;
  word-spacing: 0.05em !important;
}

/* Font size variations */
body.font-size-100 { --accessibility-font-size: 16px; }
body.font-size-150 { --accessibility-font-size: 24px; }
body.font-size-200 { --accessibility-font-size: 32px; }

/* Color schemes */
body.scheme-white-bg,
body.accessibility-mode {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.scheme-black-bg {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Header in color schemes */
body.scheme-black-bg header,
body.scheme-black-bg .header,
body.scheme-black-bg .site-header,
body.scheme-black-bg .main-header,
body.scheme-black-bg .page-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-bottom-color: #333333 !important;
}

/* Links */
body.accessibility-mode a,
body.scheme-white-bg a {
  color: #0000ee !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

body.scheme-black-bg a {
  color: #ffff00 !important;
}

body.accessibility-mode a:hover,
body.accessibility-mode a:focus,
body.scheme-white-bg a:hover,
body.scheme-white-bg a:focus {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

body.scheme-black-bg a:hover,
body.scheme-black-bg a:focus {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

/* Focus indicators */
body.accessibility-mode *:focus,
body.scheme-white-bg *:focus,
body.scheme-black-bg *:focus {
  outline: 3px solid #ff0000 !important;
  outline-offset: 2px !important;
}

/* Headings & text */
body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3,
body.accessibility-mode h4,
body.accessibility-mode h5,
body.accessibility-mode h6,
body.accessibility-mode p,
body.accessibility-mode li,
body.accessibility-mode td,
body.accessibility-mode th,
body.accessibility-mode span,
body.accessibility-mode div,
body.scheme-white-bg h1,
body.scheme-white-bg h2,
body.scheme-white-bg h3,
body.scheme-white-bg h4,
body.scheme-white-bg h5,
body.scheme-white-bg h6,
body.scheme-white-bg p,
body.scheme-white-bg li,
body.scheme-white-bg td,
body.scheme-white-bg th,
body.scheme-white-bg span,
body.scheme-white-bg div {
  color: #000000 !important;
  background-color: transparent !important;
}

body.scheme-black-bg h1,
body.scheme-black-bg h2,
body.scheme-black-bg h3,
body.scheme-black-bg h4,
body.scheme-black-bg h5,
body.scheme-black-bg h6,
body.scheme-black-bg p,
body.scheme-black-bg li,
body.scheme-black-bg td,
body.scheme-black-bg th,
body.scheme-black-bg span,
body.scheme-black-bg div {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* ============================================
   FONTS - SANS-SERIF ONLY
   ============================================ */
body.accessibility-mode,
body.accessibility-mode body,
body.accessibility-mode p,
body.accessibility-mode li,
body.accessibility-mode td,
body.accessibility-mode th,
body.accessibility-mode span,
body.accessibility-mode div,
body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3,
body.accessibility-mode h4,
body.accessibility-mode h5,
body.accessibility-mode h6,
body.accessibility-mode a,
body.accessibility-mode button,
body.accessibility-mode input,
body.accessibility-mode select,
body.accessibility-mode textarea,
body.accessibility-mode label,
body.scheme-white-bg,
body.scheme-white-bg body,
body.scheme-black-bg,
body.scheme-black-bg body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* ============================================
   FONT SIZES - ENLARGED
   ============================================ */
body.accessibility-mode h1,
body.scheme-white-bg h1,
body.scheme-black-bg h1 { font-size: 2em !important; }

body.accessibility-mode h2,
body.scheme-white-bg h2,
body.scheme-black-bg h2 { font-size: 1.75em !important; }

body.accessibility-mode h3,
body.scheme-white-bg h3,
body.scheme-black-bg h3 { font-size: 1.5em !important; }

body.accessibility-mode h4,
body.scheme-white-bg h4,
body.scheme-black-bg h4 { font-size: 1.3em !important; }

body.accessibility-mode h5,
body.scheme-white-bg h5,
body.scheme-black-bg h5 { font-size: 1.15em !important; }

body.accessibility-mode h6,
body.scheme-white-bg h6,
body.scheme-black-bg h6 { font-size: 1em !important; }

body.accessibility-mode p,
body.accessibility-mode li,
body.scheme-white-bg p,
body.scheme-white-bg li,
body.scheme-black-bg p,
body.scheme-black-bg li { font-size: 1.1em !important; }

/* ============================================
   LAYOUT - WIDER CONTENT
   ============================================ */
body.accessibility-mode .container,
body.accessibility-mode .container-fluid,
body.accessibility-mode .wrapper,
body.accessibility-mode main,
body.accessibility-mode article,
body.accessibility-mode .content-area,
body.scheme-white-bg .container,
body.scheme-white-bg .container-fluid,
body.scheme-black-bg .container,
body.scheme-black-bg .container-fluid {
  max-width: 1400px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.accessibility-mode .article-content,
body.scheme-white-bg .article-content,
body.scheme-black-bg .article-content {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* ============================================
   IMAGES - INCREASED CONTRAST
   ============================================ */
body.accessibility-mode img,
body.scheme-white-bg img,
body.scheme-black-bg img {
  max-width: 100% !important;
  height: auto !important;
  border: 2px solid currentColor !important;
}

body.scheme-white-bg img {
  border-color: #000000 !important;
}

body.scheme-black-bg img {
  border-color: #ffffff !important;
  filter: grayscale(30%) contrast(1.1) !important;
}

/* ============================================
   BUTTONS & INPUTS - ENLARGED
   ============================================ */
body.accessibility-mode button,
body.accessibility-mode .btn,
body.accessibility-mode input[type="submit"],
body.accessibility-mode input[type="button"],
body.accessibility-mode .button,
body.scheme-white-bg button,
body.scheme-white-bg .btn,
body.scheme-white-bg input[type="submit"],
body.scheme-white-bg input[type="button"],
body.scheme-black-bg button,
body.scheme-black-bg .btn,
body.scheme-black-bg input[type="submit"],
body.scheme-black-bg input[type="button"] {
  padding: 12px 24px !important;
  font-size: 1.1em !important;
  border: 3px solid currentColor !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

body.scheme-white-bg button,
body.scheme-white-bg .btn {
  border-color: #000000 !important;
}

body.scheme-black-bg button,
body.scheme-black-bg .btn {
  border-color: #ffffff !important;
  background-color: #333333 !important;
  color: #ffffff !important;
}

body.accessibility-mode button:hover,
body.accessibility-mode button:focus,
body.accessibility-mode .btn:hover,
body.accessibility-mode .btn:focus,
body.scheme-white-bg button:hover,
body.scheme-white-bg button:focus,
body.scheme-white-bg .btn:hover,
body.scheme-white-bg .btn:focus {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

body.scheme-black-bg button:hover,
body.scheme-black-bg button:focus,
body.scheme-black-bg .btn:hover,
body.scheme-black-bg .btn:focus {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

body.accessibility-mode input,
body.accessibility-mode select,
body.accessibility-mode textarea,
body.scheme-white-bg input,
body.scheme-white-bg select,
body.scheme-white-bg textarea,
body.scheme-black-bg input,
body.scheme-black-bg select,
body.scheme-black-bg textarea {
  padding: 10px !important;
  font-size: 1em !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
  background-color: transparent !important;
}

body.scheme-white-bg input,
body.scheme-white-bg select,
body.scheme-white-bg textarea {
  border-color: #000000 !important;
  color: #000000 !important;
}

body.scheme-black-bg input,
body.scheme-black-bg select,
body.scheme-black-bg textarea {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.accessibility-mode input:focus,
body.accessibility-mode select:focus,
body.accessibility-mode textarea:focus,
body.scheme-white-bg input:focus,
body.scheme-white-bg select:focus,
body.scheme-white-bg textarea:focus,
body.scheme-black-bg input:focus,
body.scheme-black-bg select:focus,
body.scheme-black-bg textarea:focus {
  outline: 3px solid #ff0000 !important;
  outline-offset: 2px !important;
}

/* ============================================
   REMOVE ANIMATIONS & TRANSITIONS
   ============================================ */
body.accessibility-mode *,
body.accessibility-mode *::before,
body.accessibility-mode *::after,
body.scheme-white-bg *,
body.scheme-white-bg *::before,
body.scheme-white-bg *::after,
body.scheme-black-bg *,
body.scheme-black-bg *::before,
body.scheme-black-bg *::after {
  animation: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transform: none !important;
}

/* ============================================
   REMOVE BACKGROUND IMAGES & DECORATIVE
   ============================================ */
body.accessibility-mode [style*="background-image"],
body.scheme-white-bg [style*="background-image"],
body.scheme-black-bg [style*="background-image"] {
  background-image: none !important;
  background-color: transparent !important;
}

body.accessibility-mode .decorative,
body.accessibility-mode .bg-image,
body.accessibility-mode .background-image,
body.accessibility-mode .banner-image,
body.scheme-white-bg .decorative,
body.scheme-white-bg .bg-image,
body.scheme-black-bg .decorative,
body.scheme-black-bg .bg-image {
  display: none !important;
}

/* Hide decorative ::after elements in accessibility mode */
body.accessibility-mode .main-img::after,
body.scheme-white-bg .main-img::after,
body.scheme-black-bg .main-img::after {
  display: none !important;
}

/* Hide decorative page backgrounds in accessibility mode */
body.accessibility-mode .page-bg_left,
body.accessibility-mode .page-bg_right,
body.scheme-white-bg .page-bg_left,
body.scheme-white-bg .page-bg_right,
body.scheme-black-bg .page-bg_left,
body.scheme-black-bg .page-bg_right {
  display: none !important;
}

/* ============================================
   NAVIGATION - SIMPLIFIED & ENLARGED
   ============================================ */
body.accessibility-mode .main-menu li,
body.accessibility-mode .nav-menu li,
body.accessibility-mode header nav ul li,
body.scheme-white-bg .main-menu li,
body.scheme-white-bg .nav-menu li,
body.scheme-black-bg .main-menu li,
body.scheme-black-bg .nav-menu li {
  padding: 8px 16px !important;
  margin: 4px 0 !important;
}

body.accessibility-mode .main-menu a,
body.accessibility-mode .nav-menu a,
body.accessibility-mode header nav a,
body.scheme-white-bg .main-menu a,
body.scheme-white-bg .nav-menu a,
body.scheme-black-bg .main-menu a,
body.scheme-black-bg .nav-menu a {
  padding: 12px 20px !important;
  font-size: 1.1em !important;
  display: block !important;
}

/* Skip link - always visible */
body.accessibility-mode .skip-link,
body.scheme-white-bg .skip-link,
body.scheme-black-bg .skip-link {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 15px 30px !important;
  margin: 10px !important;
  font-size: 1.2em !important;
  display: block !important;
}

body.scheme-white-bg .skip-link {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

body.scheme-black-bg .skip-link {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

/* ============================================
   TABLES - HIGH CONTRAST
   ============================================ */
body.accessibility-mode table,
body.scheme-white-bg table,
body.scheme-black-bg table {
  border-collapse: collapse !important;
  width: 100% !important;
}

body.accessibility-mode th,
body.accessibility-mode td,
body.scheme-white-bg th,
body.scheme-white-bg td,
body.scheme-black-bg th,
body.scheme-black-bg td {
  padding: 12px 16px !important;
  border: 2px solid currentColor !important;
  text-align: left !important;
}

body.scheme-white-bg th { background-color: #f0f0f0 !important; color: #000000 !important; }
body.scheme-black-bg th { background-color: #333333 !important; color: #ffffff !important; }

/* ============================================
   ACCESSIBILITY TOGGLE BUTTON - ICON STYLE
   ============================================ */
a.accessibility-toggle {
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 0 2.6rem;
  background: none;
  color: #b2b2b2;
  cursor: pointer;
  text-decoration: none;
}

a.accessibility-toggle:hover,
a.accessibility-toggle:focus {
  color: #e73046;
}

a.accessibility-toggle:focus {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

a.accessibility-toggle svg {
  display: block;
  width: 3.2rem;
  height: 2.3rem;
}

a.accessibility-toggle svg path {
  fill: currentColor !important;
}

body.accessibility-mode a.accessibility-toggle {
  color: #ffffff;
}

body.accessibility-mode a.accessibility-toggle:hover {
  color: #e73046;
}

/* ============================================
   ACCESSIBILITY PANEL - FLOATING BOTTOM
   ============================================ */
.accessibility-panel {
  display: none !important;
  background-color: #f5f5f5 !important;
}

body.accessibility-mode .accessibility-panel,
body.scheme-white-bg .accessibility-panel,
body.scheme-black-bg .accessibility-panel {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 10px 20px !important;
  background-color: #f5f5f5 !important;
  border-top: 2px solid #e73046 !important;
}

body.scheme-black-bg.accessibility-mode .accessibility-panel,
body.scheme-black-bg .accessibility-panel {
  background-color: #1a1a1a !important;
}

.accessibility-panel-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accessibility-panel-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.scheme-white-bg .accessibility-panel-label { color: #333; }
body.scheme-black-bg .accessibility-panel-label { color: #ccc; }

/* Font size buttons - compact pills */
.accessibility-font-btns {
  display: flex;
  gap: 4px;
}

.accessibility-font-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.scheme-white-bg .accessibility-font-btn {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}

body.scheme-black-bg .accessibility-font-btn {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

body.scheme-white-bg .accessibility-font-btn:hover,
body.scheme-white-bg .accessibility-font-btn.active {
  background: #e73046 !important;
  color: #fff !important;
}

body.scheme-black-bg .accessibility-font-btn:hover,
body.scheme-black-bg .accessibility-font-btn.active {
  background: #00ccff !important;
  color: #000 !important;
}

.accessibility-font-btn.active {
  outline: 2px solid #ff0000 !important;
  outline-offset: 1px !important;
}

/* Font size indicators */
.accessibility-font-btn[data-size="100"] { font-size: 11px !important; }
.accessibility-font-btn[data-size="150"] { font-size: 15px !important; }
.accessibility-font-btn[data-size="200"] { font-size: 19px !important; }

/* Color scheme buttons - compact */
.accessibility-scheme-btns {
  display: flex;
  gap: 4px;
}

.accessibility-scheme-btn {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
}

.accessibility-scheme-btn.scheme-white {
  background-color: #ffffff !important;
  border: 2px solid #cccccc !important;
}

.accessibility-scheme-btn.scheme-black {
  background-color: #000000 !important;
  border: 2px solid #888888 !important;
}

.accessibility-scheme-btn.active {
  box-shadow: 0 0 0 3px #e73046 !important;
}

body.scheme-black-bg .accessibility-scheme-btn.active {
  box-shadow: 0 0 0 3px #ffffff !important;
}

/* Speak button - compact icon style */
.accessibility-speak-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}

.accessibility-close-btn {
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accessibility-close-btn svg {
  width: 24px !important;
  height: 24px !important;
}

body.scheme-white-bg .accessibility-speak-btn,
body.scheme-white-bg .accessibility-close-btn {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}

body.scheme-black-bg .accessibility-speak-btn,
body.scheme-black-bg .accessibility-close-btn {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

body.scheme-white-bg .accessibility-speak-btn:hover,
body.scheme-white-bg .accessibility-speak-btn.speaking,
body.scheme-white-bg .accessibility-close-btn:hover {
  background: #e73046 !important;
  color: #fff !important;
}

body.scheme-white-bg .accessibility-speak-btn:hover svg path,
body.scheme-white-bg .accessibility-speak-btn.speaking svg path,
body.scheme-white-bg .accessibility-close-btn:hover svg path {
  fill: #ffffff !important;
}

body.scheme-black-bg .accessibility-speak-btn:hover,
body.scheme-black-bg .accessibility-speak-btn.speaking,
body.scheme-black-bg .accessibility-close-btn:hover {
  background: #00ccff !important;
  color: #000 !important;
}

.accessibility-speak-btn svg,
.accessibility-close-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.accessibility-close-btn {
  text-decoration: none !important;
}

/* Add bottom padding to body when accessibility panel is visible */
html body.accessibility-mode {
  padding-bottom: 40px !important;
}

body.accessibility-mode,
html.accessibility-mode {
  padding-bottom: 40px !important;
}

.accessibility-mode .page,
.accessibility-mode .overflow__box,
.accessibility-mode .page-bg__container {
  padding-bottom: 40px !important;
}

.accessibility-mode .footer,
.accessibility-mode footer {
  margin-top: 40px !important;
}

/* Speak button */
.accessibility-speak-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
}

.accessibility-speak-btn svg {
  width: 20px;
  height: 20px;
}

.accessibility-speak-btn.speaking span {
  display: none;
}

.accessibility-speak-btn.speaking .speak-stop-text {
  display: inline;
}

.accessibility-speak-btn .speak-stop-text {
  display: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   FOOTER ACCESSIBILITY BUTTON
   ============================================ */
.footer__accessibility {
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

body.scheme-white-bg .footer__accessibility {
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.scheme-black-bg .footer__accessibility {
  border-top-color: rgba(255, 255, 255, 0.2);
}