/* ═══════════════════════════════════════════════════════════
   BASE — reset, typografia bazowa, prymitywy layoutu.
   Style KOMPONENTÓW mieszkają w components.css.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px); }   /* kotwice nie chowają się pod pasek nav */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum";   /* cyfry tabelaryczne globalnie */
  min-height: 100vh;
  display: flex;             /* sticky footer: main rośnie, stopka dociśnięta na dół */
  flex-direction: column;
}

/* main wypełnia pion na krótkich stronach, żeby stopka nie zawisła w połowie ekranu */
#main { flex: 1 0 auto; }

/* Zatrzask na scroll poziomy (mobile/Safari): clip nie tworzy scroll-containera,
   więc position:sticky (nav) dalej działa - w odróżnieniu od overflow:hidden */
html, body { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
ul, ol { list-style: none; }

/* ── TYPOGRAFIA: nagłówki = serif (głos marki) ── */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-heading); }
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-headline); }
h3 { font-size: var(--fs-title); font-family: var(--font-sans); font-weight: 600; }

p { max-width: var(--measure); }

/* ── UTILITIES: etykieta (Inter 600 uppercase) ── */
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.muted { color: var(--ink-muted); }
.serif { font-family: var(--font-serif); }
.tnum { font-feature-settings: "tnum"; }

/* ── FOCUS: widoczny, spójny (dostępność) ── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ── LAYOUT: powłoka i sekcje ── */
.shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }
@media (max-width: 640px) { .shell { padding-inline: var(--sp-sm); } }
/* Wyjątek: kreator zamrożony przy geometrii sprzed v2 (formularz bez zmian wizualnych) */
.wizard .shell { max-width: var(--wizard-max); padding-inline: var(--sp-md); }

.section { padding-block: var(--sp-xl); }

/* Klasa tylko dla czytników ekranu */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── SKIP LINK: pominięcie nawigacji (WCAG 2.4.1). Schowany do momentu fokusu
      klawiaturą; z-index nad paskiem (nav=40, tooltip=60) i idle-help (50). ── */
.skip-link {
  position: fixed; top: var(--sp-xs); left: var(--sp-xs); z-index: 100;
  transform: translateY(-150%); /* poza ekranem, dopóki nie dostanie fokusu */
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); box-shadow: var(--focus-ring); }

/* ── LINK zewnętrzny (do serwisów: BIK, KRS…) — bez podkreślenia; ↗ sygnalizuje link zewnętrzny ── */
.ext-link {
  color: var(--bordeaux);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}
.ext-link:hover { color: var(--bordeaux-deep); }
.ext-link::after { content: " ↗"; color: var(--bordeaux); }