/* ============================================================================
   Accessibility panel ("Спеціальні можливості") — vision settings applied as
   classes on <html>. States are persisted in localStorage and re-applied by an
   inline snippet in <head> BEFORE first paint (no flash), then managed by the
   a11y island. Deliberately plain CSS (independent of the Tailwind build).

   Scheme classes (mutually exclusive):
     filters:  a11y-sepia | a11y-invert | a11y-gray
     contrast: a11y-contrast + one of a11y-c-{bw,by,buy,gw,wb,yb,ybu,wg}
   Font size: a11y-fs-2 | a11y-fs-3 | a11y-fs-4  (default 16px = step 1)
   Extras:    a11y-plainfont | a11y-links | a11y-still | a11y-noimg
   ========================================================================== */

/* ---- filter schemes (whole page, media restored where needed) ---- */
html.a11y-sepia  body { filter: sepia(.85); }
html.a11y-gray   body { filter: grayscale(1); }
html.a11y-invert body { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert body img,
html.a11y-invert body video,
html.a11y-invert body iframe { filter: invert(1) hue-rotate(180deg); }

/* ---- contrast schemes: two-colour flattening for low vision ---- */
html.a11y-contrast { --a11y-bg: #ffffff; --a11y-fg: #000000; }
html.a11y-c-bw  { --a11y-bg: #ffffff; --a11y-fg: #000000; } /* чорне на білому  */
html.a11y-c-by  { --a11y-bg: #ffe986; --a11y-fg: #000000; } /* чорне на жовтому */
html.a11y-c-buy { --a11y-bg: #ffe986; --a11y-fg: #063a8f; } /* синє на жовтому  */
html.a11y-c-gw  { --a11y-bg: #ffffff; --a11y-fg: #14522c; } /* зелене на білому */
html.a11y-c-wb  { --a11y-bg: #000000; --a11y-fg: #ffffff; } /* біле на чорному  */
html.a11y-c-yb  { --a11y-bg: #000000; --a11y-fg: #ffe986; } /* жовте на чорному */
html.a11y-c-ybu { --a11y-bg: #0b2a63; --a11y-fg: #ffe986; } /* жовте на синьому */
html.a11y-c-wg  { --a11y-bg: #14522c; --a11y-fg: #ffffff; } /* біле на зеленому */

html.a11y-contrast body,
html.a11y-contrast body * {
  background-color: var(--a11y-bg) !important;
  background-image: none !important;
  color: var(--a11y-fg) !important;
  border-color: var(--a11y-fg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline-color: var(--a11y-fg) !important;
}
html.a11y-contrast body a { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-contrast body ::placeholder { color: var(--a11y-fg) !important; opacity: .65; }
html.a11y-contrast body img,
html.a11y-contrast body video,
html.a11y-contrast body iframe {
  background-color: transparent !important;
  filter: grayscale(1) contrast(1.1);
}
/* decorative hero backdrops fight the forced text colour — drop them */
html.a11y-contrast body [data-parallax],
html.a11y-contrast body .kmb-kenburns { display: none !important; }

/* ---- font sizes (Tailwind sizes are rem-based, so the root does the work) ---- */
html.a11y-fs-2 { font-size: 18px; }
html.a11y-fs-3 { font-size: 20px; }
html.a11y-fs-4 { font-size: 22px; }

/* ---- extras ---- */
html.a11y-plainfont body,
html.a11y-plainfont body * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: 0 !important; }
html.a11y-links body a { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-still body *,
html.a11y-still body *::before,
html.a11y-still body *::after { animation: none !important; transition: none !important; }
html.a11y-still body [data-parallax],
html.a11y-still body [data-kinetic],
html.a11y-still body [data-magnetic] { transform: none !important; }
html.a11y-noimg body img,
html.a11y-noimg body video,
html.a11y-noimg body iframe { visibility: hidden !important; }

/* ============================== panel UI ================================= */
.a11y-root { position: relative; }
.a11y-btn { position: relative; }
.a11y-btn[aria-expanded="true"] { color: #ed1c24; }
/* active-settings dot on the eye */
.a11y-btn.is-active::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #ed1c24;
}

.a11y-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  width: 340px; max-width: calc(100vw - 24px);
  background: #fff; color: #240708;
  border: 1px solid #e7ddd5; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(36, 7, 8, .16);
  padding: 18px;
  max-height: min(78vh, 640px); overflow-y: auto;
}
html:not(.js) .a11y-root { display: none; } /* the panel is JS-driven */

.a11y-panel h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3;
}
.a11y-panel .a11y-sub {
  margin: 0 0 14px; font-size: 12px; color: #8a7a72; line-height: 1.45;
}
.a11y-panel fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.a11y-panel legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8a7a72; padding: 0; margin-bottom: 8px;
}

/* scheme swatches */
.a11y-schemes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.a11y-swatch {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; padding: 6px 2px;
  border: 1.5px solid #e7ddd5; border-radius: 9px; cursor: pointer;
  background: var(--sw-bg, #fff); color: var(--sw-fg, #240708);
  font-family: inherit;
}
.a11y-swatch .sw-aa { font-size: 15px; font-weight: 700; line-height: 1; }
.a11y-swatch .sw-label { font-size: 8.5px; line-height: 1.15; text-align: center; opacity: .85; }
.a11y-swatch[aria-pressed="true"] { border-color: #ed1c24; box-shadow: 0 0 0 2px rgba(237, 28, 36, .25); }
.a11y-swatch:focus-visible { outline: 2px solid #ed1c24; outline-offset: 2px; }

/* font-size steps */
.a11y-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.a11y-size {
  display: flex; align-items: flex-end; justify-content: center; min-height: 46px;
  border: 1.5px solid #e7ddd5; border-radius: 9px; background: #fff; color: #240708;
  cursor: pointer; padding: 6px 4px 8px; font-weight: 700; line-height: 1;
}
.a11y-size[data-fs="1"] { font-size: 14px; }
.a11y-size[data-fs="2"] { font-size: 17px; }
.a11y-size[data-fs="3"] { font-size: 20px; }
.a11y-size[data-fs="4"] { font-size: 24px; }
.a11y-size[aria-pressed="true"] { border-color: #ed1c24; box-shadow: 0 0 0 2px rgba(237, 28, 36, .25); }
.a11y-size:focus-visible { outline: 2px solid #ed1c24; outline-offset: 2px; }

/* extra toggles */
.a11y-toggles { display: flex; flex-direction: column; gap: 8px; }
.a11y-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.a11y-toggle input { width: 17px; height: 17px; accent-color: #ed1c24; flex: none; }

/* footer */
.a11y-reset {
  width: 100%; margin-top: 2px; padding: 10px 14px;
  border: 1.5px solid #e7ddd5; border-radius: 9px; background: #f1e9e2; color: #240708;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.a11y-reset:hover { border-color: #ed1c24; color: #ed1c24; }
.a11y-reset:focus-visible { outline: 2px solid #ed1c24; outline-offset: 2px; }

@media (max-width: 480px) {
  .a11y-panel { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; }
}