/**
 * Site footer.
 *
 * NOTE: the Figma extractor named this section `cta`. That is WRONG — `cta` is
 * the Footer. Always resolve through sections_discovered.build_order.
 *
 * Measured geometry (1920 canvas, section 8 = y 7309..8306, height 997):
 *   Section padding-block 80.
 *   4 columns at x 240 / 682 / 1080 / 1412 -> widths 442 / 398 / 332 / 268
 *   (sum 1440, no gap). Written as `442fr 398fr 332fr 268fr` so the proportions
 *   hold fluidly and are exact at 1440.
 *   Row block 340 tall (rel 80..420). That height is not asserted — it falls out
 *   of the 7-item services column exactly: 32 heading + 16 + (7 x 28) + (6 x 16)
 *   = 32 + 16 + 292 = 340.
 *   Then 64 -> bottom image 1440x340 (rel 484..824) -> 64 -> centred copyright
 *   (rel 888..916) -> padding-bottom 80 = 996.
 *   Brand column: logo 278x171 at y=80, +40 gap, button 278x62 at y=291.
 *   Menu item pitch 44 (28 text + 16 gap); heading to first item 16.
 *   Contact: 56x56 tiles + 16 gap -> text at x=1484, width 196 (= 268 - 56 - 16).
 *
 * Gradient — MEASURED, and it contradicts section-specs.json, which is wrong here.
 *   Implemented: linear-gradient(180deg, #2F5D3A 0%, #001C0F 100%)
 *   Extractor claimed: ... 0%, #26492D 100%
 *   Vertical profile sampled at x=20..200 and x=1720..1900 (horizontally uniform,
 *   delta 1-5, so the cta.jpg photo underneath is only ~2% visible):
 *     y+50 #305B3A  y+250 #294F33  y+450 #21422C  y+650 #153422  y+950 #041F12
 *   The gradient is drawn on a ::before rather than in `background-image` because
 *   the ACF background image arrives as an inline style, which would win.
 *
 * Colours here are measured, not assumed:
 *   column headings ...... PURE WHITE (max sample = 255,255,255)
 *   phone number 22px .... PURE WHITE (modal sample = 255,255,255)
 *   menu links ........... rgba(255,255,255,0.64)  (measured alpha 0.649)
 *   address .............. rgba(255,255,255,0.64)  (measured alpha 0.645)
 *   copyright ............ rgba(255,255,255,0.64)  (measured alpha 0.64)
 *   contact icon tiles ... rgba(255,255,255,0.16) — ALREADY inside icon-9.svg and
 *                          icon-10.svg as a 56x56 rx=8 rect, so CSS must not add
 *                          it a second time.
 *
 * @package lawncareknox
 */

/* Wrapper for the whole footer area. Section 8 ("Let's Talk About Your Yard")
   mounts as the first child of this element when its re-export lands — see the
   seam comment in footer.php. It is a plain block so that prepending a
   full-bleed section above the footer needs no change here. */
.site-footer-area {
	position: relative;
}

.site-footer {
	position: relative;
	padding-block: var(--sp-80);
	background-color: var(--color-secondary);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: var(--color-white);
	overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #2F5D3A 0%, #26492D 100%);
    opacity: 0.9;
    z-index: 1;
}

.footer__overlay {
    background: linear-gradient(180deg, rgba(31, 58, 46, 0) 0%, #011C10 100%);
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.98;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: var(--sp-64);
}

/* ==========================================================================
   Column row
   ========================================================================== */

.site-footer__row {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 442fr 398fr 332fr 268fr;
	grid-template-columns: 442fr 398fr 332fr 268fr;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: start;
}

.site-footer__col {
	min-width: 0;
}

/* --- Brand column. --- */
.site-footer__brand {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-40);
}

.site-footer__logo {
	display: block;
}

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

.site-footer__description {
	color: var(--text-on-dark-muted);
	max-width: 442px;
}

.site-footer__social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--sp-16);
}

.site-footer__social a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: var(--sp-48);
	height: var(--sp-48);
	border-radius: var(--radius);
	background-color: var(--line-on-dark);
	-webkit-transition: var(--transition);
	transition: var(--transition);
}

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

.site-footer__social img {
	width: var(--sp-24);
	height: var(--sp-24);
	-o-object-fit: contain;
	   object-fit: contain;
}

/* --- Shared column heading (22/32 Hairline, uppercase — measured pure white). --- */
.site-footer__heading {
	color: var(--color-white);
}

/* --- The two menu columns. --- */
.site-footer__menu-col {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-16);
}

.site-footer__menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: var(--sp-16);
}

.site-footer__menu a {
	display: inline-block;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--text-on-dark-muted);
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__menu .current-menu-item > a {
	color: var(--color-white);
}

/* --- Contact column. --- */
.site-footer__contact {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-16);
}

.site-footer__contact-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--sp-16);
	width: 100%;
}

/* The 0.16 white tile is baked into the SVG — no background here. */
.site-footer__contact-icon {
	display: block;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 56px;
	        flex: 0 0 56px;
			width: 56px;
}

.site-footer__contact-icon img {
	width: 56px;
	height: 56px;
}

.site-footer__contact-item .text-small {
	color: var(--text-on-dark-muted);
}

/* Measured pure white, and 22/32 — deliberately not .section-label, which also
   carries uppercase and 0.12em tracking that the phone number does not have. */
.site-footer__phone {
	font-size: 22px;
	line-height: 32px;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--color-white);
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
	color: var(--color-accent);
}

/* ==========================================================================
   Bottom image + copyright
   ========================================================================== */

.site-footer__image {
	width: 100%;
	aspect-ratio: 1440 / 340;
	border-radius: var(--radius);
	overflow: hidden;
}

.site-footer__image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.site-footer__copyright {
	text-align: center;
	color: var(--text-on-dark-muted);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   No tablet or mobile frames exist in the Figma file, so these are derived.
   Spacing values are all from the Figma scale.
   ========================================================================== */

@media (max-width: 1200px) {
	.site-footer__row {
		-ms-grid-columns: 1fr var(--sp-48) 1fr;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-48);
	}

	.site-footer__inner {
		gap: var(--sp-48);
	}
	.site-footer__image {
	aspect-ratio: 16 / 9;
}
}

@media (max-width: 999px) {
	.site-footer {
		padding-block: var(--sp-64);
	}

	.site-footer__inner {
		gap: var(--sp-40);
	}

	.site-footer__logo img {
		width: 220px;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding-block: var(--sp-48);
	}

	.site-footer__inner {
		gap: var(--sp-32);
	}

	.site-footer__row {
		gap: var(--sp-40);
	}

	.site-footer__brand {
		gap: var(--sp-24);
	}

	/* 44px item pitch (28 + 16) comes down to 36 (28 + 8). */
	.site-footer__menu {
		gap: var(--sp-8);
	}

	.site-footer__contact-icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 48px;
		        flex: 0 0 48px;
				width:48px;
	}

	.site-footer__contact-icon img {
		width: 48px;
		height: 48px;
	}

	.site-footer__phone {
		font-size: 20px;
		line-height: 1.5em;
		letter-spacing: 0;
	}

	/*
	 * THE BOTTOM IMAGE NEEDS A FLOOR. It is a 1440x340 band, i.e. 4.235:1, so
	 * pure aspect-ratio collapses it as the screen narrows: at a 375px viewport
	 * the content box is 345 wide and the band renders 81px tall — a sliver, not
	 * a band, which is exactly what was reported.
	 *
	 * min-height wins over the aspect-ratio-derived height, so the box holds at
	 * 150 (a Figma scale value) and the img's object-fit: cover crops into it
	 * instead of shrinking. The floor only bites below ~636px of content width;
	 * above that the true 1440:340 ratio is still what renders.
	 */
	.site-footer__image {
		min-height: var(--sp-150);
	}
}

@media (max-width: 640px) {
	.site-footer__row {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}

	/* Sized UP from the old 180 — the footer logo is the brand mark and it was
	   collapsing along with the header one. */
	.site-footer__logo img {
		width: 200px;
	}
}

@media (max-width: 479px) {
	.site-footer {
		padding-block: var(--sp-40);
	}

	.site-footer__logo img {
		width: 180px;
	}
}