/*
 * Site footer. Artboards: desktop 96px section padding, 2fr 1fr 1fr 1fr with 48px columns gap,
 * 40px to the hairline, 32px to the legal row, 48px logo; 390 stacked with 32px gaps,
 * a <details> accordion and a 56px centred logo. Hairlines are --line-sand: the artboards' --line is
 * invisible on sand (tangens-components.md, Footer).
 * Line height is the font's normal (≈1.17), as the artboards set it; 1.5 on the two paragraphs.
 */

.site-footer {
	padding-block: var(--space-6);
	padding-inline: var(--container-pad);
	background: var(--sand);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: normal;
}

/* Same-ground merge after a Sand section (tangens-components.md). */
.site-footer.merge-top {
	padding-block-start: 0;
}

/* :where() keeps the reset at zero specificity, so component rules below always win. */
.site-footer :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__heading {
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* Newsletter */
.site-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: 27.5rem;
	min-width: 0;
}

.site-footer__newsletter > .site-footer__heading {
	margin-block-end: 0.375rem;
}

.site-footer__intro {
	line-height: 1.5;
}

.site-footer__form {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-1);
	padding-block: 0.75rem 0.625rem;
	border-bottom: var(--hairline) solid var(--ink);
}

.site-footer__form input {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-body);
}

.site-footer__status {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.site-footer__form input::placeholder {
	color: var(--stone);
	opacity: 1;
}

.site-footer__form button {
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	cursor: pointer;
}

.site-footer__fine,
.site-footer__copyright {
	color: var(--graphite);
}

.site-footer__social {
	display: flex;
	gap: 1.125rem;
	margin-block-start: 0.625rem;
}

.site-footer__social a {
	position: relative;
	display: block;
}

/* Hit area 39px square (the icon plus the gap), without changing the layout. */
.site-footer__social a::after {
	content: "";
	position: absolute;
	inset: -0.5625rem;
}

.site-footer__social svg {
	width: var(--icon-social);
	height: var(--icon-social);
}

/* Menu columns */
.site-footer__menu summary {
	list-style: none;
}

.site-footer__menu summary::-webkit-details-marker {
	display: none;
}

.site-footer__menu ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.site-footer__menu a,
.site-footer__menu button {
	position: relative;
}

/* Taller hit areas that fill the gap between links, without moving them. */
.site-footer__menu a::after,
.site-footer__menu button::after {
	content: "";
	position: absolute;
	inset: calc(var(--space-2) / -2) 0;
}

.site-footer__menu button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: start;
}

.site-footer__menu a:hover,
.site-footer__menu button:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__plus {
	position: relative;
	flex: 0 0 0.75rem;
	width: 0.75rem;
	height: 0.75rem;
}

.site-footer__plus::before,
.site-footer__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.site-footer__plus::before {
	inset-inline: 0;
	top: calc(50% - 0.5px);
	height: 1px;
}

.site-footer__plus::after {
	inset-block: 0;
	left: calc(50% - 0.5px);
	width: 1px;
}

.site-footer__menu[open] .site-footer__plus::after {
	display: none;
}

.site-footer__logo {
	display: flex;
}

.site-footer__logo a {
	display: block;
}

.site-footer__logo-img {
	width: auto;
	height: var(--logo-footer);
}

/* Legal row */
.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	padding-block-start: var(--space-4);
	border-top: var(--hairline) solid var(--line-sand);
}

.site-footer__payment {
	display: flex;
	align-items: center;
	gap: calc(var(--space-4) * 0.625);
}

.site-footer__mark {
	width: auto;
}

.site-footer__mark--visa { height: 0.875rem; }
.site-footer__mark--mastercard { height: 1.375rem; }
.site-footer__mark--apple-pay,
.site-footer__mark--google-pay { height: 1.25rem; }
.site-footer__mark--klarna { height: 1.25rem; }

/* Desktop: four columns from 1280, where the links fit on one line (decisions.md, Batch 1 step 9). */
@media (min-width: 1280px) {
	.site-footer__grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		column-gap: calc(var(--space-4) * 1.5);
		align-items: start;
		padding-block-end: calc(var(--space-4) * 1.25);
	}

	.site-footer__menus {
		display: contents;
	}

	.site-footer__menu {
		min-width: 0;
	}

	.site-footer__menu summary {
		margin-block-end: calc(var(--space-2) + 0.375rem);
		pointer-events: none;
	}

	.site-footer__plus {
		display: none;
	}

	/* Columns stay open on desktop even without script. */
	.site-footer__menu::details-content {
		content-visibility: visible;
		display: contents;
	}
}

/* Below 1280: stacked, with the menus as an accordion — as the header switches at 1280. */
@media (max-width: 1279px) {
	.site-footer__grid {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.site-footer__newsletter {
		gap: 0.875rem;
		max-width: none;
	}

	.site-footer__newsletter > .site-footer__heading {
		margin-block-end: 0.25rem;
	}

	.site-footer__form {
		margin-block-start: 0.25rem;
	}

	.site-footer__menus {
		border-top: var(--hairline) solid var(--line-sand);
	}

	.site-footer__menu {
		border-bottom: var(--hairline) solid var(--line-sand);
	}

	.site-footer__menu summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 1.125rem;
		cursor: pointer;
	}

	.site-footer__menu ul {
		gap: 0.875rem;
		padding-block-end: 1.375rem;
	}

	/* The hit areas meet halfway across the smaller gap instead of overlapping (touch targets). */
	.site-footer__menu a::after,
	.site-footer__menu button::after {
		inset: calc(0.875rem / -2) 0;
	}

	.site-footer__logo {
		justify-content: center;
	}

	.site-footer__logo-img {
		height: var(--logo-footer-mobile);
	}

	.site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		margin-block-start: 2rem;
	}

	.site-footer__copyright {
		line-height: 1.5;
	}

	/* Each sentence on its own line, as the artboard breaks it. */
	.site-footer__copyright span {
		display: block;
	}

	.site-footer__payment {
		gap: var(--space-2);
	}

	.site-footer__mark--visa { height: 0.8125rem; }
	.site-footer__mark--mastercard { height: 1.25rem; }
	.site-footer__mark--apple-pay,
	.site-footer__mark--google-pay { height: 1.125rem; }
	.site-footer__mark--klarna { height: 1.125rem; }
}

/* Tablet (768–1279): the stacked layout, but the newsletter keeps its desktop measure and the
   legal row stays on one line, with the desktop payment marks. */
@media (min-width: 768px) and (max-width: 1279px) {
	.site-footer__newsletter {
		max-width: 27.5rem;
	}

	.site-footer__legal {
		flex-direction: row;
		align-items: center;
	}

	.site-footer__copyright span {
		display: inline;
	}

	.site-footer__payment {
		gap: calc(var(--space-4) * 0.625);
	}

	.site-footer__mark--visa { height: 0.875rem; }
	.site-footer__mark--mastercard { height: 1.375rem; }
	.site-footer__mark--apple-pay,
	.site-footer__mark--google-pay { height: 1.25rem; }
	.site-footer__mark--klarna { height: 1.25rem; }
}