/* Accessibility widget core styles and overrides */
:root {
  --a11y-font-scale: 1;
  --a11y-line-height: 1;
  --a11y-letter-spacing: 0px;
  --a11y-font-family: '';
  --a11y-saturation: 100%;
}

body:not(.a11y-active) {
  --a11y-font-scale: 1;
  --a11y-line-height: 1;
  --a11y-letter-spacing: 0px;
  --a11y-font-family: '';
}

html.a11y-font-active {
  font-size: calc(100% * var(--a11y-font-scale)) !important;
}

body.a11y-font-active {
  zoom: var(--a11y-font-scale);
}

body.a11y-line-active * {
  line-height: calc(1em * var(--a11y-line-height)) !important;
}

body.a11y-letter-active * {
  letter-spacing: var(--a11y-letter-spacing) !important;
}

body.a11y-font-active .a11y-widget__open-button,
body.a11y-font-active .a11y-widget__panel {
  zoom: 1 !important;
}

body.a11y-line-active h1,
body.a11y-line-active h2,
body.a11y-line-active h3,
body.a11y-line-active h4,
body.a11y-line-active h5,
body.a11y-line-active h6,
body.a11y-line-active p,
body.a11y-line-active span,
body.a11y-line-active a,
body.a11y-line-active li,
body.a11y-line-active div {
  line-height: calc(1em * var(--a11y-line-height)) !important;
}

body.a11y-font-family-active *:not(code):not(pre):not([class*="accessibility-widget"]):not(.a11y-widget__panel *) {
  font-family: var(--a11y-font-family) !important;
}

body.a11y-font-family-active [class*="font-spacegrotesk"],
body.a11y-font-family-active [class*="font-instrument"],
body.a11y-font-family-active [class*="font-beatricetrial"],
body.a11y-font-family-active [class*="font-teko"],
body.a11y-font-family-active [class*="font-khand"],
body.a11y-font-family-active [class*="font-plusjakartasans"],
body.a11y-font-family-active [class*="font-primary"] {
  font-family: var(--a11y-font-family) !important;
}

.a11y-high-contrast {
  filter: contrast(150%);
}

.a11y-higher-contrast {
  filter: contrast(200%);
}

html {
  filter: saturate(var(--a11y-saturation));
}

.a11y-invert {
  filter: invert(1) hue-rotate(180deg) saturate(var(--a11y-saturation));
}

.a11y-invert img,
.a11y-invert video,
.a11y-invert [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

.a11y-grayscale {
  filter: grayscale(100%) saturate(var(--a11y-saturation));
}

.a11y-no-animations,
.a11y-no-animations *,
.a11y-no-animations *::before,
.a11y-no-animations *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

.a11y-no-animations * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.a11y-no-animations video,
.a11y-no-animations img[src$=".gif"] {
  animation: none !important;
}

.a11y-no-animations [data-gsap],
.a11y-no-animations [class*="gsap"] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.a11y-highlight-links a {
  background-color: #ffef6d !important;
  color: #000 !important;
  text-decoration: underline !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

.a11y-highlight-links a:hover {
  background-color: #facc15 !important;
}

.a11y-highlight-headings h1,
.a11y-highlight-headings h2,
.a11y-highlight-headings h3,
.a11y-highlight-headings h4,
.a11y-highlight-headings h5,
.a11y-highlight-headings h6 {
  background-color: #e0f2fe !important;
  padding: 8px 12px !important;
  border-left: 4px solid #0284c7 !important;
  margin: 12px 0 !important;
  border-radius: 4px !important;
}

.a11y-text-spacing * {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.8 !important;
}

.a11y-text-spacing p {
  margin-bottom: 2em !important;
}

.a11y-hide-images img,
.a11y-hide-images video,
.a11y-hide-images [style*="background-image"],
.a11y-hide-images picture,
.a11y-hide-images svg {
  opacity: 0.1 !important;
  filter: grayscale(100%) !important;
}

.a11y-enabled *:focus {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 3px !important;
}

html[style*="cursor"] button,
html[style*="cursor"] a,
html[style*="cursor"] input,
html[style*="cursor"] select,
html[style*="cursor"] textarea {
  cursor: inherit !important;
}

html.a11y-cursor-large,
html.a11y-cursor-large *,
html.a11y-cursor-extra-large,
html.a11y-cursor-extra-large * {
  cursor: var(--a11y-cursor-value, auto) !important;
}

html.a11y-cursor-large {
  --a11y-cursor-value: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32"%3E%3Cpath d="M2 2 L2 28 L12 22 L16 30 L20 28 L16 20 L24 20 Z" fill="black" stroke="white" stroke-width="2"/%3E%3C/svg%3E') 2 2, auto;
}

html.a11y-cursor-extra-large {
  --a11y-cursor-value: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48"%3E%3Cpath d="M2 2 L2 42 L18 33 L24 45 L30 42 L24 30 L36 30 Z" fill="black" stroke="white" stroke-width="3"/%3E%3C/svg%3E') 2 2, auto;
}

.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media print {
  .a11y-highlight-links a {
    background-color: transparent !important;
    color: inherit !important;
  }

  .a11y-highlight-headings h1,
  .a11y-highlight-headings h2,
  .a11y-highlight-headings h3,
  .a11y-highlight-headings h4,
  .a11y-highlight-headings h5,
  .a11y-highlight-headings h6 {
    background-color: transparent !important;
    border: none !important;
  }
}

button[aria-label="Open accessibility settings"],
.a11y-widget__panel {
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* Accessibility widget interface */
#a11y-widget {
  position: static;
}

.a11y-widget__open-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  background-color: #2563eb;
  border: none;
  border-radius: 999px;
  padding: 14px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.a11y-widget__open-button:hover {
  transform: scale(1.08);
  background-color: #1d4ed8;
  box-shadow: 0 16px 32px rgba(29, 78, 216, 0.35);
}

.a11y-widget__open-button:focus-visible {
  outline: 4px solid rgba(59, 130, 246, 0.7);
  outline-offset: 4px;
}

.a11y-widget__open-button .material-icons,
.a11y-widget__open-button .material-icons-outlined {
  font-size: 28px;
  vertical-align: middle;
}

.a11y-widget__modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.a11y-widget__modal.is-open {
  display: flex;
}

.a11y-widget__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.a11y-widget__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.a11y-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.a11y-widget__header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.a11y-widget__header p {
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.a11y-widget__close {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px;
  transition: background-color 0.2s ease;
}

.a11y-widget__close:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.a11y-widget__tabs {
  display: flex;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.a11y-widget__tab {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.a11y-widget__tab .material-icons,
.a11y-widget__tab .material-icons-outlined {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: text-bottom;
}

.a11y-widget__tab.is-active {
  color: #1d4ed8;
  background: #fff;
  border-bottom-color: #2563eb;
}

.a11y-widget__tab:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.5);
  outline-offset: -3px;
}

.a11y-widget__content {
  padding: 24px;
  overflow-y: auto;
}

.a11y-widget__section {
  display: none;
}

.a11y-widget__section.is-active {
  display: block;
}

.a11y-widget__group {
  margin-bottom: 24px;
}

.a11y-widget__group:last-child {
  margin-bottom: 0;
}

.a11y-widget__label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.a11y-widget__label span[data-a11y-display] {
  font-weight: 500;
  color: #1d4ed8;
}

.a11y-widget__option-group {
  display: flex;
  gap: 12px;
}

.a11y-widget__option {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.a11y-widget__option:hover {
  border-color: #d1d5db;
}

.a11y-widget__option.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.a11y-widget__range {
  width: 100%;
  accent-color: #2563eb;
}

.a11y-widget__range + .a11y-widget__range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.a11y-widget__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f9fafb;
  margin-bottom: 12px;
  transition: background-color 0.2s ease;
}

.a11y-widget__toggle:hover {
  background: #f3f4f6;
}

.a11y-widget__toggle label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.a11y-widget__toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #2563eb;
}

.a11y-widget__select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.a11y-widget__select:focus {
  border-color: #2563eb;
  outline: none;
}

.a11y-widget__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.a11y-widget__footer button {
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.a11y-widget__reset {
  border: none;
  background: transparent;
  color: #374151;
}

.a11y-widget__reset:hover {
  color: #111827;
}

.a11y-widget__done {
  border: none;
  background: #2563eb;
  color: #fff;
  transition: background-color 0.2s ease;
}

.a11y-widget__done:hover {
  background: #1d4ed8;
}

@media (max-width: 768px) {
  .a11y-widget__open-button {
    bottom: 16px;
    right: 16px;
  }

  .a11y-widget__panel {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .a11y-widget__modal {
    padding: 0;
  }
}