/* a11y.css — Accessibility FAB, panel, toggles, light mode, spacing, motion */

/* === FAB === */
.a11y-fab {
  position: fixed; bottom: 2rem; left: 2rem; z-index: 9000;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--accent-magenta), var(--accent-orange));
  color: #fff; font-size: 1.6rem; cursor: pointer;
  box-shadow: 0 4px 20px rgba(247,37,133,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.a11y-fab:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(247,37,133,0.45); }

/* === Panel === */
.a11y-panel {
  position: fixed; bottom: 5.5rem; left: 2rem; z-index: 9001;
  width: 280px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 1.2rem; display: none; font-family: 'Outfit', sans-serif;
}
.a11y-panel.open { display: block; }
.a11y-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-subtle);
}
.a11y-panel-header span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.a11y-panel-close {
  background: none; border: none; color: var(--text-dim); font-size: 1.3rem;
  cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.a11y-panel-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

/* === Rows & Controls === */
.a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; }
.a11y-row-label { font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; }
.a11y-row-label .a11y-icon { font-size: 1.1rem; }
.a11y-font-btns { display: flex; gap: 4px; }
.a11y-font-btn {
  width: 34px; height: 30px; border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-primary); font-size: 0.8rem;
  font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.a11y-font-btn:hover { border-color: var(--accent-cyan); background: rgba(0,245,212,0.08); }

/* === Toggle === */
.a11y-toggle {
  position: relative; width: 44px; height: 24px; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 12px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s; flex-shrink: 0;
}
.a11y-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: var(--text-dim); border-radius: 50%; transition: transform 0.2s, background 0.2s;
}
.a11y-toggle.active { background: rgba(0,245,212,0.15); border-color: var(--accent-cyan); }
.a11y-toggle.active::after { transform: translateX(20px); background: var(--accent-cyan); }

/* === Reset === */
.a11y-reset {
  width: 100%; margin-top: 0.6rem; padding: 0.5rem; border: 1px solid var(--border-subtle);
  border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary);
  font-size: 0.85rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.a11y-reset:hover { background: rgba(247,37,133,0.1); color: var(--accent-magenta); border-color: var(--accent-magenta); }

/* === Light Mode === */
body.a11y-light {
  --bg-primary: #fafafa; --bg-secondary: #f0f0f5; --bg-card: #ffffff;
  --text-primary: #1a1a2e; --text-secondary: #333355; --text-dim: #555577;
  --border-subtle: rgba(0,0,0,0.1); --glow-cyan: none; --glow-magenta: none;
  --accent-cyan: #008b8b; --accent-magenta: #c41f7a; --accent-orange: #d4600a;
  --accent-yellow: #8a7600; --accent-blue: #2b50c9;
}
body.a11y-light .nav { background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
body.a11y-light .hero { background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #f5f0ff 100%); }
body.a11y-light .a11y-fab { box-shadow: 0 4px 20px rgba(247,37,133,0.2); }
body.a11y-light .a11y-panel { box-shadow: 0 8px 30px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.12); }
body.a11y-light .a11y-toggle { background: #e8e8f0; border-color: rgba(0,0,0,0.15); }
body.a11y-light .a11y-toggle::after { background: #999; }
body.a11y-light .a11y-toggle.active { background: rgba(0,139,139,0.15); border-color: #008b8b; }
body.a11y-light .a11y-toggle.active::after { background: #008b8b; }
body.a11y-light .a11y-font-btn { background: #e8e8f0; border-color: rgba(0,0,0,0.12); color: #1a1a2e; }
body.a11y-light .a11y-font-btn:hover { border-color: #008b8b; background: rgba(0,139,139,0.08); }
body.a11y-light .a11y-reset { background: #f0f0f5; border-color: rgba(0,0,0,0.1); color: #555; }
body.a11y-light .a11y-reset:hover { background: rgba(196,31,122,0.08); }

/* === Spacing Mode === */
body.a11y-spacing p, body.a11y-spacing li, body.a11y-spacing td,
body.a11y-spacing th, body.a11y-spacing code, body.a11y-spacing dd {
  line-height: 2 !important; letter-spacing: 0.5px !important; word-spacing: 2px !important;
}

/* === No-Motion Mode === */
body.a11y-no-motion *, body.a11y-no-motion *::before, body.a11y-no-motion *::after {
  animation: none !important; transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Print === */
@media print {
  .a11y-fab, .a11y-panel { display: none !important; }
}

/* === Mobile === */
@media (max-width: 768px) {
  .a11y-fab { width: 48px; height: 48px; font-size: 1.3rem; bottom: 1.2rem; left: 1rem; }
  .a11y-panel { left: 1rem; right: 1rem; width: auto; bottom: 4.5rem; }
}