/* Kenya School of Languages — lightweight accessibility controls. */
:root { --a11y-font-scale: 1; }
html { font-size: calc(100% * var(--a11y-font-scale)); }

/* Keep a clear focus indicator for keyboard users without changing pointer interactions. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #0b5fff !important;
  outline-offset: 3px !important;
}

.a11y-trigger {
  position: fixed;
  z-index: 9992;
  right: 18px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: #0b3b67;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
  cursor: pointer;
}
.a11y-trigger:hover { transform: translateY(-1px); }
.a11y-trigger svg { width: 28px; height: 28px; }
.a11y-trigger[aria-expanded="true"] { background: #b84f22; }

body.a11y-panel-open { overflow: hidden; }
.a11y-panel[hidden] { display: none !important; }
.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(13, 22, 31, .52);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.a11y-panel__dialog {
  width: min(520px, 100%);
  height: 100%;
  background: #f3f5f8;
  color: #111820;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 42px rgba(0,0,0,.22);
}
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  background: #fff;
  border-bottom: 1px solid #dfe4ea;
}
.a11y-panel__title { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; }
.a11y-panel__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 10px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.a11y-panel__close:hover { background: #eef1f4; }
.a11y-panel__body { overflow: auto; padding: 20px 18px 28px; overscroll-behavior: contain; }
.a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a11y-option {
  min-height: 142px;
  border: 2px solid transparent;
  background: #fff;
  color: #111820;
  border-radius: 20px;
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.a11y-option:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.a11y-option.is-active { border-color: #b84f22; box-shadow: inset 0 0 0 1px #b84f22; }
.a11y-option__icon { width: 38px; height: 38px; display: grid; place-items: center; }
.a11y-option__icon svg { width: 36px; height: 36px; }
.a11y-option__value { font-size: .78rem; font-weight: 650; color: #5a6672; min-height: 1em; }
.a11y-panel__footer { margin-top: auto; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dfe4ea; }
.a11y-reset {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 16px 18px;
  background: #1f8f4f;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.a11y-reset:hover { filter: brightness(.96); }
.a11y-live { 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; }

/* User-selected reading modes */
html.a11y-readable-font body,
html.a11y-readable-font button,
html.a11y-readable-font input,
html.a11y-readable-font select,
html.a11y-readable-font textarea { font-family: Verdana, Arial, Helvetica, sans-serif !important; }
html.a11y-text-spacing body { letter-spacing: .06em !important; word-spacing: .12em !important; }
html.a11y-line-height body { line-height: 1.85 !important; }
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height dd,
html.a11y-line-height dt { line-height: 1.85 !important; }
html.a11y-align-start body :where(p, li, dd, dt, blockquote, .section-heading) { text-align: start !important; }
html.a11y-align-center body :where(p, li, dd, dt, blockquote, .section-heading) { text-align: center !important; }
html.a11y-highlight-links body a:not(.button):not(.brand):not(.footer-brand) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; background-image: none !important; }
html.a11y-large-cursor body,
html.a11y-large-cursor body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' stroke='black' stroke-width='2' d='M3 2l20 18-10 1 5 8-4 2-5-8-6 7z'/%3E%3C/svg%3E") 2 2, auto !important; }
html.a11y-hide-images body img:not(.a11y-essential),
html.a11y-hide-images body picture:not(.a11y-essential) { opacity: 0 !important; }
html.a11y-hide-images body :where(.hero, .section, .card, .panel, .experience-card, .branch-experience__visual) { background-image: none !important; }
html.a11y-grayscale body > *:not(.a11y-panel) { filter: grayscale(1) !important; }

html.a11y-high-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-high-contrast body :where(.utility-bar, .site-header, .mobile-nav__panel, main, .section, .section--tint, .card, .panel, .mode-card, .experience-card, .form-card, .contact-card, .site-footer, .intake-banner) {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
html.a11y-high-contrast body :where(a, button, h1, h2, h3, h4, p, li, span, label, dt, dd, strong, small) { color: #fff !important; }
html.a11y-high-contrast body :where(input, select, textarea) { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; }
html.a11y-high-contrast body a { text-decoration: underline !important; }
html.a11y-high-contrast body .button,
html.a11y-high-contrast body button:not(.a11y-trigger):not(.a11y-panel__close) { border: 2px solid #fff !important; background: #000 !important; color: #fff !important; }
html.a11y-high-contrast .a11y-panel__dialog { background: #000 !important; color: #fff !important; }
html.a11y-high-contrast .a11y-option.is-active { border-color: #ffeb3b !important; box-shadow: inset 0 0 0 2px #ffeb3b !important; }
html.a11y-high-contrast .a11y-panel__header,
html.a11y-high-contrast .a11y-panel__footer,
html.a11y-high-contrast .a11y-option { background: #000 !important; color: #fff !important; border-color: #fff !important; }

html.a11y-pause-animations *,
html.a11y-pause-animations *::before,
html.a11y-pause-animations *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html.a11y-pause-animations .reveal-item { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .reveal-item { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 760px) {
  .a11y-trigger { width: 48px; height: 48px; right: 14px; bottom: 82px; }
  .a11y-panel__dialog { width: 100%; }
  .a11y-panel__header { padding: 18px 16px 14px; }
  .a11y-panel__body { padding: 14px; }
  .a11y-grid { gap: 10px; }
  .a11y-option { min-height: 124px; border-radius: 16px; padding: 14px 8px 12px; font-size: .95rem; }
}

@media (max-width: 360px) {
  .a11y-grid { grid-template-columns: 1fr; }
  .a11y-option { min-height: 104px; }
}
