/**
 * Footer styles.
 *
 * Global by necessity: like the header, the footer is theme chrome and not a
 * block, so it cannot be enqueued from a block.json. Raw colours and the font
 * stack come from theme.json presets; composite values and the shades the
 * palette has no preset for are custom properties scoped to .sws-footer so they
 * cannot leak into block styles.
 *
 * Mobile-first. Media queries rather than container queries: unlike a block,
 * this markup never renders inside the editor canvas, so the viewport is the
 * right thing to measure. The two steps are the design's own 768 / 1024 breaks,
 * where the column grid goes 1 -> 3 -> 5.
 *
 * The rails match the header on purpose: --sws-footer-card-max equals
 * --sws-header-pill-max and --sws-footer-row-max equals --sws-header-row-max, so
 * the pill above and the card below line up edge to edge.
 */

.sws-footer {
	--sws-footer-card-max: 82.5rem;  /* 1320px */
	--sws-footer-row-max: 77.5rem;   /* 1240px */
	--sws-footer-radius: 1.625rem;   /* 26px */
	--sws-footer-card-bg: #0b0a18;
	--sws-footer-border-color: rgba(120, 70, 255, 0.16);
	--sws-footer-divider: rgba(255, 255, 255, 0.08);
	--sws-footer-heading: var(--wp--preset--color--contrast, #f2f2f6);
	--sws-footer-text: #8b8b9a;
	--sws-footer-text-strong: #e6e6ee;
	--sws-footer-text-dim: #7a7a8a;
	--sws-footer-link-hover: #e6e0ff;
	--sws-footer-icon: var(--wp--preset--color--link, #9b6bff);
	--sws-footer-social-icon: #b9a6ff;
	--sws-footer-social-bg: rgba(120, 70, 255, 0.12);
	--sws-footer-social-border: rgba(139, 92, 255, 0.22);
	--sws-footer-social-size: 2.625rem; /* 42px */
	--sws-footer-gutter: clamp(1.5rem, 5vw, 4rem);

	padding: 0 clamp(1rem, 3vw, 2.5rem) 1.5rem;
	background-color: var(--wp--preset--color--base, #0a0d14);
}

.sws-footer__card {
	position: relative;
	max-width: var(--sws-footer-card-max);
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--sws-footer-border-color);
	border-radius: var(--sws-footer-radius);
	background-color: var(--sws-footer-card-bg);
}

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

.sws-footer__bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	opacity: 0.9;
	pointer-events: none;
}

/*
 * height is pinned because the global img rule from theme.json sets it to auto,
 * which would collapse the layer to its intrinsic ratio instead of the card.
 */
.sws-footer__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

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

.sws-footer__grid,
.sws-footer__bar {
	position: relative;
	z-index: 1;
	max-width: var(--sws-footer-row-max);
	margin-inline: auto;
}

.sws-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding: 3.75rem var(--sws-footer-gutter) 0;
}

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

.sws-footer__col-title {
	margin: 0 0 1.125rem;
	color: var(--sws-footer-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Branding column
--------------------------------------------- */

.sws-footer__logo {
	display: flex;
	align-items: center;
	margin-bottom: 1.125rem;
}

.sws-footer__logo-img {
	display: block;
	width: auto;
	height: 1.5rem;
}

.sws-footer__logo-text {
	color: var(--sws-footer-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.03125rem;
}

.sws-footer__slogan {
	max-width: 17.5rem;
	margin: 0 0 1.375rem;
	color: var(--sws-footer-text);
	font-size: 0.8125rem;
	line-height: 1.65;
}

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

.sws-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sws-footer-social-size);
	height: var(--sws-footer-social-size);
	border: 1px solid var(--sws-footer-social-border);
	border-radius: 0.75rem;
	background-color: var(--sws-footer-social-bg);
	color: var(--sws-footer-social-icon);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sws-footer__social-link:hover,
.sws-footer__social-link:focus-visible {
	border-color: var(--sws-footer-icon);
	background-color: rgba(120, 70, 255, 0.22);
	color: var(--sws-footer-link-hover);
}

.sws-footer__social-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

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

.sws-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.8125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-footer__menu a {
	color: var(--sws-footer-text);
	font-size: 0.8125rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.15s ease;
}

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

.sws-footer__menu .current-menu-item > a,
.sws-footer__menu .current_page_item > a {
	color: var(--sws-footer-heading);
}

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

.sws-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sws-footer__contact {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.sws-footer__contact-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	color: var(--sws-footer-icon);
}

.sws-footer__contact-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.sws-footer__contact-main {
	color: var(--sws-footer-text-strong);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.15s ease;
}

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

.sws-footer__contact-sub {
	color: var(--sws-footer-text-dim);
	font-size: 0.75rem;
	line-height: 1.4;
}

.sws-footer__address {
	color: var(--sws-footer-text-strong);
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.5;
}

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

.sws-footer__bar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 3rem;
	padding: 1.625rem var(--sws-footer-gutter);
	border-top: 1px solid var(--sws-footer-divider);
	color: var(--sws-footer-text);
	font-size: 0.8125rem;
}

.sws-footer__copyright {
	margin: 0;
}

.sws-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-footer__legal a {
	color: var(--sws-footer-text);
	text-decoration: none;
	transition: color 0.15s ease;
}

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

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

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

/* Tablet: three columns, as in the design below 1024px.
--------------------------------------------- */

@media (min-width: 48.0625rem) { /* 769px */

	.sws-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sws-footer__bar {
		flex-direction: row;
		align-items: center;
		gap: 1.75rem;
	}

	.sws-footer__legal {
		margin-left: auto;
	}
}

/* Desktop: the design's five-column rhythm.
--------------------------------------------- */

@media (min-width: 64.0625rem) { /* 1025px */

	.sws-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
	}
}