/* Skip link – widoczny po focuse (WCAG 2.4.1, 2.4.7) */
.skip-link:not(:focus):not(:focus-visible) {
    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;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1050;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #000;
    border: 2px solid currentColor;
    border-radius: 0.25rem;
}

/* Spójny header + branding */
.site-header {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.site-header__brand {
    padding: .5rem 0;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.site-brand:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.site-brand__logo {
    width: auto;
    height: 44px;
    max-width: 160px;
}

@media (min-width: 992px) {
    .site-brand__logo {
        height: 52px;
        max-width: 220px;
    }
}

.site-brand__text {
    font-weight: 700;
    line-height: 1.2;
}

.site-header__brand .container {
    flex-direction: column;
    align-items: center;
}

.site-brand__audio {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.a11y-panel__reset {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid currentColor;
    background: transparent;
    font: inherit;
}

.a11y-panel__reset:focus,
.a11y-panel__reset:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Styl nie usuwa semantyki listy (nie stosuj: list-style: none; dla treści merytorycznej) */
.a11y-bullets {
    margin-block: 1rem;
    padding-inline-start: 1.25rem;
    /* przestrzeń na punktor */
    list-style: disc;
    list-style-position: outside;
}

.a11y-bullets>li {
    margin-block: 0.5rem;
    /* czytelne odstępy między punktami */
}

/* Statut – minimalny CSS (WCAG 2.2 AA, responsywny, bez „ficzerów” wizualnych) */
/* Uwaga dostępnościowa: nie usuwaj outline; fokus ma być widoczny. (G83, C7) */

:root {
    --content-max: 72ch;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;

    /* Zachowaj dobre odstępy dla 1.4.12 (C25) */
    --line-height: 1.6;
}

.page {
    padding: var(--space-3) var(--space-2);
}

.page__header {
    max-width: var(--content-max);
    margin: 0 auto var(--space-4);
}

.page__subtitle {
    margin-top: var(--space-1);
    line-height: var(--line-height);
}

/* Ograniczenie szerokości dla czytelności i reflow (1.4.10, C24) */
.statute-chapter,
.toc {
    max-width: var(--content-max);
    margin: 0 auto var(--space-4);
}

.statute-chapter>h2 {
    margin: var(--space-4) 0 var(--space-2);
}

/* Paragrafy § */
.statute-paragraph {
    margin: 0 0 var(--space-3);
}

.statute-paragraph>h3 {
    margin: var(--space-3) 0 var(--space-1);
}

/* Podsekcje A/B/C w § 11 */
.statute-subsection {
    margin: var(--space-2) 0 0;
}

.statute-subsection>h4 {
    margin: var(--space-2) 0 var(--space-1);
}

/* Tekst */
.statute-paragraph p,
.page__subtitle,
.toc {
    line-height: var(--line-height);
}

.statute-paragraph p {
    margin: 0 0 var(--space-2);
}

/* Listy – czytelne wcięcia, bez „ściśnięcia” */
.statute-paragraph ul,
.statute-paragraph ol,
.toc ol {
    margin: 0 0 var(--space-2);
    padding-left: 1.25rem;
}

.statute-paragraph li,
.toc li {
    margin: 0.25rem 0;
}

.statute-paragraph li>ul,
.statute-paragraph li>ol {
    margin-top: 0.5rem;
}

/* Spis treści */
.toc {
    margin-top: var(--space-3);
}

.toc a {
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
}

/* FOKUS: nie wyłączamy, zapewniamy widoczność (2.4.7 AA, C7, G83) */
a:focus-visible,
button:focus-visible,
[tabindex="-1"]:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Cel po skoku z kotwicy (TOC) – żeby sticky header nie przykrywał nagłówka.
   Dostosuj wartość do wysokości Waszego headera, jeśli jest „sticky”. (2.4.11 AA) */
h2[id],
h3[id],
h4[id] {
    scroll-margin-top: 5rem;
}

/* Reflow / małe ekrany: trochę więcej oddechu, zero poziomego przewijania */
@media (max-width: 40rem) {
    .page {
        padding: var(--space-3) var(--space-2);
    }

    .statute-paragraph ul,
    .statute-paragraph ol,
    .toc ol {
        padding-left: 1.1rem;
    }
}

/* A11Y: czytelność, reflow, fokus, odstępy (C14, C24, C25, C7) */
.page-header,
.page-section {
  padding-block: 2rem;
}

.container {
  width: min(72rem, 100% - 2rem);
  margin-inline: auto;
}

.lead {
  max-width: 70ch;
  font-size: 1.125rem;
  line-height: 1.7;
}

.page-section p {
  max-width: 75ch;
  line-height: 1.7;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 48rem) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  border: 2px solid currentColor;
  border-radius: 0.75rem;
  padding: 1rem;
}

.card h3 {
  margin-top: 0;
}

.list {
  padding-left: 1.25rem;
  line-height: 1.7;
}

/* A11Y: fokus widoczny i nieprzysłonięty w typowych układach */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* A11Y: komfort czytania i reflow */
html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
}

/* A11Y: szanuj preferencje ruchu */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}