/*
 * Warstwa TRESCI - wszystko, co stoi w tresci wpisu, a nie w chrome motywu.
 *
 * DLACZEGO OSOBNY PLIK: kanwa edytora to iframe z wlasnym dokumentem i arkusz
 * frontu (theme.css) do niej NIE TRAFIA. Redaktor skladal wiec strony bez
 * rysunku ekranow makiet i bez kwadracika akcentu, czyli widzial co innego
 * niz odwiedzajacy. Ten plik jest kolejkowany na froncie I rejestrowany przez
 * add_editor_style() - jest bezpieczny w kanwie, bo dotyka wylacznie klas
 * wystepujacych w tresci.
 *
 * Czego tu NIE MA: naglowek, stopka, nawigacja, warstwa mobilna i stany
 * globalne - to chrome motywu, ktory w kanwie nie wystepuje.
 */

/* Kwadracik akcentu przy nadtytule. Dziesiec na dziesiec pikseli, bez
   zaokraglenia - w tym designie linie i kwadraty zastepuja ikony.
   Zmierzone w naglowku strony glownej. */
.rs-dot {
  width: var(--wp--custom--logo--dot);
  height: var(--wp--custom--logo--dot);
  background: var(--acc);
}

/* ---------------------------------------------------------------
   Tresc przeniesiona doslownie z makiety (etap 1)
   
   Reguly z blokow <style> makiety, ZAKRESOWANE na .rs-design.
   Globalnie rozjechalyby odstepy tresci blokowej - a wlasnie na bloki
   bedziemy te sekcje przepisywac. Gdy sekcja zostanie przepisana na
   bloki Gutenberga, wychodzi spod tego wrappera i dostaje normalne
   zachowanie WordPressa.
   --------------------------------------------------------------- */

.rs-design h1,
.rs-design h2,
.rs-design h3,
.rs-design h4,
.rs-design p { margin: 0; }

/* theme.json ustawia naglowkom line-height 1.1 - sluszne dla przyszlej tresci
   blokowej, ale makieta tego nie deklaruje i ustawia odstep tam, gdzie ma
   znaczenie. Bez tej neutralizacji cztery naglowki w FAQ mialy 14px zamiast
   22px, co dawalo sekcje krotsza o 30px. Zmierzone w przegladarce. */
.rs-design h1,
.rs-design h2,
.rs-design h3,
.rs-design h4,
.rs-design h5,
.rs-design h6 { line-height: normal; }

/* Ten sam powod, drugi rozjazd: theme.json daje naglowkom krój nagłówkowy
   (Archivo Narrow), a makieta ustawia go WYLACZNIE tam, gdzie naglowek nalezy
   do marki - inline, w atrybucie style. Naglowek wewnatrz makiety ekranu
   aplikacji zostaje w kroju tekstowym, bo udaje interfejs cudzego programu.
   Inline wygrywa z ta regula, wiec 15 naglowkow z wlasnym krojem sie nie
   rusza; dotyczy DOKLADNIE 5 naglowkow: czterech w ekranach systemu na
   /produkt/ i jednego w tym samym kreatorze na stronie glownej.
   Zmierzone w przegladarce na wszystkich szesciu podstronach. */
.rs-design h1,
.rs-design h2,
.rs-design h3,
.rs-design h4,
.rs-design h5,
.rs-design h6 { font-family: inherit; }

/* Akordeon FAQ: natywne details/summary, glif "+" obracany o 45 stopni.
   Zero JavaScriptu - to dzialalo w makiecie i dziala tutaj. */
.rs-design summary::-webkit-details-marker { display: none; }
.rs-design summary::marker { content: ""; }
.rs-design details[open] .fq { transform: rotate(45deg); }

.rs-design button,
.rs-design input,
.rs-design select,
.rs-design label { font-family: inherit; }

.rs-design input:not([type=range]),
.rs-design select {
  font-size: var(--wp--preset--font-size--base);
  padding: var(--space-xs);
  border: var(--rule-thin) solid var(--ink);
  background: var(--wp--preset--color--white);
  color: var(--ink);
  width: 100%;
  border-radius: 0;
}
/* Ognisko: TYLKO kolor ramki to za slaby wskaznik (obie barwy sa ciemne),
   wiec globalna regula :focus-visible zostaje - tu doklada sie kolor ramki. */
.rs-design input:focus,
.rs-design select:focus { border-color: var(--acc); }
.rs-design input::placeholder { color: var(--muted); }

/* Suwaki kalkulatora zwrotu z inwestycji */
.rs-design input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--space-three-xs);
  background: var(--ink2);
  accent-color: var(--acc);
  padding: 0;
  border: 0;
}
.rs-design input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--space-md); height: var(--space-md);
  background: var(--acc); border: 0; cursor: pointer;
}
.rs-design input[type=range]::-moz-range-thumb {
  width: var(--space-md); height: var(--space-md);
  background: var(--acc); border: 0; border-radius: 0; cursor: pointer;
}
.rs-design input[type=range]::-moz-range-track { height: var(--space-three-xs); background: var(--ink2); }

/* Etap 1: elementy interaktywne makiety sa jeszcze statyczne.
   Nie udajemy, ze reaguja - kursor zostaje domyslny do czasu konwersji. */
.rs-design [style*="cursor:pointer"]:not(a):not(summary) { cursor: default; }

/* ---------------------------------------------------------------
   image-slot - placeholder obrazu z makiety
   
   Claude Design uzywa wlasnego elementu <image-slot> jako miejsca na
   zdjecie. Jego runtime nie jest czescia motywu, wiec bez tych regul
   element zapada sie do wysokosci 0 i rozjezdza siatke obok (zmierzone:
   400px -> 0px, sasiedni akapit gubil jedna linie).
   
   W CALEJ makiecie jest DOKLADNIE JEDEN taki slot: zdjecie zalozycieli
   na stronie "O nas". To jedyne miejsce w projekcie, gdzie design
   przewiduje prawdziwa fotografie.
   
   Wartosci odtworzone z image-slot.js: aspect-ratio 3/2, tlo #f2f1ef,
   obramowanie 1.5px dashed, tekst #6e6c66.
   --------------------------------------------------------------- */

.rs-design image-slot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--panel);
  border: var(--rule-thin) dashed var(--muted);
  color: var(--muted);
}

.rs-design image-slot::after {
  content: attr(placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-ui);
  color: inherit;
}