/* Accessibility Panel Styles */

/* Panel */
.a11y-panel {
  position: fixed;
  top: 28px;
  right: 28px;
  width: 360px;
  background: #f7f9ff;
  border: 1px solid #e6ecff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  z-index: 999999;
  font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1c2f7a;
  transform: translateX(400px);
  transition: transform .3s ease;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.a11y-panel.open { transform: translateX(0); }

/* Header */
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e6ecff;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

.a11y-panel__header span {
  font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1c2f7a;
}

.a11y-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f0f4ff;
  border-radius: 8px;
  color: #6c79a8;
  font: 700 18px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}

.a11y-close:hover {
  background: #e0e8ff;
  color: #1c2f7a;
}

/* Top rows and controls */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 6px 0;
  background: #f7f9ff;
  border: 1px solid #e6ecff;
  border-radius: 12px;
}

.a11y-row select {
  background: white;
  border: 1px solid #dbe4ff;
  border-radius: 8px;
  padding: 8px 10px;
}

.a11y-row--link { 
  cursor: pointer; 
}

/* Accessibility Profiles */
.a11y-profiles-dropdown {
  padding: 0 12px 12px 12px;
}

.a11y-profile-btn {
  width: 100%;
  padding: 8px 12px;
  margin: 4px 0;
  background: #fff;
  border: 1px solid #e6ecff;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
}

.a11y-profile-btn:hover {
  background: #f0f4ff;
  border-color: #c9d6ff;
}

/* Grid of tools */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 20px;
}

.a11y-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background: #fff;
  border: 2px solid #e6ecff;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
  font: 500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #6c79a8;
  gap: 8px;
  min-height: 80px;
}

.a11y-toggle:hover {
  border-color: #c9d6ff;
  background: #f0f4ff;
}

.a11y-toggle.on {
  background: #e9f0ff;
  border-color: #2060e8;
  color: #14306a;
}

.a11y-toggle .i {
  width: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
}

.a11y-toggle .cursor-large-icon {
  font-size: 24px;
  transform: scale(1.3);
}

.a11y-toggle .text-size-icon {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.a11y-toggle .text-size-icon .small-t {
  font-size: 14px;
  font-weight: 600;
}

.a11y-toggle .text-size-icon .large-t {
  font-size: 20px;
  font-weight: 600;
}

.text-with-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.text-size-bars {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.text-size-bars .bar {
  width: 12px;
  height: 3px;
  background: rgba(108, 121, 168, 0.3);
  border-radius: 2px;
}

.text-size-bars .bar.active {
  background: #2060e8;
}

.a11y-toggle.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reset button */
.a11y-reset {
  margin: 16px 20px;
  width: calc(100% - 40px);
  padding: 12px 16px;
  font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  background: #2060e8;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(64, 103, 230, 0.35);
  cursor: pointer;
  transition: all .15s ease;
}

.a11y-reset:hover {
  background: #1a5ad8;
  box-shadow: 0 8px 24px rgba(64, 103, 230, 0.4);
}

/* Move widget */
.a11y-move {
  margin: 16px 20px;
  padding: 16px;
  background: #f0f4ff;
  border-radius: 12px;
}

.a11y-move summary {
  cursor: pointer;
  font-weight: 700;
  color: #1c2f7a;
  margin-bottom: 12px;
}

.a11y-move .pos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.a11y-move .pos-grid button {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8ff;
  background: #f2f5ff;
  cursor: pointer;
  transition: all .15s ease;
}

.a11y-move .pos-grid button:hover {
  background: #e9f0ff;
  border-color: #c9d6ff;
}

.a11y-move .pos-grid button.on {
  border-color: #2060e8;
  background: #e9f0ff;
  color: #14306a;
}

/* Floating FAB */
.a11y-fab {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all .2s ease;
  z-index: 999998;
}

.a11y-fab:hover {
  background: #1a5ad8;
  box-shadow: 0 12px 32px rgba(32, 96, 232, 0.4);
  transform: scale(1.05);
}

.a11y-fab:active {
  transform: scale(0.95);
}

/* Overlay */
.a11y-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 999997;
}

/* Extra effect classes used by component */
html.a11y-text-spacing { 
  letter-spacing: 0.06em; 
  word-spacing: 0.12em; 
}

html.a11y-hide-images img { 
  visibility: hidden !important; 
}

html.a11y-tooltips [title]::after {
  content: attr(title);
  position: fixed;
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  z-index: 999999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

html.a11y-outline-structure *:is(h1,h2,h3,h4,h5,h6,nav,main,aside,footer,header) {
  outline: 2px dashed rgba(32,96,232,.5);
}

html.a11y-line-height { 
  line-height: 1.8 !important; 
}

html.a11y-line-height p { 
  line-height: 1.8 !important; 
}

html.a11y-line-height div { 
  line-height: 1.8 !important; 
}

html.a11y-line-height span { 
  line-height: 1.8 !important; 
}

/* Large Text - 3 Levels (Guaranteed LARGER than normal) */
html.a11y-large-text {
  font-size: 20px !important;
}

/* COMPLETELY isolate accessibility panel from all text scaling */
html.a11y-large-text .a11y-panel,
html.a11y-large-text .a11y-panel *,
html.a11y-large-text-2 .a11y-panel,
html.a11y-large-text-2 .a11y-panel *,
html.a11y-large-text-3 .a11y-panel,
html.a11y-large-text-3 .a11y-panel * {
  font-size: inherit !important;
  /* Do not override transform; panel needs transform for slide-in/out */
}

/* Force original panel dimensions */
html.a11y-large-text .a11y-panel,
html.a11y-large-text-2 .a11y-panel,
html.a11y-large-text-3 .a11y-panel {
  font-size: 14px !important;
}

/* Keep all panel elements at original sizes */
html.a11y-large-text .a11y-panel .a11y-toggle,
html.a11y-large-text-2 .a11y-panel .a11y-toggle,
html.a11y-large-text-3 .a11y-panel .a11y-toggle {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Lock down every text element in the panel */
html.a11y-large-text .a11y-panel span,
html.a11y-large-text .a11y-panel div,
html.a11y-large-text .a11y-panel button,
html.a11y-large-text .a11y-panel label,
html.a11y-large-text .a11y-panel select,
html.a11y-large-text .a11y-panel p,
html.a11y-large-text-2 .a11y-panel span,
html.a11y-large-text-2 .a11y-panel div,
html.a11y-large-text-2 .a11y-panel button,
html.a11y-large-text-2 .a11y-panel label,
html.a11y-large-text-2 .a11y-panel select,
html.a11y-large-text-2 .a11y-panel p,
html.a11y-large-text-3 .a11y-panel span,
html.a11y-large-text-3 .a11y-panel div,
html.a11y-large-text-3 .a11y-panel button,
html.a11y-large-text-3 .a11y-panel label,
html.a11y-large-text-3 .a11y-panel select,
html.a11y-large-text-3 .a11y-panel p {
  font-size: inherit !important;
}

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

@media (max-width: 768px) {
  /* Make panel narrower on mobile for better visibility */
  .a11y-panel {
    width: 280px; /* Reduced from 360px */
    top: 16px; /* Closer to top edge */
    right: 16px; /* Closer to right edge */
    max-height: calc(100vh - 32px); /* Account for smaller margins */
  }
  
  /* Single column layout for better mobile UX */
  .a11y-grid {
    grid-template-columns: 1fr; /* Single column instead of 3 */
    gap: 10px; /* Slightly larger gap for touch targets */
  }
  
  /* Larger touch targets for mobile */
  .a11y-toggle {
    min-height: 48px; /* Better touch target */
    padding: 12px 14px; /* More padding for easier tapping */
  }
  
  /* Adjust header for narrower panel */
  .a11y-panel__header {
    padding: 14px 16px;
  }
  
  /* Adjust row padding for narrower panel */
  .a11y-row {
    padding: 10px;
  }
  
  /* Ensure grid has proper padding in narrow panel */
  .a11y-grid {
    padding: 12px 16px;
  }
  
  /* Adjust position grid for narrower panel */
  .a11y-move .pos-grid {
    grid-template-columns: 1fr 1fr; /* Keep 2 columns for position controls */
    gap: 6px;
  }
}

@media (max-width: 480px) {
  /* Even narrower on very small phones */
  .a11y-panel {
    width: 260px;
    right: 12px;
    top: 12px;
  }
}

html.a11y-large-text h1 { font-size: 40px !important; }
html.a11y-large-text h2 { font-size: 36px !important; }
html.a11y-large-text h3 { font-size: 32px !important; }
html.a11y-large-text h4 { font-size: 28px !important; }
html.a11y-large-text h5 { font-size: 24px !important; }
html.a11y-large-text h6 { font-size: 22px !important; }
html.a11y-large-text p { font-size: 20px !important; }
html.a11y-large-text span { font-size: 20px !important; }
html.a11y-large-text div { font-size: 20px !important; }

html.a11y-large-text-2 {
  font-size: 22px !important;
}

html.a11y-large-text-2 h1 { font-size: 44px !important; }
html.a11y-large-text-2 h2 { font-size: 40px !important; }
html.a11y-large-text-2 h3 { font-size: 36px !important; }
html.a11y-large-text-2 h4 { font-size: 32px !important; }
html.a11y-large-text-2 h5 { font-size: 28px !important; }
html.a11y-large-text-2 h6 { font-size: 26px !important; }
html.a11y-large-text-2 p { font-size: 22px !important; }
html.a11y-large-text-2 span { font-size: 22px !important; }
html.a11y-large-text-2 div { font-size: 22px !important; }

html.a11y-large-text-3 {
  font-size: 24px !important;
}

html.a11y-large-text-3 h1 { font-size: 48px !important; }
html.a11y-large-text-3 h2 { font-size: 44px !important; }
html.a11y-large-text-3 h3 { font-size: 40px !important; }
html.a11y-large-text-3 h4 { font-size: 36px !important; }
html.a11y-large-text-3 h5 { font-size: 32px !important; }
html.a11y-large-text-3 h6 { font-size: 28px !important; }
html.a11y-large-text-3 p { font-size: 24px !important; }
html.a11y-large-text-3 span { font-size: 24px !important; }
html.a11y-large-text-3 div { font-size: 24px !important; }

/* Light Contrast */
html.a11y-contrast {
  filter: contrast(1.2) brightness(1.1) !important;
}

/* Underline Links */
html.a11y-underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #2060e8 !important;
}

/* Grayscale */
html.a11y-grayscale {
  filter: grayscale(100%) !important;
}

/* Pause Animations */
html.a11y-pause-anim *,
html.a11y-pause-anim *::before,
html.a11y-pause-anim *::after {
  animation-play-state: paused !important;
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

html.a11y-pause-anim {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Dyslexia Friendly */
html.a11y-dyslexia {
  font-family: "Open Dyslexic", "Comic Sans MS", "Arial", sans-serif !important;
  line-height: 1.8 !important;
  letter-spacing: 0.1em !important;
  word-spacing: 0.2em !important;
}

/* Highlight Links */
html.a11y-highlight-links a,
html.a11y-highlight-links .header-nav a,
html.a11y-highlight-links .nav-link {
  background-color: #ffeb3b !important;
  color: #000 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

/* Saturation */
html.a11y-saturation {
  filter: saturate(1.5) !important;
}

/* Cursor modes */
/* Large cursor is now handled by JavaScript */

html.a11y-cursor-crosshair {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'>\
<circle cx='16' cy='16' r='10' fill='none' stroke='%232060E8' stroke-width='3'/>\
<circle cx='16' cy='16' r='2' fill='%232060E8'/>\
<line x1='16' y1='0' x2='16' y2='32' stroke='%232060E8' stroke-width='2'/>\
<line x1='0' y1='16' x2='32' y2='16' stroke='%232060E8' stroke-width='2'/>\
</svg>") 16 16, auto !important;
}

/* Reading Ruler */
#a11y-reading-ruler {
  position: fixed;
  left: 0;
  width: 100%;
  height: 48px;
  background: transparent;
  pointer-events: none;
  z-index: 9997;
  border-top: 4px solid #2196f3;
  border-bottom: 4px solid #4caf50;
}

/* Reading Guide */
html.a11y-reading-bar::before {
  content: '';
  position: fixed;
  left: var(--mouse-x, 50%);
  top: var(--mouse-y, 50%);
  transform: translate(-50%, -50%);
  width: 375px;
  height: 12px;
  background: #000;
  pointer-events: none;
  z-index: 9996;
  border: 2px solid #ffeb3b;
  border-radius: 6px;
}

html.a11y-reading-bar::after {
  content: '';
  position: fixed;
  left: calc(var(--mouse-x, 50%) + var(--triangle-offset, 0px));
  top: calc(var(--mouse-y, 50%) - 16px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid #000;
  z-index: 9996;
}