/* The site footer (_footer.html.j2): the light-on-blue footer as the live site drew
   it, from the blogs' theme settings (the blue), the theme's footer sheet (the spacing), the Custom
   CSS (the titles' underline) and the Elementor template of the other blogs' brand block.
   Loads last, next to header.css. */

.prefooter {
	padding-bottom: 40px;
}

.site-footer {
	background-color: #13396f;
	color: #fff;
	font-family: "Nunito", "Lato", Arial, Helvetica, sans-serif;
}

:where(.site-footer) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.site-footer) li,
:where(.site-footer) p {
	margin: 0;
}

.footer-main {
	padding-top: 40px;
	padding-bottom: 10px;
}

/* the brand block: logo, tagline, social links, centred */
.footer-brand {
	margin-bottom: 45px;
	padding: 15px 15px 3px;
	text-align: center;
}

.footer-logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.footer-tagline {
	margin-top: 5px;
	font-size: 16px;
	line-height: 1.6;
}

.footer-social {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 5px;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #fff;
	transition: opacity .3s;
}

.footer-social a:hover {
	opacity: .9;
}

.footer-social svg {
	display: block;
}

/* the menu columns: one, two from 576px, four from 1025px */
.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 30px;
}

/* the main site's first column was empty and kept a 1px line above its margin */
.footer-columns:first-child {
	padding-top: 31px;
}

.footer-column {
	/* Bootstrap's columns were positioned: it sets where the links' text lands on the pixel grid */
	position: relative;
	margin-bottom: 30px;
}

.footer-title {
	position: relative;
	margin-bottom: 20px;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
}

.footer-links {
	line-height: 1.4;
}

.footer-links li:not(:last-child) {
	margin-bottom: 15px;
}

.footer-links a {
	display: inline-block;
	padding-inline-end: 2px;
	color: rgba(255, 255, 255, .6);
	font-size: 16px;
	line-height: 1.4;
	transition: all .25s ease;
}

.footer-links a:hover,
.footer-links a:focus {
	color: #fff;
}

/* the disclaimer and the copyright line, centred under a hairline */
.footer-bottom {
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .8);
	text-align: center;
}

.footer-disclaimer {
	margin-bottom: 24px;
	font-size: 10px;
	line-height: 1.2;
}

.footer-copyright {
	font-size: 16px;
	line-height: 1.2;
}

.footer-copyright strong {
	font-size: 10px;
	font-weight: 700;
}

/* the sign sat on the baseline with the font's descent below it */
.footer-copyright-sign {
	vertical-align: -.0625em;
}

@media (min-width: 576px) {
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.footer-brand {
		margin-bottom: 40px;
		padding: 20px 20px 8px;
	}

	.footer-columns {
		grid-template-columns: repeat(4, 1fr);
	}

	.footer-title {
		padding-bottom: 10px;
	}

	.footer-title::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 80%;
		height: 2px;
		background-color: #3496db;
	}
}