/* Local OpenDyslexic font faces */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('font/OpenDyslexic-Regular.woff2') format('woff2'),
       url('font/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('font/OpenDyslexic-Italic.woff2') format('woff2'),
       url('font/OpenDyslexic-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('font/OpenDyslexic-Bold.woff2') format('woff2'),
       url('font/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('font/OpenDyslexic-Bold-Italic.woff2') format('woff2'),
       url('font/OpenDyslexic-Bold-Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Accessibility Controls Styles */

/* Text size scaling via classes on html element */
html.text-size-100 { font-size: 100%; }
html.text-size-115 { font-size: 115%; }
html.text-size-130 { font-size: 130%; }
html.text-size-150 { font-size: 150%; }

/* Dyslexia-friendly font */
body.dyslexia-font,
body.dyslexia-font *:not(.fas):not(.far):not(.fab) {
  font-family: 'OpenDyslexic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif !important;
}

/* Large cursor - applies to all elements */
/* Custom large cursor: hide native cursor and show a following element */
body.large-cursor,
body.large-cursor * {
  cursor: none !important;
}

#a11y-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #000000;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.04s linear;
}

#a11y-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #000000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

body.dark-mode #a11y-cursor {
  border-color: #ffffff;
}

body.dark-mode #a11y-cursor::after {
  background: #ffffff;
}

/* Navbar accessibility dropdown button (visual parity with dark-mode toggle) */
.accessibility-toggle.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 25px;
  background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.accessibility-toggle.nav-link:hover {
  background: linear-gradient(135deg, #5a5a5a 0%, #3d3d3d 100%);
  text-decoration: none;
}
body.dark-mode .accessibility-toggle.nav-link {
  background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
  color: #333333 !important;
}
body.dark-mode .accessibility-toggle.nav-link:hover {
  background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
}

/* Right-aligned dropdown menu */
.navbar .dropdown-menu.accessibility-menu {
  right: 0;
  left: auto;
  min-width: 240px;
}
.accessibility-menu .dropdown-item .label {
  margin-left: 8px;
}

/* Small helper icons sizing */
.accessibility-menu i {
  width: 18px;
  text-align: center;
}

/* Keyboard shortcut hints inside menu */
.kbd-hint {
  font-size: 12px;
  color: #888;
}

/* Floating Accessibility button (bottom-left) */
.floating-a11y-toggle {
  position: fixed;
  bottom: 20px; /* directly under floating dark mode button */
  right: 20px;
  background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
  border: none;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0.9;
}
.floating-a11y-toggle:hover {
  background: linear-gradient(135deg, #5a5a5a 0%, #3d3d3d 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 1;
}
.floating-a11y-toggle:active { transform: translateY(-1px) scale(1.02); }
body.dark-mode .floating-a11y-toggle {
  background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
  color: #333333;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
body.dark-mode .floating-a11y-toggle:hover {
  background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* Floating Accessibility panel */
.a11y-panel {
  position: fixed;
  bottom: 80px; /* above the accessibility button */
  right: 20px;
  background: #ffffff;
  color: #333333;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 10px 0;
  min-width: 260px;
  z-index: 1000;
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel .dropdown-header { font-size: 12px; color: #777; padding: 6px 16px; }
.a11y-panel .dropdown-item { width: 100%; text-align: left; padding: 10px 16px; }
.a11y-panel .dropdown-divider { margin: 6px 0; }
.a11y-panel .dropdown-item.active { background-color: #e9ecef; }

body.dark-mode .a11y-panel { background: #2d2d2d; color: #e0e0e0; }
body.dark-mode .a11y-panel .dropdown-header { color: #b0b0b0; }
body.dark-mode .a11y-panel .dropdown-item { color: #e0e0e0; }
body.dark-mode .a11y-panel .dropdown-item.active { background-color: #3a3a3a; }

/* Place the floating dark mode button above accessibility */
.floating-dark-mode-toggle { bottom: 80px; right: 20px; }

@media (max-width: 480px) {
  .floating-a11y-toggle { bottom: 15px; right: 15px; padding: 10px 14px; font-size: 13px; }
  .a11y-panel { right: 15px; bottom: 75px; min-width: 220px; }
  .floating-dark-mode-toggle { bottom: 75px; right: 15px; }
}