/*
 * Stopka (footer.php): newsletter na ciemnym tle ze zdjęciem wystającym poza blok,
 * jasny blok z danymi firmy i kolumnami menu, pasek praw autorskich.
 * Desktop od 64rem; na mobile wszystko w jednej kolumnie, menu bez zwijania (2 kolumny).
 */

.site-footer { margin-top: 5rem; }

/* Ikony social media (maski – kolor = currentColor, jak pozostałe ikony motywu). */
.icon--facebook { width: 18px; height: 18px; -webkit-mask-image: url("../img/facebook.svg"); mask-image: url("../img/facebook.svg"); }
.icon--instagram { width: 18px; height: 18px; -webkit-mask-image: url("../img/instagram.svg"); mask-image: url("../img/instagram.svg"); }
.icon--tiktok { width: 18px; height: 18px; -webkit-mask-image: url("../img/tiktok.svg"); mask-image: url("../img/tiktok.svg"); }
.icon--youtube { width: 18px; height: 18px; -webkit-mask-image: url("../img/youtube.svg"); mask-image: url("../img/youtube.svg"); }

/* Newsletter */
.newsletter { margin-bottom: 2.25rem; }

/* Mobile: ciemny blok 10 px od krawędzi ekranu (zamiast bocznego paddingu kontenera). */
@media (max-width: 63.999rem) {
	.newsletter { padding-inline: 10px; }
}

.newsletter__box {
	display: grid;
	grid-template-areas:
		"head"
		"media"
		"form";
	gap: 1.5rem;
	padding: 2rem 1.25rem 1.75rem;
	background: var(--color-text-strong);
	color: var(--color-background);
}

.newsletter__head { grid-area: head; }

.newsletter__subtitle {
	margin: 0 0 0.25rem;
	color: inherit;
	font: 200 var(--fs-title) / 1.2 var(--font-body);
}

.newsletter__title {
	margin: 0;
	color: inherit;
	font: 500 var(--fs-h1) / 1.1 var(--font-heading);
}

.newsletter__media { grid-area: media; }

.newsletter__image {
	display: block;
	width: 100%;
	height: auto;
}

.newsletter__form {
	grid-area: form;
	max-width: 31.75rem;
}

/* Formularz z shortcode'u aplikacji – wygląd sklepu bez względu na wtyczkę. */
.newsletter__form form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
}

.newsletter__form :is(p, div):not(:has(input[type="checkbox"])) { margin: 0; }

.newsletter__form :is(input[type="email"], input[type="text"]) {
	flex: 1 1 12rem;
	min-width: 0;
	height: 3.125rem;
	padding: 0 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-border);
	color: var(--color-text-strong);
	font: 300 var(--fs-sm) / 1 var(--font-body);
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.newsletter__form :is(input[type="email"], input[type="text"])::placeholder { color: var(--color-muted); }

.newsletter__form :is(input[type="email"], input[type="text"]):focus {
	border-color: var(--color-background);
	background: var(--color-background);
	outline: none;
}

.newsletter__form :is(button, input[type="submit"]) {
	flex: none;
	height: 3.125rem;
	padding: 0 1.25rem;
	border: 1px solid var(--color-background);
	border-radius: 0;
	background: var(--color-text-strong);
	color: var(--color-background);
	font: 400 var(--fs-sm) / 1 var(--font-body);
	cursor: pointer;
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.newsletter__form :is(button, input[type="submit"]):hover {
	background: var(--color-background);
	color: var(--color-text-strong);
}

.newsletter__form :is(button, input[type="submit"]):focus-visible {
	outline: 2px solid var(--color-background);
	outline-offset: 2px;
}

/* Zgoda marketingowa */
.newsletter__form label:has(input[type="checkbox"]),
.newsletter__form :is(p, div):has(> input[type="checkbox"]) {
	display: flex;
	flex-basis: 100%;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0.75rem 0 0;
	color: var(--color-border);
	font: 200 var(--fs-xs) / 1.45 var(--font-body);
}

.newsletter__form input[type="checkbox"] {
	flex: none;
	width: 12px;
	height: 12px;
	margin: 0.15rem 0 0;
	border: 1px solid var(--color-background);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--dur-fast) ease;
}

.newsletter__form input[type="checkbox"]:checked {
	background: var(--color-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23171717' stroke-width='1.6'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.newsletter__form a { color: inherit; }

/* Blok główny */
.site-footer__main { padding-inline: 0; }

.site-footer__box {
	display: grid;
	gap: 2.5rem;
	padding: 2.5rem var(--page-pad);
	background: var(--color-surface);
	color: var(--color-text);
}

.site-footer__about {
	display: grid;
	grid-template-areas:
		"logo"
		"company"
		"contact"
		"socials";
	align-content: start;
	gap: 1.5rem;
}

.site-footer__logo { grid-area: logo; width: fit-content; }
.site-footer__logo img { display: block; width: auto; height: 4rem; }

.site-footer__company { grid-area: company; }

.site-footer__name {
	margin: 0 0 1.25rem;
	color: var(--color-text-strong);
	font: 500 var(--fs-lg) / 1.3 var(--font-body);
	letter-spacing: 0.01em;
}

.site-footer__address {
	margin: 0;
	font: 300 var(--fs-sm) / 1.6 var(--font-body);
}

.site-footer__contact {
	display: flex;
	grid-area: contact;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
}

.site-footer__contact-title {
	margin: 0 0 0.375rem;
	color: var(--color-text-strong);
	font: 500 var(--fs-lg) / 1.2 var(--font-heading);
	letter-spacing: 0.02em;
}

.site-footer__contact a {
	color: var(--color-text);
	text-decoration-color: var(--color-muted);
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.site-footer__contact a:hover {
	color: var(--color-black);
	text-decoration-color: currentColor;
}

.site-footer__socials {
	display: flex;
	grid-area: socials;
	gap: 0.25rem;
	margin: 0 0 0 -0.5rem;
	padding: 0;
	list-style: none;
}

.site-footer__socials a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-text-strong);
	transition: color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.site-footer__socials a:hover {
	color: var(--color-black);
	transform: translateY(-2px);
}

/* Kolumny menu – zawsze rozwinięte (na mobile 2 kolumny, wybrane produkty pod spodem). */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
	align-content: start;
}

.site-footer__column--featured { grid-column: 1 / -1; }

.site-footer__heading {
	margin: 0 0 1rem;
	color: var(--color-text-strong);
	font: 600 0.8125rem / 1.3 var(--font-body);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links a {
	color: var(--color-text);
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.site-footer__links a:hover,
.site-footer__links .current-menu-item > a {
	color: var(--color-black);
	text-decoration-color: currentColor;
}

/* Pasek na dole */
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem var(--page-pad) 1.5rem;
	text-align: center;
}

.site-footer__copyright {
	margin: 0;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-links a {
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) ease;
}

.site-footer__legal-links a:hover { color: var(--color-text-strong); }

.site-footer a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Tablet: menu w trzech kolumnach */
@media (min-width: 40rem) {
	.site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-footer__column--featured { grid-column: auto; }
}

/* Desktop */
@media (min-width: 64rem) {
	.site-footer__main { padding-inline: var(--page-pad); }

	/* Menu "Stopka – Sklep": większy odstęp między linkami. */
	#menu-stopka-sklep { gap: 1rem; }

	/* Zdjęcie po prawej, wystaje nad i pod ciemny blok (Figma: ~100 px w górę, ~60 px w dół). */
	.site-footer { margin-top: 132px; } /* Miejsce na zdjęcie wystające nad newsletter. */

	.newsletter { margin-bottom: 58px; }

	/*
	 * Zdjęcie (Figma: 823 × 730 px przy 1920 px) skaluje się z szerokością okna, a wystaje zawsze tak samo:
	 * 97 px nad blokiem i 58 px pod nim. Wysokość bloku = wysokość zdjęcia − suma wystawań.
	 */
	.newsletter__box {
		--nl-img: min(823px, 42.86vw);
		--nl-right: min(76px, 3.96vw);
		--nl-over-top: 97px;
		--nl-over-bottom: 58px;

		position: relative;
		grid-template-columns: minmax(0, 1fr) calc(var(--nl-img) + var(--nl-right));
		grid-template-areas:
			"head  media"
			"form  media";
		align-content: center;
		gap: 2.5rem 2rem;
		min-height: calc(var(--nl-img) * 730 / 823 - var(--nl-over-top) - var(--nl-over-bottom));
		padding: 6rem 0 6rem clamp(2rem, 6vw, 7.5rem);
	}

	.newsletter__head { align-self: end; }
	.newsletter__form { align-self: start; }

	.newsletter__image {
		position: absolute;
		top: calc(-1 * var(--nl-over-top));
		right: var(--nl-right);
		width: var(--nl-img);
		height: auto;
		aspect-ratio: 823 / 730;
		object-fit: contain;
		object-position: center;
	}

	.newsletter__box:not(.has-image) { grid-template-columns: minmax(0, 1fr); }

	.site-footer__box {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 3rem;
		padding: 5.5rem 3rem 5rem;
	}

	.site-footer__about {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"logo    ."
			"company contact"
			"socials .";
		gap: 2.5rem 2rem;
	}

	.site-footer__logo img { height: 5rem; }

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		padding: 1rem 0 2rem;
		text-align: left;
	}
}