/**
 * Site Footer — Figma component `Footer Section` (master 722:14836)
 *
 * Measured off the .fig, not the export, because the footer is a component
 * INSTANCE and the per-page extractor treats an instance as a leaf — so
 * sections.raw.json has no internals for it. `scripts/fig-node.js` resolves the
 * symbol master; every number below is from that dump.
 *
 * 1920x728 on #010101. Container 240..1680. Vertical rhythm:
 *   116  row content top
 *   561  row content bottom (row is a fixed 445 tall)
 *   628  1px rule, white @20%   (row + 67 padding)
 *   651  bottom row content top
 *   691  bottom row content bottom (40 tall)
 *   728  footer bottom
 *
 * Columns: 443 / 472 / 376 with a 72 gap. The middle track holds the two link
 * columns, 222 each with a 27 gap — which is why the markup wraps them in
 * `.site-footer__cols` rather than putting all four on one grid.
 */

.site-footer {
	position: relative;
	background-color: var(--primary-black);
	color: var(--footer-text);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

.site-footer__inner {
	position: relative;
	padding-block: 116px 0;
}

/* Figma column starts inside the 1440 container: brand 240, COMPANY 755,
 * SERVICE 1004, contact panel 1299. 443 + 72 + 472 + 72 + 376 = 1435, so the
 * last 5px of the container are unused — as they are in the design. */
.site-footer__grid {
	display: grid;
	grid-template-columns: 443px 472px 376px;
	grid-auto-rows: minmax(445px, auto);
	column-gap: 72px;
	padding-bottom: 67px;
	border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 222px 222px;
	column-gap: 27px;
}

/* --- brand column ------------------------------------------------ */
/* The logo is placed outside the flow in the design — a 256x170 box at
 * x=206 (34px left of the container) / y=111, filled with the 1536x1024 master
 * artwork. The uploaded asset is that artwork already trimmed to its ink, so it
 * is positioned and sized to the mark the design actually shows: 186x108 at
 * 242,133. Same pixels, without shipping a 1.8MB PNG for a 256px box. */
.site-footer__brand {
	position: relative;
	padding-top: 98px; /* text block starts at y=214 */
}

.site-footer__logo-link {
	position: absolute;
	top: 17px;
	left: 2px;
	line-height: 0;
}

.site-footer__logo {
	width: 186px;
	height: auto;
}

.site-footer__about {
	margin: 50px 0 0;
	max-width: 443px;
}

.site-footer__hours {
	margin-top: 42px;
}

.site-footer__hours-text {
	margin: 0;
}

/* --- column headings --------------------------------------------- */
/* Text 20/32 then a 50x2 white rule. Gap under the rule differs per column in
 * the design (16 brand / 31 links / 32 contact), so it is set per column. */
.site-footer__col-title {
	position: relative;
	margin-bottom: 0;
	padding-bottom: 12px;
	color: var(--primary-green);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: var(--lh-body);
	/* The design's labels carry letter-spacing 0 — they are typed uppercase,
	 * not tracked-out small caps, so no --ls-wide here. */
	text-transform: uppercase;
}

.site-footer__col-title::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 2px;
	/* The design's four "Line" vectors are white fills on a node opacity of
	 * 0.2, not solid white — sampled (52,52,52) on the footer's #010101 in the
	 * 1:1 export, which is exactly 1 + 0.2 x 254. */
	background-color: rgb(255 255 255 / 20%);
	content: "";
}

.site-footer__hours .site-footer__col-title {
	margin-bottom: 16px;
}

/* The COMPANY/SERVICE track carries 24px of padding top and bottom in the
 * design (frame 722:14848), which is what puts its headings on y=140 rather
 * than level with the row top. */
.site-footer__col {
	padding-block: 24px;
}

.site-footer__col .site-footer__col-title {
	margin-bottom: 31px;
}

.site-footer__contact .site-footer__col-title {
	padding-bottom: 15px;
	margin-bottom: 32px;
}

/* --- link columns ------------------------------------------------ */
/* Design steps items 44px apart. The item box is a 32px line box, so the gap
 * is 12 — not the 24px frame height the .fig reports for a hugging text node. */
.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.site-footer__link-item a {
	display: flex;
	align-items: flex-start;
	gap: 15px; /* chevron is 7 wide, text starts 22 from the column edge */
	color: var(--footer-text);
}

.site-footer__link-item svg {
	flex: 0 0 auto;
	width: 7px;
	height: 12px;
	margin-top: 0.5em;
	color: var(--primary-green);
}

.site-footer__link-item a:hover,
.site-footer__link-item a:focus-visible,
.site-footer__link-item.is-current a {
	color: var(--primary-green);
}

/* --- contact panel ----------------------------------------------- */
/* 376 wide at container x=1299 (so 1299..1675) — it does NOT bleed to the
 * viewport edge: sampling the 1:1 export at x=1700 and x=1900 returns the
 * footer's own #010101. Fill is a vertical white gradient at 5% opacity,
 * 100% -> 0% top to bottom (Figma paint transform m01=1/m10=-1 rotates the
 * default left-to-right axis onto y; the export reads #0e0e0e at the top and
 * #010101 at the bottom, which is white 5% over #010101 fading out). */
.site-footer__contact {
	position: relative;
	padding: 24px 13px 27px 32px;
	background-image: linear-gradient(
		180deg,
		rgb(255 255 255 / 5%) 0%,
		rgb(255 255 255 / 0%) 100%
	);
}

.site-footer__company {
	margin: 0 0 17px;
	color: var(--footer-text);
	font-weight: 700;
}

/* Block 1 carries the rule in the design (border-bottom on the frame that
 * holds the company name and the first location), 25px above block 2. */
.site-footer__location:not(.has-rule) {
	padding-bottom: 22px;
	border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.site-footer__location.has-rule {
	padding-top: 25px;
}

.site-footer__address,
.site-footer__phone {
	margin: 0 0 13px;
}

.site-footer__phone {
	margin-bottom: 0;
}

/* The address is a map link when one is set. It reads as body text in the
 * design, so it takes the same treatment as the phone rather than looking
 * like a link. */
.site-footer__address a,
.site-footer__phone a {
	color: var(--footer-text);
}

.site-footer__address a:hover,
.site-footer__address a:focus-visible,
.site-footer__phone a:hover,
.site-footer__phone a:focus-visible {
	color: var(--primary-green);
}

/* --- icon rows ----------------------------------------------------
 * The footer's marks are not one size in the design: map-pin 21x26,
 * phone 26x26, clock 24x24, and the gap after each differs so the text
 * lands on x=1371 (address), 1374 (phone) and 275 (office hours).
 * Scoped here rather than on the shared .icon-row, which the top strip
 * also uses. */
.site-footer .icon-row {
	align-items: flex-start;
}

.site-footer__address {
	gap: 19px;
}

.site-footer__address svg {
	width: 21px;
	height: 26px;
	margin-top: 0.2em;
}

.site-footer__phone {
	gap: 17px;
}

.site-footer__phone svg {
	width: 26px;
	height: 26px;
	margin-top: 0.2em;
}

.site-footer__hours-text {
	gap: 11px;
}

.site-footer__hours-text svg {
	width: 24px;
	height: 24px;
	margin-top: 0.25em;
}

/* --- bottom row --------------------------------------------------- */
/* Rule at 628 belongs to the row above; this block is 23 + 40 + 37 = 100,
 * which lands the footer on exactly 728. */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-30);
	min-height: 40px;
	padding-block: 23px 37px;
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--fs-18);
	line-height: var(--lh-18-30);
}

.site-footer__copyright strong,
.site-footer__copyright b {
	color: var(--white);
	font-weight: 700;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 13px;
}

/* Medium, not the 400 the rest of the footer's small copy uses. Confirmed on
 * the "Follow Button" node inside every built page's Footer frame — Roboto 18
 * Medium on #CAD4C7. (The file also carries older homepage-draft copies of this
 * label at 400 on #89928D; those are not what the footers were drawn from.) */
.site-footer__follow {
	font-size: var(--fs-18);
	font-weight: 500;
	line-height: 1.556; /* 18/28 */
}

/* Social buttons: 40x40 on #557B4A with a white glyph, 10px apart, the last
 * one flush with the container's right edge (1640 + 40 = 1680). */
.site-footer__social-list {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--muted-green);
	color: var(--white);
	transition: var(--transition);
}

.site-footer__social-link svg {
	width: 20px;
	height: 20px;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background-color: var(--primary-green);
	color: var(--white);
}

/* --- responsive ---------------------------------------------------
 * The design is desktop-only at 1920, so below the container width the fixed
 * Figma tracks give way to proportional ones and then to a stack. The 445px
 * design row height is dropped with them — it only describes the 1440 layout. */
/* 1559, not 1440: the container only reaches its full 1440 content width at a
 * 1560 viewport, so the fixed 443/472/376 columns stop fitting the moment the
 * viewport drops below that — not when it drops below 1440. The gap showed up
 * as ~35px of overflow at 1460 once the type stopped shrinking above 1460. */
@media (max-width: 1559px) {

	.site-footer__grid {
		grid-template-columns: minmax(0, 443fr) minmax(0, 472fr) minmax(0, 376fr);
		grid-auto-rows: auto;
		column-gap: var(--space-40);
	}

	.site-footer__cols {
		column-gap: var(--space-25);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1199px) {

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-60);
		column-gap: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.site-footer__brand {
		padding-top: 88px;
	}

	.site-footer__contact {
		grid-column: span 2;
		/* The 32px left inset is the desktop panel's own; once the block spans
		 * the full row it just pushes the copy out of line with the columns
		 * above it. */
		padding-left: 0;
	}
}

@media (max-width: 767px) {

	/* 60 at the developer's instruction, down from 90. */
	.site-footer__inner {
		padding-block: 60px 0;
	}

	/* The contact icons are drawn for a 376px panel on a 1920 canvas; at this
	 * width they crowd the line they label. Reduced at the developer's
	 * instruction — the address pin and the phone glyph keep their proportions,
	 * 21x26 -> 16x20 and 26 -> 20. */
	.site-footer__address svg {
		width: 16px;
		height: 20px;
	}

	.site-footer__phone svg {
		width: 20px;
		height: 20px;
	}

	.site-footer__hours-text svg {
		width: 19px;
		height: 19px;
	}

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-40);
	}

	.site-footer__cols,
	.site-footer__contact {
		grid-column: auto;
	}

	.site-footer__cols {
		gap: var(--space-30);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-20);
		padding-block: var(--space-25) var(--space-30);
	}
}

/* COMPANY and SERVICES sit two-up down to here; below it there is not enough
 * width for two link columns, so they stack. */
@media (max-width: 567px) {

	.site-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--space-30);
	}
}