/* ═══════════════════════════════════════════════════════════════
   MMG ACCESSIBILITY — generic, theme-agnostic widget styles
   Accent color comes from --mmg-a11y-accent (set by the plugin).
   Widget UI nodes carry .a11y-ui so mode styles never restyle them.
   ═══════════════════════════════════════════════════════════════ */

:root { --mmg-a11y-accent: #daa620; }

/* ── Launcher ── */
.a11y-launcher {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99990;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mmg-a11y-accent);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  border: 2px solid #111;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}
.a11y-launcher:hover { transform: scale(1.08); }
.a11y-launcher:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.a11y-launcher svg { width: 30px; height: 30px; fill: currentColor; }

/* ── Panel ── */
.a11y-panel {
  position: fixed;
  bottom: 84px;
  left: 20px;
  z-index: 99991;
  width: 340px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #1a1918;
  border: 1px solid var(--mmg-a11y-accent);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.a11y-panel.active { display: block; }

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #3a3835;
}
.a11y-panel-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mmg-a11y-accent);
  margin: 0;
}
.a11y-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #d0cec5;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}
.a11y-panel-close:hover { color: #fff; }
.a11y-panel-close svg { width: 18px; height: 18px; }

.a11y-panel-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 0;
}
.a11y-panel-sub p { margin: 0; font-size: 13px; color: #d0cec5; }
.a11y-reset {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--mmg-a11y-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.a11y-reset:hover { filter: brightness(1.2); }

/* ── Toggle grid ── */
.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 18px 18px;
}
.a11y-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 10px 6px;
  background: #100f0e;
  border: 1px solid #3a3835;
  border-radius: 8px;
  color: #d0cec5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.a11y-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }
.a11y-toggle:hover { border-color: var(--mmg-a11y-accent); color: #fff; }
.a11y-toggle[aria-pressed="true"] {
  background: var(--mmg-a11y-accent);
  border-color: var(--mmg-a11y-accent);
  color: #111;
}
.a11y-toggle .a11y-dots { display: flex; gap: 4px; }
.a11y-toggle .a11y-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #615f5a;
}
.a11y-toggle .a11y-dots span.on { background: currentColor; }

.a11y-panel-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid #3a3835;
  text-align: center;
}
.a11y-panel-footer a {
  font-size: 12px;
  color: #d0cec5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a11y-panel-footer a:hover { color: var(--mmg-a11y-accent); }

/* ── Reading guide bar ── */
#a11yGuideBar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 10px;
  background: var(--mmg-a11y-accent);
  opacity: 0.85;
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
  z-index: 99989;
  pointer-events: none;
  display: none;
}
html.a11y-guide #a11yGuideBar { display: block; }

/* ═══════════════════════════════════════════════════════════════
   MODES — generic selectors, safe on any theme.
   Widget UI (.a11y-ui and descendants) is always excluded.
   ═══════════════════════════════════════════════════════════════ */

/* Text size — scales the whole layout like browser zoom */
html.a11y-text-1 body { zoom: 1.15; }
html.a11y-text-2 body { zoom: 1.35; }

/* High contrast — flatten to black background / white text sitewide */
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast body *:not(.a11y-ui):not(.a11y-ui *):not(img):not(video):not(iframe):not(svg):not(svg *):not(picture) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #ccc !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
/* Elements that were transparent/semi-transparent before contrast was enabled
   (tagged by the widget JS) — keep them see-through so invisible full-viewport
   wrappers (nav drawers, modal shells) don't become solid slabs over the page */
html.a11y-contrast body [data-a11y-keep-transparent]:not(.a11y-ui):not(.a11y-ui *) {
  background-color: transparent !important;
}
html.a11y-contrast body a:not(.a11y-ui):not(.a11y-ui *) {
  color: #ffd75e !important;
  text-decoration: underline !important;
}
html.a11y-contrast body button:not(.a11y-ui):not(.a11y-ui *),
html.a11y-contrast body input[type="submit"],
html.a11y-contrast body input[type="button"] {
  background-color: #ffd75e !important;
  color: #000 !important;
  border: 2px solid #ffd75e !important;
}

/* Highlight links */
html.a11y-links body a:not(.a11y-ui):not(.a11y-ui *) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* Readable font */
html.a11y-font body,
html.a11y-font body *:not(.a11y-ui):not(.a11y-ui *) {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* Text spacing — WCAG 1.4.12 metrics */
html.a11y-spacing body p,
html.a11y-spacing body li,
html.a11y-spacing body label,
html.a11y-spacing body span:not(.a11y-ui):not(.a11y-ui *) {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.9 !important;
}

/* Pause animations */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition: none !important;
}
html.a11y-motion { scroll-behavior: auto !important; }

/* Hide images — visual noise reduction; alt text remains for AT */
html.a11y-noimg body img:not(.a11y-ui):not(.a11y-ui *),
html.a11y-noimg body picture,
html.a11y-noimg body video { visibility: hidden !important; }
html.a11y-noimg body *:not(.a11y-ui):not(.a11y-ui *) { background-image: none !important; }

/* Big cursor */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M4 2l16 11h-7l4 8-3 1.5-4-8L4 20z" fill="%23000" stroke="%23fff" stroke-width="1.5"/></svg>') 4 2, auto !important;
}

@media (max-width: 480px) {
  .a11y-grid { grid-template-columns: 1fr 1fr; }
  .a11y-panel { bottom: 80px; }
}