/* -------------------------------------------------- */
/* Footer                                               */
/* -------------------------------------------------- */

/* The footer closes the page the way the banner sections break it up: the same
   brand blend, entered through a wave instead of a hairline rule. It isn't a
   .section, so the seed rules in 05-sections.css never reach it — the blend
   and wave variant are picked here by hand, B for both to match how the
   sections assign theirs. */
.site-footer {
	--section-blend: var(--blend-b);
	--wave-top: var(--wave-top-b);
	position: relative;
	background-image: var(--section-blend);
	color: rgba(255, 255, 255, 0.85);
	/* Clear the deepest point of the wave before the columns start. Bottom
	   padding moved onto .site-footer__bottom itself (below) rather than
	   living here: this element carries its own CSS mask for the top wave
	   (the @supports block further down), sized to cover exactly its own
	   box (0-100% of its height) — content pushed past that box via a
	   negative margin, the way the badge needs to reach the page's true
	   bottom edge, would fall outside the mask's painted region and get
	   clipped. Keeping the padding (and the badge's negative-margin cancel
	   of it) inside .site-footer__bottom instead means the overflow stays
	   within this element's own box, not past it. */
	padding: calc(3rem + var(--wave-height)) 2rem 0;
}

/* Painted as a wave-shaped overlay on top of a flat-topped blend — the
   fallback for browsers without the masking below, and the only behaviour at
   all where that's unsupported. */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--wave-height);
	background-image: var(--wave-top);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 1;
}

/* Where masking is supported, clip the blend itself to the wave outline at
   the top edge instead of painting a wave shape over a flat-topped
   rectangle — same technique as the hero and the banner sections (see
   04-hero.css / 05-sections.css). ::before becomes redundant once this is
   active, since the clip already does its job; removed rather than left to
   double up. */
@supports (mask-composite: add) or (-webkit-mask-composite: source-over) {
	.site-footer {
		-webkit-mask-image: var(--wave-top), linear-gradient(#000, #000);
		mask-image: var(--wave-top), linear-gradient(#000, #000);
		-webkit-mask-repeat: no-repeat, no-repeat;
		mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: 0 0, 0 var(--wave-height);
		mask-position: 0 0, 0 var(--wave-height);
		-webkit-mask-size:
			100% var(--wave-height),
			100% calc(100% - var(--wave-height));
		mask-size:
			100% var(--wave-height),
			100% calc(100% - var(--wave-height));
		-webkit-mask-composite: source-over;
		mask-composite: add;
	}

	.site-footer::before {
		content: none;
	}
}

.site-footer__columns {
	position: relative;
	z-index: 1;
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr 1fr;
	gap: 2.5rem;
}

/* The logo mark is pink and purple, which all but disappears against the
   blend, so it sits on its own pane — the light glass recipe rather than flat
   white, so the blend still shows through and the tile reads as part of the
   same material as the panels above. */
.footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.footer-col--brand .site-logo {
	display: inline-block;
	border-radius: var(--radius);
	padding: 1rem;
	line-height: 0;
}

.footer-col--brand .site-logo img,
.footer-col--brand .site-logo svg {
	width: auto;
	max-width: 100%;
}

.footer-col__title {
	font-size: var(--text-md);
	color: #fff;
	margin-bottom: 1em;
}

.footer-col p {
	margin: 0 0 0.5em;
	/* Was --text-sm, noticeably smaller than the body copy everywhere else
	   on the site — bumped to match. */
	font-size: var(--text-md);
}

.footer-col ul li {
	margin-bottom: 0.5em;
}

.footer-col a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	font-size: var(--text-md);
}

/* The mail/phone icons (letsdoo_icon(), footer.php) — scoped to links inside
   a <p> specifically, not .footer-col a generally: the social icons are
   also .footer-col a > i (just inside .footer-col__social, no <p>), and a
   bare ".footer-col a i" rule has one more element selector than
   ".social-icon i" below and so overrides its font-size regardless of
   source order — this is what actually keeps the two independent. */
.footer-col p a i {
	font-size: 0.85em;
	color: #fff;
}

/* Were plain <span> (no text-decoration to reset) until they became real
   links — matching .footer-col a's own rest state so the hover rule below
   actually has an underline to toggle instead of one already sitting there
   from the browser default. */
.legal-links a {
	text-decoration: none;
}

/* .legal-links sits in the footer bottom rather than in a column, so it had
   been missing the hover its neighbours have. Solid white rather than the
   gradient-clip treatment other hovers on the site use (e.g. .main-navigation
   a:hover, 03-header.css): that trick reads fine on a white card, but the
   footer's own background is already the brand gradient, so gradient text on
   top of it fights a background in the same colour family regardless of any
   shadow/glow added to help it — brightening from the base rgba(255,255,255,.85)
   to opaque white is what actually stays readable everywhere on that
   background. */
.footer-col a:hover,
.legal-links a:hover {
	color: #fff;
	text-decoration: none;
}

.footer-col__social {
	display: flex;
	gap: 1rem;
}

/* No glass button any more — letsdoo_social_icon() (inc/template-helpers.php)
   now renders the real LinkedIn/Instagram brand badges, which already carry
   their own colour and rounded-square shape, so a second background/border
   behind them just doubled up the framing. */
.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform var(--transition);
}

.social-icon img {
	display: block;
	width: 32px;
	height: 32px;
}

/* Footer socials (group_ld_social_media, inc/acf-fields.php) render as a
   Font Awesome <i>, sized via font-size rather than width/height the way
   the img badges above are — same visual weight as those. */
.social-icon i {
	font-size: 3rem;
}

/* a.social-icon, not .social-icon: .footer-col a:hover (20-footer.css above)
   has one extra element selector in its specificity (0,2,1 vs 0,2,0), so a
   bare class here loses to it regardless of source order — the underline
   kept winning even with text-decoration: none below. Matching that same
   specificity is what actually lets this rule's later source order settle
   the tie. */
a.social-icon:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.site-footer__bottom {
	position: relative;
	z-index: 1;
	max-width: var(--max-width);
	margin: 2.5rem auto 0;
	padding: 2rem 0 5px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	/* Back down to --text-2xs (0.75rem) — the copyright/legal row is
	   conventionally the smallest line on the page everywhere, not just
	   here, so it stays well under the --text-md the main footer copy
	   above reads at. */
	font-size: var(--text-2xs);
	color: rgba(255, 255, 255, 0.7);
}

.legal-links {
	display: flex;
	gap: 2rem;
}

/* -------------------------------------------------- */
/* Corner badge                                         */
/* -------------------------------------------------- */

/* The odoo-ready-partners mark used to also sit as a dome in the footer's
   own bottom row (.footer-badge, removed) and this floating copy would
   slide across the screen to dock into it near the end of the page. With
   that static copy gone, this is the only instance of the badge left, so it
   stays visible — no more docking, fading, or scroll listener — as a
   permanent fixture in the corner of every page: a quarter-ellipse (a
   rectangle with only the FAR corner, top-left, fully rounded — radius 100%
   of both the box's own width and height, so it scales as an ellipse rather
   than a circle on a non-square box) with its sharp, unrounded vertex flush
   against position: fixed; right: 0; bottom: 0 — the screen's own corner.

   The border-radius arc stays underneath as the box's real geometry — it's
   what box-shadow reads to draw a silhouette that actually matches the
   shape (box-shadow has no idea a mask exists; only border-radius shapes
   it), and the shadow here is heavily blurred anyway, so a few px of
   difference against the mask's edge is never visible. What's actually
   visible is cut by corner-badge-wave.svg on top: an S-curve between the
   same two corners the arc spans, echoing the wave dividers used elsewhere
   on the site (--wave-top, 01-base.css) instead of one smooth curve. */
.footer-badge-float {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 245px;
	aspect-ratio: 2 / 1;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: var(--border-hairline);
	border-radius: 100% 0 0 0;
	box-shadow: var(--shadow-card);
	padding: 0 0.4rem 0.4rem 0;
	pointer-events: none;
}

.footer-badge-float img {
	position: relative;
	width: 75%;
	height: auto;
}

@media (max-width: 900px) {
	/* Same call already made for .hero__graphic and the old side badge: a
	   brand accent riding fixed over page content is a much bigger bite out
	   of a narrow viewport than a desktop one. */
	.footer-badge-float {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* The whole point of this element is the scroll-driven slide into
	   place; without motion it would just be a second, static copy of the
	   real badge sitting in a corner for no reason. */
	.footer-badge-float {
		display: none;
	}
}