/*
 * MS Accessibility - design tokens.
 *
 * Every value falls back to a built-in default, so the panel works on any site.
 * When the host theme defines its own --color-* variables, those win and the
 * panel follows the site palette instead. Override any --msa-* token in your
 * own stylesheet to restyle the panel without touching this file.
 */
:root {
  --msa-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --msa-bg:        var(--color-bg-primary, #ffffff);
  --msa-bg-soft:   var(--color-bg-secondary, #f8f8f8);
  --msa-text:      var(--color-text-primary, #000000);
  --msa-text-soft: var(--color-text-secondary, #626570);
  --msa-heading:   var(--color-text-heading, #16295b);
  --msa-border:    var(--color-border, #d9d9d9);
  --msa-link:      var(--color-link, #265aa6);

  --msa-accent:    var(--color-blue-100, #265aa6);
  --msa-on-accent: var(--color-white, #ffffff);
  --msa-black:     var(--color-black, #000000);

  --msa-grey-010:  var(--color-grey-010, #f8f8f8);
  --msa-grey-100:  var(--color-grey-100, #a4acc1);
  --msa-grey-200:  var(--color-grey-200, #ababab);
  --msa-grey-300:  var(--color-grey-300, #626570);
  --msa-grey-400:  var(--color-grey-400, #464646);

  --msa-cyan:      var(--color-cyan-050, #00ffff);
  --msa-yellow:    var(--color-yellow-050, #ffff00);
  --msa-red:       var(--color-red, #ff3030);
  --msa-error:     var(--color-error, #d95959);

  /*
   * How much bigger the panel itself is than its design size. The script sets
   * it from the text-size control, so a visitor reading at 200% is not left
   * operating a 13px panel.
   */
  --msa-scale: 1;

  /* Distance from the screen edge. The theme's --wrap keeps the button on the site grid. */
  --msa-wrap:      var(--wrap, 5vw);

  /* Decorative watermark behind the panel. The plugin ships none; a site adds
     its own through the ms_accessibility_watermark filter or this token. */
  --msa-watermark: none;
}

/* Dark defaults, used only when the host theme defines no palette of its own. */
@media (prefers-color-scheme: dark) {
  :root {
    --msa-bg:        var(--color-bg-primary, #0f0f0f);
    --msa-bg-soft:   var(--color-bg-secondary, #272727);
    --msa-text:      var(--color-text-primary, #f1f1f1);
    --msa-text-soft: var(--color-text-secondary, #aaaaaa);
    --msa-heading:   var(--color-text-heading, #f1f1f1);
    --msa-border:    var(--color-border, #3f3f3f);
    --msa-link:      var(--color-link, #3ea6ff);
  }
}

#accessibility-widget-container {
  font-family: var(--msa-font) !important;
  line-height: 1.5;
  z-index: 9999999;
}

#accessibility-widget-container * {
  box-sizing: border-box;
  font-family: var(--msa-font) !important;
}

#accessibility-toggle-btn.header-style {
  background: transparent;
  border: none;
  color: var(--msa-text);
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  line-height: 1;
  border-radius: 50%;
  margin-left: 1rem;
}

/*
 * The label doubles the button's aria-label, so it stays hidden by default.
 * A theme that wants a labelled button can show it again.
 */
#accessibility-toggle-btn.header-style .accessibility-text {
  display: none;
}

#accessibility-toggle-btn.header-style:hover {
  background-color: var(--msa-accent);
  border-color: var(--msa-accent);
  color: var(--msa-on-accent);
}

#accessibility-toggle-btn.header-style svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}


/*
 * Floating button, printed by the plugin itself when the theme cannot place
 * [accessibility_btn] in a template (ms_accessibility_floating_button filter).
 * The shortcode button sits in the header markup instead and is never a direct
 * child of the container, so this rule leaves it alone.
 */
#accessibility-widget-container > #accessibility-toggle-btn {
  position: fixed;
  right: var(--msa-wrap);
  bottom: 20px;
  z-index: 999998;
  margin: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  background: var(--msa-accent);
  border: none;
  color: var(--msa-on-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

#accessibility-widget-container > #accessibility-toggle-btn .accessibility-text {
  display: none;
}

#accessibility-widget-container > #accessibility-toggle-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

#accessibility-panel {
  position: fixed;
  top: 70px;
  right: var(--msa-wrap);
  width: min(calc(320px * var(--msa-scale)), calc(100vw - 20px));
  background: var(--msa-bg);
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 2px solid var(--msa-accent);
  border-radius: 0;

  overflow-y: auto;
  max-height: calc(100vh - 80px);

  scrollbar-width: thin;
  scrollbar-color: var(--msa-accent) var(--msa-grey-010);
}

#accessibility-panel::-webkit-scrollbar {
  width: 6px;
}

#accessibility-panel.msa-anchor-left {
  left: var(--msa-wrap);
  right: auto;
}

#accessibility-panel.msa-anchor-right {
  right: var(--msa-wrap);
  left: auto;
}

#accessibility-panel.msa-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  pointer-events: none;
}

.accessibility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(16px * var(--msa-scale)) calc(20px * var(--msa-scale));
  background: var(--msa-bg-soft);
  border-bottom: 1px solid var(--msa-border);
}

.accessibility-header h3 {
  margin: 0;
  color: var(--msa-heading);
  font-weight: 700;
  font-size: calc(18px * var(--msa-scale));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.close-x {
  background: none;
  border: none;
  font-size: calc(24px * var(--msa-scale));
  cursor: pointer;
  color: var(--msa-text-soft);
  transition: color 0.3s ease;
  line-height: 1;
  padding: 0;
}

.close-x:hover {
  color: var(--msa-error);
}

.accessibility-body {
  padding: calc(20px * var(--msa-scale));
  position: relative;
  z-index: 1;
}

.accessibility-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: var(--msa-watermark);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;

  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

html.accessibility-contrast .accessibility-body::before {
  display: none !important;
}

.accessibility-adjust-group {
  margin-bottom: calc(20px * var(--msa-scale));
}

.adjust-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(10px * var(--msa-scale));
}

.adjust-label {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--msa-scale));
  color: var(--msa-text);
  font-weight: 500;
  font-size: calc(14px * var(--msa-scale));
  flex-grow: 1;
}

.adjust-label svg {
  color: var(--msa-link);
  width: calc(18px * var(--msa-scale));
  height: calc(18px * var(--msa-scale));
}

.adjust-label small {
  background: var(--msa-bg-soft);
  border: 1px solid var(--msa-border);
  padding: calc(2px * var(--msa-scale)) calc(8px * var(--msa-scale));
  font-size: calc(12px * var(--msa-scale));
  color: var(--msa-text);
  margin-left: auto;
  margin-right: calc(15px * var(--msa-scale));
  min-width: calc(45px * var(--msa-scale));
  text-align: center;
}

.adjust-btns {
  display: flex;
  gap: 0;
  border: 1px solid var(--msa-grey-200);
}

.adjust-btns button {
  width: calc(36px * var(--msa-scale));
  height: calc(36px * var(--msa-scale));
  border: none;
  background: var(--msa-bg);
  cursor: pointer;
  font-weight: 400;
  font-size: calc(20px * var(--msa-scale));
  color: var(--msa-text);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.adjust-btns button:first-child {
  border-right: 1px solid var(--msa-grey-200);
}

.adjust-btns button:hover {
  background: var(--msa-accent);
  color: var(--msa-on-accent);
}

.accessibility-divider {
  border: 0;
  border-top: 1px solid var(--msa-border);
  margin: calc(20px * var(--msa-scale)) 0;
}

.accessibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10px * var(--msa-scale));
  margin-bottom: calc(10px * var(--msa-scale));
}

.accessibility-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--msa-scale));
  padding: calc(15px * var(--msa-scale)) calc(10px * var(--msa-scale));
  background: var(--msa-bg);
  border: 1px solid var(--msa-grey-200);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--msa-text);
  font-size: calc(13px * var(--msa-scale));
  font-weight: 500;
  border-radius: 0;
}

.accessibility-grid button svg {
  width: calc(26px * var(--msa-scale));
  height: calc(26px * var(--msa-scale));
  stroke: var(--msa-grey-400);
  fill: none;
  transition: all 0.3s ease;
}

.accessibility-grid button:hover {
  border-color: var(--msa-accent);
  color: var(--msa-link);
}

.accessibility-grid button:hover svg {
  stroke: var(--msa-accent);
}

.accessibility-grid button.active {
  background: var(--msa-accent);
  border-color: var(--msa-accent);
  color: var(--msa-on-accent);
}

.accessibility-grid button.active svg {
  stroke: var(--msa-on-accent);
}

/*
 * An active mode must not be told by colour alone (WCAG 1.4.1), so a pressed
 * button also carries a mark. The state itself is in aria-pressed.
 */
.accessibility-grid button {
  position: relative;
}

.accessibility-grid button.active::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: calc(12px * var(--msa-scale));
  line-height: 1;
}

/*
 * Every control in the panel keeps a focus ring the visitor can actually see,
 * whatever the host theme does to buttons.
 */
#accessibility-widget-container button:focus-visible,
#accessibility-panel:focus-visible {
  outline: 3px solid var(--msa-link);
  outline-offset: 2px;
}

/* Announcements for screen readers: present, but not on screen. */
.msa-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A panel about accessibility has no business ignoring this setting. */
@media (prefers-reduced-motion: reduce) {
  #accessibility-widget-container,
  #accessibility-widget-container *,
  #accessibility-reading-line {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.accessibility-footer .reset-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--msa-scale));
  padding: calc(12px * var(--msa-scale));
  background: var(--msa-bg);
  color: var(--msa-error);
  border: 1px solid var(--msa-error);
  cursor: pointer;
  font-weight: 500;
  font-size: calc(14px * var(--msa-scale));
  transition: all 0.3s ease;
  border-radius: 0;
  text-transform: uppercase;
}

.accessibility-footer .reset-btn:hover {
  background: var(--msa-error);
  color: var(--msa-on-accent);
}

#accessibility-reading-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(255, 255, 0, 0.25);
  border-bottom: 4px solid var(--msa-red);
  border-top: 2px solid rgba(255, 0, 0, 0.3);
  pointer-events: none;
  z-index: 2147483647;
  display: none;
  transition: top 0.1s ease-out;
}

html.accessibility-contrast #accessibility-reading-line {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-bottom: 4px solid var(--msa-yellow) !important;
  border-top: none !important;
}

html.accessibility-gray {
  filter: grayscale(100%) !important;
}

html.accessibility-contrast body,
html.accessibility-contrast
  body
  *:not(#accessibility-widget-container):not(
    #accessibility-widget-container *
  ) {
  background-color: var(--msa-black) !important;
  color: var(--msa-yellow) !important;
  border-color: var(--msa-yellow) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/*
 * A picture behind text has to go, or the text cannot be read. A background
 * image on an element that holds no text is content in its own right - a logo,
 * an emblem, a flag - and the script marks it to be kept.
 */
html.accessibility-contrast body:not(.msa-keeps-background),
html.accessibility-contrast
  body
  *:not(#accessibility-widget-container):not(
    #accessibility-widget-container *
  ):not(.msa-keeps-background) {
  background-image: none !important;
}

html.accessibility-contrast .msa-keeps-background {
  filter: grayscale(100%) contrast(150%);
}

html.accessibility-contrast a,
html.accessibility-contrast a *:not(#accessibility-widget-container *) {
  color: var(--msa-cyan) !important;
  text-decoration: underline !important;
}

html.accessibility-contrast button:not(#accessibility-widget-container button),
html.accessibility-contrast input,
html.accessibility-contrast textarea,
html.accessibility-contrast select {
  background-color: var(--msa-black) !important;
  color: var(--msa-yellow) !important;
  border: 2px solid var(--msa-yellow) !important;
}

html.accessibility-contrast svg:not(#accessibility-widget-container svg) {
  fill: var(--msa-yellow) !important;
  stroke: var(--msa-yellow) !important;
}

html.accessibility-contrast img,
html.accessibility-contrast video,
html.accessibility-contrast iframe {
  filter: grayscale(100%) contrast(120%) !important;
  background-color: transparent !important;
}

html.accessibility-contrast #accessibility-panel {
  background-color: var(--msa-bg) !important;
  border-color: var(--msa-accent) !important;
}

html.accessibility-contrast #accessibility-widget-container h3,
html.accessibility-contrast #accessibility-widget-container span,
html.accessibility-contrast #accessibility-widget-container small {
  color: var(--msa-text) !important;
  background-color: transparent !important;
}

html.accessibility-contrast .accessibility-header {
  background-color: var(--msa-bg-soft) !important;
  border-bottom-color: var(--msa-border) !important;
}

html.accessibility-contrast .accessibility-header h3 {
  color: var(--msa-heading) !important;
}

html.accessibility-contrast .close-x {
  color: var(--msa-text-soft) !important;
}

html.accessibility-contrast .accessibility-grid button {
  background-color: var(--msa-bg) !important;
  color: var(--msa-text) !important;
  border-color: var(--msa-grey-200) !important;
}

html.accessibility-contrast .accessibility-grid button svg {
  stroke: var(--msa-grey-400) !important;
  fill: none !important;
}

html.accessibility-contrast .accessibility-grid button.active {
  background-color: var(--msa-accent) !important;
  color: var(--msa-on-accent) !important;
  border-color: var(--msa-accent) !important;
}

html.accessibility-contrast .accessibility-grid button.active svg {
  stroke: var(--msa-on-accent) !important;
}

html.accessibility-contrast .adjust-label {
  color: var(--msa-text) !important;
}

html.accessibility-contrast .adjust-label small {
  background-color: var(--msa-bg-soft) !important;
  color: var(--msa-text) !important;
  border-color: var(--msa-border) !important;
}

html.accessibility-contrast .adjust-btns button {
  background-color: var(--msa-bg) !important;
  color: var(--msa-text) !important;
  border-color: var(--msa-grey-200) !important;
}

html.accessibility-contrast .reset-btn {
  background-color: var(--msa-bg) !important;
  color: var(--msa-error) !important;
  border-color: var(--msa-error) !important;
}

html.accessibility-contrast #accessibility-widget-container svg {
  fill: none !important;
  stroke: currentColor !important;
}

html.accessibility-cursor,
html.accessibility-cursor * {
  cursor:
    url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20.5056 10.7754C21.1225 10.5355 21.431 10.4155 21.5176 10.2459C21.5926 10.099 21.5903 9.92446 21.5115 9.77954C21.4205 9.61226 21.109 9.50044 20.486 9.2768L4.59629 3.5728C4.0866 3.38983 3.83175 3.29835 3.66514 3.35605C3.52029 3.40621 3.40645 3.52004 3.35629 3.6649C3.29859 3.8315 3.39008 4.08635 3.57304 4.59605L9.277 20.4858C9.50064 21.1088 9.61246 21.4203 9.77973 21.5113C9.92465 21.5901 10.0991 21.5924 10.2461 21.5174C10.4157 21.4308 10.5356 21.1223 10.7756 20.5054L13.3724 13.8278C13.4194 13.707 13.4429 13.6466 13.4792 13.5957C13.5114 13.5506 13.5508 13.5112 13.5959 13.479C13.6468 13.4427 13.7072 13.4192 13.828 13.3722L20.5056 10.7754Z' fill='black' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    auto !important;
}

html.accessibility-links a,
html.accessibility-links a * {
  text-decoration: underline !important;
  font-weight: bold !important;
  color: var(--msa-black) !important;
  background-color: var(--msa-yellow) !important;
}

html.accessibility-font body :not(#accessibility-widget-container *) {
  font-family: Arial, Helvetica, sans-serif !important;
}

html.accessibility-no-anim *,
html.accessibility-no-anim *::before,
html.accessibility-no-anim *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

@media (max-width: 768px) {
  /* A custom cursor means nothing on a touch screen. */
  #btn-cursor {
    display: none;
  }

  #accessibility-toggle-btn.header-style {
    padding: 0;
    margin-left: 15px;
    border: none;
    width: 40px;
    height: 40px;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  #accessibility-toggle-btn.header-style:hover {
    background-color: transparent !important;
    color: var(--msa-text) !important;
    border: none !important;
  }

  #accessibility-toggle-btn.header-style:active {
    background-color: var(--msa-accent) !important;
    color: var(--msa-on-accent) !important;
  }

  #accessibility-toggle-btn.header-style .accessibility-text {
    display: none;
  }

  #accessibility-toggle-btn.header-style svg {
    width: 24px;
    height: 24px;
  }

  #accessibility-panel {
    top: 60px;
    right: 10px;
    left: auto;
    width: calc(100% - 20px);
    max-width: min(calc(320px * var(--msa-scale)), calc(100vw - 20px));
    max-height: calc(85vh - 60px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--msa-grey-200);
  }

  .accessibility-header {
    padding: calc(12px * var(--msa-scale)) calc(15px * var(--msa-scale));
    background-color: var(--msa-bg);
    border-bottom: 1px solid var(--msa-grey-100);
  }

  .accessibility-header h3 {
    font-size: calc(14px * var(--msa-scale));
    font-weight: 600;
  }

  .close-x {
    font-size: calc(22px * var(--msa-scale));
    padding: calc(5px * var(--msa-scale));
  }

  .accessibility-body {
    padding: calc(15px * var(--msa-scale));
  }

  .accessibility-adjust-group {
    margin-bottom: calc(15px * var(--msa-scale));
  }

  .adjust-row {
    margin-bottom: calc(8px * var(--msa-scale));
  }

  .adjust-label {
    font-size: calc(13px * var(--msa-scale));
    gap: calc(8px * var(--msa-scale));
  }

  .adjust-label svg {
    width: calc(16px * var(--msa-scale));
    height: calc(16px * var(--msa-scale));
  }

  .adjust-label small {
    display: none;
  }

  .adjust-btns {
    height: auto;
    display: flex;
  }

  .adjust-btns button {
    width: calc(32px * var(--msa-scale));
    height: calc(32px * var(--msa-scale));
    font-size: calc(16px * var(--msa-scale));
    line-height: 1;
    padding: 0;
  }

  .accessibility-divider {
    margin: calc(15px * var(--msa-scale)) 0;
    border-top-color: var(--msa-grey-100);
  }

  .accessibility-grid {
    gap: calc(8px * var(--msa-scale));
    margin-bottom: calc(15px * var(--msa-scale));
  }

  .accessibility-grid button {
    padding: calc(10px * var(--msa-scale)) calc(5px * var(--msa-scale));
    gap: calc(6px * var(--msa-scale));
    font-size: calc(11px * var(--msa-scale));
  }

  .accessibility-grid button svg {
    width: calc(20px * var(--msa-scale));
    height: calc(20px * var(--msa-scale));
  }

  .accessibility-footer .reset-btn {
    padding: calc(10px * var(--msa-scale));
    font-size: calc(12px * var(--msa-scale));
  }
}