/*
 * GameRStar News — Site footer
 * Scoped to #site-footer so no other template is affected. Loads sitewide
 * (the footer is shared across every page). Uses the global tokens
 * directly (not the .gsn-front-page local aliases), since the footer
 * renders outside the front page's <main>.
 */

#site-footer.site-footer {
	background-color: var( --color-bg-primary );
	color: var( --color-text-secondary );
	padding: clamp( 48px, 6vw, 80px ) clamp( 20px, 6vw, 80px ) var( --space-4 );
}

.gsn-footer__top {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var( --space-4 );
}

.gsn-footer__brand {
	margin: 0 0 8px;
}

.gsn-footer__brand .custom-logo-link {
	display: inline-flex;
}

.gsn-footer__brand .custom-logo-link img {
	max-height: 44px;
	width: auto;
	display: block;
}

.gsn-footer__brand-text {
	margin: 0;
	font-family: var( --font-display );
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --color-text-primary );
}

.gsn-footer__tagline {
	margin: 0;
	max-width: 32ch;
	font-size: var( --font-size-caption );
	line-height: 1.6;
	color: var( --color-text-secondary );
}

.gsn-footer__heading {
	margin: 0 0 var( --space-2 );
	font-size: var( --font-size-caption );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var( --letter-spacing-caps );
	color: var( --color-text-primary );
}

.gsn-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsn-footer__list a {
	font-size: var( --font-size-caption );
	color: var( --color-text-secondary ) !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gsn-footer__list a:hover,
.gsn-footer__list a:focus-visible {
	color: var( --color-accent ) !important;
}

/* The footer reuses the shared .site-navigation menu component; align its
 * layout with the plain-list columns beside it. */
.gsn-footer__col .site-navigation {
	display: block;
	margin-top: 8px;
}

.gsn-footer__col .site-navigation ul.menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.gsn-footer__col .site-navigation ul.menu li a {
	padding: 0;
}

.gsn-footer__social {
	display: flex;
	gap: 12px;
}

.gsn-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-button );
	color: var( --color-text-secondary );
	transition: color 0.2s ease, border-color 0.2s ease;
}

.gsn-footer__social-link:hover,
.gsn-footer__social-link:focus-visible {
	color: var( --color-accent );
	border-color: var( --color-accent );
}

.gsn-footer__social-link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gsn-footer__divider {
	max-width: 1280px;
	margin: var( --space-6 ) auto var( --space-3 );
	border-top: 1px solid var( --color-border );
}

.gsn-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
}

.gsn-footer__copyright {
	margin: 0;
	font-size: var( --font-size-caption );
	color: var( --color-text-muted );
}

@media ( max-width: 900px ) {
	.gsn-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.gsn-footer__col--about {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 560px ) {
	.gsn-footer__top {
		grid-template-columns: 1fr;
	}
}