/* ==========================================================================
   Apex footer
   ========================================================================== */

/* Storefront injects a high-specificity inline rule
   (".site-footer a:not(.button):not(.components-button) { color:#333 }")
   assuming a light footer background — !important is the reliable way to
   override it now that the footer is dark navy. */
.site-footer { background: var(--color-navy) !important; color: rgba(255,255,255,.75) !important; padding: 0 !important; }

/* Storefront's responsive rules give EVERY .col-full a left/right margin
   (`margin-left/right: 2.617924em` at ≥768px, `1.41575em` below it). Zeroing
   only `padding` and `max-width` left those margins in place, so the whole
   footer — including the copyright bar, which is only `width:100%` of its
   parent — sat inset from both edges instead of running the full width of
   the viewport. The margins have to be reset too, or nothing inside the
   footer can ever reach the edge. */
.site-footer .col-full {
	padding: 0;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
.site-footer a { color: rgba(255,255,255,.85) !important; }
.site-footer a:hover { color: var(--color-white) !important; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
	color: var(--color-white) !important;
}

.apex-footer { padding-block: var(--space-12); }
.apex-footer__columns {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--space-8);
}
@media (min-width: 768px) { .apex-footer__columns { padding-inline: var(--space-8); } }

/* The client's full lock-up, same asset as the header. The old rule
   circle-cropped a square JPEG at 44px and set the wordmark as separate text;
   this is one image, so only its height needs controlling. */
.apex-footer__logo { margin-bottom: var(--space-5); }
/* Large enough that the "Heating & Air Conditioning" line under the wordmark
   is actually readable — at 52px it rendered around 5px tall and vanished.
   The lock-up is 909x274, so 78px high gives roughly 259px wide, which still
   sits comfortably inside the footer's first column. */
.apex-footer__logo img { height: 78px; width: auto; max-width: 100%; display: block; }

.apex-footer__blurb { font-size: 0.9rem; line-height: 1.6; margin-bottom: var(--space-4); }

.apex-footer__contact { display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.875rem; }
.apex-footer__contact li { display: flex; align-items: center; gap: 8px; }
.apex-footer__contact .apex-icon svg { width: 14px; height: 14px; }

.apex-footer__heading {
	color: var(--color-white);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: var(--space-4);
}
.apex-footer__links { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.9rem; }
.apex-footer__links a { text-decoration: none; }
.apex-footer__links a:hover { text-decoration: underline; color: var(--color-white); }

.apex-newsletter-form { display: flex; margin-top: var(--space-3); }
.apex-newsletter-form input {
	flex: 1;
	/* A flex item's default min-width is auto, not 0 — it won't shrink
	   below its own intrinsic content width. Chrome's built-in minimum for
	   a plain text input is wide enough that on a narrow phone this input
	   plus the "Subscribe" button no longer fit the footer column, and the
	   button was pushed past the edge of the screen instead of the input
	   simply shrinking. */
	min-width: 0;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.08);
	color: var(--color-white);
	padding: 0.7em 1em;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.apex-newsletter-form input::placeholder { color: rgba(255,255,255,.5); }
.apex-newsletter-form button {
	background: var(--color-red);
	color: var(--color-white);
	border: 0;
	flex-shrink: 0;
	padding-inline: 1.2em;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-weight: 600;
}
.apex-newsletter-form button:hover { background: var(--color-red-dark); }

/* The copyright strip is the last thing on every page: it must sit flush
   against the footer above it (no gap) and run the full width of the
   viewport (no inset), so it reads as the page's bottom edge rather than a
   floating band. `width:100%` alone is not enough — see the .col-full note
   above — so the bar is pinned to the viewport width independently of
   whatever margins an ancestor happens to carry. */
.apex-footer-bottom {
	background: var(--color-navy-dark);
	width: 100%;
	margin: 0;
	border: 0;
}
.apex-footer-bottom__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	font-size: 0.8rem;
}
@media (min-width: 768px) { .apex-footer-bottom__inner { padding-inline: var(--space-8); } }
.apex-footer-bottom p { margin: 0; }
.apex-payment-icons { display: flex; gap: var(--space-3); align-items: center; }
.apex-payment-icons__badge {
	background: var(--color-white);
	color: var(--color-navy);
	padding: 0.4em 0.7em;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
}
.apex-payment-icons__badge svg { height: 16px; width: auto; display: block; }