/* Typografia Feuer.pl (task01.08; skala wg Feuer DS — task03.03).
   Część 1: baza — Open Sans i tekst podstawowy (DS: body 16, interlinia 140%).
   Część 2: typografia treści redakcyjnej (.tresc) — robocza propozycja do akceptacji;
   nagłówki i body na kanonicznej skali DS (H2 32, H3 26, H4 20), reszta
   (odstępy, tabele, kod, cytaty) nadal bez projektu w Figmie.
   Font z Google Fonts — zdalnie, także w serwisie docelowym; bez self-hostingu
   (decyzja 2026-07-19 w task03.01). */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* ---- Baza ---- */

body {
  font-family: var(--font-podstawowy);
  font-weight: var(--waga-zwykla);
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
  color: var(--kolor-tekstu);
  /* Wygładzanie w skali szarości jak w Figmie i Safari (decyzja 2026-09-10, task01.20):
     Chrome na macOS domyślnie pogrubia litery, przez co tekst wyglądał ciężej niż
     w projekcie przy identycznych wymiarach. Działa tylko na macOS; Windows bez zmian. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Treść redakcyjna (artykuły Bazy wiedzy, opisy produktów, strony kontentowe) ----
   Wg widoków FeuerDS „Strona branży" desktop 5124:5210 / mobile 5124:5891 i wariantu
   z tabelą dwukolorową 5135:6738 / 5135:7251 (stan 2026-09-12, task01.20): łam 1060 px
   (mobile 361), H2 artykułu 28/39.2 ExtraBold (mobile 26/36.4 Bold), lead 20/28 Bold
   (mobile 16 Bold), akapit 16/22.4 z odstępem 16, bloki co 80 (mobile 48; ramka
   5353:6107 z 2026-09-13 — wcześniejsze ramki miały 64), H2→treść 24, tabela z obrysem
   1 px #6a7a8c (nagłówek padding 8 Bold, komórki padding 16; wariant dwukolorowy: co drugi
   wiersz ciała na tle wyróżnionym; na mobile przewijana w poziomie), zdjęcie 1060×374
   (mobile 361×297) z podpisem 14/19.6, ramka wyróżnienia, cytat blokowy, dwie kolumny
   (zdjęcie + tekst / lista, lista + lista).
   Poza projektem artykułu (PROPOZYCJA — do akceptacji): H3/H4 (skala Fonts), listy
   (decyzja użytkownika 2026-09-12: zostają wg propozycji), separator, meta.
   Selektory pod markup bloków palety treści (task03.07): bloki core (figure.wp-block-table,
   figure.wp-block-image, cite w cytacie, style bloku .is-style-…) i firmowe (.dwie-kolumny,
   .sprawdz-takze). Kod (A40.8) poza paletą — bez reguł.
   Stany linków (hover, odwiedzony, fokus) — task01.19. */

/* Szerokość łamu daje kontener (karta artykułu: 1204 − 2×72 = 1060) — .tresc bez
   własnego ograniczenia (decyzja 2026-09-15).
   Wrapper: te same reguły dla .tresc na froncie i dla kontenera treści w edytorze wpisu
   (klasy .tresc nie da się tam nadać; :where() zeruje jego specyficzność, więc każda
   reguła zachowuje specyficzność zwykłego `.tresc …`).
   Trzeci element wrappera: bloki palety bezpośrednio w treści strony / produktu, między sekcjami
   (front i edytor; łam i odstępy od sekcji — rama-wp.css wtyczki; lista bloków także tam).
   Wrapperem jest tam sam blok, więc reguły elementów mają bliźniaka `&:is(…)` — element
   będący wrapperem; w .tresc nie trafia on w nic. */
:is(.tresc, :where(.editor-styles-wrapper.post-type-post .is-root-container),
    :where(.wp-block-post-content:not(.post-type-post *) > :is(p, .wp-block-heading, .wp-block-list, .wp-block-image, .wp-block-table, .wp-block-quote, .wp-block-separator, .wp-block-buttons, .dwie-kolumny, .sprawdz-takze))) {

  & p, &:is(p) {
    margin-block: 0 var(--odstep-2);   /* 16 px między akapitami */
  }

  /* Lead — pierwszy akapit artykułu (w DS obok boksu spisu treści); styl bloku akapitu „Lead" */
  & .is-style-wstep, &:is(.is-style-wstep) {
    font-size: var(--tekst-20);
    line-height: var(--interlinia-20);  /* 20/28 */
    font-weight: var(--waga-gruba);
    margin-block: 0 var(--odstep-10);   /* 80 px — jak odstęp bloków */
  }

  /* Hasło — zdanie podsumowujące sekcję; styl bloku akapitu „Hasło" (task03.46; FeuerDS 2:7377 / mobile 2:2902):
     24/32 ExtraBold, mobile 22/32 (24 poza skalą Fonts — wpis w spojnosc-designu.md); odstępy jak akapit */
  & .is-style-haslo, &:is(.is-style-haslo) {
    font-size: var(--tekst-24);
    line-height: 2rem;                  /* 32 — w Figmie 32, nie 34 tokenu */
    font-weight: var(--waga-najgrubsza);
  }

  /* Nagłówki śródtekstowe — H1 należy do sekcji otwierającej strony, nie do treści.
     H2 artykułu wg widoku Strona branży: 28/39.2 ExtraBold desktop, 26/36.4 Bold mobile
     (plansza Fonts mówi H2 32/28 — rozjazd w rejestrze spojnosc-designu.md);
     H3/H4 bez projektu w artykule — kanoniczne z DS Fonts, waga Bold. */
  & h2, &:is(h2) {
    font-size: var(--tekst-28);
    line-height: var(--interlinia-28);
    font-weight: var(--waga-najgrubsza);
    margin-block: var(--odstep-10) var(--odstep-3);  /* 80 nad sekcją, 24 do treści */
  }

  & h3, &:is(h3) {
    font-size: var(--tekst-26);
    line-height: var(--interlinia-26);
    font-weight: var(--waga-gruba);
    margin-block: var(--odstep-4) var(--odstep-2);
  }

  & h4, &:is(h4) {
    font-size: var(--tekst-20);
    line-height: var(--interlinia-20);
    font-weight: var(--waga-gruba);
    margin-block: var(--odstep-4) var(--odstep-2);
  }

  /* Listy — z zagnieżdżaniem; marker w kolorze marki */
  & ul,
  & ol,
  &:is(ul, ol) {
    margin-block: 0 var(--odstep-3);
    padding-inline-start: var(--odstep-4);
  }

  & li {
    margin-block-end: var(--odstep-1);
  }

  & li > ul,
  & li > ol {
    margin-block: var(--odstep-1) 0;
  }

  & li::marker {
    color: var(--kolor-marki);
    font-weight: var(--waga-gruba);
  }

  /* Wyróżnienia inline */
  & strong { font-weight: var(--waga-gruba); }
  & em { font-style: italic; } /* kursywa nie występuje w projekcie graficznym — systemowa Open Sans Italic */

  /* Linki w treści — kolor marki z podkreśleniem (w komponentach linki są czerwone lub czarne pogrubione).
     Link-przycisk atomu A41 (np. blok „Cytat", task01.34) i link akcji A43 (np. belka zapowiedzi, task03.27)
     w treści poza regułą — inaczej dostają podkreślenie i kolor linku treści. */
  & a:not(.przycisk, .link-akcji) {
    color: var(--kolor-marki);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* „Sprawdź także" (blok feuer/sprawdz-takze): link w kolorze tekstu, hover w kolorze marki */
  & .sprawdz-takze, &:is(.sprawdz-takze) { margin-top: var(--odstep-3); }
  & .sprawdz-takze a { color: var(--kolor-tekstu); }
  & .sprawdz-takze a:hover { color: var(--kolor-marki); }

  /* Przyciski (core/buttons, atom A41) — bez projektu w treści: odstęp jak między akapitami (decyzja task03.07) */
  & .wp-block-buttons, &:is(.wp-block-buttons) { margin-block: 0 var(--odstep-2); }

  /* Cytat blokowy w treści (DS 5353:6251 / mobile 5353:7586): linia 4 px w kolorze marki
     z lewej, odstęp 40 (mobile 24), tekst 36/50.4 Bold (mobile 26/36.4), podpis 16/22.4
     24 niżej; bez tła. Osobny blok co 80.
     Linię, odstęp tekstu i odstępy bloku bierze też styl akapitu „Wyróżnienie z linią" (task03.59). */
  & blockquote, &:is(blockquote),
  & .is-style-wyroznienie-linia, &:is(.is-style-wyroznienie-linia) {
    margin: var(--odstep-10) 0;
    padding: 0 0 0 calc(var(--odstep-5) - 0.25rem);
    border-inline-start: 0.25rem solid var(--kolor-marki);
  }

  & blockquote p {
    margin: 0;
    font-size: var(--tekst-36);
    line-height: var(--interlinia-36);
    font-weight: var(--waga-gruba);
  }

  /* Wyróżnienie z linią (task03.59, bez projektu w FeuerDS): tekst 20/28 jak „Wyróżnienie",
     bez ramki; linia i odstępy — reguła cytatu blokowego. Styl bloku akapitu „Wyróżnienie z linią". */
  & .is-style-wyroznienie-linia, &:is(.is-style-wyroznienie-linia) {
    font-size: var(--tekst-20);
    line-height: var(--interlinia-20);
  }

  /* Podpis cytatu (core/quote: cite) — tekst zwykły, bez systemowej kursywy */
  & blockquote cite {
    display: block;
    margin-top: var(--odstep-3);
    font-style: normal;
  }

  /* Ramka wyróżnienia (DS 5549:6174 / mobile 5549:6193): obrys 2 px marki, padding 24,
     tekst 20/28 Regular, początek Bold; osobny blok co 80 (mobile 48). Styl bloku akapitu „Wyróżnienie". */
  & .is-style-wyroznienie, &:is(.is-style-wyroznienie) {
    box-sizing: border-box;
    margin: var(--odstep-10) 0;
    padding: var(--odstep-3);
    border: 2px solid var(--kolor-marki);
    font-size: var(--tekst-20);
    line-height: var(--interlinia-20);
  }

  /* Dwie kolumny (DS 5353:6218, 5353:6269, 5353:6646): zdjęcie + tekst, zdjęcie + lista,
     lista + lista — kolumny 498, odstęp 64; blok co 80. Zdjęcie zawsze 498×352 (niższa
     odmiana 498×260 z DS pominięta — decyzja task03.07); mobile: jedna kolumna, zdjęcie
     361×361, odstęp 40.
     Blok feuer/dwie-kolumny: elementy siatki = kolumny (div), w kolumnie bloki palety. */
  & .dwie-kolumny, &:is(.dwie-kolumny) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--odstep-8);
    margin: var(--odstep-10) 0;
  }

  & .dwie-kolumny .wp-block-image { margin: 0 0 var(--odstep-2); }

  & .dwie-kolumny .wp-block-image img { aspect-ratio: 498 / 352; }

  /* Belka zapowiedzi we wpisie (feuer/belka-zapowiedzi, task03.27): układ jak na stronie
     w szerokości łamu; blok co 80 (mobile 48). */
  & .belka-zapowiedzi { margin: var(--odstep-10) 0; }

  /* Blok bezpośrednio pod H2: odstęp 24 jak do akapitu, nie 80 jak między blokami */
  & h2 + :is(.is-style-wyroznienie, .is-style-wyroznienie-linia, blockquote, .dwie-kolumny, figure),
  &:is(h2) + :is(.is-style-wyroznienie, .is-style-wyroznienie-linia, blockquote, .dwie-kolumny, figure) { margin-block-start: var(--odstep-3); }

  /* Tabela w treści (DS: Strona branży) — obrys 1 px w kolorze pomocniczym, kolumny równe,
     nagłówek padding 8 Bold (wiersz 40), komórki padding 16 (wiersz 77 przy dwóch liniach),
     tekst 16/22.4 od lewej. Wrapper figure.wp-block-table (core/table) daje przewijanie poziome
     na mobile (w DS tabela 951 px w kontenerze 361 z przycięciem); komórki nie węższe niż 228 px
     jak w projekcie. Selektory z .wp-block-table — nad CSS bloku core (obramowania, padding,
     .has-fixed-layout, linia 3 px pod thead); wyrównanie kolumn z toolbara bez efektu. */
  & .wp-block-table, &:is(.wp-block-table) {
    margin-block: 0 var(--odstep-2);
    overflow-x: auto;
  }

  & .wp-block-table table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--tekst-16);
    line-height: var(--interlinia-16);
  }

  & .wp-block-table thead { border-bottom: 0; }

  & .wp-block-table :is(th, td) {
    padding: var(--odstep-2);
    border: 1px solid var(--kolor-tekstu-pomocniczy);
    text-align: left;
    vertical-align: middle;
  }

  & .wp-block-table th {
    padding: var(--odstep-1);
    font-weight: var(--waga-gruba);
  }

  /* Naprzemienne wiersze ciała (1., 3., 5.… na tle wyróżnionym) domyślnie dla każdej tabeli —
     decyzja klienta 2026-09-17 (rekomendacja projektantki: czytelność); redaktor niczego nie wybiera.
     Dawna odmiana .tabela-dwukolorowa (A40.11) wycofana. */
  & .wp-block-table tbody tr:nth-child(odd) { background: var(--kolor-tla-wyroznionego); }

  @media (max-width: 639px) {
    & .wp-block-table table { table-layout: auto; }
    & .wp-block-table :is(th, td) { min-width: 14.25rem; }      /* 228 px — szerokość komórki z projektu mobile */
  }

  /* Zdjęcie w treści + podpis (DS 5353:6233: zdjęcie 1060×374 desktop jako osobny blok co 80;
     mobile 5124:5891: 361×297, 40 pod tekstem sekcji; bez zaokrągleń; podpis 14/19.6
     w kolorze tekstu, 8 px pod zdjęciem). Blok core/image: figure.wp-block-image. */
  & .wp-block-image, &:is(.wp-block-image) {
    margin: var(--odstep-10) 0;
  }

  & .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1060 / 374;
    object-fit: cover;
  }

  @media (max-width: 639px) {
    & .wp-block-image img { aspect-ratio: 361 / 297; }
  }

  & .wp-block-image figcaption {
    margin-block-start: var(--odstep-1);
    font-size: var(--tekst-14);
    line-height: var(--interlinia-14);
    color: var(--kolor-tekstu);
  }

  /* Separator poziomy */
  & hr, &:is(hr) {
    margin-block: var(--odstep-6);
    border: 0;
    border-top: 1px solid var(--kolor-linii);
  }

  /* Mobile (DS: Strona branży Mobile 5124:5891, 5353:7097): H2 26/36.4 Bold, bloki co 48,
     lead 16 Bold, zdjęcie 40 pod tekstem, kolumny w stos co 40, cytat 26/36.4 z odstępem 24 */
  @media (max-width: 639px) {
    & h2, &:is(h2) {
      font-size: var(--tekst-26);
      line-height: var(--interlinia-26);
      font-weight: var(--waga-gruba);
      margin-block-start: var(--odstep-6);
    }
    & .is-style-wstep, &:is(.is-style-wstep) {
      font-size: var(--tekst-16);
      line-height: var(--interlinia-16);
      margin-block-end: var(--odstep-6);
    }
    & .is-style-haslo, &:is(.is-style-haslo) { font-size: 1.375rem; }   /* 22 */
    & .wp-block-image, &:is(.wp-block-image) { margin: var(--odstep-5) 0 var(--odstep-6); }
    & .is-style-wyroznienie,
    & .is-style-wyroznienie-linia,
    & blockquote,
    & .dwie-kolumny,
    & .belka-zapowiedzi,
    &:is(.is-style-wyroznienie, .is-style-wyroznienie-linia, blockquote, .dwie-kolumny) { margin-block: var(--odstep-6); }
    & .dwie-kolumny, &:is(.dwie-kolumny) {
      grid-template-columns: none;
      gap: var(--odstep-5);
    }
    & .dwie-kolumny .wp-block-image { margin: 0 0 var(--odstep-2); }
    & .dwie-kolumny .wp-block-image img { aspect-ratio: 1; }
    & blockquote, &:is(blockquote),
    & .is-style-wyroznienie-linia, &:is(.is-style-wyroznienie-linia) {
      padding-left: calc(var(--odstep-3) - 0.25rem);
    }
    & blockquote p {
      font-size: var(--tekst-26);
      line-height: var(--interlinia-26);
    }
  }

  /* Bez odstępu nad pierwszym i pod ostatnim blokiem treści oraz pod elementami kolumn — odstęp
     od krawędzi daje kontener (karta artykułu, karta top visualu, Szare tło). Na końcu pliku, żeby
     wygrywało z odstępami bloków w regułach mobile (decyzje 2026-09-15, 2026-09-29). */
  & > :first-child { margin-block-start: 0; }
  & > :last-child,
  & .dwie-kolumny > * > :last-child { margin-block-end: 0; }
}

/* Metadane artykułu: autor, data publikacji, data modyfikacji */
.tresc-meta {
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  color: var(--kolor-tekstu-pomocniczy);
  margin-block: 0 var(--odstep-3);
}

/* Edytor wpisu: łam treści i tytułu 1060 jak karta artykułu (artykul.css). */
.editor-styles-wrapper.post-type-post :is(.is-root-container, .editor-visual-editor__post-title-wrapper) {
  max-width: 66.25rem;
  margin-inline: auto;
}

/* ---- Akcent w nagłówkach (atom A65, task01.38) ----
   Modyfikatory na fragmencie nagłówka (span), niezależne i łączone: .akcent = ExtraBold,
   .akcent-marki = kolor marki. Wg ramek FeuerDS „Baner 1" 7:6745 (akcent ExtraBold w kolorze
   marki) i „Baner 2" 7:6765 (akcent ExtraBold); większy stopień akcentu z ramek (36 przy 32)
   odrzucony — jeden stopień z kanonu (decyzja 2026-09-15). Hero (odmiana K26, task01.36) korzysta
   z tych modyfikatorów bez własnych klas. */
.akcent { font-weight: var(--waga-najgrubsza); }
.akcent-marki { color: var(--kolor-marki); }

/* Na tle czerwonym kolor marki znika — akcent w kolorze tekstu (doprojektowanie bez projektu
   w DS, rejestr spojnosc-designu.md). */
.tlo-czerwone .akcent-marki { color: inherit; }