:root{ --wcag-ring:#4b94ff; --wcag-top:14px; --wcag-right:14px; --wcag-z:6000; }
html{ scroll-behavior:smooth; }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#1a2a4f; color:#fff; z-index:calc(var(--wcag-z) + 2); border-radius:.5rem;
  outline:3px solid var(--wcag-ring); outline-offset:2px;
}

/* Trigger (oko) – stały w prawym górnym rogu, ponad menu */
.wcag-trigger{
  position:fixed; top:var(--wcag-top); right:var(--wcag-right);
  z-index:calc(var(--wcag-z) + 1);
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:#fff; color:#1a2a4f;
  border:1px solid #e2e6ec; box-shadow:0 6px 16px rgba(0,0,0,.15);
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.wcag-trigger:hover{ background:#f7f9fb; transform:translateY(-1px); }
.wcag-trigger:active{ transform:none; }

/* Panel */
.wcag-panel{
  position:fixed; top:calc(var(--wcag-top) + 48px); right:var(--wcag-right);
  width:min(260px, calc(100vw - 28px));
  background:#fff; color:#2d2d2d;
  border:1px solid #e2e6ec; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  z-index:var(--wcag-z);
}
.wcag-head{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid #eef1f5; }
.wcag-head h2{ margin:0; font-size:1rem; color:#1a2a4f; }
.wcag-close{ background:transparent; border:none; font-size:1.1rem; cursor:pointer; color:#1a2a4f; }

.wcag-body{ padding:.75rem; }
.wcag-scale{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.5rem; }
.wcag-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:40px; padding:.5rem .75rem;
  background:#fff; border:1px solid #e2e6ec; border-radius:10px;
  font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.wcag-btn:hover{ background:#f7f9fb; border-color:#dfe5ee; }
.wcag-actions{ display:grid; gap:.5rem; }
.wcag-reset{ margin-top:.5rem; }
.wcag-reset .wcag-btn{ background:#e9edf5; color:#1a2a4f; }
.wcag-reset .wcag-btn:hover{ background:#dbe3f2; }

.wcag-foot{ padding:.6rem .75rem; border-top:1px solid #eef1f5; display:flex; justify-content:flex-end; }

/* Efekty dostępności */
body.wcag-gray{ filter:grayscale(100%); }
body.wcag-contrast-high{ filter:contrast(1.15) saturate(1.05); }
body.wcag-highlight-links :where(a){ text-decoration:underline !important; }

/* Focus ring dla klikalnych w treści */
.page-root[data-page] :where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--wcag-ring); outline-offset:2px; border-radius:6px;
}

/* Mobile */
@media (max-width:768px){
  :root{ --wcag-right:8px; --wcag-top:8px; }
  .wcag-panel{ right:8px; left:8px; width:auto; }
}

/* === WCAG: aktywatory zachowań === */
/* Zmienna bazowa i skalowanie fontu – JS ustawia --base-font-size w % */
:root{ --base-font-size: 100%; --ui-ring:#4b94ff; }
html{ font-size: var(--base-font-size); }

/* Podbij widoczny focus na interaktywnych (spójnie z paletą) */
.page-root[data-page] :where(a,button,input,select,textarea):focus-visible{
  outline: 3px solid var(--ui-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 1) Tryb wysoki kontrast */
body.wcag-contrast-high{
  /* łagodny boost kontrastu bez „przepalania” kolorów brandu */
  filter: contrast(1.15) saturate(1.05);
}

/* 2) Skala szarości */
body.wcag-gray{
  filter: grayscale(100%);
}

/* 3) Podświetlanie linków (także w headerze i menu) */
body.wcag-highlight-links :where(a){
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
/* W menu masz underline na :after — wyłącz je przy trybie highlight,
   żeby nie dublować linii */
body.wcag-highlight-links .menu a::after{ display:none !important; }

/* (opcjonalnie) lepsza „target area” dla klikalnych wewnątrz kart/menu */
:where(a,button){ -webkit-tap-highlight-color: rgba(75,148,255,.15); }

/* Skalowanie fontu – sterowane przez JS: --base-font-size */
:root{ --base-font-size:100%; --ui-ring:#4b94ff; }
html{ font-size:var(--base-font-size); }

/* Focus ring spójny z brandem */
.page-root[data-page] :where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--ui-ring); outline-offset:2px; border-radius:6px;
}

/* Skala szarości (jak masz) */
body.wcag-gray{ filter:grayscale(100%); }

/* Wysoki kontrast – BEZ filter(), jawne kolory pod AAA */
body.wcag-contrast-high{ background:#fff; color:#111; }
body.wcag-contrast-high .section-title,
body.wcag-contrast-high .building-header,
body.wcag-contrast-high .budynek-header{ color:#000; }

/* Header / Footer / menu */
body.wcag-contrast-high .header,
body.wcag-contrast-high .footer{ background:#000 !important; color:#fff !important; }
body.wcag-contrast-high .menu a{ color:#fff !important; }
body.wcag-contrast-high .menu a:hover{ color:#ffd54f !important; } /* żółty akcent na hover */
body.wcag-contrast-high .submenu{ background:#000 !important; }

/* Karty / boxy / przyciski */
body.wcag-contrast-high .card{ background:#fff !important; border:2px solid #000 !important; }
body.wcag-contrast-high .card-footer{ background:#f5f5f5 !important; }
body.wcag-contrast-high .btn,
body.wcag-contrast-high .card .btn{
  background:#000 !important; color:#fff !important; border:2px solid #fff;
}
body.wcag-contrast-high .btn:hover,
body.wcag-contrast-high .card .btn:hover{ background:#222 !important; }

/* Tabele nagłówki */
body.wcag-contrast-high .garage-table th,
body.wcag-contrast-high .mieszkania-table th,
body.wcag-contrast-high .szeregowe-table thead{ background:#000 !important; color:#fff !important; }

/* Podświetlanie linków – grubsze, wyraźne */
body.wcag-highlight-links :where(a){
  text-decoration: underline !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
/* W menu wyłącz kreskę ::after żeby nie było dubla */
body.wcag-highlight-links .menu a::after{ display:none !important; }
/* Kontrastowe podkreślenie na ciemnym headerze */
body.wcag-highlight-links .header .menu a{ text-decoration-color:#ffeb3b !important; }
/* W treści – ciemniejszy akcent */
body.wcag-highlight-links .content a{ text-decoration-color:#003b80 !important; }

/* skalowanie fontu sterowane przez JS */
:root{ --base-font-size:100%; --ui-ring:#4b94ff; }
html{ font-size:var(--base-font-size); }

/* mocniejszy, dostępny styl linków */
body.wcag-highlight-links :where(a){
  text-decoration: underline !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
body.wcag-highlight-links .menu a::after{ display:none !important; } /* bez podwójnej kreski */
body.wcag-highlight-links .header .menu a{ text-decoration-color:#ffeb3b !important; }
body.wcag-highlight-links .content a{ text-decoration-color:#003b80 !important; }

/* wysoki kontrast bez filter() – jawne kolory */
body.wcag-contrast-high{ background:#fff; color:#111; }
body.wcag-contrast-high .header,
body.wcag-contrast-high .footer{ background:#000 !important; color:#fff !important; }
body.wcag-contrast-high .menu a{ color:#fff !important; }
body.wcag-contrast-high .menu a:hover{ color:#ffd54f !important; }
body.wcag-contrast-high .submenu{ background:#000 !important; }
body.wcag-contrast-high .card{ background:#fff !important; border:2px solid #000 !important; }
body.wcag-contrast-high .btn{ background:#000 !important; color:#fff !important; border:2px solid #fff; }
body.wcag-contrast-high .garage-table th,
body.wcag-contrast-high .mieszkania-table th{ background:#000 !important; color:#fff !important; }