/*

STYLING FOR A11Y WIDGET PANEL AND TRIGGER BUTTON

*/

:root {
  --a11y-theme-color: hsl(217, 68%, 35%, 1);
  --a11y-theme-focus: hsl(217, 68%, 50%, 0.5);

  --a11y-panel-width: 480px;
  --a11y-panel-background: hsl(0, 0%, 95%);
  --a11y-panel-color: hsl(0, 0%, 0%);
  --a11y-panel-zIndex: 100;

  --a11y-handle-background: var(--a11y-theme-color);
  --a11y-handle-color: hsl(0, 0%, 100%);
  --a11y-handle-focus-border: var(--a11y-theme-focus);

  --a11y-title-background: var(--a11y-theme-color);
  --a11y-title-color: hsl(0, 0%, 100%);

  --a11y-button-background: hsl(0, 0%, 100%);
  --a11y-button-color: hsl(0, 0%, 10%);
  --a11y-button-zIndex: 1;
  --a11y-button-zIndex-focus: 2;
  --a11y-button-border-hover: var(--a11y-theme-color);
  --a11y-button-border-focus: var(--a11y-theme-focus);

  --a11y-icon-color: hsl(0, 0%, 25%);

  --a11y-name-color: var(--a11y-button-color);

  --a11y-step-background: hsl(0, 0%, 85%);
  --a11y-step-active-background: var(--a11y-theme-color);
  /* --a11y-step-border: hsl(0, 0%, 100%); */
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/a11y-widget-assets/fonts/Lexend-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/a11y-widget-assets/fonts/Lexend-Bold.woff2) format('woff2');
}

/* a11y widget open/close buttons styling */

.a11y-button-trigger {
  aspect-ratio: 1;
  background: var(--a11y-handle-background);
  color: var(--a11y-handle-color);
  /* position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(-100%, -50%, 0); */
  margin: 0;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font-size: 40px;
}

.a11y-button-trigger:focus-visible {
  outline: 2px solid var(--a11y-theme-color);
  outline-offset: 2px;
}

.a11y-button-trigger svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  pointer-events: none;
}

.a11y-button-close {
  margin: 0;
  border: 0;
  padding: 4px;
  background: hsl(0, 0%, 95%);
  color: hsl(0, 0%, 0%);
  font-size: 32px;
  cursor: pointer;
}

.a11y-button-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.a11y-button-close svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  pointer-events: none;
}

/* a11y widget panel styling */

.a11y-panel {
  position: fixed;
  z-index: var(--a11y-panel-zIndex);
  top: 0;
  bottom: 0;
  right: 0;
  /* right: calc(var(--a11y-panel-width) * -1); */
  width: min(80vw, var(--a11y-panel-width));
  /* transition: right 0.3s; */
  /* margin-block: auto; */
  margin-block: 16px;
  margin-inline-start: auto;
  margin-inline-end: 16px;
  max-height: calc(100% - 32px);
  padding: 0;
  font-family: 'Lexend', sans-serif;
  background: var(--a11y-panel-background);
  color: var(--a11y-panel-color);
  box-shadow: 0 0 0 4px;
  overscroll-behavior: contain;
  display: none;
}

.a11y-panel::backdrop {
  background-color: hsl(0, 0%, 0%, 0.125);
}

.a11y-panel[open],
.a11y-panel[data-state='expanded'] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  max-height: calc(100% - 32px);
  overflow: hidden;
}

.a11y-panel * {
  margin: 0;
}

.a11y-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--a11y-title-background);
  color: var(--a11y-title-color);
  padding: 8px;
}

.a11y-title {
  font-weight: 400 !important;
  font-size: 18px;
  line-height: normal !important;
  letter-spacing: 0.1ex;
  text-align: center;
  flex-grow: 1;
}

.a11y-buttons-list {
  height: 100%;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  align-content: start;
  padding: 4px 16px;
}

.a11y-button,
.a11y-reset {
  position: relative;
  z-index: var(--a11y-button-zIndex);
  width: 100%;
  font-size: 16px;
  background: var(--a11y-button-background);
  color: var(--a11y-button-color);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
}

.a11y-reset {
  flex-direction: row;
  justify-content: center;
  background-color: var(--a11y-theme-color);
  color: #fff;
}

.a11y-reset .a11y-button__icon {
  font-size: 24px;
}

.a11y-reset .a11y-button__name,
.a11y-reset .a11y-button__icon {
  color: inherit;
}

.a11y-button:hover,
.a11y-reset:hover {
  border-color: var(--a11y-button-border-hover);
}

.a11y-button[data-selected]:not([data-selected='0']) {
  border-color: var(--a11y-button-border-hover);
}

.a11y-button:focus-visible,
.a11y-reset:focus-visible {
  outline: none;
  z-index: var(--a11y-button-zIndex-focus);
  box-shadow: 0 0 0 4px var(--a11y-button-border-focus);
}

.a11y-button__icon {
  display: block;
  font-weight: 400;
  font-size: 32px;
  color: var(--a11y-icon-color);
  pointer-events: none;
  text-align: center;
}

.a11y-button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  margin-inline: auto;
  pointer-events: none;
}

.a11y-button__name {
  flex-grow: 1;
  display: block;
  word-break: break-word;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05ch !important;
  color: var(--a11y-name-color);
  margin-block: auto;
  pointer-events: none;
}

.a11y-button .a11y-button__name {
  text-align: left;
}

.a11y-footer {
  padding: 0 16px 16px;
}

/*
steps styling
*/

.a11y-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto;
  padding-left: 0;
  list-style: none;
  pointer-events: none;
}

.a11y-step-item {
  flex-grow: 1;
  height: 8px;
  border: 1px solid var(--a11y-step-border, transparent);
  border-radius: 7px;
  background: var(--a11y-step-background);
  /* transition: 0.23s; */
  aspect-ratio: 1;
}

[data-selected='1'] .a11y-step-item:nth-child(1) {
  background: var(--a11y-step-active-background);
}
[data-selected='2'] .a11y-step-item:nth-child(-n + 2) {
  background: var(--a11y-step-active-background);
}
[data-selected='3'] .a11y-step-item:nth-child(-n + 3) {
  background: var(--a11y-step-active-background);
}
[data-selected='4'] .a11y-step-item:nth-child(-n + 4) {
  background: var(--a11y-step-active-background);
}

.a11y-button__name span {
  display: none;
}

[data-selected='0'] .a11y-label:nth-child(1) {
  display: block;
}

[data-selected='1'] .a11y-label:nth-child(2) {
  display: block;
}

[data-selected='2'] .a11y-label:nth-child(3) {
  display: block;
}

[data-selected='3'] .a11y-label:nth-child(4) {
  display: block;
}

[data-selected='4'] .a11y-label:nth-child(5) {
  display: block;
}

@media (min-width: 30rem) {
  .a11y-button {
    flex-direction: column;
    padding-block: 16px;
  }

  .a11y-button .a11y-button__name {
    text-align: center;
  }

  .a11y-steps {
    flex-direction: row;
    margin-block-start: 2px;
  }
}

/* 

CONFIGURATION STYLING

*/

/*

WCAG 2.1 AA

1.4.4 - Resize Text 

*/

/* 

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

ADJUST FONT SIZE

*/

[data-a11y-size='1'] {
  font-size: 125%;
}
[data-a11y-size='2'] {
  font-size: 150%;
}
[data-a11y-size='3'] {
  font-size: 175%;
}
[data-a11y-size='4'] {
  font-size: 200%; /* WCAG minimum requirement */
}

/*

WCAG 2.1 AA

1.4.12 - Text Spacing

*/

/* 

Letter spacing (tracking) to at least 0.12 times the font size; 

ADJUST LETTER SPACING/TRACKING

*/

[data-a11y-tracking='1'] {
  letter-spacing: 0.03em;
}
[data-a11y-tracking='2'] {
  letter-spacing: 0.06em;
}
[data-a11y-tracking='3'] {
  letter-spacing: 0.09em;
}
[data-a11y-tracking='4'] {
  letter-spacing: 0.12em; /* WCAG minimum requirement */
}

/*

ACCESSIBLE TYPEFACE

*/

[data-a11y-typography='1'] body {
  font-family: 'Lexend', sans-serif !important;
}

/*

APPLY HIGHLIGHT TO LINKS

*/

[data-a11y-links='1'] a {
  text-decoration: underline !important;
  background: #fdff32 !important;
  color: #000 !important;
  padding: 0.1em 0.25em;
}

[data-a11y-links='1'] a * {
  color: #000 !important;
}

/*

ADJUST CONTRAST 

*/

[data-a11y-contrast='1'] {
  filter: grayscale(100%);
}
[data-a11y-contrast='2'] {
  filter: invert(100%);
}
[data-a11y-contrast='3'] {
  filter: contrast(200%);
}
[data-a11y-contrast='4'] {
  filter: contrast(75%);
}

/*

ENABLE LARGER CURSOR

*/

[data-a11y-cursor='1'],
[data-a11y-cursor='1'] a,
[data-a11y-cursor='1'] button,
[data-a11y-cursor='1'] label,
[data-a11y-cursor='1'] select,
[data-a11y-cursor='1'] input,
[data-a11y-cursor='1'] textarea {
  cursor: url('/a11y-widget-assets/images/large-cursor.png'), auto !important;
}

/* 

Line height (line spacing) to at least 1.5 times the font size; 

ADJUST LINE HEIGHT

*/

[data-a11y-height='1'] body {
  line-height: 1.2;
}

[data-a11y-height='2'] body {
  line-height: 1.35;
}

[data-a11y-height='3'] body {
  line-height: 1.5; /* WCAG minimum requirement */
}

[data-a11y-height='4'] body {
  line-height: 1.75;
}

/* 

Word spacing to at least 0.16 times the font size. 

ADJUST WORD SPACING

*/

[data-a11y-spacing='1'] {
  word-spacing: 0.04em;
}
[data-a11y-spacing='2'] {
  word-spacing: 0.08em;
}
[data-a11y-spacing='3'] {
  word-spacing: 0.12em;
}
[data-a11y-spacing='4'] {
  word-spacing: 0.16em; /* WCAG minimum requirement */
}

/*

APPLY FONT WEIGHT BOLD

*/

[data-a11y-weight='1'] body,
[data-a11y-weight='1'] p,
[data-a11y-weight='1'] h1,
[data-a11y-weight='1'] h2,
[data-a11y-weight='1'] h3,
[data-a11y-weight='1'] h4,
[data-a11y-weight='1'] h5,
[data-a11y-weight='1'] h6,
[data-a11y-weight='1'] span,
[data-a11y-weight='1'] li,
[data-a11y-weight='1'] a,
[data-a11y-weight='1'] label,
[data-a11y-weight='1'] button,
[data-a11y-weight='1'] input,
[data-a11y-weight='1'] textarea {
  font-weight: 700;
}

/*

APPLY HIGHLIGHT TO HEADINGS

*/

[data-a11y-heading='1'] h1:not(.a11y-title),
[data-a11y-heading='1'] h2:not(.a11y-title),
[data-a11y-heading='1'] h3:not(.a11y-title),
[data-a11y-heading='1'] h4:not(.a11y-title),
[data-a11y-heading='1'] h5:not(.a11y-title),
[data-a11y-heading='1'] h6:not(.a11y-title) {
  background: #fdff32 !important;
  color: #000 !important;
  padding: 0.1em 0.25em;
}

/*

ENABLE FOCUS READING

*/

[data-a11y-focus='1'] .focus-reading-mask {
  --track-size: 150px;
  --shadow-size: 100vh; /* do not change */
  --shadow-background: hsl(0 0% 0% / 0.75);

  position: fixed;
  z-index: 200;
  height: var(--track-size);
  right: 0;
  left: 0;
  top: calc(
    var(--offsetTop, calc((var(--shadow-size) * 2) + var(--track-size))) -
      (var(--track-size) / 2)
  );
  background: transparent;
  box-shadow: 0 0 0 var(--shadow-size) var(--shadow-background);
  pointer-events: none;
}

/*

DISABLE ANIMATIONS


*/

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[data-a11y-animation='1']:focus-within {
  scroll-behavior: auto;
}

[data-a11y-animation='1'] *,
[data-a11y-animation='1'] *::before,
[data-a11y-animation='1'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/*

ENABLE TEXT TO SPEECH

*/

.tts-controls {
  position: fixed;
  bottom: 0;
  left: 50%;
  background-color: #fff;
  color: #000;

  padding: 16px;
  border: 2px solid #000;
  border-block-end: 0;
}

/* 











































possible contrast enhancements

*/

.contrast-high {
  background-color: #000 !important; /* Black background */
  color: #ffd600 !important; /* Bright yellow text */
}

.contrast-high a,
.contrast-high a:visited {
  color: #ffff00 !important; /* Pure yellow links */
  text-decoration: underline !important;
}

.contrast-high a:hover,
.contrast-high a:focus {
  color: #ffea00 !important; /* Slightly brighter on hover/focus */
  outline: 2px solid #ffd600 !important;
  outline-offset: 2px;
}

.contrast-high button,
.contrast-high input[type='button'],
.contrast-high input[type='submit'] {
  background-color: #ffd600 !important;
  color: #000 !important;
  border: 2px solid #ffd600 !important;
  cursor: pointer !important;
}

.contrast-high button:hover,
.contrast-high button:focus,
.contrast-high input[type='button']:hover,
.contrast-high input[type='submit']:focus {
  background-color: #fff338 !important;
  border-color: #fff338 !important;
  outline: none;
}

.contrast-high h1,
.contrast-high h2,
.contrast-high h3,
.contrast-high h4,
.contrast-high h5,
.contrast-high h6 {
  color: #ffd600 !important;
  font-weight: bold;
}

.contrast-high input,
.contrast-high textarea,
.contrast-high select {
  background-color: #000 !important;
  color: #ffd600 !important;
  border: 2px solid #ffd600 !important;
}

.contrast-high input:focus,
.contrast-high textarea:focus,
.contrast-high select:focus {
  outline: 2px solid #fff338 !important;
  outline-offset: 2px;
}

/* Ensure focus indicators are visible */
.contrast-high :focus {
  outline: 3px solid #fff338 !important;
  outline-offset: 2px;
}