/**
 * Site footer.
 *
 * Template markup, not a block, so its styles live here rather than in a
 * block.json — see sws-kit/docs/core-blocks.md. Never rendered in the editor
 * canvas, so plain media queries are honest.
 *
 * Dark variant of docs/figma-template/blocks/footer.md: four columns at the top
 * (brand + social, two link menus, contacts), the "Abstract bg" shapes behind
 * them, a rule and a centred copyright at the bottom. The newsletter widget of
 * the template is not carried over — there is no mailing list, and the fourth
 * column goes to contacts instead.
 */

.sws-footer {
	position: relative;
	background-color: var(--wp--preset--color--dark, #232d36);
	color: var(--wp--preset--color--white, #fff);

	/* The doodles are placed in percentages and may reach past the edge. */
	overflow: hidden;
}

/* z-index establishes the stacking context that keeps the columns above the
   doodles — and, since the doodles are positioned and would otherwise paint on
   top, keeps the links clickable. */
.sws-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--custom--container, 1170px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70, 3.5rem) var(--wp--custom--gutter, 1rem) var(--wp--preset--spacing--60, 3.5rem);
}

/* Columns
--------------------------------------------- */

/*
 * Flex, not grid: a column whose setting is empty is not printed at all, so the
 * number of columns is 2 to 4 depending on what the client has filled in. Fixed
 * grid tracks would leave a hole; flex children just share the row.
 */
.sws-footer__columns {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60, 3.5rem);
}

.sws-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--50, 2rem);
	color: var(--wp--preset--color--white, #fff);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
}

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

.sws-footer__brand-link {
	display: inline-block;
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-footer__brand-link img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 2.5rem;
	height: auto;
}

.sws-footer__wordmark {
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
}

.sws-footer__tagline {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	max-width: 22rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

.sws-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin: var(--wp--preset--spacing--50, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

/* Lists
--------------------------------------------- */

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

.sws-footer__menu li + li,
.sws-footer__contacts li + li {
	margin-top: var(--wp--preset--spacing--20, 1rem);
}

.sws-footer__menu--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

.sws-footer__menu--inline li + li {
	margin-top: 0;
}

/* Links and text
--------------------------------------------- */

.sws-footer a {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--wp--custom--transition, 200ms ease);
}

.sws-footer a:hover,
.sws-footer a:focus {
	color: var(--wp--preset--color--white, #fff);
	text-decoration: underline;
}

.sws-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #fff);
	outline-offset: 2px;
}

.sws-footer address {
	font-style: normal;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Bottom row
--------------------------------------------- */

.sws-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin-top: var(--wp--preset--spacing--60, 3.5rem);
	padding-top: var(--wp--preset--spacing--50, 2rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	text-align: center;
}

.sws-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

.sws-footer__legal a {
	font-size: var(--wp--preset--font-size--small, 1rem);
}

/* Doodles
--------------------------------------------- */

/*
 * The four outline shapes of the layout's "Abstract bg" — globe, pencil, bulb,
 * musical note. The Edumim demo bakes them into a single 1920px raster
 * (footer-bg-1.png), which blurs on anything wider; here each one is its own
 * SVG, exported from the Figma source.
 *
 * White dimmed by opacity rather than the layout's flat #2b3640: that hex is
 * nothing but the dark background lightened, and white at 4.5% over
 * --wp--preset--color--dark reproduces it while still following the token — the
 * same way every other muted tone in this file is written.
 *
 * Hidden by default: the shapes sit at fixed percentages of a 1920x690 section,
 * two of them right where the stacked columns are, so on a narrow screen they
 * are dropped rather than rearranged. They come back with the desktop row.
 */
.sws-footer__decor {
	display: none;
}

.sws-footer__doodle {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.045;
}

/* Positions are the layout coordinates over its 1920x690 section. */

.sws-footer__doodle--note {
	left: 31.93%;
	top: 6.96%;
	width: 3.0625rem;
	aspect-ratio: 49 / 62;
	background-image: url("../assets/footer/note.svg");
}

/* Anchored to the right edge, not the left: with a left offset its fixed rem
   width runs past a narrow container and gets clipped, while the layout has it
   hugging the edge. */
.sws-footer__doodle--pencil {
	right: 5.94%;
	top: 19.71%;
	width: 6.375rem;
	aspect-ratio: 1;
	background-image: url("../assets/footer/pencil.svg");
}

/*
 * The lower two are anchored to the bottom, unlike the two above them. The
 * footer is as tall as its content, not the 690px of the layout, so a top
 * offset in percent would drag them up into the columns on a short footer;
 * measured from the bottom they keep the corner they were drawn in.
 */
.sws-footer__doodle--bulb {
	left: 55.31%;
	bottom: 21.88%;
	width: 4.4375rem;
	aspect-ratio: 71 / 73;
	background-image: url("../assets/footer/bulb.svg");
}

.sws-footer__doodle--globe {
	left: 5.57%;
	bottom: 12.75%;
	width: 8.875rem;
	aspect-ratio: 142 / 201;
	background-image: url("../assets/footer/globe.svg");
}

/* Desktop
--------------------------------------------- */

@media (min-width: 782px) {

	.sws-footer__decor {
		position: absolute;
		display: block;
		inset: 0;
	}

	.sws-footer__columns {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40, 1.875rem);
	}

	/* min-width: 0 — without it a long link sets the floor and the column
	   refuses to shrink. */
	.sws-footer__col {
		flex: 1 1 12rem;
		min-width: 0;
	}

	.sws-footer__col--about {
		flex: 1.4 1 18rem;
	}

	.sws-footer__brand-link img {
		max-height: 3.375rem;
	}
}

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

/* Printed by footer.php but not part of the .sws-footer block — it is floating
   chrome. It lives in this file because footer.php is the template that ships
   it, and because a third global stylesheet would not earn its request. The
   visible state is switched by js/scroll-ui.js. */

.sws-to-top {
	position: fixed;
	right: var(--wp--custom--gutter, 1rem);
	bottom: var(--wp--custom--gutter, 1rem);

	/* Below the header (100) so an open mobile menu covers it, above content. */
	z-index: 90;
	display: grid;
	place-items: center;

	/* 48px — clears the 44px touch-target floor. */
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius-pill, 999px);
	background-color: var(--wp--preset--color--primary, #ef5743);
	color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--raised, 0 12px 40px rgba(35, 45, 54, 0.14));
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	transition: opacity var(--wp--custom--transition, 200ms ease), transform var(--wp--custom--transition, 200ms ease), visibility var(--wp--custom--transition, 200ms ease), background-color var(--wp--custom--transition, 200ms ease);
}

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

/* Hover matches the site button in theme.json, so the control stays on brand. */
.sws-to-top:hover,
.sws-to-top:focus {
	background-color: var(--wp--preset--color--dark, #232d36);
}

.sws-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 2px;
}

@media (min-width: 782px) {

	.sws-to-top {
		width: 3.5rem;
		height: 3.5rem;
	}
}

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

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

	.sws-footer a,
	.sws-to-top {
		transition: none;
	}
}