/* ========================================
   📍 ACCESSIBILITY WIDGET (POSITIONING)
======================================== */
#accessibility-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}


/* ========================================
   🔘 MAIN TOGGLE BUTTON (FAB STYLE)
======================================== */
#togglePanel {
  background: linear-gradient(135deg, #111, #333);
  color: white;
  border: none;
  width: 55px;
  height: 55px;
  font-size: 22px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

#togglePanel:hover {
  transform: scale(1.1);
}

#togglePanel:focus {
  outline: 3px solid orange;
}


/* ========================================
   📦 ACCESSIBILITY PANEL
======================================== */
#panel {
  position: absolute;
  bottom: 70px;
  left: 0;

  width: 300px;
  padding: 20px;

  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-radius: 16px;

  font-size: 15px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.3);

  animation: fadeIn 0.25s ease;

  max-height: 80vh;
  overflow-y: auto;
}

/* Hide panel when [hidden] attribute is present */
#panel[hidden] {
  display: none;
}

/* Fade-in animation for panel */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Panel title */
#panel h3 {
  margin-bottom: 10px;
  font-size: 16px;
  text-align: center;
}


/* ========================================
   🔘 PANEL BUTTONS
======================================== */
#panel button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-bottom: 8px;
  padding: 12px;

  font-size: 14px;
  font-weight: 500;

  border: 1px solid #ccc;
  border-radius: 10px;

  background: #e0e0e0;
  color: #111;

  cursor: pointer;
  transition: all 0.2s ease;
}

#panel button:hover {
  background: #111;
  color: white;
  transform: translateY(-2px);
}

/* Active state using aria-pressed */
#panel button[aria-pressed="true"] {
  background: #111;
  color: white;
  border-color: #111;
}


/* ========================================
   🔍 TEXT ZOOM CONTROLS
======================================== */
.zoom-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.zoom-controls button {
  width: 100%;
}


/* ========================================
   🎨 ACCESSIBILITY MODES
======================================== */

/* High contrast mode */
.high-contrast,
.high-contrast * {
  background-color: black !important;
  color: yellow !important;
}

.high-contrast a {
  color: cyan !important;
}

/* Highlight links */
.highlight-links a {
  outline: 2px solid red;
}

/* Increase spacing for readability */
.text-spacing {
  letter-spacing: 2px;
  line-height: 1.8;
}

/* Hide all images */
.hide-images img {
  display: none !important;
}

/* Disable all animations and transitions */
.no-animations * {
  animation: none !important;
  transition: none !important;
}

/* Dyslexia-friendly font */
@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic&display=swap');

.dyslexia-mode {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  line-height: 1.8;
}

/* Increase line height */
.line-height {
  line-height: 2 !important;
}

/* Center text */
.text-align {
  text-align: center !important;
}

/* Reduce color saturation */
.low-saturation *:not(#accessibility-widget):not(#accessibility-widget *) {
  filter: saturate(50%);
}


/* ========================================
   ♿ SCREEN READER + SKIP LINK
======================================== */

/* Visually hidden (screen reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: black;
  color: white;
  padding: 8px;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* Accessible focus styles */
a:focus,
button:focus {
  outline: 3px solid orange;
  outline-offset: 2px;
}


/* ========================================
   📑 PAGE STRUCTURE POPUP
======================================== */
#structurePopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.6);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 999999;
}

#structurePopup[hidden] {
  display: none;
}

/* Popup container */
.structure-content {
  position: relative;

  width: 500px;
  max-height: 85vh;
  overflow-y: auto;

  padding: 30px;

  background: white;
  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Close button (top-right corner) */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;

  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}


/* ========================================
   🌳 PAGE STRUCTURE TREE
======================================== */
.tree {
  list-style: none;
  padding-left: 10px;
}

.tree li {
  margin: 6px 0;
  cursor: pointer;
}

.tree li:hover {
  color: #c1121f;
}

/* Indentation levels for headings */
.tree .level-1 { margin-left: 0; font-weight: bold; }
.tree .level-2 { margin-left: 15px; }
.tree .level-3 { margin-left: 30px; }
.tree .level-4 { margin-left: 45px; }


/* ========================================
   ♻️ RESET BUTTON
======================================== */
.reset-btn {
  background: #c1121f !important;
  color: white !important;
  font-weight: bold;
  margin-top: 10px;
}

.reset-btn:hover {
  background: #780000 !important;
}


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