/* =====================================================================
   STOPKA

   Układ przeniesiony z wcześniejszego projektu. Proporcje wzięte
   z pomiaru, nie dobrane na oko:
   kolumna marki 52rem na sztywno, trzy kolumny linków dzielą resztę
   po równo, odstęp 8rem między marką a kolumnami i 4rem między nimi.

   Tło jednolicie czarne, bez gradientu i bez zdjęcia - stopka ma być
   zamknięciem strony, a nie kolejną sekcją walczącą o uwagę.

   Kolumna bez przypiętego menu w ogóle się nie renderuje (decyduje o tym
   szablon), więc siatka nie zostawia po niej dziury.
   ===================================================================== */

.bp-stopka {
	margin-top: auto;
	padding-block: 9rem 4rem;
	background: #000;
	color: rgba(255, 255, 255, .72);
	font-size: 1.7rem;
	line-height: 2.4rem;
}

/* --- górna część: marka obok kolumn ----------------------------------- */

.bp-stopka__gora {
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
	padding-bottom: 6.4rem;
}

@media (min-width: 64em) {
	.bp-stopka__gora {
		flex-direction: row;
		gap: 8rem;
		padding-bottom: 9rem;
	}

	/* Kolumna marki ma STAŁĄ szerokość, a nie udział w siatce.
	   Dzięki temu opis pod logo łamie się zawsze w tym samym miejscu,
	   niezależnie od tego, ile jest kolumn z linkami. */
	.bp-stopka__marka {
		flex: 0 0 36rem;
		max-width: 36rem;
	}
}

.bp-stopka__kolumny {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

@media (min-width: 40em) {
	.bp-stopka__kolumny { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.bp-stopka__kolumny { grid-template-columns: repeat(3, 1fr); }
}

/* --- logo i adres ---------------------------------------------------- */

.bp-stopka__logo {
	display: block;
	text-decoration: none;
}

.bp-stopka__logo-obraz {
	display: block;
	width: 19rem;
	height: auto;
	max-width: 100%;
	margin-left: 0;
	/*
	   Logo jest jednym plikiem dla całej strony. W nagłówku stoi na bieli,
	   tutaj na czerni - zamiast wymagać drugiego pliku, rozjaśniamy je
	   do bieli filtrem. Znak zachowuje kształt, zmienia się sama barwa.
	*/
	filter: brightness(0) invert(1);
}

.bp-stopka__nazwa {
	font-size: 2.4rem;
	font-weight: 600;
	color: #fff;
}

.bp-stopka__adres {
	margin-top: 2.4rem;
	color: #fff;
}

/* --- nagłówki kolumn --------------------------------------------------
   POGRUBIONE, ALE PISMEM NORMALNYM.

   Było `text-transform: uppercase` z rozstrzeleniem liter. Wielkie
   litery czyta się wolniej, bo znika kształt wyrazu, po którym oko
   rozpoznaje słowo bez czytania go literami. Nagłówki zostają
   zwykłe.
   -------------------------------------------------------------------- */

.bp-stopka__naglowek {
	margin: 0 0 2rem;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.bp-stopka__lista {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-stopka__lista li {
	margin: 0;
	list-style: none;
}

/* --- PUNKTORY PRZY POZYCJACH ------------------------------------------
   Mała kropka przed każdą pozycją. Rysowana `::before`, nie
   `list-style` - z listą wypunktowaną znacznik siedzi poza pudełkiem
   elementu i przy zawinięciu tekstu do drugiego wiersza kolumna
   przestaje być równa.

   Kropka jest wygaszona, a napis biały: punktor ma porządkować listę,
   a nie konkurować z treścią.
   -------------------------------------------------------------------- */

.bp-stopka__lista li a,
.bp-stopka__lista--ikony li a { position: relative; }

.bp-stopka__lista:not(.bp-stopka__lista--ikony) li a {
	display: inline-flex;
	align-items: baseline;
	gap: .9rem;
}

.bp-stopka__lista:not(.bp-stopka__lista--ikony) li a::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: background .18s ease;
}

.bp-stopka__lista:not(.bp-stopka__lista--ikony) li a:hover::before,
.bp-stopka__lista:not(.bp-stopka__lista--ikony) li a:focus-visible::before {
	background: var(--bp-akcent);
}

.bp-stopka__lista a {
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: #fff;
	text-decoration: none;
	transition: color .18s ease;
}

/* Po najechaniu PIERWSZY KOLOR GLOBALNY WITRYNY. */
.bp-stopka__lista a:hover,
.bp-stopka__lista a:focus-visible {
	color: var(--bp-akcent);
}

/* --- kolumna kontaktowa ---------------------------------------------- */

/*
   Ikona i tekst w jednym wierszu, ikona wyrównana do pierwszej linii -
   przy dwuwierszowym adresie e-mail wyśrodkowanie w pionie wyglądałoby
   na przesunięcie.
*/
.bp-stopka__lista--ikony a {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}

.bp-stopka__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.8rem;
	height: 2.4rem;
	color: var(--bp-akcent);
}

/* Ikona zmienia kolor razem z napisem - inaczej po najechaniu tekst
   robi się akcentowy, a ikona zostaje w tym samym kolorze i wygląda,
   jakby należała do czegoś innego. */
.bp-stopka__lista--ikony a:hover .bp-stopka__ikona,
.bp-stopka__lista--ikony a:focus-visible .bp-stopka__ikona {
	color: #fff;
}

/* --- profile ----------------------------------------------------------

   KÓŁKO Z TŁEM OD RAZU, nie dopiero po najechaniu.

   Poprzednio tło było ledwie widoczne (8% bieli), więc na czarnym tle
   ikona zlewała się z tłem i wyglądało to jak sam znak zawieszony
   w pustce. Teraz kółko widać od początku, a najechanie zmienia je
   na kolor marki - czyli robi to, do czego najechanie służy: potwierdza,
   że element jest klikalny, zamiast go dopiero pokazywać.
   -------------------------------------------------------------------- */

/* Stopka uzywa TEGO SAMEGO szablonu ikon co pasek nad naglowkiem,
   wiec lista ma klase `.bp-spolecznosciowe`. Regula obejmuje obie nazwy:
   stara zostaje, bo ten sam arkusz jedzie na strony, ktore moga miec
   jeszcze poprzedni szablon. */

.bp-stopka__marka .bp-spolecznosciowe,
.bp-stopka__profile {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 2.8rem 0 0;
	padding: 0;
	list-style: none;
}

.bp-stopka__marka .bp-spolecznosciowe li,
.bp-stopka__profile li { margin: 0; list-style: none; }

.bp-stopka__marka .bp-spolecznosciowe a,
.bp-stopka__profile a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.bp-stopka__marka .bp-spolecznosciowe a:hover,
.bp-stopka__marka .bp-spolecznosciowe a:focus-visible,
.bp-stopka__profile a:hover,
.bp-stopka__profile a:focus-visible {
	background: var(--bp-akcent);
	color: #fff;
}

/* --- dane firmowe NAD kreską ------------------------------------------
   Osobny wiersz. Wciśnięte w linię praw autorskich robiły z niej ciąg
   znaków, którego nikt nie czyta. */

.bp-stopka__rejestr {
	margin-bottom: 2rem;
	font-size: 1.5rem;
	line-height: 2.2rem;
	color: #fff;
}

/* --- dolny pasek ------------------------------------------------------ */

.bp-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2.4rem;
	padding-top: 2.8rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 1.5rem;
	line-height: 2.2rem;
	color: rgba(255, 255, 255, .5);
}

.bp-stopka__dol a {
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
}

.bp-stopka__dol a:hover,
.bp-stopka__dol a:focus-visible {
	color: var(--bp-akcent);
}

/* „Projekt i wykonanie” dosuwane do prawej krawędzi. `margin-left: auto`
   działa także wtedy, gdy linia praw autorskich złamie się na dwa
   wiersze - `justify-content` sam by wtedy nie wystarczył. */
.bp-stopka__wykonanie { margin-left: auto; }

@media (max-width: 48em) {
	.bp-stopka__dol {
		flex-direction: column;
		align-items: flex-start;
	}

	.bp-stopka__wykonanie { margin-left: 0; }
}

/* Obwódki dla klawiatury zostają - na czarnym tle muszą być białe,
   bo kolor marki jest na nim za ciemny. */
.bp-stopka a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Godziny pracy w kolumnie kontaktowej: ten sam układ co odnośniki,
   ale bez najechania - to nie jest cel kliknięcia, tylko informacja. */
.bp-stopka__lista--ikony .bp-stopka__pozycja {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #fff;
}


/* =====================================================================
   STOPKA Z KLOCKÓW (od 1.20.0)

   Szablon: `includes/stopka-uklad.php`. Kolumna 1 to dawna „marka"
   (stała szerokość po lewej), kolumny 2-4 dzielą resztę po równo - ich
   liczba zależy od tego, ile z nich ma treść. Klocki mogą stać w dowolnej
   kolumnie i w pasku nad linią, więc reguły niżej nie zakładają, że logo
   stoi w pierwszej, a telefon w ostatniej.
   ===================================================================== */

@media (min-width: 40em) {
	.bp-stopka__kolumny--1 { grid-template-columns: 1fr; }
}

@media (min-width: 64em) {
	.bp-stopka__kolumny--1 { grid-template-columns: 1fr; }
	.bp-stopka__kolumny--2 { grid-template-columns: repeat(2, 1fr); }
	.bp-stopka__kolumny--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Kolejny klocek pod klockiem w tej samej kolumnie - oddech. Lista
   kontaktowa zaraz pod nagłówkiem go nie dostaje: nagłówek ma własny
   odstęp od dołu, jak w dawnej kolumnie „Kontakt". */
.bp-stopka__kolumna > * + *:not(.bp-stopka__lista),
.bp-stopka__marka > * + .bp-stopka__menu,
.bp-stopka__marka > * + .bp-stopka__lista,
.bp-stopka__marka > * + .bp-stopka__naglowek,
.bp-stopka__marka > * + .bp-stopka__rejestr-tekst,
.bp-stopka__kolumna > .bp-stopka__lista + .bp-stopka__lista { margin-top: 2.8rem; }

/* Profile poza kolumną 1: ten sam wygląd kółek co pod logo. */
.bp-stopka__kolumna .bp-spolecznosciowe,
.bp-stopka__rejestr .bp-spolecznosciowe {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-stopka__kolumna .bp-spolecznosciowe li,
.bp-stopka__rejestr .bp-spolecznosciowe li { margin: 0; list-style: none; }

.bp-stopka__kolumna .bp-spolecznosciowe a,
.bp-stopka__rejestr .bp-spolecznosciowe a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.bp-stopka__kolumna .bp-spolecznosciowe a:hover,
.bp-stopka__kolumna .bp-spolecznosciowe a:focus-visible,
.bp-stopka__rejestr .bp-spolecznosciowe a:hover,
.bp-stopka__rejestr .bp-spolecznosciowe a:focus-visible {
	background: var(--bp-akcent);
	color: #fff;
}

.bp-stopka__rejestr-tekst { margin: 0; }
.bp-stopka__kolumna .bp-stopka__rejestr-tekst,
.bp-stopka__marka .bp-stopka__rejestr-tekst { font-size: 1.5rem; line-height: 2.2rem; color: #fff; }

/* Pasek nad linią: klocki w jednym wierszu, łamią się, gdy brak miejsca. */
.bp-stopka__rejestr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 3.2rem;
}

.bp-stopka__rejestr .bp-stopka__lista {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.2rem 3.2rem;
	margin: 0;
}

.bp-stopka__rejestr .bp-spolecznosciowe a { width: 3.4rem; height: 3.4rem; }