/* Footer template part (parts/footer.html).
   Maroon card: five-column grid (brand | Explore | Industries | Regions | Contact), the wordmark
   watermark along the bottom edge, then the legal row. On phones the columns stack: brand and
   contact centred, the three link groups become <details> accordions, legal row centred. */

/* ---------- Card ---------- */

.fyo-footer {
	/* Vertical padding: the part's inline padding reads these so phones can change them (64/32 → 48/48). */
	--fyo-footer-padding-top: var(--wp--preset--spacing--80);
	--fyo-footer-padding-bottom: var(--wp--preset--spacing--60);

	/* Wordmark watermark: 1576 of the 1664 card in the mockup, bottom-aligned (its descenders clip). */
	background-image: url("../../images/wordmark-watermark.svg");
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 94.8% auto;
}

.fyo-footer a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.fyo-footer a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* The global teal focus ring is invisible on maroon. */
.fyo-footer :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--light-teal);
}

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

/* fyo/logo renders the colour and inverse images stacked; the footer always shows the inverse.
   The colour image stays in the accessibility tree so the home link keeps its name. */
.fyo-footer .fyo-logo {
	display: block;
	line-height: 0;
}

.fyo-footer .fyo-logo .fyo-logo__img:not(.fyo-logo__inverse) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fyo-footer .fyo-logo .fyo-logo__inverse {
	display: block;
	width: auto;
	height: var(--fyo-logo-height, 164px);
	max-width: 100%;
}

/* Social icons: 32px outlined circles with 16px glyphs (core Social Icons, logos-only style). */
.fyo-footer__social.wp-block-social-links .wp-social-link {
	box-sizing: border-box;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--width--hairline) solid var(--wp--custom--color--border--inverse);
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

.fyo-footer__social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: inherit;
}

.fyo-footer__social.wp-block-social-links .wp-social-link:hover,
.fyo-footer__social.wp-block-social-links .wp-social-link:focus-within {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--maroon) !important; /* core sets the icon colour inline */
}

/* ---------- Link groups (Explore / Industries / Regions) ---------- */

.fyo-footer__group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	color: var(--wp--preset--color--light-teal);
	font-weight: var(--wp--custom--font-weight--bold);
	cursor: pointer;
}

.fyo-footer__group > summary::-webkit-details-marker {
	display: none;
}

.fyo-footer__links.wp-block-navigation a:where(:not(.wp-element-button)) {
	font-weight: var(--wp--custom--font-weight--regular);
}

.fyo-footer__list .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fyo-footer__list .wp-block-post-title {
	font-size: inherit;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: inherit;
	letter-spacing: var(--wp--custom--letter-spacing--default);
}

/* ---------- Legal row ---------- */

.fyo-footer .fyo-footer__legal {
	margin-block-start: clamp(var(--wp--preset--spacing--90), 15vw, 252px); /* TODO token: 252px watermark clearance in the mockup */
	opacity: 0.7; /* TODO token: muted text on brand surfaces (mockup: 70% white) */
}

/* ---------- Desktop and tablet: columns always open ---------- */

@media (min-width: 783px) {
	.fyo-footer__group > summary {
		margin-block-end: var(--wp--preset--spacing--30);
	}

	/* The accordions only toggle on phones; on wider screens the content is always shown.
	   Browsers without ::details-content keep working as click-to-open columns. */
	@supports selector(::details-content) {
		.fyo-footer__group::details-content {
			content-visibility: visible;
			display: block;
		}

		.fyo-footer__group > summary {
			pointer-events: none;
			cursor: default;
		}
	}
}

@media (min-width: 783px) and (max-width: 1099px) {
	.fyo-footer .fyo-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Phones ---------- */

@media (max-width: 782px) {
	.fyo-footer {
		--fyo-footer-padding-top: 3rem; /* TODO token: 48px mobile section padding */
		--fyo-footer-padding-bottom: 3rem;

		background-image: none;
	}

	/* When the CTA band closes main, its bottom notch ends at the footer's top edge (the band's
	   cut-outs carry the footer's maroon), and the logo sits 24px below the notch tip
	   (Figma 191:10156). */
	main:has(> .fyo-cta-band:not(.fyo-cta-band--short):last-child) + footer .fyo-footer {
		--fyo-footer-padding-top: var(--wp--preset--spacing--50);
	}

	.fyo-footer .fyo-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.fyo-footer .fyo-footer__brand {
		order: 1;
		align-items: center;
		margin-block-end: var(--wp--preset--spacing--60);
	}

	.fyo-footer .fyo-footer__contact {
		order: 2;
		align-items: center;
		margin-block-end: var(--wp--preset--spacing--60);
		text-align: center;
	}

	.fyo-footer .fyo-footer__group {
		order: 3;
		border-block-start: var(--wp--custom--border--width--hairline) dashed var(--wp--custom--color--border--inverse);
	}

	.fyo-footer .fyo-footer__group:last-of-type {
		border-block-end: var(--wp--custom--border--width--hairline) dashed var(--wp--custom--color--border--inverse);
	}

	.fyo-footer__group > summary {
		padding-block: var(--wp--preset--spacing--40);
	}

	.fyo-footer__group > summary::after {
		content: "";
		flex: none;
		width: var(--wp--preset--spacing--50);
		height: var(--wp--preset--spacing--50);
		background-color: var(--wp--preset--color--white);
		-webkit-mask: url("../../icons/plus.svg") no-repeat center / var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		mask: url("../../icons/plus.svg") no-repeat center / var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}

	.fyo-footer__group[open] > summary::after {
		-webkit-mask-image: url("../../icons/minus.svg");
		mask-image: url("../../icons/minus.svg");
	}

	.fyo-footer .fyo-footer__group > :not(summary) {
		margin-block-start: 0; /* the summary's padding is the gap */
		padding-block-end: var(--wp--preset--spacing--40);
	}

	.fyo-footer .fyo-footer__legal {
		flex-direction: column;
		align-items: center;
		margin-block-start: var(--wp--preset--spacing--60);
		text-align: center;
	}

	.fyo-footer .fyo-footer__legal-links {
		flex-direction: column;
		align-items: center;
	}
}