/*
 * Stopka.
 *
 * Treść jest w widżetach w bazie i niesie własny `<style>` — układ listy kontaktów,
 * rozmiary ikon, barwy napisów. Tutaj jest wyłącznie to, co w starym motywie dawał
 * GeneratePress (siatka kolumn) i to, co nadpisywał `klucz/style.css` (barwy).
 *
 * Barwa `#515555` wzięta wprost z pliku logo: to odcień napisu KLUCZ, najczęstsza
 * barwa na tym obrazku.
 *
 * W starym motywie ta reguła musiała mieć podwójny selektor, bo GeneratePress
 * wypisywał swoją jako styl w treści strony, czyli PO arkuszach motywu, i przy
 * równej specyficzności wygrywała tamta. Tutaj nie ma z czym walczyć.
 *
 * Kontrast: biały tekst na tej szarości 7,55:1. Odsyłacze musiały dostać nową
 * barwę — ustawiony wcześniej w Kokpicie błękit #9ccaff dawał 4,43:1, poniżej
 * progu 4,5:1. Na dotychczasowej stopce (#627a7f) było jeszcze gorzej: 2,67:1.
 */

.footer-widgets {
	background-color: var(--kolor-stopka-tlo);
	color: #fff;
	font-family: var(--klucz-font-ui);
}

.footer-widgets__srodek {
	display: grid;
	gap: 2rem;
	max-width: var(--klucz-kolumna);
	margin: 0 auto;
	/* 30 px ze wszystkich stron — wartość z ustawień Dostosuj
	   (`.footer-widgets-container`). Z boków tylko od 768 px w górę: na telefonie
	   obowiązuje wspólny margines serwisu, patrz reguła niżej. */
	padding: 30px;
}

/* Jedna kolumna na telefonie, pełny rozkład od 768 px — ten sam punkt łamania
   co menu w nagłówku, żeby przejście z układu wąskiego na szeroki działo się
   w całym serwisie naraz. */
@media screen and (min-width: 768px) {
	.footer-widgets__srodek {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		align-items: start;
	}
}

.footer-widgets a {
	color: var(--kolor-stopka-drugi-plan);
}

.footer-widgets a:hover,
.footer-widgets a:focus {
	color: #fff;
}

/* Ikony w stopce są elementami flex obok tekstu i przy dłuższym podpisie
   kurczyły się poniżej zadanych 30 px — „partner@klucz.net” ściskał kopertę
   do 24 px. `flex-shrink: 0` utrzymuje jednakowy rozmiar wszystkich ikon. */
.contact_way_icon {
	flex-shrink: 0;
}

/* Dolny pasek z prawami autorskimi. W starym motywie `.site-info` był ukryty
   (`display: none` w Dodatkowym CSS), bo GeneratePress wypisywał tam własną
   informację „Proudly powered by”. Tutaj wypisujemy swoją, więc pasek zostaje. */
.stopka__pasek {
	background-color: var(--kolor-stopka-tlo);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.stopka__prawa {
	max-width: var(--klucz-kolumna);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	font-family: var(--klucz-font-ui);
	font-size: 0.875rem;
	color: var(--kolor-stopka-drugi-plan);
	text-align: center;
}

/* Na telefonie stopka trzyma margines pasów pełnoszerokościowych — ten sam co
   ciemny pas i „Dodatkowe informacje”, żeby trzy sekcje jedna pod drugą zaczynały
   się w jednej linii. Od 768 px w górę zostaje 30 px z ustawień Dostosuj. */
@media screen and (max-width: 767px) {
	.footer-widgets__srodek {
		padding-left: var(--klucz-margines-boczny);
		padding-right: var(--klucz-margines-boczny);
	}
}