/**
 * Site footer — brand column, nav columns and the credit bar.
 * Markup (which column 3/4 variant renders) lives in footer.php; this file
 * only styles the shared shell so all variants look identical.
 *
 * @package Geras_Custom
 */

.site-footer {
	background: var( --surface-dark );
	color: var( --c-sand-300 );
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-44 );
	padding: var( --space-70 ) 0 var( --space-54 );
}

.site-footer__logo {
	display: block;
	height: var( --space-62 );
	width: auto;
	margin-bottom: var( --space-20 );
}

.site-footer__tagline {
	max-width: var( --measure-brand );
	font-size: var( --fs-14-5 );
	opacity: .85;
}

.site-footer__title {
	margin-bottom: var( --space-20 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-wider );
	text-transform: uppercase;
	color: var( --c-honey-300 );
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var( --space-11 );
}

.site-footer__list a {
	font-size: var( --fs-15 );
	font-weight: var( --fw-medium );
	color: inherit;
	opacity: .85;
	transition: opacity var( --transition-fast ), color var( --transition-fast );
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	opacity: 1;
	color: var( --c-honey-300 );
}

.site-footer__address {
	font-size: var( --fs-15 );
	opacity: .85;
}

.site-footer__bottom {
	border-top: 1px solid var( --c-sand-a12 );
	padding: var( --space-24 ) 0;
	font-size: var( --fs-13-5 );
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --space-14 );
	opacity: .75;
}

.site-footer__credit a {
	font-weight: var( --fw-bold );
	color: var( --c-honey-300 );
}

/* Nav links stay tappable once the grid collapses to one column (responsive.md gate). */
@media ( max-width: 767px ) {

	.site-footer__list a {
		display: inline-flex;
		align-items: center;
		min-height: var( --space-44 );
	}
}

/* Two columns, matching the mockup's own "mid" resize tier. */
@media ( min-width: 768px ) {

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Full four-column layout above the mockup's "narrow" cutoff. */
@media ( min-width: 1024px ) {

	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}
}