/* =============================================================================
   LIVE FICTION CLUB - Accessibility Styles
   Themes: light, high-contrast (dark + light), dyslexia font
   Toolbar panel, TTS highlight, print styles
   ============================================================================= */

/* =============================================================================
   FONT FACE - OpenDyslexic (open source)
   CDN primary, local file fallback
   ============================================================================= */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   LIGHT THEME (.theme-light)
   Overrides ALL color, shadow, and glow tokens from design-tokens.css
   ============================================================================= */

.theme-light {
  /* Backgrounds */
  --bg-dark: #f8f8fa;
  --bg-panel: #ffffff;
  --bg-elevated: #f0f0f2;
  --bg-hover: #e8e8ec;

  /* Accent - slightly deeper red for contrast on light bg */
  --accent: #c01030;
  --accent-hover: #9b0c25;
  --accent-glow: #d41535;
  --accent-soft: rgba(192, 16, 48, 0.1);
  --accent-border: rgba(192, 16, 48, 0.3);

  /* Text */
  --text-primary: #1a1a2e;
  --text-muted: #555566;
  --text-subtle: #777788;
  --text-disabled: #aaaaaa;

  /* Borders */
  --border: #d0d0d8;
  --border-light: #b8b8c4;
  --border-accent: rgba(192, 16, 48, 0.3);

  /* Semantic colors stay vivid but adapted */
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.1);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --error: #dc2626;
  --error-soft: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.1);

  /* Shadows - lighter for light backgrounds */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: none;
  --shadow-glow-intense: none;
}

/* Ensure body background and text adapt in light theme */
.theme-light body {
  background: var(--bg-dark);
  color: var(--text-primary);
}

/* Light theme: invert dark inputs/selects */
.theme-light input,
.theme-light textarea,
.theme-light select {
  background: var(--bg-panel);
  color: var(--text-primary);
  border-color: var(--border);
}

/* Light theme: cards and surfaces */
.theme-light .card,
.theme-light .panel,
.theme-light [class*="bg-dark"],
.theme-light [class*="bg-panel"] {
  background: var(--bg-panel);
  color: var(--text-primary);
}

/* =============================================================================
   HIGH CONTRAST DARK (.high-contrast)
   Pure black background with white text — 7:1+ ratios throughout
   ============================================================================= */

.high-contrast {
  --bg-dark: #000000;
  --bg-panel: #000000;
  --bg-elevated: #0a0a0a;
  --bg-hover: #1a1a1a;

  --accent: #ff4d6d;
  --accent-hover: #ff6b85;
  --accent-glow: #ff4d6d;
  --accent-soft: rgba(255, 77, 109, 0.2);
  --accent-border: #ff4d6d;

  --text-primary: #ffffff;
  --text-muted: #e0e0e0;
  --text-subtle: #cccccc;
  --text-disabled: #999999;

  --border: #ffffff;
  --border-light: #cccccc;
  --border-accent: #ff4d6d;

  --success: #00ff88;
  --success-soft: rgba(0, 255, 136, 0.15);
  --warning: #ffcc00;
  --warning-soft: rgba(255, 204, 0, 0.15);
  --error: #ff4444;
  --error-soft: rgba(255, 68, 68, 0.15);
  --info: #44aaff;
  --info-soft: rgba(68, 170, 255, 0.15);

  --shadow-sm: 0 0 0 1px #ffffff;
  --shadow-md: 0 0 0 2px #ffffff;
  --shadow-lg: 0 0 0 3px #ffffff;
  --shadow-glow: none;
  --shadow-glow-intense: none;
}

/* High contrast: force visible borders on interactive elements */
.high-contrast button,
.high-contrast input,
.high-contrast textarea,
.high-contrast select,
.high-contrast a {
  border: 2px solid currentColor !important;
}

.high-contrast .card,
.high-contrast .badge,
.high-contrast .alert,
.high-contrast .panel,
.high-contrast nav {
  border: 2px solid currentColor !important;
}

/* Ensure focus is extremely visible in high contrast */
.high-contrast :focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
}

/* =============================================================================
   HIGH CONTRAST LIGHT (.theme-light.high-contrast)
   Pure white with pure black — maximum contrast
   ============================================================================= */

.theme-light.high-contrast {
  --bg-dark: #ffffff;
  --bg-panel: #ffffff;
  --bg-elevated: #f5f5f5;
  --bg-hover: #eeeeee;

  --accent: #aa0022;
  --accent-hover: #880018;
  --accent-glow: #aa0022;
  --accent-soft: rgba(170, 0, 34, 0.15);
  --accent-border: #aa0022;

  --text-primary: #000000;
  --text-muted: #111111;
  --text-subtle: #222222;
  --text-disabled: #555555;

  --border: #000000;
  --border-light: #333333;
  --border-accent: #aa0022;

  --success: #006600;
  --success-soft: rgba(0, 102, 0, 0.15);
  --warning: #885500;
  --warning-soft: rgba(136, 85, 0, 0.15);
  --error: #cc0000;
  --error-soft: rgba(204, 0, 0, 0.15);
  --info: #0044cc;
  --info-soft: rgba(0, 68, 204, 0.15);

  --shadow-sm: 0 0 0 1px #000000;
  --shadow-md: 0 0 0 2px #000000;
  --shadow-lg: 0 0 0 3px #000000;
  --shadow-glow: none;
  --shadow-glow-intense: none;
}

.theme-light.high-contrast :focus-visible {
  outline: 3px solid #0044cc !important;
  outline-offset: 3px !important;
}

/* =============================================================================
   DYSLEXIA FONT (.font-dyslexia)
   Applies OpenDyslexic to all elements; wider spacing aids reading
   ============================================================================= */

.font-dyslexia,
.font-dyslexia * {
  font-family: 'OpenDyslexic', system-ui, sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8 !important;
}

/* =============================================================================
   TTS HIGHLIGHT
   Visual indicator for the paragraph/sentence being read aloud
   ============================================================================= */

.tts-reading {
  background: var(--accent-soft, rgba(225, 29, 72, 0.15));
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
  transition: background var(--transition-fast, 150ms ease),
              outline-color var(--transition-fast, 150ms ease);
}

/* =============================================================================
   ACCESSIBILITY TOOLBAR
   Fixed trigger button + slide-in panel with all a11y controls
   ============================================================================= */

/* Trigger button — 48×48 fixed bottom-right */
.a11y-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-light, #3f3f46);
  background: var(--bg-elevated, #1a1a1f);
  color: var(--text-primary, #f1f1f3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.4));
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
}

.a11y-trigger:hover {
  background: var(--bg-hover, #222228);
  border-color: var(--accent, #e11d48);
  transform: scale(1.05);
}

.a11y-trigger:focus-visible {
  outline: 3px solid var(--accent, #e11d48);
  outline-offset: 3px;
}

.a11y-trigger[aria-expanded="true"] {
  border-color: var(--accent, #e11d48);
  background: var(--accent-soft, #4a1525);
}

/* Panel — 280px, slides in from the right */
.a11y-panel {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 9998;
  width: 280px;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  background: var(--bg-panel, #111114);
  border: 1px solid var(--border-light, #3f3f46);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.5));
  padding: 1rem;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.a11y-panel.is-open {
  display: flex;
}

/* Panel header */
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.a11y-panel__title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-muted, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.1em);
  margin: 0;
}

.a11y-panel__close {
  background: none;
  border: none;
  color: var(--text-muted, #a1a1aa);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm, 6px);
  line-height: 1;
  font-size: 1.1rem;
}

.a11y-panel__close:hover {
  color: var(--text-primary, #f1f1f3);
  background: var(--bg-hover, #222228);
}

/* Divider between sections */
.a11y-panel__divider {
  height: 1px;
  background: var(--border, #27272a);
  margin: 0.25rem 0;
}

/* Section label */
.a11y-section-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-subtle, #8b8b94);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  margin: 0 0 0.5rem;
}

/* Toggle row */
.a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.a11y-toggle-label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-primary, #f1f1f3);
  flex: 1;
}

/* Toggle switch */
.a11y-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.a11y-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.a11y-switch__track {
  position: absolute;
  inset: 0;
  background: var(--bg-hover, #222228);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-light, #3f3f46);
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease);
}

.a11y-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted, #a1a1aa);
  border-radius: 50%;
  transition: transform var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease);
}

.a11y-switch input:checked + .a11y-switch__track {
  background: var(--accent, #e11d48);
  border-color: var(--accent, #e11d48);
}

.a11y-switch input:checked + .a11y-switch__track::after {
  transform: translateX(18px);
  background: #ffffff;
}

.a11y-switch input:focus-visible + .a11y-switch__track {
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
}

/* Text size controls */
.a11y-size-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.a11y-size-btn {
  background: var(--bg-hover, #222228);
  border: 1px solid var(--border-light, #3f3f46);
  color: var(--text-primary, #f1f1f3);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: var(--text-sm, 0.875rem);
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease);
  line-height: 1.4;
}

.a11y-size-btn:hover {
  background: var(--bg-elevated, #1a1a1f);
  border-color: var(--accent, #e11d48);
}

.a11y-size-btn:focus-visible {
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
}

.a11y-size-display {
  flex: 1;
  text-align: center;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted, #a1a1aa);
  min-width: 3rem;
}

/* TTS controls */
.a11y-tts-controls {
  display: flex;
  gap: 0.375rem;
}

.a11y-tts-btn {
  flex: 1;
  background: var(--bg-hover, #222228);
  border: 1px solid var(--border-light, #3f3f46);
  color: var(--text-primary, #f1f1f3);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  padding: 0.375rem 0.25rem;
  font-size: var(--text-xs, 0.75rem);
  text-align: center;
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease);
}

.a11y-tts-btn:hover {
  background: var(--bg-elevated, #1a1a1f);
  border-color: var(--accent, #e11d48);
}

.a11y-tts-btn:focus-visible {
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
}

.a11y-tts-btn[aria-pressed="true"] {
  background: var(--accent-soft, #4a1525);
  border-color: var(--accent, #e11d48);
  color: var(--accent, #e11d48);
}

/* Print button */
.a11y-print-btn {
  width: 100%;
  background: var(--bg-hover, #222228);
  border: 1px solid var(--border-light, #3f3f46);
  color: var(--text-primary, #f1f1f3);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  padding: 0.5rem;
  font-size: var(--text-sm, 0.875rem);
  text-align: center;
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease);
}

.a11y-print-btn:hover {
  background: var(--bg-elevated, #1a1a1f);
  border-color: var(--accent, #e11d48);
}

.a11y-print-btn:focus-visible {
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
}

/* Mobile: move toolbar to bottom-left to avoid overlapping nav FABs */
@media (max-width: 480px) {
  .a11y-trigger {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  .a11y-panel {
    bottom: 4.5rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-height: 70vh;
  }
}

/* =============================================================================
   PRINT STYLES
   Clean, high-contrast black-and-white output
   ============================================================================= */

@media print {
  /* Force white background and black text regardless of theme */
  * {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Hide non-content elements */
  nav,
  header,
  footer,
  aside,
  .a11y-trigger,
  .a11y-panel,
  .audio-player,
  .btn,
  button:not([data-print="true"]),
  [aria-hidden="true"],
  .toast,
  .modal,
  .dropdown,
  .sidebar,
  .skip-link {
    display: none !important;
  }

  /* Show main content only */
  main,
  article,
  .content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Show full URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #444444 !important;
  }

  /* Don't show URL for internal anchors or javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Prevent orphaned headings */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Prevent content breaking inside key elements */
  p, blockquote, ul, ol, table, figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Typography */
  body {
    font-size: 12pt;
    line-height: 1.5;
    font-family: Georgia, 'Times New Roman', serif;
  }

  /* Margins */
  @page {
    margin: 1.5cm 2cm;
  }
}