/* ==========================================================================
   base.css — global reset, base elements, layout primitives, utilities
   Ported 1:1 from prototypy/serwis-jasny/css/{02-base,03-layout,04-utilities}.css
   Selectors, values, media queries and rule order are untouched — only the
   custom-property names were mechanically renamed to theme.json tokens
   (tools/rename-tokens.py + docs/token-map.tsv). See CLAUDE.md for the rule:
   this theme does DRY in code, never in the rendered look.
   ========================================================================== */

/* ---- from 02-base.css ---------------------------------------------------- */

/* ==========================================================================
   02 — PODSTAWA
   Reset i zachowanie surowych elementów. Zero klas — tylko selektory
   elementów, żeby treść bez klasy też wyglądała poprawnie.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--wp--preset--color--page);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--fs-body);
  line-height: var(--wp--custom--line-height--body);
  font-feature-settings: "cv01", "cv05", "cv08";  /* Inter: 1, l, a — DEC-014 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Stopka zawsze na dole ekranu. Krótka strona (404, pusty wynik wyszukiwania)
     na wysokim monitorze zostawiała pod stopką pas gołego tła. `main` przejmuje
     nadmiar wysokości; strona dłuższa od ekranu się nie zmienia.          */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main { flex: 1 0 auto; }

/* --- nagłówki --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: var(--wp--custom--tracking--tight);
}

h1 { font-size: var(--wp--preset--font-size--fs-1); line-height: var(--wp--custom--line-height--1); }
h2 { font-size: var(--wp--preset--font-size--fs-2); line-height: var(--wp--custom--line-height--2); }
h3 { font-size: var(--wp--preset--font-size--fs-3); line-height: var(--wp--custom--line-height--3); letter-spacing: 0; }
h4 { font-size: var(--wp--preset--font-size--fs-body); line-height: var(--wp--custom--line-height--body); letter-spacing: 0; }

p { text-wrap: pretty; }

/* --- odnośniki -------------------------------------------------------- */

a {
  color: var(--wp--preset--color--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}
a:hover { color: var(--wp--preset--color--accent-hover); }

/* --- media ------------------------------------------------------------ */

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- listy bez ozdób -------------------------------------------------- */

ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* --- dane liczbowe ---------------------------------------------------- */

/* Wszędzie, gdzie cyfry mają się ustawić w kolumnie. */
table, .num, [data-num] {
  font-variant-numeric: tabular-nums;
}

/* --- fokus ------------------------------------------------------------
   Widoczny na każdym tle: obrys w akcencie + odstęp od elementu.        */

:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
  border-radius: var(--wp--custom--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* --- pomijanie nawigacji ---------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--wp--preset--spacing--space-4);
  top: var(--wp--preset--spacing--space-4);
  z-index: 100;
  padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text-on-accent);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--wp--custom--radius);
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--wp--preset--color--text-on-accent);
}

/* --- tylko dla czytnika ekranu ---------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- ograniczenie ruchu ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---- from 03-layout.css ---------------------------------------------------- */

/* ==========================================================================
   03 — UKŁAD
   Kontenery, rytm sekcji, siatka. Wszystko na flex/grid z gap — zero
   marginesów per-element, które się kumulują albo znoszą.
   ========================================================================== */

/* --- kontenery -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}

.container--narrow { max-width: var(--wp--style--global--content-size); }

/* Szerokość wygodna do czytania. Osobno od kontenera, bo tekst bywa
   w szerokiej sekcji.                                                     */
.measure { max-width: var(--wp--custom--layout--measure); }

/* --- sekcja ------------------------------------------------------------
   Jeden rytm pionowy dla całego serwisu. Sekcja nigdy nie ustawia
   własnych marginesów — dostaje padding stąd.                            */

.section {
  padding-block: var(--wp--preset--spacing--space-8);
}

@media (min-width: 60rem) {
  .section { padding-block: var(--wp--preset--spacing--space-9); }
}

.section--tight  { padding-block: var(--wp--preset--spacing--space-7); }
.section--surface { background: var(--wp--preset--color--surface); }

/* Linia zamiast cienia — jedyny sposób rozdzielania warstw (DEC-020 d). */
.section--ruled { border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border); }

/* --- podłoże arkusza rysunkowego ---------------------------------------
   Siatka 48 px, czyli dwunasta wielokrotność rytmu 4 px (DEC-020 b).
   Wzięta z własnej struktury układu, nie z zasobu ozdób.

   ⚠️ UŻYWAĆ NA JEDNYM PASIE NA STRONĘ, nie na wszystkich (DEC-043).
   Pierwsza wersja stała na czterech sekcjach naraz przy dwa razy większej
   gęstości i wychodziła z tego tapeta — a przy okazji odbierała wagę
   liniom, które w tym systemie naprawdę coś rozdzielają, bo linia 1 px
   jest jedynym narzędziem warstwowania (DEC-020 d: zero cieni).

   Wykonanie na dwóch gradientach powtarzalnych, nie na obrazie — zero
   transferu, skaluje się bez rastrowania, kolor idzie z tokenów.

   `background-position: center top` — siatka jest wyśrodkowana razem
   z kontenerem, więc kolumny treści siadają na module, a nie obok niego.
   Na sekcji z własnym podłożem kolejność deklaracji ma znaczenie:
   `background-color` z `.section--surface` zostaje pod obrazem siatki. */

.section--grid {
  background-image:
    repeating-linear-gradient(to right,  var(--wp--preset--color--grid) 0 1px, transparent 1px var(--wp--custom--grid--step)),
    repeating-linear-gradient(to bottom, var(--wp--preset--color--grid) 0 1px, transparent 1px var(--wp--custom--grid--step));
  background-position: center top;
}

/* --- nagłówek sekcji ---------------------------------------------------
   Reguła rytmu: nad nagłówkiem więcej miejsca niż pod nim.               */

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-4);
  margin-bottom: var(--wp--preset--spacing--space-7);
}

.section__head .measure { margin-top: calc(var(--wp--preset--spacing--space-1) * -1); }

/* Wariant z odnośnikiem po prawej („wszystkie aktualności"). Do 60rem
   odnośnik ląduje pod nagłówkiem — na wąskim ekranie próba upchnięcia
   go obok daje albo łamanie tytułu, albo za małe pole trafienia.       */
@media (min-width: 40rem) {
  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--space-6);
  }
}

/* --- etykieta nadrzędna (eyebrow) --------------------------------------
   Wersaliki w monospace. Niesie informację porządkującą, nie ozdobę.

   ⚠️ Powiększone i pogrubione 14.08 (12 px / 400 → 14 px / 500).
   Kontrast był i jest w porządku — zmierzony 6,33:1 na tle strony
   i 5,89:1 na szarym, przy progu AA 4,5:1 — więc to NIE była poprawka
   dostępnościowa w rozumieniu WCAG, bo WCAG nie ma progu wielkości pisma.

   Powód jest ergonomiczny i ten sam, co przy polu trafienia 44 px
   (DEC-021 c): odbiorca bywa w hali, w rękawicach, przy tanim monitorze.
   Do tego IBM Plex Mono w grubości 400 jest optycznie CIEŃSZY niż krój
   proporcjonalny w tym samym stopniu, bo kreski muszą być lżejsze,
   żeby zmieścić się w stałej szerokości znaku. Wersaliki i rozstrzelenie
   dokładają swoje. Stąd 500, którą i tak mamy wczytaną.                 */

.eyebrow {
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 500;
  line-height: var(--wp--custom--line-height--small);
  letter-spacing: var(--wp--custom--tracking--micro);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-3);
}

/* Kreska wiodąca — nawiązanie do linii wymiarowej rysunku (DEC-020 g). */
.eyebrow::before {
  content: "";
  width: var(--wp--preset--spacing--space-6);
  height: 1px;
  background: var(--wp--preset--color--border-strong);
  flex: none;
}

/* --- siatki ------------------------------------------------------------
   Siatka 12 kolumn dopiero od 60rem (DEC-020 c). Poniżej — jedna kolumna. */

.grid {
  display: grid;
  gap: var(--wp--preset--spacing--space-6);
}

@media (min-width: 60rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--space-8); align-items: center; }
}

@media (min-width: 40rem) and (max-width: 59.999rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- stos ------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-4);
}
.stack--tight { gap: var(--wp--preset--spacing--space-3); }
.stack--loose { gap: var(--wp--preset--spacing--space-6); }

/* --- rząd ------------------------------------------------------------- */

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--space-4);
}

/* --- przewijanie poziome ------------------------------------------------
   Szeroka treść przewija się we własnym pojemniku; strona nigdy w bok.   */

.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* ---- from 04-utilities.css -------------------------------------------------- */

/* ==========================================================================
   04 — NARZĘDZIA
   Wąski zestaw klas na rzeczy, które powtarzają się w wielu sekcjach
   i nie zasługują na własny komponent. Świadomie krótki: każda klasa
   dodana tutaj to klasa, której ktoś użyje zamiast pomyśleć o strukturze.
   ========================================================================== */

/* --- rola tekstu ------------------------------------------------------- */

.lead {
  font-size: var(--wp--preset--font-size--fs-lead);
  line-height: var(--wp--custom--line-height--lead);
  color: var(--wp--preset--color--text-muted);
}

.text-muted { color: var(--wp--preset--color--text-muted); }
.text-small { font-size: var(--wp--preset--font-size--fs-small); line-height: var(--wp--custom--line-height--body); }

/* --- odstęp jednorazowy ------------------------------------------------ */

.mt-4 { margin-top: var(--wp--preset--spacing--space-4); }
.mt-7 { margin-top: var(--wp--preset--spacing--space-7); }

/* ==========================================================================
   WORDPRESS ONLY: not in the prototype
   ==========================================================================
   header.php renders <main id="main" tabindex="-1"> so the skip link can move
   focus there. The programmatic focus must not draw a ring around the page. */

#main:focus { outline: none; }

/* Skok do kotwicy (stopka → „How to Order" na Home) lądował pod nagłówkiem,
   który od 60rem jest `sticky` i zasłania pierwsze 4,5rem sekcji. Poniżej
   60rem nagłówek jest statyczny, więc odsunięcie nie jest potrzebne.     */
@media (min-width: 60rem) {
  :target { scroll-margin-top: calc(var(--wp--custom--layout--header-height) + var(--wp--custom--border--hair)); }
}

/* --- druk ---------------------------------------------------------------
   Podstawa dla każdej podstrony: na papierze nie ma nawigacji ani stopki,
   a tło strony to tusz bez informacji. Arkusze, które drukują coś
   węższego (kreator: sam arkusz specyfikacji), dokładają swoje reguły
   ponad tym, a nie zamiast tego.                                         */
@media print {
  .skip-link,
  .site-header,
  .site-footer { display: none; }
  body { background: none; }
}