/* ============================================================
   site-footer — dark graphite theme, 4-col grid + bottom strip.

   Layout:
     Kol 1: Logo, siedziba, magazyn, dane rejestrowe
     Kol 2: Produkty — kategorie z bazy (to samo źródło co mega-menu)
     Kol 3: Branże (6)
     Kol 4: Firma (strony top-level) + dokumenty prawne + social
     Pasek dolny: copyright + realizacja

   Theme: graphite bg #3E3E3D, biały tekst, --blue-light dla linków (kontrast ≥8:1).
   Tokens z base.css: --graphite, --white, --blue-light, --space-*, --container-max, --transition-*, --focus-ring.

   Mobile-first: <768px = stack, ≥768px = 2 kolumny, ≥1200px = 4 kolumny.
   Bez akordeonów — na każdej szerokości pełne listy (decyzja Tomka 2026-07-31).
   ============================================================ */

.site-footer {
	background: var(--graphite);
	color: var(--white);
	padding-block: var(--space-64) var(--space-24);
	font-size: var(--text-body);          /* 15px — czytelność na ciemnym tle */
	line-height: 1.6;
}

/* === Grid layout === */
.site-footer__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;                                    /* mobile default */
	padding-bottom: var(--space-64);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-48) var(--space-32);
	}
}

@media (min-width: 1200px) {
	.site-footer__grid {
		/* Produkty i Branże mają najdłuższe etykiety, Firma same krótkie */
		grid-template-columns: 1fr 1.25fr 1.15fr 0.75fr;
	}
}

/* === Column structure === */
.site-footer__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.site-footer__heading {
	font-size: var(--text-lead);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--white);
}

/* Dojście do huba domykające listę — wyróżnione wagą, strzałka jako dekoracja */
.site-footer__link--hub {
	font-weight: 600;
}
.site-footer__link--hub::after {
	content: "\00a0›";
}

/* Nagłówek ze swoją treścią jako jedna całość — odstęp MIĘDZY blokami niesie
   gap kolumny, nie marginesy nagłówków. */
.site-footer__block {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* === Kol 1: Brand === */
/* Luźniejszy rytm niż w kolumnach nawigacyjnych — tu sąsiadują całe bloki
   (logo, siedziba, magazyn, dane rejestrowe), nie pozycje listy. */
.site-footer__column--brand {
	gap: var(--space-32);
}

.site-footer__brand-link {
	display: block;
	text-decoration: none;
}
/* Logo prawie na szerokość kolumny, wyrównane do lewej krawędzi —
   proporcje z atrybutów width/height w markupie */
.site-footer__brand-img {
	display: block;
	width: 90%;
	height: auto;
	margin-right: auto;
}
/* Blok tekstu kolumny — adresy i dane rejestrowe. Ten sam rytm co listy:
   wiersze rozdzielane gapem, nie interlinią. */
.site-footer__text {
	font-style: normal;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--white);
	opacity: 0.85;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

/* === Kol 2: Nawigacja + Kol 3: Kontakt — lists === */
.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* === Linki === */
.site-footer__link {
	color: var(--blue-light);
	text-decoration: none;
	transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: transparent;
}
.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--white);
	text-decoration-color: currentColor;
}

/* Link stylowany jako <button> (akcja JS, nie nawigacja — np. "Ustawienia cookies") */
.site-footer__link--button {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* === Bottom strip — metryczka, potem copyright + dokumenty + realizacja === */
.site-footer__bottom {
	padding-top: var(--space-24);
	border-top: 1px solid #FFFFFF1F;                                            /* fallback */
	border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.site-footer__bottom-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

@media (min-width: 992px) {
	.site-footer__bottom-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-32);
	}
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--text-label);
	color: var(--white);
	opacity: 0.7;
}

.site-footer__credit {
	margin: 0;
	font-size: var(--text-label);
	color: var(--white);
	opacity: 0.7;
}
.site-footer__credit .site-footer__link {
	color: inherit;
	text-decoration: none;
}
/* Podkreślenie dopiero na hover — bez niego podpis czyta się jak tekst, nie link.
   Kolor zostaje własny (marka agencji), więc nie dziedziczy bielenia z .site-footer__link:hover. */
.site-footer__credit .site-footer__link:hover,
.site-footer__credit .site-footer__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Kolory marki tophat.pl — świadomie literały, nie tokeny: to brand agencji,
   nie systemu agru, więc nie ma czego szukać w :root klienta. Pogrubienie
   obejmuje samą nazwę, nie dopisek „— agencja kreatywna" po niej. */
.site-footer__agency-top,
.site-footer__agency-hat {
	font-weight: 700;   /* poza skalą wag systemu agru — brand agencji, jak kolory niżej */
}
.site-footer__agency-top { color: #FAD02F; }   /* css-lint-ok: żółty tophat */
/* Fiolet rozjaśniony z #8C52FF — na grafitowym tle daje 5:1 zamiast 2,4:1 */
.site-footer__agency-hat { color: #C4A0FF; }   /* css-lint-ok: fiolet tophat */


/* === Social icons === */
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-16);
	align-items: center;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--white);
	background: transparent;
	transition: color var(--transition-fast), background var(--transition-fast);
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--blue-light);
	background: #FFFFFF14;
	background: color-mix(in srgb, var(--white) 8%, transparent);
}
.site-footer__social-link svg {
	display: block;
}

/* === A11Y focus override (light outline na ciemnym tle) === */
.site-footer :focus-visible {
	outline: 2px solid var(--white);
	outline-offset: var(--focus-offset);
}

/* Na telefonie stopka to jeden długi stos linków — luźniejszy raster,
   żeby sąsiednie pozycje dało się trafić palcem. */
@media (max-width: 767.98px) {
	.site-footer__list .site-footer__link {
		display: block;
		padding-block: var(--space-4);
	}
}