/*
 * Mark-Ease Accessibility Preferences Widget
 * Copyright (c) 2026 Mark-Ease Products
 * SPDX-License-Identifier: MIT
 */

.a11y-skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 1000002;
  padding: .75rem 1rem;
  color: #fff !important;
  background: #003366 !important;
  border: 2px solid #fff;
  border-radius: .25rem;
  transform: translateY(-200%);
}
.a11y-skip-link:focus { transform: translateY(0); }
.a11y-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.a11y-generated-label { display: block; margin: .5rem 0 .2rem; font-weight: 700; }
.a11y-statement-link { clear: both; margin: .75rem 0; text-align: center !important; }
.a11y-statement-link a { display: inline-block; padding: .35rem; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
}
:where(a, button, input, select, textarea, [tabindex]):focus {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
}
:where(a, button, input, select, textarea) { scroll-margin: 5rem; }

.mep-a11y-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  color: #fff;
  background: #003366;
  font: 700 17px/1 Arial, sans-serif;
  cursor: pointer;
}
.mep-a11y-launcher::after {
  position: absolute;
  right: calc(100% + .55rem);
  bottom: 50%;
  width: max-content;
  padding: .45rem .65rem;
  border-radius: .25rem;
  color: #fff;
  background: #17212b;
  content: "Accessibility options";
  font: 700 14px/1.2 Arial, sans-serif;
  opacity: 0;
  transform: translateY(50%);
  pointer-events: none;
}
.mep-a11y-launcher:hover::after,
.mep-a11y-launcher:focus::after,
.mep-a11y-launcher:focus-visible::after { opacity: 1; }
.mep-a11y-launcher .mep-a11y-universal-icon {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
  pointer-events: none;
}
.mep-a11y-launcher .mep-a11y-universal-icon .mep-a11y-icon-person {
  fill: #fff !important;
  stroke: none !important;
}
.mep-a11y-panel {
  position: fixed;
  right: 1rem;
  bottom: 4.75rem;
  z-index: 1000001;
  box-sizing: border-box;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 6rem));
  overflow: auto;
  padding: 1rem;
  border: 2px solid #003366;
  border-radius: .4rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  color: #111;
  background: #fff;
  font: 16px/1.4 Arial, sans-serif;
  text-align: left;
}
.mep-a11y-panel[hidden] { display: none !important; }
.mep-a11y-panel-header {
  position: sticky;
  top: -1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1rem -1rem .75rem;
  padding: .65rem .5rem .45rem 1rem;
  border-bottom: 1px solid #ccd6df;
  background: #fff;
}
.mep-a11y-heading { margin: 0; color: #003366; font-size: 1.25rem; }
.mep-a11y-close { flex: 0 0 44px; min-width: 44px; min-height: 44px; margin-left: .5rem; border: 0; color: #003366; background: transparent; font-size: 1.5rem; cursor: pointer; }
.mep-a11y-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mep-a11y-controls button { min-height: 44px; padding: .55rem; border: 2px solid #003366; border-radius: .25rem; color: #003366; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mep-a11y-controls button:hover { color: #fff; background: #003366; }
.mep-a11y-wide { grid-column: 1 / -1; }
.mep-a11y-status { min-height: 1.4em; margin: .75rem 0 0; }

html.mep-a11y-spacing body { line-height: 1.65 !important; letter-spacing: .08em !important; word-spacing: .12em !important; }
html.mep-a11y-links body a,
html.mep-a11y-links body a * {
  color: #003b70 !important;
  background-color: #fff2a8 !important;
  box-shadow: 0 0 0 2px #fff2a8 !important;
  text-decoration: underline 3px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: .18em !important;
}
html.mep-a11y-links :where(#navigation, #mainNav) a {
  display: inline-block;
  margin: 2px;
  padding: .2em .35em !important;
  border: 2px solid #003b70 !important;
  border-radius: .2rem;
}
html.mep-a11y-links body :where(#navigation, #mainNav) a,
html.mep-a11y-links body :where(#navigation, #mainNav) a * {
  color: #002b4d !important;
  text-shadow: none !important;
}
html.mep-a11y-readable body,
html.mep-a11y-readable body *:not(.fa):not([class*="icon"]) { font-family: Arial, Helvetica, sans-serif !important; }

.mep-a11y-reading-guide {
  position: fixed;
  left: 0;
  z-index: 999999;
  width: 100vw;
  height: 3.25rem;
  border-top: 3px solid #ffbf47;
  border-bottom: 3px solid #ffbf47;
  box-shadow: 0 -100vh 0 100vh rgba(0, 0, 0, .48), 0 100vh 0 100vh rgba(0, 0, 0, .48);
  transform: translateY(-50%);
  pointer-events: none;
}
.mep-a11y-reading-guide[hidden] { display: none !important; }

html.mep-a11y-cursor body,
html.mep-a11y-cursor body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 40 48'%3E%3Cpath d='M4 2v34l9-8 7 17 7-3-7-16h13z' fill='white' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.mep-a11y-hide-images body img,
html.mep-a11y-hide-images body picture,
html.mep-a11y-hide-images body svg:not(.mep-a11y-panel svg):not(.mep-a11y-universal-icon) { visibility: hidden !important; }
html.mep-a11y-hide-images body *:not(.mep-a11y-panel):not(.mep-a11y-launcher) { background-image: none !important; }

html.mep-a11y-dark body,
html.mep-a11y-dark body * { color: #f5f5f5 !important; border-color: #aaa !important; text-shadow: none !important; }
html.mep-a11y-dark body * { background-color: transparent !important; background-image: none !important; }
html.mep-a11y-dark body,
html.mep-a11y-dark :where(#body, #doc, #bd, #zWrap, .modWrap, .mep-a11y-panel, #navigation, #mainNav, #mainNav ul) { background-color: #202124 !important; background-image: none !important; }
html.mep-a11y-dark .mep-a11y-panel-header { background: #202124 !important; }
html.mep-a11y-dark a { color: #9ecbff !important; }
html.mep-a11y-dark :where(input, select, textarea, button) { color: #f5f5f5 !important; background: #303134 !important; }

html.mep-a11y-contrast body,
html.mep-a11y-contrast body * { color: #fff !important; border-color: #fff !important; text-shadow: none !important; }
html.mep-a11y-contrast body * { background-color: transparent !important; background-image: none !important; }
html.mep-a11y-contrast body,
html.mep-a11y-contrast :where(#body, #doc, #bd, #zWrap, .modWrap, .mep-a11y-panel, #navigation, #mainNav, #mainNav ul) { background-color: #000 !important; background-image: none !important; }
html.mep-a11y-contrast .mep-a11y-panel-header { background: #000 !important; }
html.mep-a11y-contrast a { color: #ffea00 !important; text-decoration: underline !important; }
html.mep-a11y-contrast :where(input, select, textarea, button) { color: #000 !important; background: #fff !important; }
html.mep-a11y-contrast .mep-a11y-launcher { color: #fff !important; background: #000 !important; }

html.mep-a11y-dark.mep-a11y-links body a,
html.mep-a11y-contrast.mep-a11y-links body a {
  color: #000 !important;
  background-color: #ffea00 !important;
  box-shadow: 0 0 0 2px #ffea00 !important;
  border-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (max-width: 480px), (max-height: 480px) {
  .mep-a11y-launcher {
    right: .4rem;
    bottom: .4rem;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: calc(100vw - .8rem);
    border-width: 1px;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  .mep-a11y-launcher::after { display: none; }
  .mep-a11y-launcher .mep-a11y-universal-icon { width: 15px; height: 15px; }
  body.mep-a11y-panel-open { overflow: hidden !important; }
  body.mep-a11y-panel-open .mep-a11y-launcher { visibility: hidden; }
  .mep-a11y-panel {
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    width: calc(100vw - 1rem);
    max-height: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mep-a11y-controls { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .mep-a11y-controls button { padding: .45rem .3rem; }
}
@media (max-width: 340px) {
  .mep-a11y-controls { grid-template-columns: 1fr; }
  .mep-a11y-wide { grid-column: auto; }
}