/* ══════════════════════════════════════════════════════════════
   SAMA MATCHA — stopka
   blocksy-child/assets/css/sm-footer.css
   Enqueue: PO sm-base (dziedziczy tokeny i .sm-btn)

   ZASADA: zero surowych hexów, zero surowych px odstępów.

   TOKENY „NA CIEMNYM" — dlaczego lokalnie, a nie globalnie.
   Pakiet F nigdy nie wjechał: w repo nie ma ani jednego `--on-dark*`,
   docs/important-audit.md zna pakiety B+C+D, E, G, H, I, J — F nie ma.
   Jedyny wcześniejszy precedens ciemnej powierzchni (mini-koszyk,
   sama-refactor.css § dropdown) też trzyma tokeny lokalnie, jako `--mc-*`
   na `.ct-cart-content`. Idziemy tą samą drogą: pięć zmiennych w zasięgu
   `.sm-footer`, wyprowadzonych z `--c-cream` i `--c-ink`. Gdy Pakiet F
   wprowadzi zestaw globalny, ten blok znika jednym cięciem — nazwy zostały
   dobrane tak, żeby podmiana była zamianą wartości, nie przepisywaniem reguł.

   Krotności cream nie są uznaniowe — wynikają z pomiaru kontrastu na tle
   --c-ink (tabela w podsumowaniu Pakietu K):
     muted 64%  → 6.5:1   tekst drugorzędny
     faint 54%  → 5.0:1   tekst najcichszy (dostał +12 pp wobec projektu:
                          42% dawało 3.6:1, czyli poniżej progu 4.5:1)
     field 38%  → 3.2:1   krawędź pola formularza (próg 3:1 dla interfejsu)
     line  16%  → 1.6:1   hairline dekoracyjny, nie niesie informacji
   ══════════════════════════════════════════════════════════════ */

.sm-footer {
  --on-dark:        var(--c-cream);
  --on-dark-muted:  color-mix(in srgb, var(--c-cream) 64%, transparent);
  --on-dark-faint:  color-mix(in srgb, var(--c-cream) 54%, transparent);
  --on-dark-field:  color-mix(in srgb, var(--c-cream) 38%, transparent);
  --on-dark-line:   color-mix(in srgb, var(--c-cream) 16%, transparent);

  background: var(--c-ink);
  color: var(--on-dark);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

/* Reset odstępów w `:where()`, nie na `.sm-footer p` — dokładnie ten sam powód
 * co przy kolorze niżej, tylko druga własność.
 *
 * `.sm-footer p` stoi na (0,1,1) i wygrywa z każdą klasą komponentu z tego pliku,
 * bo te stoją na (0,1,0). Reset zjadał więc `margin: var(--sp-3) auto 0`
 * z `.sm-footer__adr` (nota o pozasądowym rozpatrywaniu reklamacji traciła
 * marginesy `auto`, czyli wyśrodkowanie pudełka, i odstęp górny) oraz
 * `margin-top: var(--sp-1)` z `.sm-footer__copy`. Zmierzone przed poprawką na
 * 1440 px: pudełko ADR miało 640 px szerokości i 650 px wolnego miejsca po
 * PRAWEJ stronie — tekst był wyśrodkowany, ale w pudełku dociśniętym do lewej.
 *
 * `:where()` zeruje swoistość selektorów w nawiasie, więc reguła spada na (0,1,0)
 * — remis z klasami komponentu, a przy remisie decyduje kolejność: reset jest tu,
 * na górze pliku, klasy niżej, więc komponent wygrywa. Wobec `p { margin: 0 }`
 * z main.min.css Blocksy (0,0,1) reset nadal wygrywa. Zero `!important`. */
.sm-footer :where(p, h2, ul) { margin: 0; padding: 0; }
.sm-footer ul { list-style: none; }
.sm-footer svg { display: block; }

/* Przywrócenie dziedziczenia koloru — bez tego stopka miejscami znikała.
 *
 * sama-refactor.css:51 deklaruje `p, li { color: var(--sm-ink) }`. Deklaracja na
 * elemencie bije dziedziczenie z `.sm-footer` niezależnie od kolejności arkuszy,
 * więc `<p class="sm-footer__mark">` i pozycje pasu faktów dostawały ink na ink:
 * zmierzone 1.00:1, czyli tekst nie do odczytania. Pozycje z własnym `color`
 * (`.sm-footer__tag`, `.sm-footer__lead`) były w porządku, co maskowało problem.
 *
 * `:where()`, nie `:is()`: `:where()` nie wnosi swoistości, więc reguła stoi na
 * (0,1,0) — wyżej niż (0,0,1) z refaktoru, ale nie wyżej niż własne klasy stopki.
 * Z `:is()` byłoby (0,1,1) i reset zjadłby `.sm-footer__tag` razem z resztą
 * wyciszonych akapitów: kontrast przechodził, tylko cała hierarchia stawała się
 * jednym pełnym creamem (zmierzone: 13.85:1 wszędzie, zamiast 6.5 i 5.0).
 * To zwykły wzorzec „reset przed komponentem", dlatego reguła stoi na górze pliku.
 *
 * `inherit`, a nie konkretna barwa: każdy `<p>` i `<li>` bierze kolor swojego
 * kontenera, więc pas faktów zostaje wyciszony, marka pełna, a przyszły akapit
 * w stopce nie wymaga dopisywania wyjątku. */
.sm-footer :where(p, li) { color: inherit; }

/* Krawędź treści stopki = krawędź treści strony.
 *
 * Zmierzone na 1440 px: `.ct-container` Blocksy ma 1290 px i zaczyna się na 75 px,
 * a `--container` (1200) plus --sp-3 dopełnienia stawiał tekst stopki na 136 px.
 * 61 px uskoku między ostatnią sekcją strony a stopką widać. Na 390 px różnica
 * była mniejsza, ale też realna: 19.5 px treści strony wobec 16 px stopki.
 *
 * Dlatego geometrię bierzemy z motywu, a nie z własnego założenia — te same dwie
 * zmienne, na których stoi `.ct-container`. Gdy ktoś zmieni szerokość kontenera
 * w Customizerze, stopka pojedzie za nim. Fallbacki zostają na wypadek zmiany
 * nazw po stronie Blocksy: wtedy wracamy do tokenu projektu.
 * Nazwy zweryfikowane w renderowanym DOM — patrz docs/blocksy-selectors.md § K. */
.sm-footer__inner {
  width: var(--theme-container-width, 100%);
  max-width: var(--theme-normal-container-max-width, var(--container));
  margin-inline: auto;
  padding: var(--section-y) 0 var(--sp-4);
}

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

.sm-footer a {
  color: inherit; text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
/* Globalny focus z sm-base celuje w `--c-moss` — na ink to 2.5:1, czyli
   pierścień, którego nie widać. Na ciemnym obowiązuje cream. Selektor obejmuje
   też pole i przycisk, nie tylko linki: klawiatura chodzi po wszystkich trzech. */
.sm-footer :is(a, button, input):focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── GÓRA ───────────────────────────────────────────────── */
.sm-footer__top {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--on-dark-line);
}
@media (min-width: 900px) {
  .sm-footer__top { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

.sm-footer__mark {
  font: 500 var(--fs-h3)/1 var(--font-display);
  letter-spacing: 0.14em;
  margin-bottom: var(--sp-3);
}
.sm-footer__tag {
  max-width: 44ch;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

.sm-footer__facts {
  display: flex; flex-wrap: wrap;
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
}
.sm-footer__facts li {
  position: relative;
  padding-right: var(--sp-3);
  margin-right: var(--sp-3);
  white-space: nowrap;
}
.sm-footer__facts li:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 1px; height: 0.85em; transform: translateY(-50%);
  background: var(--on-dark-line);
}
.sm-footer__facts li:last-child { padding-right: 0; margin-right: 0; }
/* wc_price() wnosi własne `<span class="amount">`; w pasie faktów to tylko
   tekst, więc kwota dziedziczy stopień i barwę z listy. */
.sm-footer__facts .woocommerce-Price-amount { font-size: inherit; color: inherit; }

/* ── NEWSLETTER ─────────────────────────────────────────── */
.sm-footer__h {
  font: 600 var(--fs-overline)/1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--sp-3);
}
.sm-footer__lead {
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
  margin-bottom: var(--sp-3);
  max-width: 40ch;
}

.sm-footer__form { position: relative; }

/* Pułapka na boty — poza ekranem (nie display:none). 1 px to wymóg techniki. */
.sm-footer__form .sm-form__pulapka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sm-footer__field { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* POLE E-MAIL — dlaczego selektory z przedrostkiem `.sm-footer`.
 *
 * Blocksy stroi pola formularzy selektorem `select, textarea, input:is([type="url"],
 * [type="tel"], …, [type="email"], …)` (static/bundle/main.min.css). Gałąź `input:is([type=…])`
 * ma swoistość (0,1,1), więc bije samą klasę (0,1,0) NIEZALEŻNIE od kolejności arkuszy —
 * a sm-footer.css jedzie po Blocksy (link 16 z 18). Zmierzone skutki pierwszej wersji:
 *   • tekst wpisywany: rgb(45,45,45) z `--theme-form-text-initial-color`, na ink 1.3:1,
 *   • krawędź: prawie cream z `--theme-form-field-border-color`, nie nasz hairline,
 *   • placeholder: `color: inherit; opacity: .7`, czyli jeszcze ciemniej od tekstu.
 * Pole wyglądało jak puste okno bez zawartości; na zrzucie podpowiedź była ledwo widoczna.
 *
 * Przedrostek daje (0,2,0) i (0,2,1) — wygrywa bez !important i bez podnoszenia
 * swoistości gdziekolwiek poza tym jednym komponentem.
 *
 * Doktryna elewacji: powierzchnia dostaje kontrast tła ALBO hairline — nigdy dwa naraz.
 * Pole ma więc samą krawędź, bez własnego jaśniejszego prostokąta. Krawędź jest
 * jedynym nośnikiem informacji „tu się wpisuje", dlatego 38% cream (3.2:1),
 * a nie dekoracyjne 16%. */
.sm-footer .sm-footer__input {
  flex: 1 1 200px; min-width: 0;
  height: 48px; padding-inline: var(--sp-3);
  background: transparent;
  border: 1px solid var(--on-dark-field);
  border-radius: var(--r-sm);
  color: var(--on-dark);
  font: 400 var(--fs-small)/1 var(--font-sans);
  transition: border-color var(--t-fast) var(--ease);
}
/* `opacity: 1` nie jest zbędne: reguła Blocksy dokłada placeholderom `opacity: .7`.
   Sam kolor by nie wystarczył — 54% creamu przez 0.7 to ~38%, czyli 3.3:1. */
.sm-footer .sm-footer__input::placeholder { color: var(--on-dark-faint); opacity: 1; }
.sm-footer .sm-footer__input:focus { outline: none; border-color: var(--on-dark); }

/* Kolor tekstu trzeba powtórzyć per stan, bo Blocksy deklaruje go dla każdego
   stanu OSOBNO. Reguła `…, input:is([type="email"], …):focus, …` z main.min.css
   ma (0,2,1) i bije `.sm-footer .sm-footer__input` (0,2,0), więc w spoczynku
   tekst był creamowy, a w trakcie pisania wracał do
   `--theme-form-text-focus-color`. Zmierzone przed poprawką: rgb(45,45,45) na
   tle rgb(22,40,29) — 1.34:1, czyli tekst niewidoczny dokładnie wtedy, gdy jest
   wpisywany. Dwie klasy plus pseudoklasa dają (0,3,0) i wygrywają kolumną klas
   — bez !important i bez podnoszenia swoistości poza tym komponentem.
   `:disabled` jest tu na wyrost: MailerLite blokuje pole na czas wysyłki. */
.sm-footer .sm-footer__input:hover,
.sm-footer .sm-footer__input:focus,
.sm-footer .sm-footer__input:disabled {
  color: var(--on-dark);
}

/* Autouzupełnienie to nie cudza reguła autorska, a UA z `!important`:
   `input:-internal-autofill-selected { background-color: light-dark(rgb(232,240,254), …)
   !important; color: fieldtext !important }`. Origin UA z `!important` stoi
   w kaskadzie WYŻEJ niż autorskie `!important`, więc kolorem tego nie wygramy
   (i nie próbujemy — licznik !important zostaje na 91). Dwie drogi obok:
     • tekst malujemy `-webkit-text-fill-color`, którego UA nie deklaruje,
       a które przy rysowaniu glifów bierze górę nad `color`,
     • tło zatrzymujemy przejściem — przejścia mają w kaskadzie priorytet nawet
       nad `!important` UA, a interpolacja rozpisana na 99999 s nie rusza się
       z wartości wyjściowej w żadnym realnym czasie sesji.
   Zmierzone przed poprawką: tekst rgb(0,0,0) na tle rgb(232,240,254) —
   pole po autouzupełnieniu było jasnym prostokątem wyrwanym z ciemnej stopki.
   Dwie reguły, nie jedna lista selektorów: nieznana pseudoklasa unieważnia całą
   regułę, więc `:-webkit-autofill` (Chrome, Safari) i standardowe `:autofill`
   (Firefox) muszą stać osobno. */
.sm-footer .sm-footer__input:-webkit-autofill,
.sm-footer .sm-footer__input:-webkit-autofill:hover,
.sm-footer .sm-footer__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-dark);
  caret-color: var(--on-dark);
  transition: background-color 99999s var(--ease), border-color var(--t-fast) var(--ease);
}

.sm-footer .sm-footer__input:autofill,
.sm-footer .sm-footer__input:autofill:hover,
.sm-footer .sm-footer__input:autofill:focus {
  -webkit-text-fill-color: var(--on-dark);
  caret-color: var(--on-dark);
  transition: background-color 99999s var(--ease), border-color var(--t-fast) var(--ease);
}

/* Wariant .sm-btn na ciemnym tle. `transform: none` nie jest ozdobą:
   sama-refactor.css § 1 daje `.sm-btn:hover { transform: translateY(-2px) }`,
   a doktryna mówi, że przycisk nie przesuwa się na hover. Ten arkusz jedzie
   po sama-refactor, więc wystarcza swoistość równa — celowo nie podnoszona. */
.sm-btn--light {
  background: var(--c-cream);
  color: var(--c-ink);
  border-color: var(--c-cream);
}
.sm-btn--light:hover { background: var(--c-paper); transform: none; }
.sm-btn--light:active { background: var(--c-paper); transform: none; }

.sm-footer__consent {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-caption); line-height: 1.55;
  color: var(--on-dark-muted); cursor: pointer;
}
/* accent-color: moss daje na ink 2.5:1 — stan „zaznaczone" byłby nieczytelny.
   Sage to jasny członek palety, ten sam, którym ciemny mini-koszyk pisze tekst
   drugorzędny: 7.9:1 na ink, a znacznik rysuje się ciemny. */
.sm-footer__consent input {
  flex: 0 0 auto; margin-top: 3px;
  width: 1rem; height: 1rem;
  accent-color: var(--c-sage); cursor: pointer;
}
.sm-footer__consent a {
  color: var(--on-dark);
  border-bottom: 1px solid var(--on-dark-line);
}
.sm-footer__consent a:hover { border-color: var(--on-dark); }

/* Komunikat walidacji bez czerwieni — ta sama mowa co przy kasie (Pakiet H:
   `.sm-field-error` ma `color: var(--c-ink)`, nie hue ostrzegawczy). Znaczenie
   niosą słowa, hierarchię pełny kontrast i grubość. Stan „wysyłanie" zostaje
   cichy, bo nie wymaga uwagi. */
.sm-footer__status {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
  min-height: 1.2em;              /* rezerwacja miejsca — zero CLS */
}
.sm-footer__status.is-ok    { color: var(--on-dark); }
.sm-footer__status.is-error { color: var(--on-dark); font-weight: 500; }

/* ── KOLUMNY ────────────────────────────────────────────── */
.sm-footer__cols {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--on-dark-line);
}
@media (min-width: 560px) { .sm-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .sm-footer__cols { grid-template-columns: repeat(4, 1fr); } }

.sm-footer__col li { margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.sm-footer__col li:last-child { margin-bottom: 0; }
.sm-footer__col a { color: var(--on-dark-muted); }
.sm-footer__col a:hover { color: var(--on-dark); }

.sm-footer__hours {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
}
.sm-footer__social {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
}
.sm-footer__social:hover { color: var(--on-dark); }
.sm-footer__social svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.sm-footer__social-dot { fill: currentColor; stroke: none; }

/* ── PŁATNOŚCI I DOSTAWA ────────────────────────────────── */
.sm-footer__pay {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--on-dark-line);
}
@media (min-width: 720px) {
  .sm-footer__pay { grid-template-columns: auto 1fr; gap: var(--sp-5); }
}
.sm-footer__pay-group {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
}
.sm-footer__pay-label {
  flex: 0 0 auto;
  font: 500 var(--fs-overline)/1 var(--font-sans);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--on-dark-faint);
}
.sm-footer__pay-group ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sm-footer__pay-group li {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
  white-space: nowrap;
}

/* ── DÓŁ ────────────────────────────────────────────────── */
.sm-footer__legal { padding-top: var(--sp-4); text-align: center; }
.sm-footer__entity {
  font-size: var(--fs-caption);
  color: var(--on-dark-muted);
}
.sm-footer__copy {
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--on-dark-faint);
}
.sm-footer__adr {
  margin: var(--sp-3) auto 0;
  max-width: 78ch;
  font-size: var(--fs-caption); line-height: 1.6;
  color: var(--on-dark-faint);
}
.sm-footer__adr a {
  color: var(--on-dark-muted);
  border-bottom: 1px solid var(--on-dark-line);
}
.sm-footer__adr a:hover { color: var(--on-dark); border-color: var(--on-dark); }