/* Global site footer (footer.php) — loaded on every front-end page.
   Self-contained: defines its own tokens/reset bits rather than relying on
   assets/css/pages/air-home.css, since that only loads on the Air Home
   template and this footer is shared by every page. */

:root {
	--color-navy: #081c30;
	--color-accent: #a61c24;
	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--transition: 200ms ease;
	--container: 1360px;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}
@media (max-width: 720px) {
	.container {
		padding-inline: 16px;
	}
}

.site-footer {
	background: var(--color-navy);
	color: #b9c7d6;
	padding-top: 64px;
}
.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 860px) {
	.footer-top {
		grid-template-columns: 1fr 1fr;
		row-gap: 32px;
	}
}
@media (max-width: 520px) {
	.footer-top {
		grid-template-columns: 1fr;
	}
}
.footer-logo {
	border-radius: 10px;
	object-fit: cover;
	margin-bottom: 4px;
	filter: brightness(0) invert(1);
}
.footer-brand p {
	margin-top: 14px;
	font-size: 14.5px;
	max-width: 280px;
}
.footer-col h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	font-size: 15px;
	margin-bottom: 16px;
}
.footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.footer-col a {
	color: inherit;
	text-decoration: none;
	font-size: 14.5px;
	transition: color var(--transition);
}
.footer-col a:hover {
	color: var(--color-accent);
}
.footer-social {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.footer-social a {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-social a:hover {
	background: var(--color-accent);
	color: #fff;
}
.footer-social svg {
	width: 18px;
	height: 18px;
}
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 24px 16px;
	font-size: 13.5px;
	color: inherit;
}
@media (max-width: 720px) {
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}
.footer-bottom a {
	color: inherit;
	text-decoration: none;
}
.footer-bottom a:hover {
	color: var(--color-accent);
}