/**
 * Site footer
 *
 * Dark three-column footer laid out like Techam's (brand + contact + EU notice /
 * two menu columns) above the legal and payment bar. Written mobile-first: the
 * base rules are the mobile mockup's layout — one column, 28px between blocks,
 * 10px between links — and the min-width queries widen it to 3 columns at
 * 1.5fr 1fr 1fr, 40px gap.
 *
 * @package Printmania
 */

.site-footer {
	margin-top: var( --space-28 );
	padding: var( --space-40 ) 0 var( --space-26 );
	color: var( --color-text-footer );
	background-color: var( --surface-dark );
}

.site-footer__inner {
	display: grid;
	gap: var( --space-28 );
	max-width: var( --container );
	margin: 0 auto var( --space-38 );
	padding: 0 var( --container-padding );
}

/* --- Brand column ------------------------------------------------------- */

.site-footer__logo,
.woocommerce-page img.site-footer__logo { /* out-specify WC's `.woocommerce-page img { height: auto }` */
	display: block;
	width: auto;
	height: 38px;
	margin-bottom: var( --space-16 );
}

.site-footer__eu {
	max-width: 420px;
	margin-top: var( --space-18 );
}

.site-footer__eu-text {
	margin: 0;
	font-size: var( --text-xs );
	line-height: var( --lh-relaxed );
	color: var( --color-text-footer-mute );
}

.site-footer__eu-text a {
	color: var( --color-text-footer-link );
	text-decoration: underline;
	transition: var( --transition-color );
}

.site-footer__eu-text a:hover {
	color: var( --color-primary );
}

/* EU flag and award side by side, both at the payment tiles' compact height. */
.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-10 );
	margin-top: var( --space-12 );
}

.site-footer__eu-logo img,
.woocommerce-page .site-footer__eu-logo img {
	display: block;
	width: auto;
	height: 40px;
	border-radius: var( --radius-xs );
}

.site-footer__social {
	display: flex;
	gap: var( --space-10 );
	margin-top: var( --space-18 );
}

.site-footer__social-link {
	display: grid;
	place-items: center;
	width: var( --icon-tile-size );
	height: var( --icon-tile-size );
	border-radius: var( --radius-sm );
	font-size: var( --text-sm );
	font-weight: var( --fw-black );
	color: var( --color-text-invert );
	background-color: var( --surface-dark-elevated );
	transition: var( --transition-base );
}

.site-footer__social-link--ig {
	font-size: var( --text-xs );
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background-color: var( --color-primary );
}

.site-footer__award {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 var( --space-10 );
	border-radius: var( --radius-xs );
	background-color: var( --surface );
}

.site-footer__award-img,
.woocommerce-page img.site-footer__award-img {
	display: block;
	width: auto;
	height: 30px;
}

/* --- Column headings ---------------------------------------------------- */

/* Size, weight, tracking and uppercasing come from the base h5 rule. */
.site-footer__heading {
	margin-bottom: var( --space-16 );
	color: var( --color-text-invert );
}

/* --- Menu columns ------------------------------------------------------- */

.site-footer__menu {
	display: grid;
	gap: var( --space-10 );
	margin: 0;
	padding: 0;
	font-size: var( --text-md );
	list-style: none;
}

.site-footer__menu a {
	font-size: var( --text-sm );
	color: var( --color-text-footer-link );
	transition: var( --transition-color );
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__menu .current-menu-item > a {
	color: var( --color-primary );
}

/* --- Contact list (brand column) ----------------------------------------- */

.site-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: var( --space-11 );
	font-size: var( --text-sm );
	color: var( --color-text-footer-link );
}

.site-footer__contact + .site-footer__contact {
	margin-top: var( --space-13 );
}

.site-footer__contact-icon {
	flex-shrink: 0;
	margin-top: var( --space-2 );
}

.site-footer__contact-icon--phone {
	color: var( --color-accent );
}

.site-footer__contact-icon--mail {
	color: var( --color-secondary );
}

.site-footer__contact-icon--pin {
	color: var( --color-primary );
}

.site-footer__contact-value {
	display: block;
	font-weight: var( --fw-bold );
	color: var( --color-text-invert );
}

a.site-footer__contact-value {
	transition: var( --transition-color );
}

a.site-footer__contact-value:hover,
a.site-footer__contact-value:focus-visible {
	color: var( --color-primary );
}

/* --- Legal & payment bar ------------------------------------------------ */

.site-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-16 );
	max-width: var( --container );
	margin: 0 auto;
	padding: var( --space-22 ) var( --container-padding ) 0;
	border-top: 1px solid var( --color-border-dark );
	font-size: var( --text-xs );
	color: var( --color-text-footer-mute );
}

.site-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-8 );
}

/* The logos are dark artwork — white tiles keep them legible on the dark bar. */
.site-footer__payment {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: var( --space-4 ) var( --space-10 );
	border-radius: var( --radius-xs );
	background-color: var( --surface );
}

.site-footer__payment img,
.woocommerce-page .site-footer__payment img {
	display: block;
	width: auto;
	height: 22px;
}

/* The design specifies no focus style; this is the minimal accessible default. */
.site-footer a:focus-visible {
	outline: 2px solid var( --color-primary );
	outline-offset: var( --space-2 );
}

/* =========================================================================
 * Tablet — two columns, mockup section rhythm restored.
 * ========================================================================= */

@media ( min-width: 768px ) {

	.site-footer {
		margin-top: var( --space-64 );
		padding: var( --space-58 ) 0 var( --space-26 );
	}

	.site-footer__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --space-40 );
	}

	/* Mockup sizing: the 44px tap-target floor is a mobile-only concession. */
	.site-footer__social-link {
		width: 34px;
		height: 34px;
	}

	.site-footer__bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =========================================================================
 * Desktop — three columns, as on Techam.
 * ========================================================================= */

@media ( min-width: 1024px ) {

	.site-footer__inner {
		grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}