/*
 * Site footer (inc/site-footer.php), every page. From the preview
 * docs/preview/new_home7_2.png: the brown logo left, links split by thin
 * lines in the middle, Instagram and Facebook icons and the copyright on
 * the right. Below 56em everything is centred in one column.
 */

.site-footer
{
	padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	border-top: 1px solid var(--hf-color-card-border);
	background: var(--hf-color-bg);
}

.hf-footer
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--hf-space-m);
}

.hf-footer__logo
{
	justify-self: start;
	color: var(--hf-color-primary-hover);
	text-decoration: none;
}

.hf-footer__logo-image
{
	display: block;
	width: clamp(8.5rem, 7rem + 3vw, 11rem);
	height: auto;
}

.hf-footer__links
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--hf-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-footer__links li
{
	padding-inline: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	line-height: 1.2;
}

/* Thin line between links, as in the preview (a border, so screen
   readers do not read a „|” character). */
.hf-footer__links li + li
{
	border-left: 1px solid var(--hf-color-line);
}

/* Padding with an equal negative margin: a touch target about 45 px high
   (21 px before, 2026-11-02) that moves nothing on the page. */
.hf-footer__links a
{
	display: inline-block;
	margin-block: -0.75rem;
	padding-block: 0.75rem;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-m);
	text-decoration: none;
}

.hf-footer__links a:hover
{
	color: var(--hf-color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hf-footer__meta
{
	display: flex;
	align-items: center;
	justify-self: end;
	gap: var(--hf-space-m);
}

.hf-footer__social
{
	display: flex;
	gap: var(--hf-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 44 px touch target around a 28 px icon. */
.hf-footer__social-link
{
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--hf-color-primary-hover);
	place-items: center;
	transition: background-color var(--hf-transition);
}

.hf-footer__social-link:hover
{
	background: var(--hf-color-band);
}

.hf-footer__social-icon
{
	width: 1.75rem;
	height: 1.75rem;
}

.hf-footer__copy
{
	margin: 0;
	color: var(--hf-color-text);
	font-size: var(--hf-text-s);
	white-space: nowrap;
}

@media (max-width: 55.99em)
{
	.hf-footer
	{
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.hf-footer__logo,
	.hf-footer__meta
	{
		justify-self: center;
	}
}

@media (max-width: 30em)
{
	.hf-footer__meta
	{
		flex-direction: column;
		gap: var(--hf-space-xs);
	}
}