.a11y-contrast { background: #000; color: #fff; }
.a11y-links a { background: yellow; outline: 2px solid red; }
.a11y-dyslexia { font-family: 'OpenDyslexic', Arial, sans-serif; }
.font-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.font-size-control button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #f8f8f8;
  font-size: 1rem;
  cursor: pointer;
}
:root {
  --user-font-size: 100%;
--user-content-scale: 100%;
}


body,
body p, h1,h2 {
  font-size: var(--user-font-size);
 
  letter-spacing: calc(var(--user-letter-spacing, 100%) - 100%);


}
.accessibility-options {
  letter-spacing: normal !important; /* or 0, or whatever baseline */
}

/* Overlay mask */
#a11y-reading-mask,
#readingMask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.a11y-reading-mask #readingMask {
  opacity: 1;
}


body.a11y-invert {
  filter: invert(100%) hue-rotate(180deg);
}

body.a11y-invert img,
body.a11y-invert video {
  filter: invert(100%) hue-rotate(180deg);
}

body.a11y-low-saturation {
  filter: saturate(40%); /* adjust percentage as needed */
}

/* Optional: prevent images/videos from being double-affected */
body.a11y-low-saturation img,
body.a11y-low-saturation video {
  filter: saturate(100%);
}

body.a11y-high-saturation {
  filter: saturate(200%); /* increase saturation */
}

/* Optional: prevent images/videos from being over-saturated */
body.a11y-high-saturation img,
body.a11y-high-saturation video {
  filter: saturate(100%);
}


#textMagnifier {
  display: none;
  position: fixed;
  pointer-events: none;
  width: 240px;
  min-height: 80px;
  border: 2px solid #222;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 9999;
  padding: 12px;
  font-size: 1.5rem;   /* magnified text size */
  line-height: 1.4;
  color: #111;
}


/* Light contrast mode */
.a11y-contrast-light {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Dark contrast mode */
.a11y-contrast-dark {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Make sure links are visible */
.a11y-contrast-light a {
  color: #0000ee !important;
}
.a11y-contrast-dark a {
  color: #66aaff !important;
}

body.title-highlighted .page-title {
   border:3px solid #999d1d;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
body.title-highlighted  h1, body.title-highlighted h2, body.title-highlighted h3, body.title-highlighted h4, body.title-highlighted h5, body.title-highlighted h6{
  border:3px solid #999d1d;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Hover highlight toggle */
body.title-highlighted .page-title {
  background: #fffa9e;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Hover highlight toggle (applies to all text) */
body.title-highlight-hover p:hover,
body.title-highlight-hover h1:hover,
body.title-highlight-hover h2:hover,
body.title-highlight-hover h3:hover,
body.title-highlight-hover h4:hover,
body.title-highlight-hover h5:hover,
body.title-highlight-hover h6:hover,
body.title-highlight-hover span:hover,
body.title-highlight-hover a:hover,
body.title-highlight-hover li:hover,
body.title-highlight-hover td:hover,
body.title-highlight-hover th:hover {
  background: #cce5ff;
  border-radius: 0.25rem;
  transition: background 0.2s ease;
}

body.focus-highlight a:focus,
body.focus-highlight button:focus,
body.focus-highlight input:focus,
body.focus-highlight textarea:focus,
body.focus-highlight select:focus,
body.focus-highlight [tabindex]:focus {
  outline: 3px solid #ff9800;   /* orange outline */
  outline-offset: 2px;
  background: #fff3e0;          /* soft background highlight */
  border-radius: 0.25rem;
  transition: background 0.2s ease;
}

/* Read Mode: strip styles, show plain text and links */
body.reading-mode {
  font-family: Arial, Helvetica, sans-serif; /* clean, basic font */
  font-size: 1.1em;
  line-height: 1.6;
  color: #000;
  background: #fff;
  max-width: 700px;
  margin: auto;
  padding: 2rem;
}

/* Hide header, footer, icons, and images */
body.reading-mode header,
body.reading-mode footer,
body.reading-mode img,
body.reading-mode i,
body.reading-mode svg,
body.reading-mode .icon {
  display: none !important;
}

/* Keep headings and links readable */
body.reading-mode h1,
body.reading-mode h2,
body.reading-mode h3,
body.reading-mode h4,
body.reading-mode h5,
body.reading-mode h6 {
  font-weight: bold;
  margin: 1em 0 0.5em;
}

body.reading-mode a {
  color: #0645ad;
  text-decoration: underline;
}
/* .a11y-hide-images img {
  display: none !important;
}*/
.a11y-monochrome {
  filter: grayscale(100%) !important;
}

.reading-guide-bar {
  position: fixed;
 left: 0;
  max-width: 800px;
  width: 90%;
  height: 1.3em;
  background:  #fff200;
  border: solid 3px #000000;
  pointer-events: none;
  z-index: 9999;
  display: none;
  transition: transform 0.05s linear; /* smooth movement */

}

.a11y-reading-guide .reading-guide-bar {
  display: block;
}

.content-wrapper {
  transform: scale(calc(var(--user-content-scale, 100%) / 100));
  transform-origin: top left; /* keeps scaling aligned */
}
/* Big Black Cursor */
.a11y-cursor-black {
  cursor: url('../images/black-cursor.png') 16 16, auto !important;
}

/* Big White Cursor */
.a11y-cursor-white,
.a11y-cursor-white a,
.a11y-cursor-white button {
   cursor: url('../images/big-white-cursor.png') 16 16, auto !important;
}

/* Force links and buttons to use the hand cursor */
.a11y-cursor-black a,
.a11y-cursor-black button,
.a11y-cursor-white a,
.a11y-cursor-white button {
  cursor: pointer !important;
}




.ui-dialog-off-canvas {
  position: fixed;
  right: 0;
}


html[data-offset-right],
body[data-offset-right] {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* 2) Neutralize Displace CSS variable if your theme uses it */
:root {
  --drupal-displace-offset-right: 0 !important;
  --drupal-displace-offset-left: 0 !important;
}

/* 3) Ensure off-canvas overlays and does not push layout */
.ui-dialog-off-canvas,
.ui-dialog-off-canvas .ui-dialog {
  position: fixed !important;
  right: 0;
  left: auto;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  z-index: 10000; /* above site chrome */
}

/* 4) Avoid double scrollbar compensation on the body */
html.ui-dialog-open,
body.ui-dialog-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* 5) If the admin toolbar tray is open, prevent push layout */
.toolbar-tray-open,
.toolbar-tray-horizontal.is-active {
  padding-right: 0 !important;
  margin-right: 0 !important;
}