/**
 * SITE FOOTER
 *
 * Measured from the 1440 frame: brand column 320 + gap 97 + nav 747 = the 1164
 * content column. Inside the nav, three columns 80 apart. Brand column stacks
 * at 27px. 54 above the content, rule, then a 70px legal bar.
 */

@layer components {

	/*
	 * data-theme="dark" remaps the tokens; `color` still has to be declared
	 * because it inherits as a computed value. See .big-cta for the long note.
	 */
	.site-footer {
		background-color: var(--clr-bg-deep);
		color: var(--clr-text);
		padding-block: clamp(var(--space-xl), 3.75vw, 3.375rem) 0;   /* → 54px */
	}

	/* ---- Top: brand + nav ---------------------------------------------- */

	.site-footer__top {
		display: grid;
		gap: var(--space-2xl);
	}

	@media (min-width: 60rem) {
		.site-footer__top {
			/* 320 brand + 97 gap + 747 nav = 1164. */
			grid-template-columns: 320fr 747fr;
			column-gap: clamp(var(--space-xl), 6.75vw, 6.0625rem);   /* → 97px */
			align-items: start;
		}
	}

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

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6875rem;                        /* 27px, measured at both steps */
	}

	.site-footer__logo {
		display: block;
		inline-size: 5.6875rem;                /* 91px, measured */
	}
	.site-footer__logo img {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	.site-footer__description {
		margin: 0;
		max-inline-size: 18.75rem;             /* 300px, measured */
		font-size: 0.9375rem;                  /* 15px */
		line-height: 1.7;
		color: var(--clr-text-inverse-dim);
	}

	/* ---- Social chips --------------------------------------------------- */

	.site-footer__socials {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);                 /* 8px */
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.social-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;                   /* 40px square, measured */
		block-size: 2.5rem;
		border: 1px solid var(--ink-600);
		color: var(--clr-text);
		font-size: 0.6875rem;                  /* 11px */
		font-weight: var(--weight-semibold);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			color var(--transition-fast);
	}

	.social-chip:hover,
	.social-chip:focus-visible {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}

	/* ---- Nav columns ---------------------------------------------------- */

	.site-footer__nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xl) 5rem;            /* 80px between columns, measured */
		padding-block-start: 0.5rem;           /* 8px, measured */
	}

	.footer-col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-m);                   /* 20px heading → links */
	}

	/*
	 * The gold rule before the label is drawn with ::before rather than shipped
	 * as an SVG — it is a 24x2 line, and an image request for that is silly.
	 */
	.footer-col__heading {
		display: flex;
		align-items: center;
		gap: var(--space-xs);                  /* 12px */
		margin: 0;
		font-size: 0.6875rem;                  /* 11px */
		font-weight: var(--weight-bold);
		line-height: 1.2;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--clr-accent);
	}

	.footer-col__heading::before {
		content: "";
		inline-size: 1.5rem;                   /* 24px */
		block-size: 2px;
		background-color: currentcolor;
		flex: none;
	}

	.footer-col__list {
		display: flex;
		flex-direction: column;
		gap: 0.875rem;                         /* 14px, measured */
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.footer-col__list a {
		font-size: 0.9375rem;                  /* 15px */
		font-weight: var(--weight-semibold);
		line-height: 1.3;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--clr-text);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	/* Contact details are addresses, not labels — set as written. */
	.footer-col__list--plain a {
		font-weight: var(--weight-regular);
		letter-spacing: 0;
		text-transform: none;
		color: var(--clr-text-inverse-dim);
	}

	.footer-col__list a:hover,
	.footer-col__list a:focus-visible {
		color: var(--clr-accent);
	}

	/*
	 * On a phone the three columns would otherwise wrap two-then-one, which
	 * reads as a mistake. Stack them instead.
	 */
	@media (max-width: 47.999rem) {
		.site-footer__nav { gap: var(--space-2xl); }
		.footer-col { flex: 1 1 100%; }
	}

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

	.site-footer__bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-s) var(--space-xl);
		margin-block-start: var(--space-xl);   /* → 32px above the rule */
		padding-block: 1.5rem;                 /* 24px, measured */
		border-block-start: 1px solid var(--clr-border);
	}

	.site-footer__copyright,
	.site-footer__operator {
		margin: 0;
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-s) var(--space-xl);
	}

	.site-footer__legal-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);                  /* → matches the design's 82px run */
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-footer__copyright,
	.site-footer__operator,
	.site-footer__legal-links a {
		font-size: 0.875rem;                   /* 14px */
		line-height: 1.3;
		color: var(--clr-text-inverse-dim);
		text-decoration: none;
	}

	.site-footer__legal-links a:hover,
	.site-footer__legal-links a:focus-visible {
		color: var(--clr-accent);
	}
}