/**
 * footer.css — stopka.
 *
 * Wymaga tokens.css i base.css wczytanych wcześniej.
 * Każdy kolor, odstęp, rozmiar i promień pochodzi z var(--dc-*).
 *
 * Układ z makiety: cztery kolumny na flexie z własnymi proporcjami
 * (marka szeroka, dwie wąskie kolumny odnośników, newsletter szeroki),
 * zwijające się bez media queries — dokładnie tak, jak robi to makieta.
 */

/* ==========================================================================
   1. RAMA
   ========================================================================== */
.dc-footer {
  position: relative;
  z-index: var(--dc-z-base);
  background-color: var(--dc-surface-glass);
  border-top: var(--dc-border) solid var(--dc-border-subtle);
  -webkit-backdrop-filter: var(--dc-blur-xl);
  backdrop-filter: var(--dc-blur-xl);
}

.dc-footer__inner {
  width: 100%;
  max-width: var(--dc-container);
  margin-inline: auto;
  /* Oddech po bokach płynnie, bez media query — patrz header.css. */
  padding: var(--dc-space-56) clamp(var(--dc-space-16), 4vw, var(--dc-space-32)) var(--dc-space-28);
}

.dc-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-40) var(--dc-space-48);
}

/* ==========================================================================
   2. KOLUMNA MARKI
   flex: <grow> <shrink> <basis> — proporcje z makiety. Kolumna marki rośnie
   1,6x szybciej niż kolumna odnośników, newsletter 1,8x. min-width pilnuje,
   żeby przy zwijaniu żadna nie zrobiła się węższa niż czytelna.
   ========================================================================== */
.dc-footer__brand {
  flex: 1.6 1 var(--dc-grid-min-md);
  min-width: var(--dc-grid-min-sm);
}

.dc-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--dc-space-20);
  text-decoration: none;
}

.dc-footer__logo img {
  height: var(--dc-space-32);
  width: auto;
}

.dc-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-8);
  margin-bottom: var(--dc-space-22);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-md);
  font-style: normal; /* <address> jest domyślnie kursywą. */
  line-height: var(--dc-leading-normal);
}

.dc-footer__contact-link {
  color: var(--dc-text);
  font-weight: var(--dc-weight-bold);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

/* Najazd na --dc-accent-strong jak a:hover w base.css — do partii 3 audytu
   stopka jako jedyna szła na --dc-accent-text (design-audit.md, B.3). */
.dc-footer__contact-link:hover,
.dc-footer__contact-link:focus-visible {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   3. IKONY SPOŁECZNOŚCIOWE
   ========================================================================== */
.dc-footer__socials {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 40x40 px — minimalny cel dotykowy z WCAG 2.5.8 to 24x24 px,
     a zalecany przez wytyczne platform mobilnych 44x44 px. */
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-subtle);
  color: var(--dc-text-secondary);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Bez uniesienia — odwrócenie koloru jest całą odpowiedzią
   (design-audit.md, C.2). */
.dc-footer__social:hover,
.dc-footer__social:focus-visible {
  background-color: var(--dc-surface-inverse);
  color: var(--dc-bg);
}

/* Kliknięcie = nacisk (ranga 4, przycisk ikonowy — design-audit.md, C.1):
   zmniejszenie plus cień wciśnięcia. Koło ma tło (szkło w spoczynku,
   odwrócone na najeździe), więc cień wewnętrzny jest widoczny. */
.dc-footer__social:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* ==========================================================================
   4. KOLUMNY ODNOŚNIKÓW
   Menu z kokpitu jest dwupoziomowe: pozycja nadrzędna to nagłówek kolumny,
   jej dzieci to odnośniki. Renderuje je DC_Footer_Menu_Walker w functions.php.
   ========================================================================== */
.dc-footer__nav {
  display: contents;
}

/* display: contents na <nav> sprawia, że jego <ul> staje się bezpośrednim
   dzieckiem flexa .dc-footer__top. Dzięki temu kolumny menu ustawiają się
   w tym samym rzędzie co marka i newsletter, a <nav> zostaje w drzewie
   dostępności jako punkt orientacyjny dla czytników ekranu. */
.dc-footer__menu {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kolumna odnośników jest WĄSKA — w makiecie bazuje na 130 px, nie na
   szerokości kolumny tekstu. Tokeny nie mają stopnia w okolicy 130 px
   (skala odstępów kończy się na 80 px), więc składamy go z dwóch tokenów:
   80 + 48 = 128 px. Bez tego cztery kolumny nie mieszczą się w 1240 px
   i newsletter spada do drugiego rzędu. */
.dc-footer__column {
  flex: 1 1 calc(var(--dc-space-80) + var(--dc-space-48));
  min-width: calc(var(--dc-space-80) + var(--dc-space-40));
  max-width: var(--dc-measure-xs);
}

.dc-footer__heading {
  display: block;
  margin-bottom: var(--dc-space-18);
  color: var(--dc-text);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

.dc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-footer__link {
  color: var(--dc-text-muted);
  font-size: var(--dc-text-md);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-footer__link:hover,
.dc-footer__link:focus-visible {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   5. NEWSLETTER
   ========================================================================== */
.dc-footer__newsletter {
  flex: 1.8 1 var(--dc-grid-min-md);
  min-width: var(--dc-grid-min-sm);
}

.dc-footer__newsletter-title {
  margin-bottom: var(--dc-space-8);
  color: var(--dc-text);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-snug);
  line-height: var(--dc-leading-tight);
}

.dc-footer__newsletter-lead {
  margin-bottom: var(--dc-space-16);
  max-width: var(--dc-measure-md);
  color: var(--dc-text-subtle);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
}

/* Pole i przycisk w jednej ramce — przycisk siedzi wewnątrz obramowania. */
.dc-footer__form {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
  max-width: var(--dc-measure-md);
  padding: var(--dc-space-4) var(--dc-space-4) var(--dc-space-4) var(--dc-space-16);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-line);
}

/* Ramka podświetla się, gdy fokus jest na polu w środku. Bez tego pierścień
   fokusu rysowałby się wokół samego <input>, wewnątrz ramki — mylące.
   Jeden fokus dla pól (design-audit.md, C.7; partia 6): krawędź --dc-accent
   plus 1 px złotego pierścienia, razem 2 px — wzorzec z ramki ai-assistant.
   Do partii 6 stopka miała 1 px --dc-accent-strong bez pierścienia, jako
   jedyna z trzech ramek. */
.dc-footer__form:focus-within {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

/* BŁĄD — ta sama ramka, kolor --dc-danger (design-audit.md, C.7; partia 6).
   Warunek to :has(): pole z niepoprawną wartością po interakcji użytkownika
   (:user-invalid — walidacja natywna) albo z aria-invalid="true" (skrypt).
   Stoi PO :focus-within przy tej samej specyficzności, więc błąd jest
   widoczny także w trakcie pisania. */
.dc-footer__form:has(:user-invalid, [aria-invalid='true']) {
  border-color: var(--dc-danger);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-danger);
}

/* Tekst błędu: 12 px w --dc-danger (C.7). Treść jest stała (jeden warunek:
   adres e-mail), więc pokazuje go sam CSS przy :user-invalid pola — bez
   skryptu. Ukryty przez display, nie opacity (reguła 11); role="alert"
   w znaczniku sprawia, że pojawienie się jest ogłaszane. */
.dc-footer__error {
  display: none;
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
  color: var(--dc-danger);
}

.dc-footer__form:has(:user-invalid, [aria-invalid='true']) + .dc-footer__error {
  display: block;
}

.dc-footer__input {
  flex: 1;
  min-width: 0;
  padding-block: var(--dc-space-10);
  border: 0;
  background: transparent;
  color: var(--dc-text);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
}

.dc-footer__input:focus {
  /* Pierścień przejmuje ramka formularza — patrz :focus-within wyżej. */
  outline: none;
}

.dc-footer__input::placeholder {
  color: var(--dc-text-subtle);
}

/* RANGA 1 (design-audit.md, C.1), ten sam przepis co .dc-ai-assistant__submit:
   tło to --dc-gradient-cta (w jasnym tint pod szkłem stopki, w ciemnym pełne
   złoto — token przełącza to sam), obwódka a50, poświata --dc-shadow-accent,
   tekst --dc-on-accent. Do poprawek po audycie stopka jako jedyna kładła tu
   pełne var(--dc-accent) w obu motywach — audyt mierzył stronę główną,
   stopki nie objął, i w jasnym motywie ten przycisk był jedynym kryjącym
   złotem na stronie (zmierzone: rgb(201,168,76) wobec tintu .62→.36 na
   ai-assistant, hero i kalkulatorze). Rozmycie pod tintem jak w ai-assistant:
   tint jest półprzezroczysty, więc bez niego prześwitywałaby krawędź ramki.
   Promień 12, nie 16 rangi 1: przycisk siedzi WEWNĄTRZ ramki r16 z odstępem
   5 px, więc reguła zagnieżdżenia (C.9: 16 − 5 = 11) daje 12 — partia 2
   podniosła go do 16 za rangą, partia 6 wraca do 12 za ramką; ten sam
   promień ma „Zapytaj" i przycisk w oknie doradcy. */
.dc-footer__submit {
  flex: none;
  padding: var(--dc-space-10) var(--dc-space-20);
  border-radius: var(--dc-radius-12);
  background-image: var(--dc-gradient-cta);
  border: var(--dc-border) solid var(--dc-accent-a50);
  box-shadow: var(--dc-shadow-accent);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Najazd rangi 1: a50 pod tintem — tint ciemnieje, bez uniesienia
   (design-audit.md, C.2; ten sam zapis co .dc-ai-assistant__submit:hover).
   W motywie ciemnym tło jest pełnym złotem, więc a50 pod nim nic nie
   zmienia — tak samo jak na każdym innym głównym wezwaniu w ciemnym. */
.dc-footer__submit:hover {
  background-color: var(--dc-accent-a50);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — jedyna transformacja dozwolona na elementach
   klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
   ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-footer__submit:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-footer__consent {
  margin-top: var(--dc-space-14);
  max-width: var(--dc-measure-md);
  color: var(--dc-text-subtle);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
}

/* --dc-accent-strong: 12 px na --dc-accent-text dawało 3,68:1, poniżej AA
   (design-audit.md, B.3); od partii 3 tokenu w motywie jasnym nie ma. */
.dc-footer__consent-link {
  color: var(--dc-accent-strong);
  text-decoration: none;
  border-bottom: var(--dc-border) solid var(--dc-border-accent);
}

.dc-footer__consent-link:hover,
.dc-footer__consent-link:focus-visible {
  color: var(--dc-accent-strong);
  border-bottom-color: var(--dc-accent-strong);
}

/* ==========================================================================
   6. PASEK DOLNY
   ========================================================================== */
.dc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-20);
  margin-top: var(--dc-space-40);
  padding-top: var(--dc-space-24);
  border-top: var(--dc-border) solid var(--dc-border-line);
}

.dc-footer__legal {
  color: var(--dc-text-subtle);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-relaxed);
}

/* Podpis wykonawcy — własny wiersz pod paskiem (flex-basis 100 %), pismo
   o stopień mniejsze niż nota prawna (--dc-text-xs), ten sam kolor subtle;
   odnośnik dziedziczy kolor (bez złota z base.css) i dostaje kreskę
   dopiero pod kursorem — widoczny, ale nie konkuruje z treścią stopki. */
.dc-footer__credit {
  flex-basis: 100%;
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-subtle);
}

.dc-footer__credit-link {
  color: inherit;
  font-weight: var(--dc-weight-medium);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-footer__credit-link:hover {
  color: var(--dc-text);
  text-decoration: underline;
  text-underline-offset: var(--dc-space-4);
}

.dc-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-footer__payment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dc-space-28);
  padding-inline: var(--dc-space-10);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-line);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
}
/* Na wąskim ekranie kolumny zwijają się same — flex-wrap plus min-width
   na każdej kolumnie. Ani jednego media query, tak jak w makiecie. */