/* ─── Accessibility widget + effects ───
   Shared by the static home.html and the Next app (both use the same CSS
   variable names, so overriding the vars here themes the whole site). */

/* Effect: larger text (scales rem/em-based sizes) */
html.a11y-bigtext { font-size: 118%; }

/* Effect: high contrast — lift muted text/borders via shared vars */
html.a11y-contrast {
  --t2: #ece7de;
  --t3: #cfc9bf;
  --b1: rgba(245, 168, 60, 0.5);
  --b2: rgba(237, 232, 223, 0.28);
}
html.a11y-contrast .ta-login,
html.a11y-contrast .btn-o { border-color: rgba(237, 232, 223, 0.4) !important; }

/* Effect: underline all links */
html.a11y-links a { text-decoration: underline !important; }

/* Effect: reduce motion */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ── Widget UI ── */
.a11y-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 650;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: #c8781a; color: #fff; border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(200,120,26,.4);
  transition: transform .18s ease, background .18s;
}
.a11y-fab:hover { transform: translateY(-2px) scale(1.04); background: #df8f2a; }
.a11y-fab:focus-visible { outline: 3px solid #f5a83c; outline-offset: 3px; }

.a11y-panel {
  position: fixed; bottom: 76px; right: 18px; z-index: 650;
  width: 270px; max-width: calc(100vw - 36px);
  background: #0f0e13; color: #ede8df;
  border: 1px solid rgba(237,232,223,.14); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h3 { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #f5a83c; margin: 0 0 12px; }
.a11y-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: #151319; border: 1px solid rgba(237,232,223,.1); border-radius: 10px;
  color: #ede8df; font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 10px 12px; margin-bottom: 8px; transition: border-color .15s, background .15s;
}
.a11y-opt:hover { border-color: rgba(200,120,26,.45); }
.a11y-opt:focus-visible { outline: 2px solid #f5a83c; outline-offset: 2px; }
.a11y-opt[aria-pressed="true"] { background: rgba(200,120,26,.16); border-color: rgba(200,120,26,.55); color: #f5a83c; }
.a11y-opt .a11y-state { font-size: .7rem; font-weight: 800; opacity: .8; }
.a11y-reset {
  width: 100%; text-align: center; cursor: pointer; margin-top: 4px;
  background: transparent; border: 1px solid rgba(237,232,223,.14); border-radius: 10px;
  color: #a8a29a; font-family: inherit; font-size: .76rem; font-weight: 700; padding: 9px;
}
.a11y-reset:hover { color: #f5a83c; border-color: rgba(200,120,26,.45); }
.a11y-foot { margin-top: 10px; text-align: center; }
.a11y-foot a { font-size: .68rem; color: #6a6460; text-decoration: underline; }
.a11y-foot a:hover { color: #f5a83c; }