/*
 * footer.css — the site footer and the back-to-top button.
 *
 * Sibling of css/header.css: theme chrome has no block.json to hang a per-block
 * stylesheet on, so it gets its own sheet enqueued from sws_theme_scripts().
 * Front end only — there is no footer inside the editor canvas.
 *
 * Written mobile-first. Media queries are correct here (unlike in blocks): the
 * footer spans the viewport, so the viewport is what it should measure. The
 * 576px and 992px thresholds come from the reference layout, where the four
 * widget columns fold to two and then to one.
 */

/*
 * Border-box is declared here rather than globally: theme block rails size as
 * content-box, and a global override would narrow every one of them by their
 * own padding (sws-kit/docs/core-blocks.md).
 */
.sws-footer,
.sws-footer *,
.sws-footer *::before,
.sws-footer *::after,
.sws-back-to-top,
.sws-back-to-top * {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Shell
--------------------------------------------------------------*/

/*
 * The z-index is load-bearing, not decoration: it makes the footer a stacking
 * context, which is what lets .sws-footer__decor sit at z-index -1 — above this
 * background but below the columns. Without it the decoration would fall
 * through the background and disappear.
 *
 * overflow keeps the glow and the symbols from widening the document when they
 * reach past the edge on narrow screens.
 */
.sws-footer {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-top: 3.125rem;
	background-color: var(--wp--preset--color--surface-alt, #f7fafd);
}

/* The rail shared with the header and every section block. */
.sws-footer__inner {
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
}

.sws-footer__widgets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.875rem;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.sws-footer__heading {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.sws-footer__brand {
	margin-bottom: 1.25rem;
}

/* the_custom_logo() names the tag itself; the theme only bounds it. */
.sws-footer__brand .custom-logo {
	width: auto;
	max-width: 9.375rem;
	height: auto;
}

.sws-footer__brand-title {
	margin: 0;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

.sws-footer__brand-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-footer__brand-title a:hover,
.sws-footer__brand-title a:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-footer__about {
	margin: 0;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.9;
}

/*--------------------------------------------------------------
# Link columns
--------------------------------------------------------------*/

.sws-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-footer__links li {
	margin-bottom: 0.625rem;
}

.sws-footer__links li:last-child {
	margin-bottom: 0;
}

/*
 * inline-block so the hover indent moves the link and not the line box, and so
 * the padding transition has a box to animate.
 */
.sws-footer__links a {
	display: inline-block;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.6;
	text-decoration: none;
	transition:
		color var(--sws-transition),
		padding-inline-start var(--sws-transition);
}

.sws-footer__links a:hover,
.sws-footer__links a:focus-visible {
	padding-inline-start: 0.4375rem;
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*--------------------------------------------------------------
# Contacts
--------------------------------------------------------------*/

.sws-footer__contacts {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

/*
 * Grid rather than the reference's absolute icon: a wrapped address then keeps
 * its hanging indent instead of running back under the icon.
 */
.sws-footer__contacts li {
	display: grid;
	grid-template-columns: 0.9375rem minmax(0, 1fr);
	gap: 0.625rem;
	align-items: start;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.7;
}

.sws-footer__contacts li:last-child {
	margin-bottom: 0;
}

.sws-footer__contact-icon {
	width: 0.9375rem;
	height: 0.9375rem;
	margin-top: 0.3125rem;
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-footer__contacts a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-footer__contacts a:hover,
.sws-footer__contacts a:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*--------------------------------------------------------------
# Social links
--------------------------------------------------------------*/

.sws-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--accent, #44ce6f);
	border-radius: 50%;
	color: var(--wp--preset--color--accent, #44ce6f);
	transition:
		background-color var(--sws-transition),
		color var(--sws-transition);
}

.sws-footer__social-link:hover,
.sws-footer__social-link:focus-visible {
	background-color: var(--wp--preset--color--accent, #44ce6f);
	color: var(--wp--preset--color--surface, #ffffff);
}

.sws-footer__social-icon {
	width: 0.9375rem;
	height: 0.9375rem;
}

/*--------------------------------------------------------------
# Copyright
--------------------------------------------------------------*/

.sws-footer__copyright {
	margin-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line, #dbeefd);
	padding-block: 1.25rem;
	text-align: center;
}

.sws-footer__copyright p {
	margin: 0;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
}

/*
 * The legal row under the copyright line. It wraps as a whole on narrow
 * screens, and the block padding on the links lifts each target past the 24px
 * minimum of WCAG 2.5.8 without spreading the row apart.
 */
.sws-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * No hover indent like .sws-footer__links: in a centred row it would shove the
 * neighbouring link sideways.
 */
.sws-footer__legal a,
.sws-footer__legal-button {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.6;
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-footer__legal a:hover,
.sws-footer__legal a:focus-visible,
.sws-footer__legal-button:hover,
.sws-footer__legal-button:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*
 * "Cookie settings" opens the consent banner rather than going anywhere, so it
 * is a button (inc/analytics.php). It takes the link look above and drops the
 * browser's button chrome.
 */
.sws-footer__legal-button {
	margin: 0;
	padding-inline: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-weight: inherit;
	cursor: pointer;
}

/*
 * The button ships hidden until js/analytics.js can drive it. Its display
 * above outranks the browser's [hidden] rule, and an empty item would still
 * add a gap to the centred row.
 */
.sws-footer__legal-button[hidden],
.sws-footer__legal li:has(> [hidden]) {
	display: none;
}

/*--------------------------------------------------------------
# Decoration
--------------------------------------------------------------*/

.sws-footer__decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* inset + auto margins centre the map on both axes at its own size. */
.sws-footer__map {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 100%;
	height: auto;
	opacity: 0.7;
}

/* Placed and turning as in the reference, which spins this bloom on the Y axis. */
.sws-footer__glow {
	position: absolute;
	top: 20%;
	left: 30px;
	width: 12.625rem;
	height: auto;
	opacity: 0.4;
	animation: sws-rotate-3d 4s linear infinite;
}

/*
 * Schematic symbols from the theme's own set, drifting across the whole band —
 * the same device the hero opens the page with. Which three appear is decided
 * in footer.php; the slots below own where each one starts and how it moves.
 *
 * They are not dimmed. The map behind them is the quiet layer; these are meant
 * to read as the drawn symbols they are, so opacity matches the hero's.
 */
.sws-footer__symbol {
	position: absolute;
	opacity: 0.8;
}

.sws-footer__symbol-icon {
	/*
	 * Explicit size, not optional: the icons ship with a viewBox and no width or
	 * height, and an unsized SVG in HTML falls back to 300x150. stroke-width is
	 * trimmed from the 4 the files carry, matching the hero.
	 */
	display: block;
	width: var(--sws-footer-symbol-size, 2.75rem);
	height: var(--sws-footer-symbol-size, 2.75rem);
	stroke-width: 3.5;
}

/*
 * Slot 1 is the one narrow screens keep, so it starts where the stacked columns
 * leave room and drifts inward rather than across the headings.
 */
.sws-footer__symbol:nth-of-type(1) {
	--sws-footer-symbol-size: 3rem;

	top: 8%;
	right: 6%;
	animation: sws-drift 20s linear infinite;
}

.sws-footer__symbol:nth-of-type(2) {
	--sws-footer-symbol-size: 2.75rem;

	top: 46%;
	left: 8%;
	animation: sws-spin 20s linear infinite;
}

.sws-footer__symbol:nth-of-type(3) {
	--sws-footer-symbol-size: 2.5rem;

	bottom: 34%;
	left: 46%;
	animation: sws-drift 15s linear infinite;
}

/* The full trio needs the width the four-column row brings with it. */
.sws-footer__symbol:nth-of-type(2),
.sws-footer__symbol:nth-of-type(3) {
	display: none;
}

.sws-footer__symbol--accent {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-footer__symbol--secondary {
	color: var(--wp--preset--color--secondary, #c679e3);
}

.sws-footer__symbol--tertiary {
	color: var(--wp--preset--color--tertiary, #27eac8);
}

/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/

/*
 * Scroll marker read by IntersectionObserver. Absolutely positioned against the
 * initial containing block, so it sits at the top of the document and occupies
 * no space in the flow.
 */
.sws-back-to-top__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

/*
 * Absent until JavaScript claims it. The button does nothing on its own, so
 * rendering it unconditionally would leave a dead control in the tab order —
 * the same bargain css/header.css makes with the burger.
 */
.sws-back-to-top {
	display: none;
	position: fixed;
	right: 0;
	bottom: 1.875rem;
	z-index: 90;
	width: 2.8125rem;
	height: 2.8125rem;
	padding: 0;
	border: 0;
	/* Rounded on the inner side only: the button is docked to the viewport edge. */
	border-radius: 10px 0 0 10px;
	background-color: var(--wp--preset--color--secondary, #c679e3);
	color: var(--wp--preset--color--surface, #ffffff);
	cursor: pointer;
	transition:
		background-color var(--sws-transition),
		opacity var(--sws-transition),
		visibility var(--sws-transition),
		transform var(--sws-transition);
}

.sws-back-to-top--enabled {
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
}

.sws-back-to-top--visible {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}

.sws-back-to-top:hover,
.sws-back-to-top:focus-visible {
	background-color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-back-to-top__icon {
	width: 1.125rem;
	height: 1.125rem;
}

/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/

@media screen and (min-width: 576px) {

	.sws-footer__widgets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 768px) {

	.sws-footer {
		padding-top: 5rem;
	}

	.sws-footer__heading {
		margin-bottom: 1.875rem;
		font-size: 1.125rem;
	}

	.sws-footer__copyright {
		margin-top: 3.125rem;
		padding-block: 1.5625rem;
	}
}

@media screen and (min-width: 992px) {

	.sws-footer__widgets {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sws-footer__copyright {
		margin-top: 5rem;
	}

	.sws-footer__symbol:nth-of-type(2),
	.sws-footer__symbol:nth-of-type(3) {
		display: block;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

/*
 * base.css collapses --sws-duration, which reaches the transitions above but
 * not a keyframe animation, so the decoration is stopped here by hand.
 * `:nth-of-type(n)` matches every symbol and costs the same specificity as the
 * per-slot rules, so this wins on source order alone — no !important needed.
 */
@media (prefers-reduced-motion: reduce) {

	.sws-footer__glow,
	.sws-footer__symbol:nth-of-type(n) {
		animation: none;
	}
}