/* ============================================================
   Chwilki — warstwa bazowa pod projekt z Claude Design.

   Projekt trzyma cala stylistyke w atrybutach style="", wiec ten plik robi
   tylko trzy rzeczy: reset, obsluge stanow (hidden / hover) i te drobiazgi,
   ktorych nie da sie zapisac inline (focus, selection, media queries).

   Nie dopisuj tu stylow wizualnych - one maja zostac w projekcie, zeby
   ponowny import (node scripts/import-design.mjs) niczego nie zgubil.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Karla, Helvetica, Arial, sans-serif;
  color: #3a3733;
  background: #efe7da;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* data-if / data-for chowaja elementy przez ten atrybut */
[hidden] { display: none !important; }

/* Szablony petli nie moga migac przed uruchomieniem runtime'u. */
[data-for] > [data-tpl] { display: none; }

input, textarea, select { font-family: inherit; color: inherit; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #8a6e14;
  outline-offset: 2px;
}
::selection { background: #e8c7c8; color: #22201e; }

/* Kursor na wszystkim, co nawiguje. */
[data-go], [data-on-click] { cursor: pointer; }

/* Naglowek serwisu jest kopiowany z landingu na kazda strone, ale projekt daje mu
   22 px paddingu, a kreator potrzebowal ciasniejszego. Efekt: naglowek "skakal" przy
   przejsciu miedzy stronami. Jedna wysokosc dla wszystkich - i nie ma co poprawiac
   osobno w kazdym pliku. */
body > div > header {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Komunikaty walidacji i potwierdzen — jedyny element, ktorego projekt nie ma. */
.dc-errors {
  background: #fdf0ed;
  border-left: 3px solid #b4342a;
  color: #7d2612;
  padding: 13px 17px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  border-radius: 4px;
}
.dc-errors ul { margin: 6px 0 0; padding-left: 18px; }
.dc-notice {
  background: #f1f6ef;
  border-left: 3px solid #4d7c4a;
  color: #1f4a1c;
  padding: 13px 17px;
  font-size: 14.5px;
  line-height: 1.55;
  border-radius: 4px;
}
.dc-busy { opacity: 0.55; pointer-events: none; }

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