/* --- Menu styling (adjust as you like) --- */
.a11y-menu { position: relative; display: inline-block; }
.a11y-menu details { display: inline-block; }
.a11y-btn {
  cursor: pointer;
  padding: .45rem .7rem;
  border: 1px solid #c9c9c9;
  border-radius: .5rem;
  background: #fff;
  font-weight: 600;
  user-select: none;
}
.a11y-menu summary { list-style: none; }
.a11y-menu summary::-webkit-details-marker { display: none; }

.a11y-dropdown {
  position: absolute;
  left: 0;   /* anchor to the button’s left edge */
  right: auto;   /* reset */
  transform: translateX(16px);  /* nudge the panel 16px to the right */
  margin-top: .4rem;
  min-width: 230px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: .6rem;
  padding: .5rem .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 1000;
}
.a11y-dropdown li { list-style: none; margin: .4rem 0; }
.a11y-dropdown label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.a11y-actions { border-top: 1px solid #eee; margin-top: .35rem; padding-top: .5rem; text-align: right; }
.a11y-reset {
  padding: .35rem .6rem;
  border: 1px solid #bbb;
  background: #f8f8f8;
  border-radius: .4rem;
  cursor: pointer;
}

/* --- Accessibility modes --- */

/* 1) High contrast: black background, white text, strong borders */
body.a11y-contrast {
  background-color: #000 !important;
  color: #fff !important;
}
body.a11y-contrast * {
  box-shadow: none !important;
  border-color: #fff !important;
}
body.a11y-contrast a {
  color: #0ff !important;
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* 2) Grayscale: desaturate entire page (affects images too) */
html.a11y-grayscale {
  filter: grayscale(1) !important;
}

/* 3) Yellow links */
body.a11y-yellow-links a,
body.a11y-yellow-links a:visited {
  color: #ff0 !important;
}
body.a11y-yellow-links a:hover,
body.a11y-yellow-links a:focus {
  color: #ffd700 !important; /* golden/yellow on hover */
}

/* 4) Underline links (with good underline offset) */
body.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: .14em !important;
}

/* Optional: ensure the dropdown stays readable even in high contrast */
body.a11y-contrast .a11y-dropdown {
  background: #000 !important;
  border-color: #fff !important;
}
body.a11y-contrast .a11y-btn {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}