/* =====================================================
   ACCESSIBILITY WIDGET
   ===================================================== */

/* The widget is positioned independently of page layout. */

#accessibility-widget {
  position: fixed;
  left: 18px;
  top: 70%;
  transform: none;
  z-index: 999999;

  display: none;
  font-family: Arial, Helvetica, sans-serif;

  pointer-events: auto;
}

/* Show only on desktop screens. */

@media (min-width: 769px) {
  #accessibility-widget {
    display: block;
  }
}

/* Floating accessibility button. */

.accessibility-toggle {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #00aaa3;
  color: #ffffff;

  border: 2px solid #ffffff;
  outline: 1px solid #008c86;

  border-radius: 5px;

  font-size: 30px;
  cursor: pointer;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20);

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.accessibility-toggle:hover {
  background: #008c86;
}

.accessibility-toggle:focus-visible,
.accessibility-panel button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

/* Accessibility panel. */

.accessibility-panel {
 position: fixed;

  left: 68px;
  top: 50%;
  transform: translateY(-50%);

  width: 310px;
  max-height: 85vh;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 20px;

  background: #ffffff;
  color: #222222;

  border: 1px solid #00aaa3;
  border-radius: 7px;

  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.22);

  box-sizing: border-box;

  scrollbar-width: thin;
  scrollbar-color: #888888 #eeeeee;
}

/* Ensure hidden attribute always works. */

.accessibility-panel[hidden] {
  display: none !important;
}

.accessibility-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
}

.accessibility-heading h2 {
  margin: 0;
  font-size: 19px;
  color: #173b63;
}

.accessibility-close {
  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 4px;

  background: #eeeeee;
  color: #222222;

  font-size: 24px;
  cursor: pointer;
}

.accessibility-description {
  margin: 12px 0;
  color: #555555;
  font-size: 13px;
  line-height: 1.5;
}

/* Options layout. */

.accessibility-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.accessibility-options button {
  min-height: 48px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px;

  background: #f5f7f9;
  color: #263238;

  border: 1px solid #dce2e8;
  border-radius: 5px;

  font-size: 13px;
  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.accessibility-options button span {
  min-width: 23px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.accessibility-options button:hover {
  background: #e8f5f4;
  border-color: #00aaa3;
}

.accessibility-options button[aria-pressed="true"] {
  background: #d9f2ef;
  border-color: #008c86;
  color: #064e49;
  font-weight: 700;
}

/* Reset button. */

.accessibility-reset {
  width: 100%;
  margin-top: 14px;
  padding: 11px;

  background: #173b63;
  color: #ffffff;

  border: none;
  border-radius: 5px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.accessibility-reset:hover {
  background: #0e2945;
}

/* =====================================================
   TEXT SIZE
   ===================================================== */

html {
  font-size: calc(100% * var(--a11y-text-scale, 1));
}

/* =====================================================
   GRAYSCALE
   ===================================================== */

/*
  IMPORTANT:
  Never apply a filter to body or an ancestor containing
  the accessibility widget.

  The widget is moved directly into body by main.js.
*/

body.a11y-grayscale #site-header,
body.a11y-grayscale #main-content,
body.a11y-grayscale #site-footer {
  filter: grayscale(100%);
}

/* =====================================================
   DARK THEME
   ===================================================== */

body.a11y-dark {
  background: #121212;
  color: #eeeeee;
}

body.a11y-dark #site-header,
body.a11y-dark #main-content,
body.a11y-dark #site-footer {
  background: #121212;
  color: #eeeeee;
}

body.a11y-dark #main-content .hero,
body.a11y-dark #main-content .section,
body.a11y-dark #main-content .page-hero,
body.a11y-dark #main-content .latest-content-section,
body.a11y-dark #main-content .profile-tabs-section {
  background: #121212;
  color: #eeeeee;
}

body.a11y-dark #main-content .card,
body.a11y-dark #main-content .faq-item,
body.a11y-dark #main-content .map-container,
body.a11y-dark #main-content .profile-tab-content {
  background: #1e1e1e;
  color: #eeeeee;
  border-color: #555555;
}

body.a11y-dark #main-content h1,
body.a11y-dark #main-content h2,
body.a11y-dark #main-content h3,
body.a11y-dark #main-content h4,
body.a11y-dark #main-content p,
body.a11y-dark #main-content li,
body.a11y-dark #main-content label,
body.a11y-dark #main-content small,
body.a11y-dark #main-content figcaption {
  color: #eeeeee;
}

body.a11y-dark #main-content a,
body.a11y-dark #site-header a,
body.a11y-dark #site-footer a {
  color: #8ecbff;
}

body.a11y-dark #main-content input,
body.a11y-dark #main-content textarea,
body.a11y-dark #main-content select {
  background: #242424;
  color: #ffffff;
  border: 1px solid #777777;
}

body.a11y-dark #main-content button {
  color: #ffffff;
}

/* =====================================================
   HIGH CONTRAST
   Black background, white text, yellow links.
   ===================================================== */

body.a11y-contrast {
  background: #000000;
  color: #ffffff;
}

body.a11y-contrast #site-header,
body.a11y-contrast #main-content,
body.a11y-contrast #site-footer {
  background: #000000 !important;
  color: #ffffff !important;
}

body.a11y-contrast #main-content .hero,
body.a11y-contrast #main-content .section,
body.a11y-contrast #main-content .page-hero,
body.a11y-contrast #main-content .card,
body.a11y-contrast #main-content .faq-item,
body.a11y-contrast #main-content .latest-content-section,
body.a11y-contrast #main-content .profile-tabs-section,
body.a11y-contrast #main-content .profile-tab-content {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.a11y-contrast #main-content h1,
body.a11y-contrast #main-content h2,
body.a11y-contrast #main-content h3,
body.a11y-contrast #main-content h4,
body.a11y-contrast #main-content p,
body.a11y-contrast #main-content li,
body.a11y-contrast #main-content label,
body.a11y-contrast #main-content small,
body.a11y-contrast #main-content strong,
body.a11y-contrast #main-content figcaption,
body.a11y-contrast #site-header a,
body.a11y-contrast #site-footer {
  color: #ffffff !important;
}

body.a11y-contrast #main-content a,
body.a11y-contrast #site-footer a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.a11y-contrast #main-content button,
body.a11y-contrast #main-content input,
body.a11y-contrast #main-content textarea,
body.a11y-contrast #main-content select {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
}

body.a11y-contrast #main-content img {
  border: 1px solid #ffffff;
}

/* =====================================================
   NEGATIVE CONTRAST
   Dark background, bright yellow text.
   ===================================================== */

body.a11y-negative {
  background: #111111;
  color: #ffff00;
}

body.a11y-negative #site-header,
body.a11y-negative #main-content,
body.a11y-negative #site-footer {
  background: #111111 !important;
  color: #ffff00 !important;
}

body.a11y-negative #main-content .hero,
body.a11y-negative #main-content .section,
body.a11y-negative #main-content .page-hero,
body.a11y-negative #main-content .card,
body.a11y-negative #main-content .faq-item,
body.a11y-negative #main-content .latest-content-section,
body.a11y-negative #main-content .profile-tabs-section,
body.a11y-negative #main-content .profile-tab-content {
  background: #111111 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

body.a11y-negative #main-content h1,
body.a11y-negative #main-content h2,
body.a11y-negative #main-content h3,
body.a11y-negative #main-content h4,
body.a11y-negative #main-content p,
body.a11y-negative #main-content li,
body.a11y-negative #main-content label,
body.a11y-negative #main-content small,
body.a11y-negative #main-content strong,
body.a11y-negative #main-content figcaption {
  color: #ffff00 !important;
}

body.a11y-negative #main-content a,
body.a11y-negative #site-footer a {
  color: #00ffff !important;
  text-decoration: underline !important;
}

body.a11y-negative #main-content button,
body.a11y-negative #main-content input,
body.a11y-negative #main-content textarea,
body.a11y-negative #main-content select {
  background: #111111 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
}

/* =====================================================
   LIGHT BACKGROUND
   ===================================================== */

body.a11y-light {
  background: #ffffff;
  color: #111111;
}

body.a11y-light #site-header,
body.a11y-light #main-content,
body.a11y-light #site-footer {
  background: #ffffff !important;
  color: #111111 !important;
}

body.a11y-light #main-content .hero,
body.a11y-light #main-content .section,
body.a11y-light #main-content .page-hero,
body.a11y-light #main-content .card,
body.a11y-light #main-content .latest-content-section,
body.a11y-light #main-content .profile-tabs-section,
body.a11y-light #main-content .profile-tab-content {
  background: #ffffff !important;
  color: #111111 !important;
}

body.a11y-light #main-content h1,
body.a11y-light #main-content h2,
body.a11y-light #main-content h3,
body.a11y-light #main-content h4,
body.a11y-light #main-content p,
body.a11y-light #main-content li,
body.a11y-light #main-content label,
body.a11y-light #main-content small {
  color: #111111 !important;
}

body.a11y-light #main-content a,
body.a11y-light #site-footer a {
  color: #003c80 !important;
}

/* =====================================================
   LINK UNDERLINE
   ===================================================== */

body.a11y-underline #main-content a,
body.a11y-underline #site-header a,
body.a11y-underline #site-footer a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* =====================================================
   READABLE FONT
   ===================================================== */

body.a11y-readable,
body.a11y-readable #main-content,
body.a11y-readable #main-content * {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  #accessibility-widget *,
  #accessibility-widget *::before,
  #accessibility-widget *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================
   DARK THEME: HEADER TEXT AND BACKGROUND FIX
   ===================================================== */

body.a11y-dark #site-header,
body.a11y-dark #site-header .topbar,
body.a11y-dark #site-header .site-header {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
  border-color: #444444 !important;
}

/* Topbar text */

body.a11y-dark #site-header .topbar-note,
body.a11y-dark #site-header .topbar-inner,
body.a11y-dark #site-header .social-links a {
  color: #e5e5e5 !important;
  opacity: 1 !important;
}

/* Brand name and subtitle */

body.a11y-dark #site-header .brand-text,
body.a11y-dark #site-header .brand-text strong,
body.a11y-dark #site-header .brand-text small {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Navigation links */

body.a11y-dark #site-header .primary-navigation a {
  color: #eeeeee !important;
  opacity: 1 !important;
}

/* Active navigation item */

body.a11y-dark #site-header .primary-navigation a.is-active {
  background-color: #303030 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* Contact navigation button */

body.a11y-dark #site-header .primary-navigation .nav-contact {
  background-color: #242424 !important;
  color: #ffffff !important;
  border-color: #777777 !important;
}

/* Mobile navigation button */

body.a11y-dark #site-header .menu-toggle {
  background-color: #242424 !important;
  color: #ffffff !important;
  border-color: #777777 !important;
}

/* Keyboard focus */

body.a11y-dark #site-header a:focus-visible,
body.a11y-dark #site-header button:focus-visible {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 3px;
}

/* =====================================================
   DARK THEME: FOOTER
   ===================================================== */

body.a11y-dark #site-footer,
body.a11y-dark #site-footer .site-footer {
  background-color: #121212 !important;
  color: #eeeeee !important;
  border-color: #444444 !important;
}

/* Footer headings and text */

body.a11y-dark #site-footer .footer-heading,
body.a11y-dark #site-footer .footer-about p,
body.a11y-dark #site-footer .footer-bottom,
body.a11y-dark #site-footer .footer-bottom span {
  color: #e5e5e5 !important;
  opacity: 1 !important;
}

/* Footer brand */

body.a11y-dark #site-footer .footer-brand {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Footer links */

body.a11y-dark #site-footer .footer-links a,
body.a11y-dark #site-footer .footer-heading a {
  color: #8ecbff !important;
  opacity: 1 !important;
}

body.a11y-dark #site-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Footer separators */

body.a11y-dark #site-footer .footer-bottom {
  border-color: #444444 !important;
}

/* =====================================================
   HIGH CONTRAST: FOOTER
   ===================================================== */

body.a11y-contrast #site-footer,
body.a11y-contrast #site-footer .site-footer {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Footer headings and general text */

body.a11y-contrast #site-footer .footer-heading,
body.a11y-contrast #site-footer .footer-about p,
body.a11y-contrast #site-footer .footer-bottom,
body.a11y-contrast #site-footer .footer-bottom span {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Footer brand */

body.a11y-contrast #site-footer .footer-brand {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Footer links */

body.a11y-contrast #site-footer .footer-links a,
body.a11y-contrast #site-footer .footer-heading a {
  color: #ffff00 !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}

body.a11y-contrast #site-footer a:hover {
  color: #ffffff !important;
  background-color: #333333 !important;
}

/* Footer separators */

body.a11y-contrast #site-footer .footer-bottom {
  border-color: #ffffff !important;
}

/* =====================================================
   HIGH CONTRAST: HEADER
   Black background, white text, yellow links
   ===================================================== */

/* Header backgrounds */

body.a11y-contrast #site-header,
body.a11y-contrast #site-header .topbar,
body.a11y-contrast #site-header .site-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Topbar text */

body.a11y-contrast #site-header .topbar-note,
body.a11y-contrast #site-header .topbar-inner {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Social media links */

body.a11y-contrast #site-header .social-links a {
  color: #ffff00 !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}

/* Brand name and subtitle */

body.a11y-contrast #site-header .brand-text,
body.a11y-contrast #site-header .brand-text strong,
body.a11y-contrast #site-header .brand-text small {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Navigation links */

body.a11y-contrast #site-header .primary-navigation a {
  color: #ffff00 !important;
  opacity: 1 !important;
  text-decoration: underline !important;
}

/* Active navigation item */

body.a11y-contrast #site-header .primary-navigation a.is-active {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Contact button */

body.a11y-contrast #site-header .primary-navigation .nav-contact {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
}

/* Navigation hover */

body.a11y-contrast #site-header .primary-navigation a:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Mobile navigation button */

body.a11y-contrast #site-header .menu-toggle {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
}

/* Keyboard focus */

body.a11y-contrast #site-header a:focus-visible,
body.a11y-contrast #site-header button:focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px;
}



/* =====================================================
   TEXT-TO-SPEECH AND DICTIONARY
   ===================================================== */

.accessibility-feature {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #dddddd;
}

.accessibility-feature h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #173b63;
}

.accessibility-feature p {
  font-size: 12px;
  line-height: 1.5;
}

.speech-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.speech-controls button,
#a11y-lookup-word {
  padding: 9px;
  background: #f2f5f8;
  color: #263238;
  border: 1px solid #dce2e8;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.speech-controls button:hover,
#a11y-lookup-word:hover {
  background: #e0f2f1;
  border-color: #008c86;
}

#a11y-speech-status {
  margin: 9px 0 0;
  color: #555555;
  font-size: 12px;
}

.dictionary-result {
  margin-top: 12px;
  padding: 12px;
  background: #f5f7f9;
  color: #222222;
  border: 1px solid #dce2e8;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.dictionary-result[hidden] {
  display: none !important;
}

.dictionary-result h4 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #173b63;
}

.dictionary-result p {
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.5;
}

.dictionary-result strong {
  display: block;
  margin-top: 10px;
  color: #008c86;
  font-size: 13px;
}

.dictionary-example {
  font-style: italic;
  color: #555555;
}

/* Dark Theme */

body.a11y-dark .accessibility-feature {
  border-color: #555555;
}

body.a11y-dark .accessibility-feature h3,
body.a11y-dark #a11y-speech-status {
  color: #eeeeee;
}

body.a11y-dark .speech-controls button,
body.a11y-dark #a11y-lookup-word,
body.a11y-dark .dictionary-result {
  background: #242424;
  color: #eeeeee;
  border-color: #666666;
}

body.a11y-dark .dictionary-result h4 {
  color: #ffffff;
}

body.a11y-dark .dictionary-result strong {
  color: #65d6cb;
}

body.a11y-dark .dictionary-example {
  color: #cccccc;
}

/* High Contrast */

body.a11y-contrast .accessibility-feature {
  border-color: #ffffff;
}

body.a11y-contrast .accessibility-feature h3,
body.a11y-contrast #a11y-speech-status,
body.a11y-contrast .accessibility-feature p {
  color: #ffffff !important;
}

body.a11y-contrast .speech-controls button,
body.a11y-contrast #a11y-lookup-word,
body.a11y-contrast .dictionary-result {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

body.a11y-contrast .dictionary-result h4,
body.a11y-contrast .dictionary-result strong {
  color: #ffff00 !important;
}

body.a11y-contrast .dictionary-example {
  color: #ffffff !important;
}

/* Negative Contrast */

body.a11y-negative .accessibility-feature h3,
body.a11y-negative #a11y-speech-status,
body.a11y-negative .accessibility-feature p {
  color: #ffff00 !important;
}

body.a11y-negative .speech-controls button,
body.a11y-negative #a11y-lookup-word,
body.a11y-negative .dictionary-result {
  background: #111111 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
}

body.a11y-negative .dictionary-result h4,
body.a11y-negative .dictionary-result strong {
  color: #00ffff !important;
}



/* -----------------------------------------
   ACCESSIBILITY RESET BUTTON
----------------------------------------- */
/* =====================================================
   ACCESSIBILITY RESET BUTTON
   ===================================================== */

#accessibility-panel .accessibility-reset {
  display: block;
  flex: 0 0 auto;

  width: 100%;
  min-height: 46px;

  margin: 20px 0 5px;
  padding: 12px;

  background: #173b63;
  color: #ffffff;

  border: 2px solid #173b63;
  border-radius: 5px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  visibility: visible;
  opacity: 1;
}

#accessibility-panel .accessibility-reset:hover {
  background: #0e2945;
  color: #ffffff;
}

#accessibility-panel .accessibility-reset:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

/* Dark theme */
body.a11y-dark #accessibility-panel .accessibility-reset {
  background: #eeeeee;
  color: #111111;
  border-color: #eeeeee;
}

/* High contrast */
body.a11y-contrast #accessibility-panel .accessibility-reset {
  background: #000000;
  color: #ffff00;
  border-color: #ffffff;
}

/* Negative contrast */
body.a11y-negative #accessibility-panel .accessibility-reset {
  background: #111111;
  color: #ffff00;
  border-color: #ffff00;
}