/* 
   WEGRO Financial Consultancy - Accessibility Design System & Component Styles
   File: css/accessibility.css
   WCAG 2.1 AA/AAA Compliant Accessibility Suite (29+ Capabilities)
  */

/* 1. Skip to Main Content Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  background-color: var(--color-forest-green, #06251B);
  color: #FFFFFF !important;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: top 0.2s ease, left 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 16px;
  top: 16px;
  outline: 3px solid var(--color-growth-green, #69B53E);
  outline-offset: 3px;
}

/* 2. Global Focus Visible Ring Enhancements */
:focus-visible {
  outline: 2px solid var(--color-growth-green, #69B53E) !important;
  outline-offset: 3px !important;
}

/* 3. Accessibility Launcher Floating Trigger Button (WEGRO Brand Themed) */
#enablestack-button,
.accessibility-trigger-btn {
  position: fixed !important;
  left: 20px !important;
  bottom: 24px !important;
  z-index: 999990 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1A4634 0%, #06251B 100%) !important;
  border: 2px solid rgba(105, 181, 62, 0.5) !important;
  box-shadow: 0 4px 16px rgba(6, 37, 27, 0.35), 0 0 0 0 rgba(105, 181, 62, 0.4) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

#enablestack-button:hover,
.accessibility-trigger-btn:hover {
  transform: scale(1.08) !important;
  border-color: #69B53E !important;
  box-shadow: 0 6px 20px rgba(6, 37, 27, 0.45), 0 0 0 4px rgba(105, 181, 62, 0.25) !important;
}

#enablestack-button:focus-visible,
.accessibility-trigger-btn:focus-visible {
  outline: 3px solid #69B53E !important;
  outline-offset: 4px !important;
}

/* 4. Accessibility Modal / Panel Theming */
#enablestack-menu,
.accessibility-modal-container {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 1px solid rgba(6, 37, 27, 0.15) !important;
  box-shadow: 0 20px 48px rgba(6, 37, 27, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  z-index: 999999 !important;
}

/* Header within widget */
#enablestack-menu-header {
  background: linear-gradient(135deg, #0A3225 0%, #06251B 100%) !important;
  color: #FFFFFF !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

/* Feature Cards & Tool Tiles */
.enablestack-card,
.enablestack-option {
  border-radius: 8px !important;
  transition: all 0.15s ease-in-out !important;
  border: 1px solid #E3EDE4 !important;
}

.enablestack-card:hover,
.enablestack-option:hover {
  border-color: #69B53E !important;
  background-color: #F4FAF2 !important;
}

.enablestack-card.active,
.enablestack-option.active {
  background-color: #E8F5E5 !important;
  border-color: #69B53E !important;
}

/* 5. Highlight Modes & Reading Tools */
.eu-highlight-links a {
  text-decoration: underline 2px solid #69B53E !important;
  background-color: rgba(105, 181, 62, 0.12) !important;
  color: #06251B !important;
}

.eu-highlight-hover *:hover {
  outline: 2px dashed #69B53E !important;
  outline-offset: 2px !important;
}

/* Reading Guide / Ruler */
#enablestack-reading-guide,
.eu-reading-guide {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  height: 12px !important;
  background: rgba(105, 181, 62, 0.35) !important;
  border-top: 2px solid #69B53E !important;
  border-bottom: 2px solid #69B53E !important;
  pointer-events: none !important;
  z-index: 999980 !important;
}

/* Reading Mask / Window */
#enablestack-reading-window,
.eu-reading-mask {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 999970 !important;
}

/* 6. Dyslexia Friendly Font */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/opendyslexic@1.0.3/dist/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.eu-dyslexia-font,
body.eu-dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
}

/* Readable Font */
body.eu-readable-font,
body.eu-readable-font * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 7. High Contrast, Invert & Saturation Filter Rules */
body.eu-high-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

body.eu-high-contrast * {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

body.eu-high-contrast a {
  color: #FFFF00 !important;
}

body.eu-monochrome {
  filter: grayscale(100%) !important;
}

body.eu-inverted-colors {
  filter: invert(100%) hue-rotate(180deg) !important;
}

body.eu-low-saturation {
  filter: saturate(50%) !important;
}

body.eu-high-saturation {
  filter: saturate(180%) !important;
}

/* 8. Text Sizing & Spacing Enhancements */
body.eu-text-size-1 {
  font-size: 110% !important;
}

body.eu-text-size-2 {
  font-size: 120% !important;
}

body.eu-text-size-3 {
  font-size: 130% !important;
}

body.eu-text-size-4 {
  font-size: 140% !important;
}

body.eu-text-spacing-1 * {
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
}

body.eu-text-spacing-2 * {
  letter-spacing: 0.14em !important;
  word-spacing: 0.28em !important;
}

body.eu-text-spacing-3 * {
  letter-spacing: 0.20em !important;
  word-spacing: 0.40em !important;
}

/* 9. Enlarge Buttons */
body.eu-enlarge-buttons button,
body.eu-enlarge-buttons .btn,
body.eu-enlarge-buttons input[type="submit"],
body.eu-enlarge-buttons input[type="button"] {
  transform: scale(1.15) !important;
  margin: 6px !important;
}

/* 10. Pause Animations */
body.eu-pause-animations *,
body.eu-pause-animations *::before,
body.eu-pause-animations *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* 11. Hide Images */
body.eu-hide-images img,
body.eu-hide-images svg:not(#enablestack-button svg),
body.eu-hide-images [style*="background-image"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 12. Screen Reader Audio Indicator */
.sr-live-announcer {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile Responsiveness for Accessibility Trigger */
@media (max-width: 768px) {

  #enablestack-button,
  .accessibility-trigger-btn {
    left: 14px !important;
    bottom: 18px !important;
    width: 46px !important;
    height: 46px !important;
  }
}