/*! Meliora Accessibility — https://github.com/melioradev/meliora-accessibility
    Made by Meliora Novotech Ltd — MIT with visible attribution, see LICENSE. */
/* The button, the panel, and the preference classes set on <html>.
   Colors follow your site's CSS custom properties when they exist (--ink, --surface, --line, --button, --focus…),
   with built-in light defaults otherwise. */

/* Text for screen readers only (kept inside the panel's own class so it never depends on the host site's CSS) */
.a11y-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- floating button ---------- */
/* Default: bottom-right. Once dragged, panel.js sets left/top and adds .a11y-moved. */
.a11y-fab { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; }
.a11y-fab.a11y-moved { right: auto; bottom: auto; }
.a11y-fab[hidden] { display: none; }
.a11y-trigger {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--button, #2557b4); color: #fff;
  box-shadow: 0 .4rem 1rem -.2rem rgb(17 19 58 / .45);
  touch-action: none; cursor: grab;
}
.a11y-dragging .a11y-trigger { cursor: grabbing; }
.a11y-trigger svg { width: 1.5rem; height: 1.5rem; }
.a11y-trigger:hover { background: var(--button-hover, #1c4592); }
.a11y-trigger:focus-visible, .a11y-hide:focus-visible { outline: 3px solid var(--ink, #15173f); outline-offset: 3px; }
.a11y-hide {
  position: absolute; top: -.55rem; right: -.55rem;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 1.5px solid var(--ink, #15173f); border-radius: 50%;
  background: var(--surface, #fff); color: var(--ink, #15173f);
}
.a11y-hide svg { width: .85rem; height: .85rem; }
.a11y-hide:hover { background: var(--tint, #eaf1fb); }

/* ---------- panel ---------- */
dialog.a11y-panel {
  position: fixed; margin: 0; padding: 0; inset: auto;
  bottom: 1rem; width: min(25rem, 100vw - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--field-border, #8d95ad); border-radius: 1rem;
  background: var(--surface, #fff); color: var(--ink, #15173f);
  box-shadow: none;
  font-size: 1rem; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility;
}
dialog.a11y-panel { right: 1rem; left: auto; }            /* same side as the button */
dialog.a11y-panel.a11y-left { left: 1rem; right: auto; }
dialog.a11y-panel::backdrop { background: transparent; }  /* no dimming / shadow behind the panel */
@media (max-width: 30em) {
  html dialog.a11y-panel, html dialog.a11y-panel.a11y-left { left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; border-radius: 1rem 1rem 0 0; }
}
.a11y-panel > div { padding: 0 1.25rem 1.25rem; }
.a11y-panel svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.a11y-panel :focus-visible { outline: 2px solid var(--focus, #2557b4); outline-offset: 2px; }

.a11y-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 -1.25rem .75rem; padding: .9rem 1rem .9rem 1.25rem; background: var(--surface, #fff); border-bottom: 1px solid var(--line, #d8dfeb);
}
.a11y-head h2 { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.a11y-close {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit;
}
.a11y-close:hover { background: var(--tint, #eaf1fb); }

.a11y-lang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .5rem .9rem; }
.a11y-lang label { font-weight: 500; font-size: 1rem; }
.a11y-lang select { min-height: 2.5rem; padding: .35rem .6rem; font-size: 1rem; border: 1px solid var(--field-border, #8d95ad); border-radius: .4rem; background: var(--surface, #fff); max-width: 60%; }

/* Option rows: icon · label · switch · key */
.a11y-list { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--line, #d8dfeb); }
.a11y-row, .a11y-size {
  display: grid; grid-template-columns: 1.25rem 1fr auto 1.6rem; align-items: center; gap: 1rem;
  width: 100%; min-height: 3.25rem; padding: .5rem .5rem; margin: 0;
  border: 0; border-radius: .5rem; background: none; color: var(--ink, #15173f);
  font: inherit; text-align: start;
}
.a11y-row { cursor: pointer; }
.a11y-row:hover { background: var(--tint, #eaf1fb); }
.a11y-row > svg, .a11y-size > svg { color: var(--muted, #4a4f68); }
.a11y-label { font-weight: 500; font-size: 1rem; color: var(--ink, #15173f); }
.a11y-kbd {
  justify-self: end; min-width: 1.6rem; padding: .05rem .35rem; border: 1px solid var(--field-border, #8d95ad); border-radius: .3rem;
  font: 500 .8125rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-soft, #2a2d5c); text-align: center;
}
/* Switch: the knob position (not only its color) shows the state. */
.a11y-switch { position: relative; width: 2.1rem; height: 1.2rem; border-radius: 1rem; background: var(--line, #d8dfeb); border: 1px solid var(--field-border, #8d95ad); }
.a11y-switch::after { content: ""; position: absolute; top: 50%; left: .15rem; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%; background: var(--muted, #4a4f68); transition: left .15s; }
[aria-pressed="true"] .a11y-switch { background: var(--button, #2557b4); border-color: var(--button, #2557b4); }
[aria-pressed="true"] .a11y-switch::after { left: calc(100% - .95rem); background: #fff; }
.a11y-panel[dir="rtl"] .a11y-switch { transform: scaleX(-1); }
.a11y-note { font-size: .875rem; color: var(--muted, #4a4f68); }
.a11y-row[aria-disabled="true"] { cursor: not-allowed; }
.a11y-row[aria-disabled="true"] .a11y-label { color: var(--muted, #4a4f68); }
.a11y-chevron { display: grid; color: var(--muted, #4a4f68); transition: transform .15s; }
[aria-expanded="true"] .a11y-chevron { transform: rotate(180deg); }

/* Text size: − 100% + */
.a11y-size { grid-template-columns: 1.25rem 1fr auto; }
.a11y-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.a11y-stepper button {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--field-border, #8d95ad); border-radius: 50%; background: var(--surface, #fff); color: var(--ink, #15173f);
}
.a11y-stepper button:hover { background: var(--tint, #eaf1fb); }
.a11y-stepper button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.a11y-stepper svg { width: 1rem; height: 1rem; }
.a11y-size-value { min-width: 3.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.a11y-outline { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 2.4rem; display: grid; }
.a11y-panel[dir="rtl"] .a11y-outline { padding: 0 2.4rem 0 0; }
.a11y-outline[hidden] { display: none; }
.a11y-outline a { display: block; padding: .45rem .5rem; border-radius: .4rem; color: var(--brand, #2557b4); font-size: .9375rem; text-decoration: none; }
.a11y-outline a:hover { background: var(--tint, #eaf1fb); text-decoration: underline; }
.a11y-outline .lvl-0 a { color: var(--ink, #15173f); font-weight: 650; }
.a11y-outline .lvl-2 a { padding-inline-start: 1rem; }
.a11y-outline .lvl-3 a { padding-inline-start: 1.75rem; }

.a11y-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1rem 0 .5rem; }
.a11y-action {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem .75rem;
  border: 1px solid var(--line, #d8dfeb); border-radius: .5rem; background: var(--surface, #fff); color: var(--ink, #15173f);
  font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; text-align: center;
}
.a11y-action:hover { background: var(--tint, #eaf1fb); color: var(--ink, #15173f); }
.a11y-action .a11y-kbd { margin-inline-start: .15rem; }

.a11y-help { margin-top: .5rem; font-size: .9375rem; color: var(--ink-soft, #2a2d5c); }
.a11y-help summary { cursor: pointer; padding: .6rem .5rem; font-weight: 500; color: var(--ink, #15173f); border-radius: .4rem; }
.a11y-help ul { margin: .25rem 0 .75rem; padding-inline-start: 1.5rem; display: grid; gap: .5rem; line-height: 1.55; }
.a11y-check { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .25rem; color: var(--ink, #15173f); }
.a11y-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--button, #2557b4); }

/* Confirmation shown when an option is changed with the panel closed */
.a11y-toast {
  position: fixed; z-index: 61; right: 1rem; bottom: 4.5rem; max-width: min(20rem, 100vw - 2rem); margin: 0;
  padding: .5rem .85rem; border-radius: .5rem; background: #15173f; color: #fff; border: 1px solid var(--line, #d8dfeb);
  font-size: .9375rem; font-weight: 600; opacity: 0; transform: translateY(.25rem); transition: opacity .15s, transform .15s; pointer-events: none;
}
.a11y-toast.show { opacity: 1; transform: none; }
.a11y-toast:empty { display: none; }

/* ================= preference classes on <html> ================= */

/* 1 — Highlight focus: a much stronger ring than the default 3px outline, shown on every focus
   (mouse clicks too, not only keyboard), so it is obvious where you are on the page. */
html.a11y-focus :focus, html.a11y-focus :focus-visible {
  outline: 5px solid var(--ink) !important; outline-offset: 4px !important;
}
/* …and marks the word under the mouse like a highlighter pen (set by panel.js). Dark text on pale yellow: 14:1. */
::highlight(a11y-word) { background-color: #ffe98a; color: #15173f; }
/* Headings and regions that only receive focus programmatically (skip link, page outline) get it too. */
html.a11y-focus [tabindex="-1"]:focus { outline-style: solid !important; }

/* 3 — High contrast (≥ 7:1, gradients and background images removed) */
html.a11y-contrast {
  --ink: #000; --ink-soft: #000; --muted: #1a1a1a; --brand: #0a2a8f; --brand-strong: #000;
  --paper: #fff; --surface: #fff; --tint: #fff; --line: #000; --focus: #000;
  --night: #000; --night-ink: #fff; --night-muted: #fff; --night-line: #fff;
  --error: #9b0000; --ok: #004d1f;
  --gradient: linear-gradient(#0a2a8f, #0a2a8f);
  --button: #0a2a8f; --button-hover: #000; --field-border: #000; --card-hover-border: #000; --ring: #000;
  color-scheme: light;
}
/* High contrast is always black on white, whichever theme the site uses. Sites can add their own
   html.a11y-contrast rules for anything that needs more (gradients, image backgrounds…). */
html.a11y-contrast body { background: #fff !important; color: #000 !important; }
html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { border: 2px solid #000 !important; background: #fff; color: #000; }
html.a11y-contrast *, html.a11y-contrast *::before, html.a11y-contrast *::after { text-shadow: none !important; box-shadow: none !important; }
html.a11y-contrast .a11y-trigger { background: #000; border-color: #fff; outline: 2px solid #000; }
html.a11y-contrast .a11y-hide { border: 2px solid #000; }
html.a11y-contrast dialog.a11y-panel, html.a11y-contrast .a11y-list, html.a11y-contrast .a11y-action, html.a11y-contrast .a11y-kbd { border-color: #000; }
html.a11y-contrast .a11y-switch { border: 2px solid #000; background: #fff; }
html.a11y-contrast .a11y-switch::after { background: #000; }
html.a11y-contrast [aria-pressed="true"] .a11y-switch { background: #000; }
html.a11y-contrast [aria-pressed="true"] .a11y-switch::after { background: #fff; }
html.a11y-contrast .a11y-toast { background: #000; border: 2px solid #fff; }

/* 4 — Stop animations */
html.a11y-motion-off { scroll-behavior: auto !important; }
html.a11y-motion-off *, html.a11y-motion-off *::before, html.a11y-motion-off *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* 5 — Highlight links & fields: underline every link, give form fields a stronger border */
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; }
html.a11y-links input:not([type="checkbox"]):not([type="radio"]), html.a11y-links select, html.a11y-links textarea { border: 2px solid currentColor !important; }

/* Credit (required by the license) */
.a11y-credit { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line, #d8dfeb); font-size: .8125rem; color: var(--muted, #4a4f68); text-align: center; }
.a11y-credit a { color: var(--brand, #2557b4); text-decoration: underline; text-underline-offset: .15em; }
.a11y-actions-single { grid-template-columns: 1fr; }