/* -------------------------------------------------------------------------- */
/* Site Footer                                                                */
/* -------------------------------------------------------------------------- */

.site-footer {
	--thula-footer-bg: #ffffff;
	--thula-footer-border: #e2e7ef;

	box-sizing: border-box;
	width: 100%;
	margin-block: 0;

	color: var(--wp--preset--color--thula-blue);
	background-color: var(--thula-footer-bg);
}


/**
 * The Site Container owns the content width and responsive page gutter.
 * Footer CSS only owns vertical spacing.
 */
.site-footer__container {
	padding-top:
		clamp(
			var(--wp--preset--spacing--40),
			3.5vw,
			var(--wp--preset--spacing--80)
		);
	padding-bottom: var(--wp--preset--spacing--40);
}


/* -------------------------------------------------------------------------- */
/* Main Footer                                                                */
/* -------------------------------------------------------------------------- */

.site-footer__main {
	align-items: flex-start;

	width: 100%;
	margin: 0;
}


.site-footer__brand-column {
	flex: 0 0 22%;
	min-width: 0;
}


.site-footer__navigation-column {
	flex: 1 1 78%;
	min-width: 0;
}


/* -------------------------------------------------------------------------- */
/* Brand                                                                      */
/* -------------------------------------------------------------------------- */

.site-footer__brand {
	min-width: 0;
	margin: 0;
}


.site-footer__brand .wp-block-site-logo {
	margin: 0;
}


.site-footer__brand .wp-block-site-logo img {
	display: block;

	width: 180px;
	max-width: 100%;
	height: auto;
}


.site-footer__slogan {
	margin: 0;
	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

/**
 * Keep the slogan visually connected to the logo.
 */
.site-footer__brand .wp-block-site-logo + .site-footer__slogan {
	margin-block-start: 0.5rem;
}


/* -------------------------------------------------------------------------- */
/* Navigation Grid                                                            */
/* -------------------------------------------------------------------------- */

/**
 * This remains a Core Grid block in the pattern.
 *
 * Explicit tracks ensure the front end always reproduces the intended footer
 * composition. Latest News receives slightly more room because its content is
 * naturally wider than the simple navigation lists.
 */
.site-footer .site-footer__nav-grid {
	display: grid;

	grid-template-columns:
		minmax(7rem, 0.85fr)
		minmax(8rem, 1fr)
		minmax(7rem, 0.9fr)
		minmax(13rem, 1.45fr);

	align-items: start;

	width: 100%;
	min-width: 0;
	margin: 0;
}


.site-footer__nav-column {
	min-width: 0;
	margin: 0;
}


.site-footer__nav-title {
	margin: 0;

	color: var(--wp--preset--color--thula-blue);

	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}


.site-footer__nav {
	width: 100%;
	margin: 0;

	font-size: var(--wp--preset--font-size--small);
}


.site-footer__nav .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.5rem;
}


/* -------------------------------------------------------------------------- */
/* Footer Links                                                               */
/* -------------------------------------------------------------------------- */

.site-footer .wp-block-navigation-item__content,
.site-footer .wp-block-navigation-item__content:visited {
	color: var(--wp--preset--color--thula-blue);
	text-decoration: none;
}


.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"])
	.wp-block-navigation-item__label {
	background-image: linear-gradient(
		var(--wp--preset--color--thula-teal),
		var(--wp--preset--color--thula-teal)
	);

	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;

	transition: background-size 0.4s ease;
}


.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):hover
	.wp-block-navigation-item__label,
.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):focus-visible
	.wp-block-navigation-item__label {
	background-size: 100% 2px;
}


/**
 * Placeholder links remain disabled until their real URLs are available.
 */
.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content:not([href]),
.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content[href=""],
.site-footer
	.wp-block-navigation
	a.wp-block-navigation-item__content[href="#"] {
	pointer-events: none;
	cursor: default;
}


/* -------------------------------------------------------------------------- */
/* Latest News                                                                */
/* -------------------------------------------------------------------------- */

.site-footer__nav-column--news .wp-block-query {
	width: 100%;

	margin-block-start: var(--wp--preset--spacing--20);
	margin-block-end: 0;
}

.footer-news-date {
	margin: 0 0 0.15rem;
	color: var(--wp--preset--color--dark-grey);
	line-height: 1.2;
}

.footer-news-date + .wp-block-post-title {
	margin-top: 0;
}


/**
 * Give individual news entries clear separation rather than relying on
 * margins generated by the Query Loop.
 */
.site-footer__nav-column--news .wp-block-post-template {
	display: flex;
	flex-direction: column;

	gap: 0.875rem;

	margin: 0;
	padding: 0;
}


.site-footer__nav-column--news .wp-block-post {
	margin: 0;
}


/**
 * Smaller supporting icon.
 */
.site-footer .footer-news-thumbnail {
	flex: 0 0 32px;

	width: 32px;
	height: 32px;

	margin: 0;

	overflow: hidden;

	border-radius: 4px;
}


.site-footer .footer-news-thumbnail img {
	display: block;

	width: 32px;
	height: 32px;

	object-fit: cover;
}


/**
 * News icon and headline remain side-by-side at every viewport size.
 */
.site-footer .wp-block-query .wp-block-columns {
	flex-direction: row !important;
	flex-wrap: nowrap !important;

	align-items: flex-start;

	gap: var(--wp--preset--spacing--10);

	margin: 0;
}


.site-footer .wp-block-query .wp-block-column:first-child {
	flex: 0 0 auto !important;

	width: auto !important;
}


.site-footer .wp-block-query .wp-block-column:last-child {
	flex: 1 1 auto;

	min-width: 0;
}


.site-footer .wp-block-post-title {
	margin: 0;
}


.site-footer .wp-block-post-title a,
.site-footer .wp-block-post-title a:visited {
	color: var(--wp--preset--color--thula-blue);
	text-decoration: none;
}


.site-footer .wp-block-post-title a:hover,
.site-footer .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--thula-teal);
}


/* -------------------------------------------------------------------------- */
/* Footer Bottom                                                              */
/* -------------------------------------------------------------------------- */

.site-footer__bottom {
	width: 100%;

	margin-top:
		clamp(
			var(--wp--preset--spacing--50),
			5vw,
			var(--wp--preset--spacing--60)
		);

	padding-top: var(--wp--preset--spacing--20);

	border-top: 1px solid var(--thula-footer-border);
}


.site-footer__bottom
	.wp-block-thula-blocks-copyright-date-block {
	margin: 0;

	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
}


.site-footer__legal-nav {
	margin: 0;

	font-size: var(--wp--preset--font-size--x-small);
}


.site-footer__legal-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}


/* -------------------------------------------------------------------------- */
/* Medium / Tablet                                                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

	/**
	 * Retain the brand/navigation relationship while there is still enough
	 * horizontal room, but reduce the navigation to a balanced 2 × 2 grid.
	 */
	.site-footer .site-footer__nav-grid {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1.25fr);
	}


	.site-footer__main {
		column-gap: var(--wp--preset--spacing--50);
	}


	.site-footer__brand-column {
		flex-basis: 26%;
	}


	.site-footer__navigation-column {
		flex-basis: 74%;
	}
}


/* -------------------------------------------------------------------------- */
/* Tablet / Small Screens                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/**
	 * Core Columns now stacks the brand above the navigation.
	 */
	.site-footer__main {
		row-gap: var(--wp--preset--spacing--50);
	}


	.site-footer__brand-column,
	.site-footer__navigation-column {
		flex-basis: 100% !important;

		width: 100%;
	}


	/**
	 * Retain two navigation columns. This keeps the footer compact while still
	 * leaving enough width for each group.
	 */
	.site-footer .site-footer__nav-grid {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);
	}


	.site-footer__nav-grid {
		column-gap: var(--wp--preset--spacing--40);
		row-gap: var(--wp--preset--spacing--40);
	}
}


/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.site-footer__container {
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--30);
	}


	.site-footer__nav-grid {
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--40);
	}


	/**
	 * Legal links appear first on Mobile, followed by copyright.
	 *
	 * Everything is centred to give the footer a deliberate lower edge.
	 */
	.site-footer__bottom {
		flex-direction: column;

		align-items: center;
		justify-content: center;

		gap: var(--wp--preset--spacing--20);

		text-align: center;
	}


	.site-footer__legal-nav {
		order: 1;

		width: 100%;
	}


	.site-footer__legal-nav .wp-block-navigation__container {
		justify-content: center;

		width: 100%;

		gap: var(--wp--preset--spacing--40);
	}


	.site-footer__bottom
		.wp-block-thula-blocks-copyright-date-block {
		order: 2;

		width: 100%;

		text-align: center;
	}
}


/**
 * On exceptionally narrow screens, fall back to one navigation column rather
 * than allowing text to become cramped or overflow.
 */
@media (max-width: 360px) {

	.site-footer .site-footer__nav-grid {
		grid-template-columns: 1fr;
	}


	.site-footer__legal-nav .wp-block-navigation__container {
		flex-direction: column;

		align-items: center;

		gap: var(--wp--preset--spacing--10);
	}
}


/* -------------------------------------------------------------------------- */
/* Reduced Motion                                                             */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.site-footer .wp-block-navigation-item__label {
		transition: none;
	}
}