/**
 * Oyolloo Elements — site footer.
 *
 * Figma: node 471:1468 (inside Section 11).
 *   band     #1a1a1a, 140px gutters, 120px top / 30px bottom padding
 *   row      345px brand column, then a 1030px link area holding three
 *            ~297px columns spread with space-between
 *   brand    113x44 logo in brand yellow, 23px gap, tagline at 60% white
 *   column   24px gap; heading Inter Regular 16/1.6 at 40% white, links 16px
 *            apart, Inter SemiBold 16/1.4 at 60% white
 *   legal    1px rgba(255,255,255,.05) top border, 33px padding, copy left and
 *            links right at 24px apart, both solid white
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

/*
 * Figma 471:1455 is one frame: the closing call to action, then the footer
 * columns, over one photograph under one gradient. The whole of that is this
 * section, so the picture is sized to the real height of both rows and the
 * gradient's midpoint is the real midpoint - no arithmetic against heights a
 * section cannot measure, and no join to line up.
 */
.oe-site-footer__section {
	--oe-section-y: var(--oe-space-5xl);
	--oe-section-y-start: var(--oe-space-6xl);

	position: relative;
	isolation: isolate;
	/* Whatever the photograph does not cover has to be the shade the gradient
	   ends on, or the bottom of the section reads as a separate surface. */
	background-color: var(--oe-color-ink-strong);
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	padding-block-end: 30px;
}

/* Figma's own stops: 80% ink at the top, fully opaque by the midpoint, flat
   from there down - which is why the columns sit on plain ink. */
.oe-site-footer__section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		180deg,
		rgba(26, 26, 26, var(--oe-overlay, 0.8)) 0%,
		rgba(26, 26, 26, 1) 50.34%,
		rgba(26, 26, 26, 1) 100%
	);
	pointer-events: none;
}

/* -- Call to action row -------------------------------------------------- */

.oe-site-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--oe-space-2xl);
	/* The 100px above the hairline belongs to the grid below, not here. */
	padding-block-end: var(--oe-space-5xl);
	text-align: center;
}

.oe-site-footer__cta-title {
	margin: 0;
	color: var(--oe-color-white);
	font-size: var(--oe-h1-size);
	line-height: var(--oe-h1-leading);
}

.oe-site-footer__cta-form {
	width: 100%;
	max-width: 788px;
}

/* Same height as the hero's, but with tighter horizontal padding. */
.oe-site-footer__cta-form .oe-plate__submit {
	padding: 30px var(--oe-space-md);
}

.oe-site-footer__cta-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--oe-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--oe-color-neutral-100);
	font-weight: 500;
	text-transform: uppercase;
}

.oe-site-footer__grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--oe-space-2xl);
	/* Figma sits a 1px #fff/30% rule between the CTA and the footer with 100px
	   of air either side — the CTA's bottom padding above, this padding below. */
	padding-block-start: var(--oe-space-5xl);
	border-block-start: 1px solid rgba(255, 255, 255, 0.3);
}

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

.oe-site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 23px;
	flex: 0 0 345px;
	max-width: 345px;
}

.oe-site-footer__logo {
	width: 113px;
	height: 44px;

	/* The supplied wordmark is black artwork, which disappears on this
	   ground. Figma paints it brand yellow, so mask the shape and fill it —
	   exact colour, and it survives the client swapping the file. */
	background-color: var(--oe-color-brand);
	-webkit-mask-image: var(--oe-footer-logo);
	mask-image: var(--oe-footer-logo);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: left center;
	mask-position: left center;
}

.oe-site-footer__logo { display: block; }

.oe-site-footer__tagline {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	line-height: var(--oe-body-leading);
}

/* -- Link columns -------------------------------------------------------- */

.oe-site-footer__cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--oe-space-lg);
	flex: 0 1 1030px;
}

.oe-site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-md);
	/* 297 is the design's column width, and it must not grow: letting the three
	   fill the 1030px row makes each 327 and walks TOOLS and HELP up to 40px
	   left of where Figma puts them. Shrinking is still allowed, for the narrow
	   widths below where 3x297 no longer fits. */
	flex: 0 1 297px;
	min-width: 0;
}

.oe-site-footer__col-heading {
	margin: 0;
}

.oe-site-footer__col-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oe-space-sm);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: start;
	/* Inert until the mobile rules below turn it into a real control. */
	pointer-events: none;
}

.oe-site-footer__col-chevron {
	display: none;
}

/* Body, at 400 — Figma 471:1477. Only the weights the design draws at 600 were
   lightened to 500; this one was never among them. */
.oe-site-footer__col-title {
	margin: 0;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	font-weight: 400;
	line-height: var(--oe-body-leading);
	text-transform: uppercase;
}

/* `display: flex` would otherwise beat the UA rule behind the hidden panel. */
.oe-site-footer__list[hidden] {
	display: none;
}

.oe-site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
	/* The rows inherit the 1.6 body leading otherwise, stretching the 38px
	   rhythm the design sets to 42. */
	line-height: 1.4;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-site-footer__link {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	transition: color 200ms var(--oe-ease, ease);
}

.oe-site-footer__link:hover {
	color: var(--oe-color-brand);
}

/* -- Legal bar ----------------------------------------------------------- */

.oe-site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oe-space-md);
	flex-wrap: wrap;
	margin-block-start: var(--oe-space-md);
	padding-block-start: 33px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.05);
}

.oe-site-footer__copyright,
.oe-site-footer__legal-link {
	margin: 0;
	color: var(--oe-color-white);
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.oe-site-footer__legal-links {
	display: flex;
	align-items: center;
	gap: var(--oe-space-md);
	line-height: 1.4;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-site-footer__legal-link {
	transition: color 200ms var(--oe-ease, ease);
}

.oe-site-footer__legal-link:hover {
	color: var(--oe-color-brand);
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1440px) {
	.oe-site-footer__grid {
		gap: var(--oe-space-xl);
	}

	.oe-site-footer__brand {
		flex-basis: 280px;
	}
}

@media (max-width: 1024px) {
	.oe-site-footer__grid {
		flex-direction: column;
		gap: var(--oe-space-2xl);
	}

	.oe-site-footer__brand,
	.oe-site-footer__cols {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
}

/*
 * Mobile (Figma 471:4296): the band tightens to 32/30, the brand block sits
 * over three collapsible link cards, and the legal bar stacks.
 */
/* Mobile (Figma 471:4296): 60 above the heading, a 24px stack, and the trust
   labels on their own centred lines. */
@media (max-width: 767px) {
	.oe-site-footer__section {
		--oe-section-y-start: var(--oe-space-3xl);
	}

	.oe-site-footer__cta {
		gap: var(--oe-space-md);
		padding-block-end: var(--oe-space-lg);
	}

	.oe-site-footer__cta-title {
		font-size: 32px;
		line-height: 35px;
	}

	.oe-site-footer__cta-form .oe-plate__submit {
		padding: 20px 13px;
	}

	.oe-site-footer__cta-badges {
		flex-direction: column;
		gap: var(--oe-space-2xs);
	}

	.oe-site-footer__cta-badges,
	.oe-site-footer__cta-badges li {
		font-size: 12px;
		line-height: 17px;
	}
}

@media (max-width: 767px) {
	.oe-site-footer__section {
		--oe-section-y: var(--oe-space-lg);
	}

	.oe-site-footer__grid {
		gap: var(--oe-space-md);
		/* Figma 471:4296 tightens Section 11's gap from 100 to 32. */
		padding-block-start: var(--oe-space-lg);
	}

	.oe-site-footer__brand {
		gap: 23px;
		padding-block-end: var(--oe-space-md);
	}

	.oe-site-footer__cols {
		flex-direction: column;
		align-items: stretch;
		gap: var(--oe-space-2xs);
	}

	.oe-site-footer__col {
		/* The 297px basis is a column width on desktop; in a column flow it
		   would become a 297px height, so the cards must size to content. */
		flex: 0 0 auto;
		gap: var(--oe-space-sm);
		padding: var(--oe-space-sm);
		border-radius: var(--oe-radius-lg);
		background-color: rgba(255, 255, 255, 0.05);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
	}

	.oe-site-footer__col-toggle {
		pointer-events: auto;
		cursor: pointer;
	}

	/*
	 * The card heading is the same muted label as on desktop — Figma 471:4328
	 * keeps Body/Regular at 40% white inside the card. Promoting it to solid
	 * white semibold made it compete with the links underneath.
	 */
	.oe-site-footer__col-title {
		line-height: var(--oe-body-leading);
	}

	.oe-site-footer__col-chevron {
		display: block;
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		color: var(--oe-color-white);
		/* The artwork points up, so the closed state is the turned one. */
		transform: rotate(180deg);
		transition: transform 200ms var(--oe-ease, ease);
	}

	.oe-site-footer__col-chevron svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.oe-site-footer__col-toggle[aria-expanded="true"] .oe-site-footer__col-chevron {
		transform: rotate(0deg);
	}

	.oe-site-footer__list {
		gap: var(--oe-space-sm);
		padding-block-start: var(--oe-space-sm);
		/* Figma 471:4331 — fainter than the 0.13 card edge, not stronger. */
		border-block-start: 1px solid rgba(255, 255, 255, 0.1);
		line-height: 22px;
	}

	.oe-site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--oe-space-sm);
		padding-block-start: var(--oe-space-lg);
	}

	.oe-site-footer__legal-links {
		flex-wrap: wrap;
		gap: var(--oe-space-md);
	}

	.oe-site-footer__legal-link {
		font-size: var(--oe-body-sm-size);
		line-height: 20px;
	}
}