/*
 * Module: Footer
 * Owns: .spg-footer-logo, .spg-footer-tagline, .spg-footer-social (brand icons), .spg-footer-heading,
 *       .spg-footer-nap (.spg-nap-addr/.spg-nap-phone icons), .spg-footer-legal, .spg-footer-credit,
 *       footer widget headings/links within .site-footer
 * Depends on: tokens.css
 */

.site-footer .footer-widget-area {
	color: var(--color-body);
}

.spg-footer-logo {
	max-width: 190px;
	height: auto;
	margin-bottom: 16px;
}

.spg-footer-tagline {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--color-body);
	margin-bottom: 16px;
}

/* Footer column headings + widget titles */
.site-footer .widget-title,
.spg-footer-heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-h6);
	color: var(--color-brand);
	margin-bottom: 16px;
	text-transform: none;
}

/* Footer nav menus */
.site-footer .footer-widget-area .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .footer-widget-area .menu li {
	margin-bottom: 8px;
}
.site-footer .footer-widget-area .menu a {
	color: var(--color-body);
	font-size: var(--text-small);
	transition: color var(--transition-base);
}
.site-footer .footer-widget-area .menu a:hover {
	color: var(--color-alt-brand);
}

/* NAP (QA #13/#14): each item on one line, icon + text */
.spg-footer-nap {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var(--text-small);
	line-height: var(--lh-small);
	margin-bottom: 10px;
}
.spg-footer-nap a { color: var(--color-alt-brand); }
.spg-footer-nap::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background-color: var(--color-alt-brand);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}
/* location pin */
.spg-nap-addr::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
/* QA #55: two phone numbers in the footer, each with a small label underneath. */
.spg-nap-phone { flex-wrap: wrap; }
.spg-nap-phone--existing { margin-bottom: 6px; }
.spg-nap-phone--existing::after,
.spg-nap-phone--new::after {
	flex-basis: 100%;
	margin-left: 25px;                 /* clear the 16px icon + 9px gap */
	margin-top: -1px;
	font-size: 10.5px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gray-600);
}
.spg-nap-phone--existing::after { content: "Existing Clients"; }
.spg-nap-phone--new::after { content: "New Clients"; }
/* phone handset */
.spg-nap-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

/* Social row (QA #12): client-supplied brand-icon tiles */
.spg-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}
.spg-footer-social a {
	display: inline-flex;
	width: 38px;
	height: 38px;
	font-size: 0;            /* hide the text label */
	color: transparent;
	background: no-repeat center / contain;
	transition: transform var(--transition-base), opacity var(--transition-base);
}
.spg-footer-social a:hover { transform: translateY(-2px); opacity: 0.85; }
.spg-footer-social a[href*="facebook"]  { background-image: url("../../icons/facebook.svg"); }
.spg-footer-social a[href*="linkedin"]  { background-image: url("../../icons/linkedin.svg"); }
.spg-footer-social a[href*="instagram"] { background-image: url("../../icons/instagram.svg"); }
.spg-footer-social a[href*="youtube"]   { background-image: url("../../icons/youtube.svg"); }
.spg-footer-social a[href*="twitter"],
.spg-footer-social a[href*="x.com"]      { background-image: url("../../icons/twitter.svg"); }

/* Copyright bar: legal links + agency credit (QA #16/#18) */
.ast-footer-copyright .spg-footer-legal,
.ast-footer-copyright .spg-footer-credit { white-space: nowrap; }
.ast-footer-copyright .spg-footer-legal a,
.ast-footer-copyright .spg-footer-credit a {
	color: inherit;
	text-decoration: none;
}
.ast-footer-copyright .spg-footer-legal a:hover,
.ast-footer-copyright .spg-footer-credit a:hover { color: var(--color-accent); text-decoration: underline; }
.ast-footer-copyright .spg-footer-legal a { margin-left: 14px; }
.ast-footer-copyright .spg-footer-legal a + a { margin-left: 0; }
.ast-footer-copyright .spg-footer-legal a + a::before {
	content: "·";
	margin: 0 8px;
	opacity: 0.6;
}
.ast-footer-copyright .spg-footer-credit { margin-left: 14px; }

/* QA #13: force the footer to a true 4-column row on desktop (Astra was rendering
   3 columns, dropping "Visit Us" onto a second line). */
@media (min-width: 922px) {
	.site-primary-footer-inner-wrap {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* QA #15: Google map in the Visit Us column */
.spg-footer-map { margin-top: 18px; }
.spg-footer-map iframe {
	width: 100%;
	height: 168px;
	border: 0;
	border-radius: var(--radius-sm);
	display: block;
	filter: grayscale(0.2);
}

/* QA #16: "Website by" agency logo (imported asset is white → render dark on the light bar) */
.ast-footer-copyright .spg-footer-credit { display: inline-flex; align-items: center; gap: 6px; }
.spg-smb-logo {
	height: 20px;
	width: auto;
	vertical-align: middle;
	filter: brightness(0);
	opacity: 0.72;
	transition: opacity var(--transition-base);
}
.spg-footer-credit a:hover .spg-smb-logo { opacity: 1; }
/* Copyright row: copyright + legal links left, agency credit pushed right */
.ast-footer-copyright p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}
.ast-footer-copyright .spg-footer-credit { margin-left: auto; }
.ast-footer-copyright .spg-footer-credit::before { content: none; }

/* Footer above the disclaimer is a uniform light grey; only the disclaimer is maroon (QA).
   The below-footer (copyright) row was rendering maroon — override to grey with dark text. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--color-primary) !important;
}
.ast-footer-copyright,
.ast-footer-copyright a,
.ast-footer-copyright .spg-footer-legal a,
.ast-footer-copyright .spg-footer-credit {
	color: var(--color-body) !important;
}

/* QA #17/#18: maroon legal-disclaimer bar below the footer */
.spg-disclaimer-bar {
	background-color: var(--color-brand);
	padding: 16px 24px;
}
.spg-disclaimer-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	text-align: center;
	color: rgba(255,255,255,0.85);
	font-size: var(--text-caption);
	line-height: 1.6;
}
@media (max-width: 921px) {
	.ast-footer-copyright p { justify-content: center; text-align: center; }
	.ast-footer-copyright .spg-footer-credit { margin-left: 0; }
}

/* Footer breathing room — vertical spacing + side gutters (content was flush to edges on mobile) */
.site-footer .site-primary-footer-inner-wrap {
	padding: 56px 24px 40px;
}
.site-footer .site-below-footer-inner-wrap {
	padding: 18px 24px;
}
@media (max-width: 921px) {
	.site-footer .site-primary-footer-inner-wrap { padding: 40px 22px 30px; }
	.site-footer .site-below-footer-inner-wrap { padding: 16px 22px; }
}