/**
 * Site footer styles.
 *
 * The footer is theme chrome rather than block content, so — like the header —
 * it carries its own global stylesheet. BEM only, prefixed with the block name;
 * mobile-first with min-width overrides.
 *
 * Layout follows the lower half of the Techivo footer mockup (Figma node
 * 5006:4990), rebuilt on live WordPress data: menu locations footer-1..3, logo,
 * contacts and footer texts from ACF.
 *
 * The floating "back to top" control lives at the end of this file: footer.php
 * renders it, and it needs the same site-wide stylesheet.
 */

/*--------------------------------------------------------------
# Root and tokens
--------------------------------------------------------------*/

.sws-footer {

	/* Flat value for the near-black gradient the mockup paints across the band. */
	--sws-footer-bg: #181a22;
	--sws-footer-main: var(--wp--preset--color--main, #3e66f3);
	--sws-footer-title: var(--wp--preset--color--title, #1c1c25);
	--sws-footer-white: var(--wp--preset--color--white, #fff);
	--sws-footer-text: #a7acb5;
	--sws-footer-line: #272c35;
	--sws-footer-container: 1380px;

	/* Right-pointing arrow in front of every menu link, recoloured by currentColor. */
	--sws-footer-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12'%3E%3Cpath d='M.75 6h12.5M8.5 1.25 13.25 6 8.5 10.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background: var(--sws-footer-bg);
	color: var(--sws-footer-text);
	font-size: 1rem;
	line-height: 1.2;
}

.sws-footer__container {
	box-sizing: border-box;
	max-width: var(--sws-footer-container);
	margin: 0 auto;
	padding-inline: clamp(16px, 4vw, 40px);
	padding-top: 56px;
}

/*--------------------------------------------------------------
# Column grid
--------------------------------------------------------------*/

.sws-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.sws-footer__column {
	min-width: 0;
}

/*--------------------------------------------------------------
# Column heading
--------------------------------------------------------------*/

.sws-footer__title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 12px;
	color: var(--sws-footer-white);
	font-family: var(--wp--preset--font-family--geologica, Geologica, Inter, sans-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.sws-footer__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 90px;
	height: 2px;
	background: linear-gradient(90deg, var(--sws-footer-main), rgb(62 102 243 / 0%));
}

/*--------------------------------------------------------------
# Branding: logo, description, social
--------------------------------------------------------------*/

.sws-footer__logo {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
}

/*
 * Descendant selector on purpose: an image optimizer may wrap the <img> in a
 * <picture>, which would break a child combinator. The mark is single-colour,
 * so inverting it yields exactly the white logo the mockup shows on the dark band.
 */
.sws-footer__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 44px;
	filter: brightness(0) invert(1);
}

.sws-footer__logo-text {
	color: var(--sws-footer-white);
	font-family: var(--wp--preset--font-family--geologica, Geologica, Inter, sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
}

.sws-footer__description {
	max-width: 297px;
	margin: 28px 0 0;
	font-size: 1rem;
	letter-spacing: 0.16px;
	line-height: 1.625;
}

.sws-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.sws-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--sws-footer-white);
	color: var(--sws-footer-title);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.sws-footer__social-link:hover,
.sws-footer__social-link:focus-visible {
	color: var(--sws-footer-main);
}

.sws-footer__social-icon {
	display: block;
	flex: none;
}

/*--------------------------------------------------------------
# Menu columns
--------------------------------------------------------------*/

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

.sws-footer__menu li + li {
	margin-top: 18px;
}

.sws-footer__menu a {
	position: relative;
	display: inline-block;
	padding-left: 28px;
	color: var(--sws-footer-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sws-footer__menu a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 15px;
	height: 12px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: var(--sws-footer-arrow) no-repeat center / contain;
	mask: var(--sws-footer-arrow) no-repeat center / contain;
	transition: background-color 0.2s ease;
}

.sws-footer__menu a:hover,
.sws-footer__menu a:focus-visible,
.sws-footer__menu .current-menu-item > a {
	color: var(--sws-footer-white);
}

.sws-footer__menu a:hover::before,
.sws-footer__menu a:focus-visible::before,
.sws-footer__menu .current-menu-item > a::before {
	background-color: var(--sws-footer-main);
}

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

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

.sws-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.sws-footer__contact + .sws-footer__contact {
	margin-top: 21px;
}

.sws-footer__contact-icon {
	display: block;
	flex: none;
	margin-top: 2px;
}

.sws-footer__contact-link {
	color: var(--sws-footer-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sws-footer__contact-link:hover,
.sws-footer__contact-link:focus-visible {
	color: var(--sws-footer-white);
}

.sws-footer__contact-text {
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Bottom bar
--------------------------------------------------------------*/

.sws-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
	padding-block: 28px;
	border-top: 1px solid var(--sws-footer-line);
	text-align: center;
}

.sws-footer__copyright {
	margin: 0;
}

.sws-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-footer__legal-link {
	color: var(--sws-footer-text);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sws-footer__legal-link:hover,
.sws-footer__legal-link:focus-visible {
	color: var(--sws-footer-white);
}

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

@media (min-width: 600px) {

	.sws-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
	}
}

@media (min-width: 782px) {

	.sws-footer__container {
		padding-top: 72px;
	}

	.sws-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

@media (min-width: 1000px) {

	/*
	 * Four equal quarters. The mockup gave the branding column a fixed 297px and
	 * squeezed the rest, which left no room for the long service names; equal
	 * tracks keep every label on two lines at most.
	 */
	.sws-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(32px, 4vw, 80px);
		row-gap: 48px;
	}
}

@media (min-width: 1200px) {

	.sws-footer__container {
		padding-top: 80px;
	}

	.sws-footer__logo img {
		height: 50px;
	}

	.sws-footer__bottom {
		margin-top: 80px;
	}
}

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

	.sws-footer__social-link,
	.sws-footer__menu a,
	.sws-footer__menu a::before,
	.sws-footer__contact-link,
	.sws-footer__legal-link {
		transition: none;
	}
}

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

/*
 * A BEM block of its own rather than a footer element: it floats over the page
 * instead of living inside the band. It rides along in this stylesheet because
 * footer.php renders it and this file already loads on every page — a separate
 * one would only add a render-blocking request site-wide.
 *
 * Hidden state is the default here, and visibility: hidden also keeps the button
 * out of the tab order and away from screen readers while it is not on offer;
 * js/back-to-top.js adds the modifier once the page has scrolled a screen. Being
 * fixed, the button never takes part in layout, so revealing it shifts nothing.
 */
.sws-to-top {
	--sws-to-top-main: var(--wp--preset--color--main, #3e66f3);
	--sws-to-top-hover: #2f55dd;
	--sws-to-top-white: var(--wp--preset--color--white, #fff);

	/* Below the sticky header (100) so the off-canvas panel covers the button. */
	position: fixed;
	right: clamp(16px, 4vw, 40px);
	bottom: clamp(16px, 4vw, 40px);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sws-to-top-main);
	box-shadow: 0 8px 24px rgb(28 28 37 / 18%);
	color: var(--sws-to-top-white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		background-color 0.2s ease,
		visibility 0.25s;
}

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

.sws-to-top:hover {
	background: var(--sws-to-top-hover);
}

.sws-to-top--visible:hover {
	transform: translateY(-3px);
}

.sws-to-top:focus-visible {
	outline: 2px solid var(--sws-to-top-main);
	outline-offset: 3px;
}

.sws-to-top__icon {
	display: block;
	flex: none;
}

/* The page cannot scroll behind the open off-canvas menu, so the shortcut goes. */
.sws-header-menu-open .sws-to-top {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 1200px) {

	.sws-to-top {
		width: 56px;
		height: 56px;
	}
}

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

	.sws-to-top {
		transition: none;
	}

	.sws-to-top--visible:hover {
		transform: translateY(0);
	}
}