/*
 * Site footer - dark four column footer with a copyright bar.
 * Loaded on every page; see sok_enqueue_footer_styles().
 *
 * Sizes are set explicitly because GeneratePress' body font is 22px Poppins,
 * which is tuned for long-form posts and far too large for footer links.
 */

.sok-footer {
	--sok-ft-bg: #020617;
	--sok-ft-border: #1e293b;
	--sok-ft-heading: #ffffff;
	--sok-ft-text: #94a3b8;
	/* 4.60:1 on --sok-ft-bg; #64748b was 4.24:1, just under AA. */
	--sok-ft-muted: #6b7a8d;
	--sok-ft-accent: #3b82f6;
	--sok-ft-accent-2: #60a5fa;

	background-color: var(--sok-ft-bg);
	border-top: 1px solid var(--sok-ft-border);
	color: #e2e8f0;
}

/* GeneratePress paints .site-footer white from the Customizer. */
.site-footer {
	background-color: #020617;
}

.sok-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 40px;
}

.sok-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
}

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

.sok-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	color: var(--sok-ft-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.sok-footer__logo:hover,
.sok-footer__logo:focus {
	color: var(--sok-ft-heading);
}

.sok-footer__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .1);
	color: #ffffff;
}

.sok-footer__wordmark-accent {
	color: var(--sok-ft-accent-2);
}

.sok-footer__blurb {
	margin: 0;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sok-ft-text);
}

/* ------------------------------------------------------------------
   Link columns
   ------------------------------------------------------------------ */

.sok-footer__heading {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sok-ft-heading);
}

.sok-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sok-footer__list li {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.sok-footer__list li:last-child {
	margin-bottom: 0;
}

.sok-footer__list a {
	color: var(--sok-ft-text);
	text-decoration: none;
	transition: color .15s ease;
}

.sok-footer__list a:hover,
.sok-footer__list a:focus {
	color: var(--sok-ft-accent);
}

.sok-footer__list--contact li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sok-footer__icon {
	display: inline-flex;
	flex: none;
	color: var(--sok-ft-accent);
}

/* ------------------------------------------------------------------
   Copyright bar
   ------------------------------------------------------------------ */

.sok-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--sok-ft-border);
	font-size: 14px;
	color: var(--sok-ft-muted);
}

.sok-footer__legal {
	display: flex;
	gap: 24px;
}

.sok-footer__legal a {
	color: var(--sok-ft-muted);
	text-decoration: none;
	transition: color .15s ease;
}

.sok-footer__legal a:hover,
.sok-footer__legal a:focus {
	color: var(--sok-ft-accent);
}

/* ------------------------------------------------------------------
   Focus ring - the dark background swallows the browser default.
   ------------------------------------------------------------------ */

.sok-footer a:focus-visible {
	outline: 2px solid var(--sok-ft-accent-2);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.sok-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.sok-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.sok-footer__inner {
		padding: 48px 20px 32px;
	}

	.sok-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sok-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 40px;
	}
}