/**
 * Footer component (dark sub-palette).
 *
 * Mirrors design/bozpo-home.html <footer> 1:1: four columns (two link lists,
 * contact, newsletter), the payment + social bar, and the copyright line.
 * Tokens only; structural sizes are scoped custom properties on .footer.
 *
 * @package Bozpo_Custom
 */

.footer {
	/* Structural sizes / trackings (not thematic) — scoped to the component. */
	--footer-heading-tracking: 1.5px;
	--footer-btn-tracking: .5px;
	--footer-contact-icon: 17px;
	--footer-social-size: 34px;
	--footer-social-icon: 20px;
	--footer-social-stroke: 1.8;

	background: var(--c-dark);
	color: var(--c-footer-text);
}

/* ---- Columns ---- */
.footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-44) var(--wrap-pad) var(--space-30);
}

.footer__heading {
	margin: 0 0 var(--space-16);
	font-family: var(--font-display);
	font-size: var(--text-15);
	font-weight: 600;
	letter-spacing: var(--footer-heading-tracking);
	text-transform: uppercase;
	color: var(--c-white);
}

/* Link lists — real nav menu and static fallback share these selectors. */
.footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__list li {
	margin-bottom: var(--space-10);
}

.footer__list a {
	font-size: var(--text-13-5);
	color: var(--c-footer-link);
}

.footer__list a:hover {
	color: var(--c-white);
}

/* ---- Contact column ---- */
.footer__contact-item {
	display: flex;
	gap: var(--space-11);
	margin-bottom: var(--space-13);
	font-size: var(--text-13-5);
	line-height: var(--leading-relaxed);
}

.footer__contact-item svg {
	flex: none;
	width: var(--footer-contact-icon);
	height: var(--footer-contact-icon);
	margin-top: var(--space-2);
	color: var(--color-primary);
}

/* ---- Newsletter ---- */
.footer__field {
	width: 100%;
	margin-bottom: var(--space-11);
	padding: var(--space-11) var(--space-13);
	border: 1px solid var(--c-dark-border);
	border-radius: var(--radius-8);
	background: var(--c-dark2);
	color: var(--c-white);
	font-size: var(--text-13-5);
	outline: none;
}

.footer__field::placeholder {
	color: var(--c-footer-muted);
}

.footer__field:focus {
	border-color: var(--color-primary);
}

.footer__agree {
	display: flex;
	gap: var(--space-8);
	margin: 0 0 var(--space-13);
	font-size: var(--text-11-5);
	line-height: var(--leading-snug);
	color: var(--c-footer-muted2);
}

.footer__agree-check {
	flex: none;
	width: auto;
	margin-top: var(--space-2);
}

.footer__submit {
	padding: var(--space-11) var(--space-18);
	border: 0;
	border-radius: var(--radius-8);
	background: var(--color-primary);
	color: var(--c-white);
	font-size: var(--text-13);
	font-weight: 700;
	letter-spacing: var(--footer-btn-tracking);
	text-transform: uppercase;
}

.footer__submit:hover {
	background: var(--color-primary-strong);
}

/* Contact Form 7 compatibility — render the newsletter form 1:1 with the design. */
.footer__newsletter-form .wpcf7-form-control-wrap {
	display: block;
}

.footer__agree .wpcf7-form-control-wrap {
	display: inline-flex;
}

.footer__newsletter-form .wpcf7-response-output {
	margin: var(--space-8) 0 0;
	padding: var(--space-8) var(--space-11);
	font-size: var(--text-11-5);
	line-height: var(--leading-snug);
}

/* ---- Payment + social bar ---- */
.footer__bar {
	border-top: 1px solid var(--c-dark-border);
}

.footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-16) var(--wrap-pad);
}

.footer__pays {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
}

.footer__pay-label {
	margin-right: var(--space-4);
	font-size: var(--text-12);
	color: var(--c-footer-muted2);
}

.footer__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-7) var(--space-11);
	border-radius: var(--radius-6);
	background: var(--c-white);
	color: var(--c-chip-ink);
	font-size: var(--text-11-5);
	font-weight: 600;
}

.footer__social {
	display: flex;
	gap: var(--space-9);
}

.footer__social-link {
	display: grid;
	place-items: center;
	width: var(--footer-social-size);
	height: var(--footer-social-size);
	border: 1px solid var(--c-dark-border);
	border-radius: var(--radius-circle);
	color: var(--c-footer-text);
}

/* Matches the design's global `svg.ic` normalization, scoped to the footer. */
.footer__social-link svg {
	width: var(--footer-social-icon);
	height: var(--footer-social-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--footer-social-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer__social-link:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--c-white);
}

/* ---- Copyright ---- */
.footer__copy {
	padding: var(--space-14) var(--wrap-pad);
	border-top: 1px solid var(--c-dark-border);
	text-align: center;
	font-size: var(--text-12);
	color: var(--c-footer-muted);
}

/* ---- Responsive (design breakpoints, mobile-first) ---- */
@media (min-width: 561px) {
	.footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 981px) {
	.footer__cols {
		grid-template-columns: 1.1fr 1fr 1.3fr 1.3fr;
	}
}