/* ================================================================
   Accessibility widget (A-a11y-02) — consultancy site
   Mirrors tessa-tools.co.uk; preferences sync via shared
   localStorage key 'tessa-a11y-prefs'.
   Palette adapted to consultancy site (green #a5be9b accent).
   ================================================================ */

.a11y {
  position: fixed;
  bottom: clamp(1rem, 2vh, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  z-index: 999;
  font-family: 'Garet', 'Poppins', sans-serif;
}
.a11y__toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10, 14, 12, 0.85);
  color: #ffffff;
  border: 1px solid rgba(165, 190, 155, 0.35);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.a11y__toggle:hover {
  transform: translateY(-1px);
  border-color: #a5be9b;
  background: rgba(10, 14, 12, 0.95);
}
.a11y__toggle:focus-visible {
  outline: 2px solid #a5be9b;
  outline-offset: 3px;
}

.a11y__panel {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 260px;
  background: rgba(10, 14, 12, 0.96);
  border: 1px solid rgba(165, 190, 155, 0.25);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.a11y__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.a11y__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a5be9b;
  margin: 0 0 0.85rem 0;
}
.a11y__row { margin-bottom: 0.85rem; }
.a11y__row:last-child { margin-bottom: 0; }
.a11y__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e8e3d0;
  margin-bottom: 0.45rem;
}
.a11y__buttons { display: flex; gap: 0.4rem; }
.a11y__btn {
  flex: 1;
  background: rgba(165, 190, 155, 0.10);
  color: #e8e3d0;
  border: 1px solid rgba(165, 190, 155, 0.22);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.a11y__btn:hover {
  background: rgba(165, 190, 155, 0.20);
  border-color: rgba(165, 190, 155, 0.45);
}
.a11y__btn.is-active {
  background: #a5be9b;
  color: #0a0e0c;
  border-color: #a5be9b;
}
.a11y__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.4rem 0;
}
.a11y__toggle-row .a11y__label { margin: 0; }
.a11y__switch {
  width: 36px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(165, 190, 155, 0.18);
  border: 1px solid rgba(165, 190, 155, 0.35);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.a11y__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8e3d0;
  transition: transform 0.2s;
}
.a11y__switch:checked {
  background: #a5be9b;
  border-color: #a5be9b;
}
.a11y__switch:checked::after {
  transform: translateX(16px);
  background: #0a0e0c;
}

/* ================================================================
   User preferences applied to html element
   ================================================================ */
html.a11y-text-115 { font-size: 18.4px; }
html.a11y-text-130 { font-size: 20.8px; }
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* High-contrast: black background, white text, underlined links.
   Excludes the .a11y widget itself so the panel stays usable. */
html.a11y-high-contrast,
html.a11y-high-contrast body {
  background-color: #000000 !important;
  color: #ffffff !important;
}
html.a11y-high-contrast body *:not(.a11y):not(.a11y *) {
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
html.a11y-high-contrast body section:not(.a11y):not(.a11y *),
html.a11y-high-contrast body header,
html.a11y-high-contrast body footer,
html.a11y-high-contrast body main { background-color: #000000 !important; }
html.a11y-high-contrast a:not(.a11y a) { text-decoration: underline !important; }
html.a11y-high-contrast img,
html.a11y-high-contrast picture { opacity: 0.6 !important; }