/**
 * SE Footer (mod_sefooter)
 * Copyright (C) 2026 SE24 Media. All rights reserved.
 * GNU General Public License version 2 or later.
 *
 * Colours, fonts and sizes come from CSS custom properties written per
 * instance (#sefo-{id}).
 */

.sefo {
	box-sizing: border-box;
	background: var(--sefo-bg, #0A1420);
	color: var(--sefo-text, #C3CCD8);
	font-family: var(--sefo-font-body, inherit);
	font-size: var(--sefo-text-size, 15px);
	line-height: 1.6;
}

.sefo *,
.sefo *::before,
.sefo *::after {
	box-sizing: border-box;
}

.sefo--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

body:has(.sefo--bleed) {
	overflow-x: clip;
}

.sefo__inner {
	max-width: var(--sefo-maxw, 1200px);
	margin: 0 auto;
	padding: var(--sefo-pad-top, 56px) 24px var(--sefo-pad-bottom, 32px);
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* ---------- Links ---------- */
.sefo a {
	color: var(--sefo-link, #FFFFFF);
	text-decoration: var(--sefo-underline, underline);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.sefo a:hover,
.sefo a:focus-visible {
	color: var(--sefo-link-hover, #FF9A9A);
	text-decoration: underline;
}

.sefo a:focus-visible {
	outline: 2px solid var(--sefo-link-hover, #FF9A9A);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Grid ---------- */
.sefo__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--sefo-brand-fr, 1fr)) repeat(var(--sefo-cols, 2), minmax(0, 1fr));
	gap: 32px;
}

.sefo--no-cols .sefo__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Brand column ---------- */
.sefo__brand,
.sefo__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.sefo .sefo__home {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	text-decoration: none;
	color: var(--sefo-brand, #FFFFFF);
}

.sefo__logo {
	display: block;
	height: var(--sefo-logo-h, 44px);
	width: auto;
	max-width: 100%;
}

.sefo__mark {
	flex: none;
	width: 36px;
	height: 36px;
}

.sefo__mark rect {
	fill: var(--sefo-mark-bg, #FFFFFF);
}

.sefo__mark circle {
	stroke: var(--sefo-mark-fg, #0E1B2C);
}

.sefo__mark line {
	stroke: var(--sefo-mark-line, #C8102E);
}

.sefo__name {
	font-family: var(--sefo-font-brand, inherit);
	font-weight: var(--sefo-brand-weight, 700);
	font-size: var(--sefo-brand-size, 22px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sefo-brand, #FFFFFF);
}

.sefo__blurb {
	margin: 0;
	max-width: 30rem;
}

.sefo__contact {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.sefo .sefo__phone {
	color: var(--sefo-brand, #FFFFFF);
	font-weight: 600;
}

/* Social icons in the bottom bar sit on the right and are a little smaller */
.sefo__bottom .sefo__social {
	margin: 0 0 0 auto;
}

.sefo .sefo__bottom .sefo__social a {
	width: 40px;
	height: 40px;
}

/* ---------- Social ---------- */
.sefo__social {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sefo .sefo__social a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sefo-social-bg, #16222F);
	color: var(--sefo-social-color, #FFFFFF);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sefo .sefo__social a:hover,
.sefo .sefo__social a:focus-visible {
	background: var(--sefo-link-hover, #FF9A9A);
	color: var(--sefo-bg, #0A1420);
}

/* ---------- Columns ---------- */
.sefo__heading {
	margin: 0;
	font-family: var(--sefo-font-body, inherit);
	font-size: var(--sefo-head-size, 15px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: var(--sefo-head-ls, 0);
	color: var(--sefo-heading, #FFFFFF);
	text-transform: var(--sefo-head-tt, none);
	font-weight: 600;
}

.sefo__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.sefo__links a {
	display: inline-block;
}

/* ---------- Bottom bar ---------- */
.sefo__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--sefo-divider, #1F2C3D);
	font-size: var(--sefo-bottom-size, 14px);
	color: var(--sefo-bottom, #C3CCD8);
}

.sefo__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.sefo .sefo__legal a {
	color: var(--sefo-bottom, #C3CCD8);
}

.sefo .sefo__legal a:hover,
.sefo .sefo__legal a:focus-visible {
	color: var(--sefo-link-hover, #FF9A9A);
}

/* ---------- Tablet ---------- */
@media (max-width: 1023.98px) {
	.sefo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sefo__brand {
		grid-column: 1 / -1;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 639.98px) {
	.sefo__inner {
		padding-top: var(--sefo-pad-top-m, 44px);
		gap: 32px;
	}

	.sefo__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sefo__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.sefo__bottom .sefo__social {
		margin: 0;
	}

	/* Bigger tap targets for the stacked links. */
	.sefo__links,
	.sefo__legal {
		gap: 4px 20px;
	}

	.sefo__links a,
	.sefo__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sefo a,
	.sefo .sefo__social a {
		transition: none;
	}
}