/* ─────────────────────────────────────────────
   Amber's Love — Accessibility Widget
   On-brand, WCAG-aware, vanilla JS/CSS
   ───────────────────────────────────────────── */

/* Toggle button (left edge) — red heart in the style of the logo */
#a11y-toggle {
  position: fixed;
  left: 12px; /* keep the full heart visible so both lobes read clearly */
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  background: transparent;
  border: none;
  width: 58px;
  height: 58px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.35));
  transition: left 0.25s ease, transform 0.2s ease;
  /* Red heart SVG as the button face — wide classic heart with clear lobes + notch */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' fill='%23f44a3e'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#a11y-toggle:hover {
  transform: translateY(-50%) scale(1.08);
}
#a11y-toggle:focus-visible {
  outline: 3px solid #f6d83c;
  outline-offset: 2px;
  border-radius: 50%;
}
/* The accessibility icon sits inside the heart */
#a11y-toggle svg {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: #fffdf7;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Panel */
#a11y-panel {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9997;
  background: linear-gradient(170deg, #2f5f08, #3f730a);
  border: 1px solid rgba(246, 216, 60, 0.35);
  border-left: none;
  border-radius: 0 18px 18px 0;
  padding: 20px 18px;
  width: 264px;
  box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.35);
  color: #fffdf7;
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
}
#a11y-panel[hidden] {
  display: none;
}

/* Panel header */
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 216, 60, 0.25);
}
.a11y-panel-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f6d83c;
}
#a11y-close {
  background: none;
  border: none;
  color: #e9f3b9;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 6px;
  border-radius: 4px;
}
#a11y-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
#a11y-close:focus-visible {
  outline: 2px solid #f6d83c;
  outline-offset: 2px;
}

/* Controls grid */
.a11y-controls {
  display: grid;
  gap: 10px;
}

/* Font size row */
.a11y-font-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.a11y-font-label {
  font-size: 0.72rem;
  color: #e9f3b9;
  min-width: 70px;
}
.a11y-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(246, 216, 60, 0.2);
  color: #fffdf7;
  border-radius: 7px;
  padding: 7px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.1s ease;
}
.a11y-btn:hover {
  background: rgba(246, 216, 60, 0.18);
}
.a11y-btn:active {
  transform: scale(0.95);
}
.a11y-btn:focus-visible {
  outline: 2px solid #f6d83c;
  outline-offset: 2px;
}

/* Toggle option buttons */
.a11y-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(246, 216, 60, 0.2);
  color: #fffdf7;
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  transition: background 0.2s ease, transform 0.1s ease;
}
.a11y-toggle-btn:hover {
  background: rgba(246, 216, 60, 0.18);
}
.a11y-toggle-btn:active {
  transform: scale(0.98);
}
.a11y-toggle-btn:focus-visible {
  outline: 2px solid #f6d83c;
  outline-offset: 2px;
}
.a11y-toggle-btn .a11y-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fffdf7;
}
.a11y-toggle-btn .a11y-icon.icon-contrast {
  background: linear-gradient(135deg, #fff 50%, #000 50%);
}
.a11y-toggle-btn .a11y-icon.icon-dyslexia {
  background: #f6d83c;
  color: #2f5f08;
  font-size: 0.65rem;
}
.a11y-indicator {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.a11y-indicator.on {
  background: #f6d83c;
}

/* Reset */
.a11y-reset-wrap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(246, 216, 60, 0.2);
  text-align: center;
}
#a11y-reset {
  background: transparent;
  border: 1px solid rgba(246, 216, 60, 0.3);
  color: #e9f3b9;
  border-radius: 7px;
  padding: 7px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}
#a11y-reset:hover {
  background: rgba(246, 216, 60, 0.15);
}
#a11y-reset:focus-visible {
  outline: 2px solid #f6d83c;
  outline-offset: 2px;
}

/* ── Feature classes applied to <html> ── */

/* High contrast */
.a11y-contrast,
.a11y-contrast * {
  color: #ffffff !important;
  background-color: #000000 !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.a11y-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
.a11y-contrast img {
  filter: brightness(1.2) contrast(1.3);
}
.a11y-contrast .site-header,
.a11y-contrast .top-banner,
.a11y-contrast .site-footer {
  background: #000000 !important;
  border-color: #fff !important;
}
.a11y-contrast .top-banner-translate .goog-te-gadget-simple {
  background: #000000 !important;
  border-color: #fff !important;
}

/* Dyslexia-friendly font */
.a11y-dyslexia,
.a11y-dyslexia * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif !important;
  letter-spacing: 0.05em !important;
}

/* Increased spacing */
.a11y-spacing,
.a11y-spacing * {
  line-height: 2 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
.a11y-spacing p,
.a11y-spacing li {
  margin-bottom: 1.5em !important;
}

/* Link underlines */
.a11y-underline a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
.a11y-underline a:hover {
  text-decoration-thickness: 3px !important;
}

/* Pause animations */
.a11y-motion *,
.a11y-motion *::before,
.a11y-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* Large cursor */
.a11y-cursor,
.a11y-cursor a,
.a11y-cursor button,
.a11y-cursor input,
.a11y-cursor select,
.a11y-cursor textarea {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23f6d83c' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23f6d83c'/%3E%3C/svg%3E") 16 16, auto !important;
}

/* Mobile: keep the toggle reachable, panel fits viewport */
@media (max-width: 480px) {
  #a11y-panel {
    width: 240px;
    max-width: calc(100vw - 20px);
  }
}