/*
 * Site footer – responsive fixes (loaded on every template after the main stylesheet).
 *
 * Why: site.min.css switches the footer to a three-column layout at 640px, and the
 * Bootstrap grid in site-style.css applies .col-sm-* widths from 576px. Between
 * ~576px and ~991px this squashed the "Get in touch" box into a third of the width,
 * wrapped the CTA buttons onto three lines and broke the social / copyright rows.
 *
 * Breakpoints used here:
 *   < 768px         – single column, everything stacked (phones)
 *   768px – 991px   – two-column links + full-width CTA box (tablets)
 *   >= 992px        – original three-column desktop layout
 */

/* ---------- Base (all widths) ---------- */
.site-footer {
	font-size: 16px;
}

/* Some templates set body ul/li to 18px; keep footer lists consistent everywhere. */
.site-footer ul,
.site-footer ol,
.site-footer li {
	font-size: 16px;
}

.site-footer div.wrap-contact div.wrap-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer div.wrap-contact div.wrap-block ul li {
	margin: 0;
	line-height: 1.4;
}

/* Comfortable touch targets for footer nav links. */
.site-footer div.wrap-contact div.wrap-block ul li a {
	display: inline-block;
	padding: 6px 0;
	line-height: 1.4;
}

.site-footer div.wrap-contact div.wrap-block {
	padding: 12px 0;
	line-height: 1.6;
}

.site-footer div.wrap-contact div.wrap-block div.data-title {
	margin-bottom: 8px;
}

.site-footer div.wrap-contact .textMed {
	font-size: 22px;
	line-height: 1.25;
}

/* CTA buttons: allow graceful wrapping instead of line-height: 3.2 stacking. */
.site-footer div.wrap-contact div.wrap-popoutbox .buttonalt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
}

.site-footer div.wrap-contact div.wrap-popoutbox > div {
	margin-bottom: 12px;
}

/* Social row */
.site-footer div.wrap-contact div.wrap-social {
	padding: 20px 0;
}

.site-footer div.wrap-contact div.wrap-social ul.list-social {
	gap: 4px 6px;
}

.site-footer div.wrap-contact div.wrap-social ul.list-social li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	margin: 0;
}

.site-footer div.wrap-contact div.wrap-social ul.list-social li.first {
	width: auto;
	padding-right: 6px;
	white-space: nowrap;
}

.site-footer div.wrap-contact div.wrap-social ul.list-social li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.site-footer div.wrap-contact div.wrap-social ul.list-social li img {
	height: 22px;
	width: auto;
}

/* Copyright / logos */
.site-footer div.wrap-copyright div.data-copyright {
	line-height: 1.7;
}

.site-footer div.wrap-copyright div.data-copyright a {
	display: inline-block;
	padding: 4px 2px;
}

.site-footer div.wrap-copyright div.wrap-logos ul.list-logos {
	gap: 8px 16px;
}

.site-footer div.wrap-copyright div.wrap-logos ul.list-logos li {
	padding: 0;
	margin: 0;
}

.site-footer div.wrap-copyright div.wrap-logos ul.list-logos li img {
	height: 55px;
	width: auto;
}

/* ---------- Up to tablet: single column, full-width blocks ---------- */
@media (max-width: 991.98px) {
	.site-footer .row,
	.site-footer div.wrap-contact .row,
	.site-footer div.wrap-copyright .row {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	/* Neutralise Bootstrap .col-sm-* widths (they apply from 576px). */
	.site-footer .col,
	.site-footer [class*="col-"],
	.site-footer div.wrap-copyright .row .col {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		margin: 0;
	}

	/* Keep "Get in touch" + social first, then the link columns. */
	.site-footer div.wrap-contact > .row > .col-sm-4 {
		order: -1;
	}

	.site-footer div.wrap-contact div.wrap-popoutbox {
		margin-top: 0;
	}

	/* Accreditation logos above the copyright line. */
	.site-footer div.wrap-copyright > .row > .col-sm-4 {
		order: -1;
	}

	.site-footer div.wrap-copyright {
		text-align: center;
	}

	.site-footer div.wrap-copyright div.wrap-logos {
		margin: 8px 0 16px;
	}

	.site-footer > .container > .row .col img {
		margin-bottom: 8px;
	}
}

@media (max-width: 767.98px) {
	.site-footer {
		padding: 32px 0 24px;
	}

	.site-footer div.wrap-contact div.wrap-popoutbox {
		padding: 20px 16px 8px;
	}
}

/* ---------- Tablet: two link columns, CTA box full width ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
	.site-footer div.wrap-contact .col-sm-8 > .row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.site-footer div.wrap-contact .col-sm-8 > .row > .col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}

	.site-footer div.wrap-contact div.wrap-popoutbox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 16px;
		padding: 20px 20px 8px;
	}

	.site-footer div.wrap-contact div.wrap-popoutbox div.data-title {
		flex: 0 0 100%;
	}

	.site-footer div.wrap-contact div.wrap-popoutbox > div:not(.data-title) {
		flex: 1 1 0;
		min-width: 0;
	}

	.site-footer div.wrap-copyright .row {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	.site-footer div.wrap-copyright {
		text-align: left;
	}

	.site-footer div.wrap-copyright .row > .col-sm-8 {
		flex: 1 1 auto;
		max-width: none;
		width: auto;
	}

	.site-footer div.wrap-copyright .row > .col-sm-4 {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
		order: 0;
	}

	.site-footer div.wrap-copyright div.wrap-logos {
		margin: 0;
	}

	.site-footer div.wrap-copyright div.wrap-logos ul.list-logos {
		justify-content: flex-end;
	}
}

/* ---------- Desktop: original three-column layout ---------- */
@media (min-width: 992px) {
	.site-footer div.wrap-contact .textMed {
		font-size: 28px;
	}
}