/*
 * Site footer.
 *
 * Transcribed from the design source's Footer component. Link lists now come
 * from wp_nav_menu, so links are addressed as `.footer__list a` rather than a
 * hand-written class; appearance is unchanged.
 *
 * @package Slovenia_Concierge
 */

.footer {
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--text-on-dark-muted );
	padding-block: var( --wp--custom--section-y-tight ) var( --wp--preset--spacing--l );
	font-size: var( --wp--preset--font-size--small );
}

.footer__grid {
	display: grid;
	gap: var( --wp--preset--spacing--xl ) var( --wp--preset--spacing--l );
	grid-template-columns: 1fr;
}

.footer__tagline {
	margin-block-start: var( --wp--preset--spacing--s );
	max-width: 24rem;
}

.footer__title {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	text-transform: uppercase;
	color: var( --wp--preset--color--gold-light );
	margin-block-end: var( --wp--preset--spacing--s );
}

.footer__list {
	display: grid;
	gap: 0.6rem;
}

.footer__list a,
.footer__link {
	text-decoration: none;
	color: var( --wp--preset--color--text-on-dark );
	transition: color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.footer__list a:hover,
.footer__list a:focus-visible,
.footer__link:hover,
.footer__link:focus-visible {
	color: var( --wp--preset--color--gold-light );
	text-decoration: underline;
}

.footer__address {
	font-style: normal;
	line-height: 1.6;
}

.footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--s );
	margin-block-start: var( --wp--preset--spacing--m );
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--s );
	margin-block-start: var( --wp--preset--spacing--xl );
	padding-block-start: var( --wp--preset--spacing--m );
	border-block-start: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
	font-size: 0.8125rem;
}

.footer__credit {
	color: var( --wp--preset--color--text-on-dark-muted );
}

/*
 * The credit link keeps the muted colour of the line it sits in. The
 * general .footer__link is a brighter colour, which would leave one word
 * of the sentence lit up and reading as a mistake rather than as a link.
 * That leaves the underline to say it is a link, so it is always drawn.
 */
.footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
	color: var( --wp--preset--color--gold-light );
}

/*
 * On a phone the two link lists are short and narrow, so stacking all four
 * blocks left a column of empty space beside each one and made the footer
 * longer than the page above it. Side by side they fill the width and the
 * footer loses roughly a screen of height.
 */
/*
 * Below the desktop breakpoint the credit and the floating button are in
 * the same corner too - credit 314-400, button 344-396 on a 420px screen -
 * but here the bar has no width to give away: inset far enough to clear the
 * button and the copyright itself would wrap. So the room is found
 * vertically instead, by holding the last line above the button's reach.
 *
 * The design source has the same overlap at this width; this is the same
 * fix as the desktop one, not a different treatment.
 */
@media ( max-width: 63.9375rem ) {
	.footer {
		padding-block-end: calc(
			var( --wp--preset--spacing--m ) + 3.25rem + var( --wp--preset--spacing--s )
		);
	}
}

@media ( max-width: 39.9375rem ) {
	.footer__grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --wp--preset--spacing--l ) var( --wp--preset--spacing--m );
	}

	.footer__brand,
	.footer__col--contact {
		grid-column: 1 / -1;
	}
}

@media ( min-width: 40rem ) {
	.footer__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 64rem ) {
	/*
	 * One inset for the whole footer, so the columns and the line beneath
	 * them start and finish on the same two verticals.
	 *
	 * Its size is the floating WhatsApp button's own footprint - the inline
	 * offset plus the diameter that .fab uses at this width, plus a gap. The
	 * button is fixed to the corner and sat squarely on top of the credit
	 * (button 1261-1317, credit 1231-1317), so this much has to be given up
	 * on the end side regardless. Giving up the same on the start side costs
	 * nothing the footer was using and keeps the block symmetric.
	 *
	 * Reading it from the button's own tokens means it follows the button if
	 * the button ever changes, instead of being a number that goes stale.
	 */
	.footer {
		--sc-footer-inset: calc(
			var( --wp--preset--spacing--l ) + 3.5rem + var( --wp--preset--spacing--s )
		);
	}

	.footer__grid,
	.footer__legal {
		padding-inline: var( --sc-footer-inset );
	}

	/*
	 * Columns sized to their contents, with the leftover width shared out
	 * evenly between them.
	 *
	 * Proportional columns (1.4fr 1fr 1fr 1.2fr) gave each column a share of
	 * the width regardless of how much text was in it, and the text then sat
	 * at the left of whatever it was given. Measured at 1372px that left the
	 * first column flush against the edge, 133px of dead space after the
	 * last one, and inner gaps of 165, 171 and 214 - the eye reads that as
	 * four blocks scattered across a bar, not as a row.
	 *
	 * Sizing to content spreads the slack evenly. Note what this does NOT do:
	 * it does not push the outer columns further apart to fill the width. The
	 * inset above narrows the block first, so the row is drawn together
	 * rather than stretched out to the edges.
	 */
	.footer__grid {
		grid-template-columns: repeat( 4, max-content );
		justify-content: space-between;
	}
}