/**
 * Butterfields – site footer
 *
 * Built to the approved footer design: four columns on a #B1BA22 field, white
 * Manrope throughout, with the copyright line on a row of its own underneath.
 *
 * The brand tokens (--bf-*) and the .bf-container utility are declared in
 * header.css, which this file is enqueued behind — see butterfields_enqueue_assets().
 */

/* -------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

.bf-footer {
	background-color: var(--bf-primary);
	color: var(--bf-white);
	font-family: var(--bf-font-primary);
	padding-block: clamp(56px, 9vw, 160px) clamp(40px, 4.4vw, 78px);
}

.bf-footer *,
.bf-footer *::before,
.bf-footer *::after {
	box-sizing: border-box;
}

.bf-footer a {
	color: var(--bf-white);
	text-decoration: none;
}

/* `:active` is listed because the parent's reset.css repaints every link with
 * `a:active,a:hover{color:#336}` (0,1,1), which outranks `.bf-footer a` (0,1,0)
 * and would turn the hovered links navy against the green. */
.bf-footer a:hover,
.bf-footer a:active,
.bf-footer a:focus-visible {
	color: var(--bf-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bf-footer :focus-visible {
	outline: 2px solid var(--bf-white);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Columns
 *
 * The first column carries the paragraph so it takes the widest track; the
 * remaining three are sized off the design's link lengths.
 * ---------------------------------------------------------------------- */

.bf-footer__inner {
	display: grid;
	grid-template-columns:
		minmax(0, 1.4fr)
		minmax(0, 1.05fr)
		minmax(0, 1.05fr)
		minmax(0, 0.95fr);
	column-gap: clamp(24px, 3.4vw, 52px);
	row-gap: clamp(36px, 4vw, 56px);
}

.bf-footer__heading {
	margin: 0 0 clamp(14px, 1.5vw, 21px);
	font-family: var(--bf-font-primary);
	font-weight: 600;
	font-size: clamp(21px, 1.87vw, 28px);
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: var(--bf-white);
}

/* -------------------------------------------------------------------------
 * Column 1 – about + Facebook
 * ---------------------------------------------------------------------- */

.bf-footer__col--about .bf-footer__heading {
	margin-bottom: clamp(20px, 2.5vw, 37px);
}

.bf-footer__about-text {
	margin: 0;
	font-size: clamp(16px, 1.27vw, 19px);
	line-height: 1.58;
}

/* Each stored line gets its own block so the copy breaks where the design
 * breaks it, while still wrapping inside the column on narrow screens. */
.bf-footer__about-line {
	display: block;
}

.bf-footer__facebook {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 2.5vw, 38px);
	font-size: clamp(16px, 1.27vw, 19px);
	line-height: 1.4;
}

.bf-footer__facebook-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
}

.bf-footer__facebook-icon svg {
	display: block;
	width: 13px;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Columns 2 & 3 – link lists
 *
 * `align-items: flex-start` keeps each item shrink-to-fit so the hover
 * underline stops at the end of the label instead of running the full column.
 * ---------------------------------------------------------------------- */

.bf-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(4px, 0.45vw, 7px);
	font-size: clamp(16px, 1.33vw, 20px);
	line-height: 1.5;
}

.bf-footer__list li {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Column 4 – address
 * ---------------------------------------------------------------------- */

.bf-footer__address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(4px, 0.45vw, 7px);
	font-size: clamp(16px, 1.33vw, 20px);
	font-style: normal;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Copyright row
 * ---------------------------------------------------------------------- */

.bf-footer__bottom {
	margin-top: clamp(32px, 3.4vw, 56px);
}

.bf-footer__copyright {
	margin: 0;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Tablet and mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.bf-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(32px, 4vw, 48px);
	}
}

@media (max-width: 575px) {
	.bf-footer {
		padding-block: 48px 40px;
	}

	.bf-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 34px;
	}

	.bf-footer__col--about .bf-footer__heading {
		margin-bottom: 16px;
	}

	.bf-footer__facebook {
		margin-top: 22px;
	}

	.bf-footer__bottom {
		margin-top: 34px;
	}
}