/*
 * Touchstar footer
 * -----------------------------------------------------------------------------
 * Layout above 992px, which is where the theme's own footer switches from stacked
 * to horizontal (flex-column flex-lg-row):
 *
 *   [logo]            Footer menu      Policies menu
 *   phone
 *   email
 *   ------------------ accreditation logos ------------------
 *   ---------------------------------------------------------
 *                        copyright, right aligned
 *
 * The brand column and the copyright bar are built by footer.js. Nothing here
 * assumes how many items either menu holds, so items can be added or removed in
 * Appearance > Menus freely.
 */

/* --- Both menus styled alike ---------------------------------------------- */
/* The theme's `reversed` modifier inverts its underline: normally the 1px rule is
   hidden and appears on hover, but reversed shows it and hides it on hover. The
   Policies menu carries it and the Footer menu does not, which read as two
   different styles once they sat side by side as equal columns. These two rules
   put the Policies links back on the default behaviour. */
#footer .main-footer-links a.reversed::before {
	opacity: 0 !important;
	bottom: -6px !important;
}

#footer .main-footer-links a.reversed:hover::before {
	opacity: 1 !important;
	bottom: -2px !important;
}

/* Was 16px/700 on the Footer menu and 14px/400 on Policies. Both to 14px/400,
   outside the media query so the two match at every width, not just desktop. */
#footer .main-footer-links a {
	font-size: 14px !important;
	font-weight: 400 !important;
}

/* --- Brand column (built by footer.js) ------------------------------------ */
#footer .tsdn-brand {
	width: 100%;
	margin-bottom: 32px;
	text-align: center;
}

#footer .tsdn-brand__logo {
	display: inline-block;
	width: 200px;
	max-width: 100%;
}

/* The theme caps every footer image at 160 x 80 via `#footer img`. The brand
   logo opts out of that; the accreditation strip below keeps it, lowered. */
#footer .tsdn-brand__logo img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
}

#footer .tsdn-contact {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

#footer .tsdn-contact li {
	margin: 0 0 8px;
}

#footer .tsdn-contact li:last-child {
	margin-bottom: 0;
}

#footer .tsdn-contact a {
	font-size: 14px;
	font-weight: 400;
	color: #000;
	text-decoration: none;
}

#footer .tsdn-contact a:hover {
	text-decoration: underline;
}

/* --- Accreditation logos (moved into the menu row by footer.js) ------------ */
/* The theme spread these across the full footer width in a grey panel below the
   menus. They now sit as a compact fourth column, wrapping to two rows. */
#footer .tsdn-accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	margin-top: 32px;
}

#footer .tsdn-accreditations > * {
	margin: 0 !important;                /* clears the theme's mb-8 on each item */
	padding: 0 !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

/* A straight 25% off the theme's 160 x 80 caps. width/height auto and
   object-fit: contain come from the theme, so aspect ratios are preserved and
   the lazy-loading placeholders still reserve the right space. */
#footer .tsdn-accreditations img {
	max-width: 120px !important;
	max-height: 60px !important;
}

/* --- Copyright bar (built by footer.js) ----------------------------------- */
#footer .tsdn-copyright {
	margin: 0 auto;
	padding: 20px 16px 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	max-width: 1320px;                   /* matches Bootstrap's .container at xxl */
}

#footer .tsdn-copyright p {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #555 !important;
	text-align: center;
}

@media (max-width: 1399.98px) {
	#footer .tsdn-copyright {
		max-width: 1140px;
	}
}

@media (max-width: 1199.98px) {
	#footer .tsdn-copyright {
		max-width: 960px;
	}
}

@media (max-width: 991.98px) {
	#footer .tsdn-copyright {
		max-width: none;
	}
}

/* --- Desktop layout -------------------------------------------------------- */
@media (min-width: 992px) {

	#footer .container {
		padding-top: 72px !important;
		padding-bottom: 24px !important;
	}

	#footer .main-footer-links {
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		gap: 40px;
	}

	#footer .tsdn-brand {
		flex: 0 0 auto;
		min-width: 203px;
		width: auto;
		margin-bottom: 0;
		text-align: left;
	}

	/* Fixed width so the logos wrap to two rows rather than spreading. With
	   space-between above, this anchors the right edge and the two menu columns
	   distribute evenly between it and the brand column. */
	#footer .tsdn-accreditations {
		flex: 0 0 400px;
		width: 400px;
		justify-content: flex-end;
		gap: 20px;
		margin-top: 0;
	}

	/* Narrower desktops cannot carry 400px of logos plus 40px gaps beside three
	   columns, so both tighten. */
	@media (max-width: 1199.98px) {
		#footer .main-footer-links {
			gap: 24px;
		}

		#footer .tsdn-accreditations {
			flex-basis: 340px;
			width: 340px;
			gap: 16px;
		}
	}

	#footer .tsdn-contact {
		margin-top: 20px;
	}

	#footer .main-footer-links > [class*="col-"] {
		flex: 0 0 auto !important;
		width: auto !important;
		align-items: flex-start !important;
		margin-bottom: 0 !important;
	}

	#footer .main-footer-links .small-links {
		flex-direction: column !important;
		align-items: flex-start !important;
		margin-bottom: 0 !important;
	}

	/* --- Menus, stacked ---------------------------------------------------- */
	#footer .main-footer-links ul.list-unstyled {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		margin: 0 !important;
	}

	/* Overrides the theme's Bootstrap spacing utilities (me-lg-4, mb-4, mx-2 and
	   friends), which are themselves !important but only single-class specificity. */
	#footer .main-footer-links li {
		margin: 0 0 12px !important;
	}

	#footer .main-footer-links li:last-child {
		margin-bottom: 0 !important;
	}

	#footer .tsdn-copyright p {
		text-align: right;
	}
}