/**
 * Accessibility Modes & Panel Styles
 * NoFlashStudio.com - Immersive Services
 * WCAG 2.2 Level AA Compliant
 * 
 * Contains styling for:
 * - Accessibility floating panel
 * - Text size adjustment modes
 * - High contrast mode
 * - Enhanced spacing mode
 * - Reduced motion support
 */

/* ===== ACCESSIBILITY PANEL - FLOATING CONTROLS ===== */

.accessibility-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  font-family: inherit;
}

/* Panel toggle button */
.accessibility-panel__toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--electric-blue, #00bfff);
  color: var(--white, #ffffff);
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accessibility-panel__toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 191, 255, 0.4);
}

.accessibility-panel__toggle:focus-visible {
  outline: 3px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
  border-radius: 50%;
}

.accessibility-panel__toggle:active {
  transform: scale(0.98);
}

/* Panel content container */
.accessibility-panel__content {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 280px;
  background: var(--card-dark, #1a1a1a);
  border: 2px solid var(--electric-blue, #00bfff);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 10000;
  animation: slideUp 0.3s ease-out;
}

.accessibility-panel__content[aria-hidden="false"] {
  display: block;
}

/* Panel header */
.accessibility-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.accessibility-panel__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white, #ffffff);
}

.accessibility-panel__close {
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  color: var(--white, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accessibility-panel__close:hover {
  color: var(--electric-blue, #00bfff);
}

.accessibility-panel__close:focus-visible {
  outline: 2px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Panel groups */
.accessibility-panel__group {
  margin-bottom: 18px;
}

.accessibility-panel__group:last-child {
  margin-bottom: 0;
}

.accessibility-panel__group-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Button row */
.accessibility-panel__row {
  display: flex;
  gap: 10px;
}

/* Generic panel buttons */
.accessibility-panel__btn {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid var(--electric-blue, #00bfff);
  background: transparent;
  color: var(--white, #ffffff);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessibility-panel__btn:hover {
  background: rgba(0, 191, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.2);
}

.accessibility-panel__btn:focus-visible {
  outline: 2px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
}

.accessibility-panel__btn:active {
  transform: scale(0.98);
}

.accessibility-panel__btn[aria-pressed="true"] {
  background: var(--electric-blue, #00bfff);
  color: var(--deep-black, #121212);
  border-color: var(--electric-blue, #00bfff);
}

/* Icon buttons */
.accessibility-panel__btn--icon {
  font-size: 20px;
  padding: 10px;
}

/* Text size controls */
.accessibility-panel__text-controls {
  display: flex;
  gap: 8px;
}

.accessibility-panel__text-btn {
  flex: 1;
  padding: 12px 8px;
  border: 2px solid var(--electric-blue, #00bfff);
  background: transparent;
  color: var(--white, #ffffff);
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessibility-panel__text-btn:hover {
  background: rgba(0, 191, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.2);
}

.accessibility-panel__text-btn:focus-visible {
  outline: 2px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
}

.accessibility-panel__text-btn:active {
  transform: scale(0.98);
}

/* Hide panel button */
.accessibility-panel__hide {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white, #ffffff);
  cursor: pointer;
  margin-top: 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 40px;
}

.accessibility-panel__hide:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.accessibility-panel__hide:focus-visible {
  outline: 2px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
}

/* Restore button (shown when panel is hidden) */
.accessibility-panel__restore {
  display: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--electric-blue, #00bfff);
  color: var(--white, #ffffff);
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10000;
  transition: all 0.2s ease;
}

.accessibility-panel__restore:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 191, 255, 0.4);
}

.accessibility-panel__restore:focus-visible {
  outline: 3px solid var(--electric-blue, #00bfff);
  outline-offset: 2px;
}

/* Hidden panel state */
.accessibility-panel--hidden .accessibility-panel__toggle,
.accessibility-panel--hidden .accessibility-panel__content {
  display: none;
}

.accessibility-panel--hidden .accessibility-panel__restore {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== TEXT SIZE MODES ===== */

/* Large text - 125% */
body.text-size-large {
  font-size: 125% !important;
}

/* Ensure all text elements scale proportionally */
body.text-size-large h1,
body.text-size-large h2,
body.text-size-large h3,
body.text-size-large h4,
body.text-size-large h5,
body.text-size-large h6,
body.text-size-large p,
body.text-size-large span,
body.text-size-large div,
body.text-size-large a,
body.text-size-large button,
body.text-size-large li,
body.text-size-large label {
  font-size: 1em;
}

/* Larger text - 150% */
body.text-size-larger {
  font-size: 150% !important;
}

/* Ensure all text elements scale proportionally */
body.text-size-larger h1,
body.text-size-larger h2,
body.text-size-larger h3,
body.text-size-larger h4,
body.text-size-larger h5,
body.text-size-larger h6,
body.text-size-larger p,
body.text-size-larger span,
body.text-size-larger div,
body.text-size-larger a,
body.text-size-larger button,
body.text-size-larger li,
body.text-size-larger label {
  font-size: 1em;
}

/* ===== TAILWIND TEXT SIZE OVERRIDES ===== */
/* Scale Tailwind text size utilities proportionally */

/* When text size is large (125%) */
body.text-size-large .text-xs { font-size: calc(0.75em * 1.25); }
body.text-size-large .text-sm { font-size: calc(0.875em * 1.25); }
body.text-size-large .text-base { font-size: calc(1em * 1.25); }
body.text-size-large .text-lg { font-size: calc(1.125em * 1.25); }
body.text-size-large .text-xl { font-size: calc(1.25em * 1.25); }
body.text-size-large .text-2xl { font-size: calc(1.5em * 1.25); }
body.text-size-large .text-3xl { font-size: calc(1.875em * 1.25); }
body.text-size-large .text-4xl { font-size: calc(2.25em * 1.25); }
body.text-size-large .text-5xl { font-size: calc(3em * 1.25); }
body.text-size-large .text-6xl { font-size: calc(3.75em * 1.25); }
body.text-size-large .text-7xl { font-size: calc(4.5em * 1.25); }

/* When text size is larger (150%) */
body.text-size-larger .text-xs { font-size: calc(0.75em * 1.5); }
body.text-size-larger .text-sm { font-size: calc(0.875em * 1.5); }
body.text-size-larger .text-base { font-size: calc(1em * 1.5); }
body.text-size-larger .text-lg { font-size: calc(1.125em * 1.5); }
body.text-size-larger .text-xl { font-size: calc(1.25em * 1.5); }
body.text-size-larger .text-2xl { font-size: calc(1.5em * 1.5); }
body.text-size-larger .text-3xl { font-size: calc(1.875em * 1.5); }
body.text-size-larger .text-4xl { font-size: calc(2.25em * 1.5); }
body.text-size-larger .text-5xl { font-size: calc(3em * 1.5); }
body.text-size-larger .text-6xl { font-size: calc(3.75em * 1.5); }
body.text-size-larger .text-7xl { font-size: calc(4.5em * 1.5); }

/* ===== ENHANCED SPACING MODE ===== */

body.enhanced-spacing-mode {
  line-height: 2 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

body.enhanced-spacing-mode p,
body.enhanced-spacing-mode li,
body.enhanced-spacing-mode div,
body.enhanced-spacing-mode h1,
body.enhanced-spacing-mode h2,
body.enhanced-spacing-mode h3,
body.enhanced-spacing-mode h4,
body.enhanced-spacing-mode h5,
body.enhanced-spacing-mode h6 {
  margin-bottom: 1.5em !important;
}

body.enhanced-spacing-mode ul,
body.enhanced-spacing-mode ol {
  margin-bottom: 1.5em !important;
  padding-left: 2.5em !important;
}

body.enhanced-spacing-mode li {
  margin-bottom: 0.75em !important;
}

/* ===== HIGH CONTRAST MODE - WCAG 2.2 AA ===== */

@media (prefers-contrast: more) {
  .accessibility-panel__toggle {
    border: 3px solid var(--white, #ffffff);
    background: var(--deep-black, #121212);
    color: var(--white, #ffffff);
  }

  .accessibility-panel__content {
    background: var(--deep-black, #000000);
    border: 3px solid var(--white, #ffffff);
  }

  .accessibility-panel__btn {
    border-width: 3px;
    background: transparent;
    color: var(--white, #ffffff);
  }

  .accessibility-panel__btn[aria-pressed="true"] {
    background: var(--white, #ffffff);
    color: var(--deep-black, #000000);
    border-color: var(--white, #ffffff);
  }

  .accessibility-panel__text-btn {
    border-width: 3px;
  }
}

/* ===== REDUCED MOTION SUPPORT - WCAG 2.3.3 ===== */

@media (prefers-reduced-motion: reduce) {
  .accessibility-panel,
  .accessibility-panel__toggle,
  .accessibility-panel__content,
  .accessibility-panel__btn,
  .accessibility-panel__text-btn,
  .accessibility-panel__hide,
  .accessibility-panel__restore {
    animation: none !important;
    transition: none !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ANIMATIONS ===== */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 640px) {
  .accessibility-panel {
    bottom: 16px;
    left: 16px;
  }

  .accessibility-panel__toggle {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .accessibility-panel__content {
    width: 250px;
    padding: 16px;
    bottom: 66px;
  }

  .accessibility-panel__btn,
  .accessibility-panel__text-btn {
    font-size: 16px;
  }

  .accessibility-panel__restore {
    bottom: 16px;
    left: 16px;
  }
}

/* ===== SCREEN READER ONLY CLASS ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.sr-only:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== HIGH CONTRAST OVERRIDE (body class) ===== */

body.high-contrast-mode {
  background: #000 !important;
  color: #fff !important;
}

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

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

body.high-contrast-mode button {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

body.high-contrast-mode .accessibility-panel__toggle {
  background: #000 !important;
  border: 3px solid #fff !important;
  color: #fff !important;
}

body.high-contrast-mode .accessibility-panel__content {
  background: #000 !important;
  border: 3px solid #fff !important;
}

body.high-contrast-mode .accessibility-panel__btn {
  background: transparent !important;
  color: #fff !important;
  border: 3px solid #fff !important;
}

body.high-contrast-mode .accessibility-panel__btn[aria-pressed="true"] {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* ===== ACCESSIBILITY PANEL IN EREADER MODE (HIGH CONTRAST) ===== */

/* Main panel container */
.ereader-mode .accessibility-panel,
.ereader-mode .accessibility-panel__toggle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Panel toggle button - white background, black icon */
.ereader-mode .accessibility-panel__toggle {
  width: 60px !important;
  height: 60px !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.ereader-mode .accessibility-panel__toggle:hover {
  background: #F0F0F0 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6) !important;
}

.ereader-mode .accessibility-panel__toggle:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Panel content - white background with black text */
.ereader-mode .accessibility-panel__content {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  display: none !important;
  color: #000000 !important;
}

.ereader-mode .accessibility-panel__content[aria-hidden="false"] {
  display: block !important;
}

/* Panel header */
.ereader-mode .accessibility-panel__header {
  border-bottom: 2px solid #000000 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
}

.ereader-mode .accessibility-panel__title {
  color: #000000 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Close button */
.ereader-mode .accessibility-panel__close {
  background: transparent !important;
  color: #000000 !important;
  border: none !important;
  font-size: 28px !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
}

.ereader-mode .accessibility-panel__close:hover {
  color: #333333 !important;
}

.ereader-mode .accessibility-panel__close:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Group labels */
.ereader-mode .accessibility-panel__group-label {
  color: #000000 !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Panel buttons - high contrast style */
.ereader-mode .accessibility-panel__btn,
.ereader-mode .accessibility-panel__text-btn {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 4px !important;
  padding: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: none !important;
}

.ereader-mode .accessibility-panel__btn:hover,
.ereader-mode .accessibility-panel__text-btn:hover {
  background: #F0F0F0 !important;
  border-color: #000000 !important;
}

.ereader-mode .accessibility-panel__btn:focus-visible,
.ereader-mode .accessibility-panel__text-btn:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Pressed/active state */
.ereader-mode .accessibility-panel__btn[aria-pressed="true"] {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

/* Hide panel button */
.ereader-mode .accessibility-panel__hide {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 10px !important;
}

.ereader-mode .accessibility-panel__hide:hover {
  background: #F0F0F0 !important;
  border-color: #000000 !important;
}

.ereader-mode .accessibility-panel__hide:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Restore button - when panel is hidden */
.ereader-mode .accessibility-panel__restore {
  display: none !important;
  width: 60px !important;
  height: 60px !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: absolute !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 10000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.ereader-mode .accessibility-panel--hidden .accessibility-panel__restore {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ereader-mode .accessibility-panel__restore:hover {
  background: #F0F0F0 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6) !important;
}

.ereader-mode .accessibility-panel__restore:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}