/* =========================================================
   LZ Accessibility – pasek WCAG 2.2 AA
   1. UI paska (na ciemnej belce nagłówka)
   2. Poziomy rozmiaru tekstu
   3. Tryb wysokiego kontrastu (nadpisanie tokenów ACSS)
   ========================================================= */

/* ---------- 1. UI paska ---------- */
.lz-a11y {
  --lz-fg: var(--white, #fff);
  --lz-border: rgba(255, 255, 255, .6);      /* na --primary-ultra-dark ≈ 8:1 */
  --lz-hover: rgba(255, 255, 255, .14);
  --lz-pressed-bg: var(--white, #fff);
  --lz-pressed-fg: var(--primary-ultra-dark, #0f2418);
  --lz-focus: var(--accent, #EBAC40);        /* JSON: bg-dark-focus-color = accent */
  --focus-color: var(--lz-focus);            /* ACSS :focus-visible czyta --focus-color (mocniejsza specyficzność) - WCAG 1.4.11 */
  --lz-radius: var(--radius-s, 8px);
  --lz-bar-bg: var(--primary-ultra-dark, #0f2418); /* tło belki – pod zamieniającymi się skip-linkami */
  --lz-h: 2.5rem;                            /* 40px – cel dotyku */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  inline-size: 100%;
  font-family: var(--text-font-family, Montserrat, sans-serif);
  font-size: 16px;                           /* pasek nie skaluje się z A+/A++ – zawsze mieści się w belce */
  font-weight: 600;
  line-height: 1.25;
  color: var(--lz-fg);
}
.lz-a11y__sr {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* skip-linki – wszystkie trzy w jednym „slocie”; widoczny jest „Przejdź do treści”,
   a po przejściu Tab-em kolejny link ZASTĘPUJE go w tym samym miejscu */
.lz-a11y__skips { display: grid; align-items: center; }
.lz-a11y__skip {
  grid-area: 1 / 1;                          /* ta sama komórka siatki */
  display: inline-flex; align-items: center;
  justify-self: start;
  min-block-size: var(--lz-h);
  padding: 0 .25rem;
  color: var(--lz-fg);
  background: var(--lz-bar-bg);              /* zasłania link pod spodem */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .15em;
  border-radius: var(--lz-radius);
}
.lz-a11y__skip:hover,
.lz-a11y__skip:focus-visible {
  color: var(--lz-focus);                    /* accent na ciemnym ≈ 10:1 (ACSS a:hover dawał action-dark) */
  text-decoration-thickness: 3px;
}
/* ukryte do czasu fokusu – dostępne z klawiatury, nie zaśmiecają projektu */
.lz-a11y__skip--hidden:not(:focus-visible) {
  position: absolute !important;
  inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lz-a11y__skip--hidden:focus-visible { position: relative; z-index: 1; }
/* gdy fokus jest na ukrytym linku, „Przejdź do treści” znika (przeglądarki z :has) */
.lz-a11y__skips:has(.lz-a11y__skip--hidden:focus-visible) .lz-a11y__skip:not(.lz-a11y__skip--hidden) { visibility: hidden; }
/* UWAGA: nie ukrywać tu linków --hidden – visibility:hidden wyłącza je z kolejności Tab */

/* przyciski */
.lz-a11y__controls { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.lz-a11y__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-block-size: var(--lz-h);
  min-inline-size: var(--lz-h);
  padding: 0 .75rem;
  border: 2px solid var(--lz-border);
  border-radius: var(--lz-radius);
  background: transparent;
  color: var(--lz-fg);
  font: inherit;
  cursor: pointer;
  transition: background .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.lz-a11y__btn[hidden] { display: none; }        /* [hidden] musi wygrać z display:inline-flex */
.lz-a11y__btn:hover { background: var(--lz-hover); border-color: var(--lz-fg); }
.lz-a11y__btn[aria-pressed="true"] { background: var(--lz-pressed-bg); color: var(--lz-pressed-fg); border-color: var(--lz-pressed-bg); }
.lz-a11y__btn:focus-visible,
.lz-a11y__skip:focus-visible {
  outline: 3px solid var(--lz-focus);
  outline-offset: 2px;
}
.lz-a11y__icon { flex: 0 0 auto; }

/* grupa A / A+ / A++ – jedna ramka, trzy osobne cele */
.lz-a11y__group {
  display: inline-flex; align-items: stretch;
  border: 2px solid var(--lz-border);
  border-radius: var(--lz-radius);
  padding: 2px;
  gap: 2px;
}
.lz-a11y__group .lz-a11y__btn {
  min-block-size: calc(var(--lz-h) - 8px);
  border: 0;
  border-radius: calc(var(--lz-radius) - 2px);
  padding: 0 .625rem;
}

/* desktop ↔ mobile: które etykiety/kontrolki są widoczne (ACSS breakpoint-m = 768) */
.lz-a11y__font-cycle,
.lz-a11y__label-short { display: none; }
@media (max-width: 767px) {
  .lz-a11y { --lz-h: 2.25rem; font-size: 15px; gap: .5rem; }
  .lz-a11y__font-group,
  .lz-a11y__label-long,
  .lz-a11y__reset-text { display: none; }
  .lz-a11y__font-cycle,
  .lz-a11y__label-short { display: inline; }
  .lz-a11y__btn { padding: 0 .625rem; }
  .lz-a11y__reset { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-a11y__btn { transition: none; }
}

/* ---------- 2. Rozmiar tekstu ----------
   ACSS: html { font-size: var(--root-font-size) } (100%). Wyższa specyficzność nadpisuje.
   Skaluje wszystko w rem/em – jak przeglądarkowe „powiększ tylko tekst”. */
html[data-lz-font="2"] { font-size: 112.5% !important; }
html[data-lz-font="3"] { font-size: 125% !important; }

/* ---------- 3. Wysoki kontrast ----------
   Nadpisujemy tokeny ACSS (zdefiniowane na :root). Cel: tekst ≥ 7:1, UI ≥ 4,5:1.
   Obrazy pozostają bez zmian. */
html[data-lz-contrast="on"] {
  --lz-hc-ink: #000000;
  --lz-hc-paper: #ffffff;
  --lz-hc-green: #0b3320;       /* na białym ≈ 13:1 */
  --lz-hc-amber: #ebac40;       /* tylko z czarnym tekstem ≈ 10:1 */
  --lz-hc-amber-dark: #5c3a00;  /* z białym tekstem ≈ 9:1 */
  --lz-hc-light: #e0e0e0;       /* tła „light” – czarny tekst ≈ 16:1 */

  --white: var(--lz-hc-paper);
  --black: var(--lz-hc-ink);
  --text-dark: var(--lz-hc-ink);
  --text-dark-muted: var(--lz-hc-ink);
  --text-light: var(--lz-hc-paper);
  --text-light-muted: var(--lz-hc-paper);
  --body-color: var(--lz-hc-ink);

  /* primary / action / secondary / base / neutral / shade / tertiary */
  --primary: var(--lz-hc-green); --primary-hover: var(--lz-hc-ink);
  --primary-ultra-light: var(--lz-hc-paper); --primary-light: var(--lz-hc-light); --primary-semi-light: var(--lz-hc-light);
  --primary-semi-dark: var(--lz-hc-green); --primary-dark: var(--lz-hc-ink); --primary-ultra-dark: var(--lz-hc-ink);

  --action: var(--lz-hc-green); --action-hover: var(--lz-hc-ink);
  --action-ultra-light: var(--lz-hc-paper); --action-light: var(--lz-hc-light); --action-semi-light: var(--lz-hc-light);
  --action-semi-dark: var(--lz-hc-green); --action-dark: var(--lz-hc-ink); --action-ultra-dark: var(--lz-hc-ink);

  --secondary: var(--lz-hc-green); --secondary-hover: var(--lz-hc-ink);
  --secondary-ultra-light: var(--lz-hc-paper); --secondary-light: var(--lz-hc-light); --secondary-semi-light: var(--lz-hc-light);
  --secondary-semi-dark: var(--lz-hc-green); --secondary-dark: var(--lz-hc-ink); --secondary-ultra-dark: var(--lz-hc-ink);

  --base: var(--lz-hc-ink); --base-hover: var(--lz-hc-ink);
  --base-ultra-light: var(--lz-hc-paper); --base-light: var(--lz-hc-light); --base-semi-light: var(--lz-hc-light);
  --base-semi-dark: var(--lz-hc-ink); --base-dark: var(--lz-hc-ink); --base-ultra-dark: var(--lz-hc-ink);

  --neutral: var(--lz-hc-ink); --neutral-hover: var(--lz-hc-ink);
  --neutral-ultra-light: var(--lz-hc-paper); --neutral-light: var(--lz-hc-light); --neutral-semi-light: var(--lz-hc-light);
  --neutral-semi-dark: var(--lz-hc-ink); --neutral-dark: var(--lz-hc-ink); --neutral-ultra-dark: var(--lz-hc-ink);

  --shade: #4d4d4d; --shade-hover: var(--lz-hc-ink);
  --shade-ultra-light: var(--lz-hc-paper); --shade-light: #767676; --shade-semi-light: #767676; /* obrysy kart ≥ 3:1 */
  --shade-semi-dark: var(--lz-hc-ink); --shade-dark: var(--lz-hc-ink); --shade-ultra-dark: var(--lz-hc-ink);

  --tertiary: var(--lz-hc-paper); --tertiary-hover: var(--lz-hc-light);
  --tertiary-ultra-light: var(--lz-hc-paper); --tertiary-light: var(--lz-hc-light); --tertiary-semi-light: var(--lz-hc-light);
  --tertiary-semi-dark: var(--lz-hc-ink); --tertiary-dark: var(--lz-hc-ink); --tertiary-ultra-dark: var(--lz-hc-ink);

  /* accent – zostaje jako tło CTA z czarnym tekstem; ciemne odcienie z białym */
  --accent: var(--lz-hc-amber); --accent-hover: #ffd27a;
  --accent-ultra-light: var(--lz-hc-paper); --accent-light: #ffe3a8; --accent-semi-light: #ffe3a8;
  --accent-semi-dark: var(--lz-hc-amber-dark); --accent-dark: var(--lz-hc-amber-dark); --accent-ultra-dark: var(--lz-hc-ink);

  /* półprzezroczyste tokeny ACSS – w kontraście pełne kolory */
  --white-trans-60: var(--lz-hc-paper); --white-trans-70: var(--lz-hc-paper); --white-trans-80: var(--lz-hc-paper); --white-trans-90: var(--lz-hc-paper);
  --black-trans-60: var(--lz-hc-ink); --black-trans-70: var(--lz-hc-ink); --black-trans-80: var(--lz-hc-ink); --black-trans-90: var(--lz-hc-ink);

  /* WŁASNE zmienne projektu (nie-ACSS) – każdą nową zmienną koloru z klas fr-* trzeba tu dopisać */
  --lz-footer-bg: var(--lz-hc-ink);

  /* konteksty tła ACSS */
  --bg-ultra-light: var(--lz-hc-paper); --bg-light: var(--lz-hc-light);
  --bg-dark: var(--lz-hc-ink); --bg-ultra-dark: var(--lz-hc-ink);

  /* fokus i linki */
  --focus-color: var(--lz-hc-green);
  --focus-width: 4px;
  --link-color: var(--lz-hc-green);
  --link-color-hover: var(--lz-hc-ink);
  --link-decoration-thickness: 3px;

  /* przyciski ACSS – tekst na przyciskach zawsze biały/czarny wg tła */
  --btn-primary-text: var(--lz-hc-paper); --btn-primary-hover-text: var(--lz-hc-paper);
  --btn-action-text: var(--lz-hc-paper); --btn-action-hover-text: var(--lz-hc-paper);
  --btn-secondary-text: var(--lz-hc-paper); --btn-secondary-hover-text: var(--lz-hc-paper);
  --btn-accent-text: var(--lz-hc-ink); --btn-accent-hover-text: var(--lz-hc-ink);
}
/* wzmocnienia niezależne od tokenów */
html[data-lz-contrast="on"] body { background: var(--lz-hc-paper) !important; color: var(--lz-hc-ink); }
html[data-lz-contrast="on"] a:not([class*="btn"]):not(.lz-a11y__btn) { text-decoration: underline !important; text-decoration-thickness: 2px; }
html[data-lz-contrast="on"] :focus-visible { outline-width: 4px !important; }
/* sekcje ciemne (stopka, pasy) – czarne tło, biały tekst i linki */
html[data-lz-contrast="on"] :is(.fr-footer-alpha, .bg--dark, .bg--ultra-dark, [class*="bg--dark"]) { background-color: var(--lz-hc-ink) !important; color: var(--lz-hc-paper) !important; }
html[data-lz-contrast="on"] :is(.fr-footer-alpha, .bg--dark, .bg--ultra-dark) :is(a, p, li, span, h1, h2, h3, h4, h5, h6):not(.lz-a11y__btn) { color: var(--lz-hc-paper) !important; }
html[data-lz-contrast="on"] :is(.fr-footer-alpha, .bg--dark, .bg--ultra-dark) :focus-visible { outline-color: var(--lz-hc-amber) !important; }
html[data-lz-contrast="on"] .lz-a11y { --lz-border: #ffffff; --lz-focus: var(--lz-hc-amber); --lz-bar-bg: var(--lz-hc-ink); }
html[data-lz-contrast="on"] .lz-a11y__btn[aria-pressed="true"] { --lz-pressed-fg: #000; }