/*
 * Registro Systems - warstwa wizualna motywu (etap 1).
 *
 * Naglowek i stopka sa na tym etapie przeniesione z makiety jako markup
 * doslowny (bloki wp:html) i noszą wlasne style inline - to swiadoma decyzja
 * etapu 1: najpierw cokolwiek ma sie wyswietlac 1:1, konwersja na bloki FSE
 * jest nastepnym krokiem.
 *
 * Dlatego resety typografii sa ZAKRESOWANE na .rs-chrome, a nie globalne -
 * globalny "h1,h2,p{margin:0}" rozjechalby odstepy tresci blokowej na stronach.
 */

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

body {
  font-family: var(--ff-body);
  font-size: var(--wp--preset--font-size--base);
  /* Makieta NIE deklaruje line-height na body - poszczegolne elementy ustawiaja
     go tam, gdzie ma znaczenie. Globalne 1.6 podwyzszalo kazdy element bez
     wlasnej deklaracji, co dawalo systematyczny przyrost wysokosci sekcji
     od +10 do +62px. Zmierzone porownaniem w przegladarce. */
  line-height: normal;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Makieta nie ma ani jednego podkreslenia linku - to decyzja projektowa.
   Kolor spoczynkowy to accent-dk, nie accent: #d1441a na tle --paper daje
   kontrast 4,09:1, czyli PONIZEJ progu 4,5:1 z WCAG 1.4.3, a #a4330f daje
   6,09:1. Akcent zostaje na stanie najechania, wiec roznica miedzy stanami
   jest zachowana. Tresc nie ma dzis ani jednego odnosnika poza przyciskami
   (zmierzone na szesciu podstronach), wiec zmiana nic nie przesuwa
   wizualnie - zamyka problem dla tekstu, ktory dopiero powstanie. */
a { color: var(--acc-dk); text-decoration: none; }
a:hover { color: var(--acc); }

button, input, select, textarea { font-family: inherit; }

/* Zaokraglenia i cienie sa w tym brandzie bledem, nie wariantem.
   Wyciecie kontrolek siedzi w theme.json; to jest siatka bezpieczenstwa. */
.wp-block-button__link, .wp-block-image img { border-radius: 0; }

/* Dostepnosc: widoczny focus. Makieta nie definiuje stanow focus wcale. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--rule-mid) solid var(--acc);
  outline-offset: var(--space-hair);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   Chrome witryny - naglowek i stopka przeniesione z makiety
   --------------------------------------------------------------- */

/* Przyklejenie siedzi na OPAKOWANIU czesci szablonu, nie na .rs-header.
   Rdzen owija czesc w <header class="wp-block-template-part"> dokladnie tak
   wysoki jak nagłówek - sticky na .rs-header nie mial wiec zadnej drogi
   i naglowek odjezdzal z ekranu. Opakowanie jest dzieckiem .wp-site-blocks,
   ktore ma wysokosc calej strony. Zalogowany redaktor: pod paskiem
   administratora, nie za nim. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 200;
}

.rs-header {
  background: var(--paper);
  border-bottom: var(--rule-mid) solid var(--ink);
}

/* Nawigacja: aktywna pozycja niesie podkreslenie akcentem - to jedyny
   wskaznik stanu w makiecie, wiec zostaje jako wzorzec dla reszty.
   aria-current nadaje SAM RDZEN (blocks/navigation-link.php), wiec motyw
   nie musi juz tego liczyc. */
.rs-header .wp-block-navigation a[aria-current="page"] {
  color: var(--ink);
  border-bottom: var(--rule-mid) solid var(--acc);
  padding-bottom: var(--rule-mid);
}

/* Znak slowny: kwadrat akcentu po lewej (brandbook 01 - 26 px w naglowku).
   Rysuje go pseudoelement, bo pusty blok tylko po to, zeby postawic kwadrat,
   bylby trescia bez tresci. */
.rs-logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-two-xs);
  color: var(--ink);
  white-space: nowrap;
}

.rs-logo a::before,
.rs-logo--footer::before {
  content: "";
  width: var(--wp--custom--logo--mark);
  height: var(--wp--custom--logo--mark);
  background: var(--acc);
  flex: none;
}

/* Znak w stopce jest mniejszy (brandbook 01: 26 px w naglowku, 24 w stopce)
   i nie jest odnosnikiem - uklad siedzi wiec na samym akapicie. */
.rs-logo--footer {
  display: flex;
  align-items: center;
  gap: var(--space-two-xs);
  white-space: nowrap;
}

.rs-logo--footer::before {
  width: var(--wp--custom--logo--mark-footer);
  height: var(--wp--custom--logo--mark-footer);
}

/* W stopce odnosnik ma kolor swojego akapitu - inaczej globalna regula
   nadalaby mu akcent na ciemnym tle. */
.rs-footer a { color: inherit; }

/* CEL DOTYKOWY NA KAZDEJ SZEROKOSCI. WCAG 2.2 (2.5.8, poziom AA) stawia
   granice na 24x24 px. Pozycje menu i odnosniki stopki mialy 23 px - o jeden
   piksel za malo. Powiekszamy POLE, nie pismo: wysokosc wiersza zostaje,
   a odnosnik dostaje minimalna wysokosc i wyrownanie do srodka. */
.rs-header .wp-block-navigation-item__content,
.rs-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--target--tap);
}

.rs-logo strong { font-weight: 700; }

/* Kotwice sekcji (#pilotaz, #kalkulator...) laduja POD przyklejonym
   naglowkiem, a nie za nim. Ta sama wartosc co odstep przyklejonego spisu
   tresci. Ponizej 782 px naglowek jest statyczny - odstep niepotrzebny. */
.rs-section[id] {
  scroll-margin-top: var(--sticky-top);
}

/* Ponizej 984 px menu zawija sie i naglowek rosnie z 75 do 126 px
   (zmierzone co 2 px od 1440 do 760). Przyklejony spis tresci na 104 px
   wchodzilby wtedy 22 px pod naglowek. Odstep pod naglowkiem zostaje ten
   sam co w makiecie: 104 - 75 = 29 px, wiec 126 + 29. Ponizej 782 px spis
   nie jest przyklejony, a naglowek jest statyczny. */
@media (min-width: 782px) and (max-width: 983px) {
  :root { --sticky-top: var(--wp--custom--sticky--top-wrapped); }
}

/* ---------------------------------------------------------------
   Warstwa mobilna
   UWAGA: makieta ma ZERO @media, zero clamp() i zero minmax() w 11 plikach.
   Responsywnosc trzeba zaprojektowac, nie przepisac. Ponizej minimum, zeby
   strona nie przewijala sie poziomo - pelna warstwa to osobny etap.
   --------------------------------------------------------------- */

/* DWA PROGI, NIE PIEC. Makieta zna 782 px (siatki skladaja sie do jednej
   kolumny) i 480 px (margines boczny). Tyle samo ma rdzen: kolumny skladaja
   sie w @media (max-width:781px), a DEFAULT_VIEWPORT_BREAKPOINTS to 480/782.
   Wczesniej motyw mial wlasne 767 i 1024 - stopka miala przez to stan
   dwukolumnowy, ktorego makieta nie zna, a w pasmie 481-767 px margines
   boczny schodzil do 20 px o 287 px za wczesnie. */
@media (max-width: 781px) {
  .wp-site-blocks > header.wp-block-template-part { position: static; }
  .rs-section[id] { scroll-margin-top: 0; }
}

@media (max-width: 480px) {
  .rs-container { padding-inline: var(--container-pad-narrow); }
}

/* ---------------------------------------------------------------
   CELE DOTYKOWE NA MALYM EKRANIE

   WCAG 2.2 (2.5.8 Target Size) stawia dolna granice na 44x44 px.
   Zmierzone na wdrozonej stronie przy 390 px: odnosniki podkreslone
   maja 22 px wysokosci, "wstecz" w panelu pokazowym 41 px, a odnosniki
   w pasku rejestracji 24 i 31 px.

   POWIEKSZAMY OBSZAR KLIKALNY, NIE ELEMENT. Dolozenie odstepu pionowego
   odsunelo by kreske od tekstu - a to ona jest tu calym znakiem, ze to
   odnosnik. Warstwa ::after rozciaga pole trafienia, nie ruszajac rysunku.
   --------------------------------------------------------------- */

@media (max-width: 781px) {
  .wp-block-button.is-style-underline .wp-block-button__link,
  .wp-block-button.is-style-underline-light .wp-block-button__link {
    position: relative;
  }

  /* Wysokosc pola trafienia podajemy WPROST, a nie jako odstep od krawedzi.
     Odnosniki maja rozna wlasna wysokosc (20-22 px zaleznie od pisma), wiec
     staly odstep dawal raz 44 px, raz 42 - a to juz ponizej progu. */
  .wp-block-button.is-style-underline .wp-block-button__link::after,
  .wp-block-button.is-style-underline-light .wp-block-button__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--wp--custom--target--min);
    transform: translateY(-50%);
  }

  /* Pasek rejestracji ma wlasny chrome, wiec jego odnosniki nie przechodza
     przez core/button i potrzebuja tej samej korekty osobno. */
  .rs-header a,
  .rs-footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--wp--custom--target--min);
  }
}