/* ===========================================================================
 * Lived Experience Grove — Accessibility Widget v1.0.0
 * Shared by livedexperiencegrove.app and livedexperiencegrove.org.
 *
 * Sections:
 *   1.  Widget UI (FAB + Panel + RTL + mobile)
 *   2.  Reading guide overlay
 *   3.  Skip-to-main link
 *   4.  Mode: High Contrast (incl. Bootstrap 5 + WP-inline-style extensions)
 *   5.  Mode: Dyslexia Font
 *   6.  Mode: Grayscale
 *   7.  Mode: Large Cursor
 *   8.  Mode: Highlight Links
 *   9.  Mode: Pause Animations
 *   10. Mode: Focus Highlight
 *   11. Mode: Custom Line Spacing
 *   12. Mode: Custom Word Spacing
 *   13. Mobile-specific overrides
 *   14. System: prefers-reduced-motion
 * ========================================================================== */

@import url('https://fonts.cdnfonts.com/css/opendyslexic');

:root {
  --a11y-line-height: 1;
  --a11y-word-spacing: 0px;
  --a11y-brand: #4A7C59;
  --a11y-brand-hover: #3d6649;
  --a11y-amber: #f59e0b;
  --a11y-focus-orange: #ff6b00;
}

/* =========================================================================
 * 1. Widget UI
 * ========================================================================= */

.leg-a11y-fab {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a11y-brand);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.leg-a11y-fab:hover { background: var(--a11y-brand-hover); transform: scale(1.05); }
.leg-a11y-fab:focus { outline: 4px solid rgba(74, 124, 89, 0.5); outline-offset: 2px; }
.leg-a11y-fab svg { width: 28px; height: 28px; pointer-events: none; }
.leg-a11y-fab.leg-a11y-rtl { left: auto; right: 16px; }

.leg-a11y-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: var(--a11y-amber);
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}
.leg-a11y-fab.leg-a11y-rtl .leg-a11y-indicator { right: auto; left: -4px; }

.leg-a11y-panel {
  position: fixed;
  bottom: 80px;
  left: 16px;
  z-index: 9999;
  width: 380px;
  max-height: 80vh;
  background: #fff;
  border: 2px solid var(--a11y-brand);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #374151;
}
.leg-a11y-panel.leg-a11y-rtl { left: auto; right: 16px; }

.leg-a11y-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;
}
.leg-a11y-title {
  margin: 0;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--a11y-brand);
  display: flex;
  align-items: center;
  gap: 8px;
}
.leg-a11y-title-icon { display: inline-flex; }
.leg-a11y-title-icon svg { width: 20px; height: 20px; }

.leg-a11y-header-btns { display: flex; gap: 4px; }
.leg-a11y-icon-btn {
  background: transparent;
  border: none;
  color: #6b7280;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.leg-a11y-icon-btn:hover { background: #f3f4f6; color: #374151; }
.leg-a11y-icon-btn:focus { outline: 3px solid rgba(74, 124, 89, 0.5); outline-offset: 1px; }

.leg-a11y-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}
.leg-a11y-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.leg-a11y-tab:hover { color: #374151; }
.leg-a11y-tab.active {
  color: var(--a11y-brand);
  border-bottom-color: var(--a11y-brand);
  background: #fff;
  font-weight: 600;
}

.leg-a11y-content {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
  min-height: 0;
}
.leg-a11y-section { display: block; }
.leg-a11y-control { margin-bottom: 16px; }
.leg-a11y-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.leg-a11y-value { font-weight: 700; color: var(--a11y-brand); }
.leg-a11y-row { display: flex; gap: 8px; }
.leg-a11y-btn-outline {
  flex: 1;
  height: 44px;
  min-width: 44px;
  border: 2px solid var(--a11y-brand);
  background: transparent;
  color: var(--a11y-brand);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  transition: background-color 0.15s, color 0.15s;
}
.leg-a11y-btn-outline:hover { background: var(--a11y-brand); color: #fff; }
.leg-a11y-btn-outline:focus { outline: 3px solid rgba(74, 124, 89, 0.5); outline-offset: 1px; }
.leg-a11y-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.leg-a11y-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #f3f4f6;
  color: #374151;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.15s, color 0.15s;
  min-height: 44px;
}
.leg-a11y-toggle:hover { background: #e5e7eb; }
.leg-a11y-toggle:focus { outline: 3px solid rgba(74, 124, 89, 0.5); outline-offset: 1px; }
.leg-a11y-toggle.is-active { background: var(--a11y-brand); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.leg-a11y-toggle.is-active .leg-a11y-toggle-sub { color: rgba(255, 255, 255, 0.8); }

.leg-a11y-toggle-label { font-size: 14px; font-weight: 600; }
.leg-a11y-toggle-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }

.leg-a11y-cycle { flex-direction: row; align-items: center; justify-content: space-between; }
.leg-a11y-cycle .leg-a11y-toggle-label { display: flex; align-items: center; gap: 4px; }

.leg-a11y-foot {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
  .leg-a11y-fab { width: 52px; height: 52px; bottom: 12px; left: 12px; }
  .leg-a11y-fab.leg-a11y-rtl { right: 12px; left: auto; }
  .leg-a11y-panel {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    border-width: 2px 0 0 0;
  }
  .leg-a11y-panel.leg-a11y-rtl { left: 0; right: 0; }
}

/* =========================================================================
 * 2. Reading guide overlay
 * ========================================================================= */
.leg-a11y-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(74, 124, 89, 0.15) 45%,
    rgba(74, 124, 89, 0.15) 55%,
    transparent 100%
  );
  border-top: 2px solid rgba(74, 124, 89, 0.3);
  border-bottom: 2px solid rgba(74, 124, 89, 0.3);
  transition: top 0.075s linear;
}

/* =========================================================================
 * 3. Skip-to-main link
 * ========================================================================= */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 12px 24px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 0 0 8px 8px;
  transition: top 0.3s;
}
.skip-to-main:focus { top: 0; outline: 3px solid var(--a11y-focus-orange); }

/* =========================================================================
 * 4. Mode: High Contrast
 * Mirrors index.css lines 203–~430 with Bootstrap 5 + WP-inline-style
 * extensions added.
 * ========================================================================= */

html.high-contrast,
html.high-contrast body {
  --background: #fff !important;
  --foreground: #000 !important;
  --card: #fff !important;
  --primary: #000 !important;
  --secondary: #f2f2f2 !important;
  --muted: #e5e5e5 !important;
  --accent: #f2f2f2 !important;
  --border: #000 !important;
  --ring: #000 !important;
  background-color: #fff !important;
  color: #000 !important;
}

html.high-contrast * { color: #000 !important; border-color: #000 !important; }

html.high-contrast div,
html.high-contrast section,
html.high-contrast header,
html.high-contrast footer,
html.high-contrast main,
html.high-contrast article,
html.high-contrast aside,
html.high-contrast nav { background-color: #fff !important; }

/* Tailwind utility backgrounds (.app) */
html.high-contrast .bg-card,
html.high-contrast .bg-background,
html.high-contrast .bg-muted,
html.high-contrast .bg-accent,
html.high-contrast .bg-secondary { background-color: #fff !important; }

/* Bootstrap 5 utility backgrounds (.org) */
html.high-contrast .bg-light,
html.high-contrast .bg-white,
html.high-contrast .bg-body,
html.high-contrast .bg-body-tertiary,
html.high-contrast .bg-primary,
html.high-contrast .bg-secondary-bs,
html.high-contrast .bg-success,
html.high-contrast .bg-info,
html.high-contrast .bg-warning,
html.high-contrast .bg-danger,
html.high-contrast .bg-dark { background-color: #fff !important; color: #000 !important; }

html.high-contrast .text-muted,
html.high-contrast .text-secondary,
html.high-contrast .text-primary,
html.high-contrast .text-success,
html.high-contrast .text-info,
html.high-contrast .text-warning,
html.high-contrast .text-danger { color: #000 !important; }

/* Flatten gradients, including .org inline-style hero banners */
html.high-contrast [class*="bg-gradient"],
html.high-contrast [style*="gradient"],
html.high-contrast [style*="background-color"],
html.high-contrast [style*="background:"] { background: #fff !important; background-color: #fff !important; }

/* Buttons */
html.high-contrast button,
html.high-contrast [role="button"],
html.high-contrast .btn,
html.high-contrast .btn-primary,
html.high-contrast .btn-secondary,
html.high-contrast .btn-success,
html.high-contrast .btn-info,
html.high-contrast .btn-warning,
html.high-contrast .btn-danger {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  text-decoration: underline;
}
html.high-contrast button:hover, html.high-contrast [role="button"]:hover { background-color: #333 !important; }

html.high-contrast .btn-outline-primary,
html.high-contrast .btn-outline-secondary,
html.high-contrast button[data-variant="ghost"],
html.high-contrast button[data-variant="outline"] {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* Links */
html.high-contrast a {
  color: #000 !important;
  text-decoration: underline !important;
  font-weight: bold;
  background-color: transparent !important;
}
html.high-contrast a:hover,
html.high-contrast a:focus {
  background-color: #000 !important;
  color: #fff !important;
}

/* Form inputs */
html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select,
html.high-contrast .form-control,
html.high-contrast .form-select {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
html.high-contrast input::placeholder,
html.high-contrast textarea::placeholder { color: #666 !important; }

/* Focus */
html.high-contrast *:focus { outline: 3px solid #000 !important; outline-offset: 2px !important; }

/* Progress */
html.high-contrast [role="progressbar"],
html.high-contrast .progress { background-color: #ccc !important; }
html.high-contrast [role="progressbar"] > div,
html.high-contrast .progress > .progress-bar,
html.high-contrast .progress > div { background-color: #000 !important; }

/* Cards */
html.high-contrast .card,
html.high-contrast [class*="Card"] { background-color: #fff !important; border: 2px solid #000 !important; }

/* Tables */
html.high-contrast table { border: 2px solid #000 !important; }
html.high-contrast th, html.high-contrast td {
  border: 1px solid #000 !important;
  background-color: #fff !important;
  color: #000 !important;
}
html.high-contrast th { background-color: #eee !important; }

/* Badges */
html.high-contrast span[class*="badge"],
html.high-contrast span[class*="tag"],
html.high-contrast .badge {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

/* SVG icons */
html.high-contrast svg { color: #000 !important; fill: currentColor !important; }

/* Images */
html.high-contrast img { filter: contrast(1.2) !important; }

/* Tooltips, popovers */
html.high-contrast [role="tooltip"],
html.high-contrast [data-radix-popper-content-wrapper],
html.high-contrast .tooltip,
html.high-contrast .popover {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* Tabs */
html.high-contrast [role="tab"] {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
html.high-contrast [role="tab"][aria-selected="true"],
html.high-contrast [role="tab"][data-state="active"] {
  background-color: #000 !important;
  color: #fff !important;
}

/* Dialogs */
html.high-contrast [role="dialog"],
html.high-contrast [role="alertdialog"],
html.high-contrast .modal-content {
  background-color: #fff !important;
  border: 3px solid #000 !important;
}

/* Dropdowns */
html.high-contrast [role="menu"],
html.high-contrast [role="listbox"],
html.high-contrast .dropdown-menu {
  background-color: #fff !important;
  border: 2px solid #000 !important;
}
html.high-contrast [role="menuitem"],
html.high-contrast [role="option"],
html.high-contrast .dropdown-item { background-color: #fff !important; color: #000 !important; }
html.high-contrast [role="menuitem"]:hover,
html.high-contrast [role="option"]:hover,
html.high-contrast .dropdown-item:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* Accessibility panel itself in high-contrast (preserve usability) */
html.high-contrast .leg-a11y-panel {
  background-color: #fff !important;
  border: 3px solid #000 !important;
}
html.high-contrast .leg-a11y-tab,
html.high-contrast .leg-a11y-toggle,
html.high-contrast .leg-a11y-btn-outline {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
html.high-contrast .leg-a11y-toggle.is-active,
html.high-contrast .leg-a11y-tab.active {
  background-color: #000 !important;
  color: #fff !important;
}
html.high-contrast .leg-a11y-fab {
  background-color: #000 !important;
  border: 3px solid #000 !important;
}

/* =========================================================================
 * 5. Mode: Dyslexia Font
 * ========================================================================= */
html.dyslexia-font,
html.dyslexia-font body,
html.dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif !important;
}
html.dyslexia-font h1,
html.dyslexia-font h2,
html.dyslexia-font h3,
html.dyslexia-font h4,
html.dyslexia-font h5,
html.dyslexia-font h6 {
  letter-spacing: 0.05em;
}

/* =========================================================================
 * 6. Mode: Grayscale
 * ========================================================================= */
html.grayscale-mode { filter: grayscale(100%); }
html.grayscale-mode img,
html.grayscale-mode video,
html.grayscale-mode iframe { filter: grayscale(100%); }

/* =========================================================================
 * 7. Mode: Large Cursor
 * ========================================================================= */
html.large-cursor,
html.large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5.5 3.21V20.8l4.86-4.86h6.93L5.5 3.21z'/%3E%3C/svg%3E") 0 0, auto !important;
}
html.large-cursor a,
html.large-cursor button,
html.large-cursor [role="button"],
html.large-cursor input[type="submit"],
html.large-cursor input[type="button"],
html.large-cursor select,
html.large-cursor [onclick] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") 24 24, pointer !important;
}

/* =========================================================================
 * 8. Mode: Highlight Links
 * ========================================================================= */
html.highlight-links a {
  background-color: rgba(255, 255, 0, 0.4) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  padding: 2px 4px;
  border-radius: 2px;
  outline: 2px solid rgba(0, 0, 0, 0.3);
}
html.highlight-links a:hover,
html.highlight-links a:focus {
  background-color: rgba(255, 200, 0, 0.6) !important;
  outline: 2px solid rgba(0, 0, 0, 0.6);
}

/* =========================================================================
 * 9. Mode: Pause Animations
 * ========================================================================= */
html.pause-animations *,
html.pause-animations *::before,
html.pause-animations *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.pause-animations video,
html.pause-animations [autoplay] {
  animation-play-state: paused !important;
}

/* =========================================================================
 * 10. Mode: Focus Highlight
 * ========================================================================= */
html.focus-highlight *:focus,
html.focus-highlight *:focus-visible {
  outline: 4px solid var(--a11y-focus-orange) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px rgba(255, 107, 0, 0.3) !important;
  position: relative;
  z-index: 1000;
}
html.focus-highlight button:focus,
html.focus-highlight a:focus,
html.focus-highlight input:focus,
html.focus-highlight select:focus,
html.focus-highlight textarea:focus,
html.focus-highlight [tabindex]:focus {
  outline: 4px solid var(--a11y-focus-orange) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px rgba(255, 107, 0, 0.3) !important;
}

/* =========================================================================
 * 11. Mode: Custom Line Spacing
 * ========================================================================= */
html.custom-line-spacing p,
html.custom-line-spacing li,
html.custom-line-spacing span,
html.custom-line-spacing div,
html.custom-line-spacing td,
html.custom-line-spacing th,
html.custom-line-spacing label,
html.custom-line-spacing article,
html.custom-line-spacing section {
  line-height: var(--a11y-line-height) !important;
}

/* =========================================================================
 * 12. Mode: Custom Word Spacing
 * ========================================================================= */
html.custom-word-spacing p,
html.custom-word-spacing li,
html.custom-word-spacing span,
html.custom-word-spacing div,
html.custom-word-spacing td,
html.custom-word-spacing th,
html.custom-word-spacing label,
html.custom-word-spacing h1,
html.custom-word-spacing h2,
html.custom-word-spacing h3,
html.custom-word-spacing h4,
html.custom-word-spacing h5,
html.custom-word-spacing h6,
html.custom-word-spacing a,
html.custom-word-spacing button {
  word-spacing: var(--a11y-word-spacing) !important;
}

/* =========================================================================
 * 13. Mobile-specific overrides
 * ========================================================================= */
@media (max-width: 640px) {
  html.focus-highlight button,
  html.focus-highlight a,
  html.focus-highlight input,
  html.focus-highlight select,
  html.focus-highlight [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  html.highlight-links a {
    padding: 4px 8px;
    display: inline-block;
  }
  html.focus-highlight *:focus {
    outline-width: 3px !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.25) !important;
  }
}

/* =========================================================================
 * 14. System: prefers-reduced-motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .leg-a11y-reading-guide { transition: none !important; }
}