/**
 * Site footer.
 * Rebuilt from the ElementsKit "Footer" template (post ID 90). Values
 * below come from that template's _elementor_data plus direct
 * measurements against production (see MIGRATION.md).
 *
 * Every rule that targets a bare HTML element (h3, p, li, svg, a...) is
 * scoped as `.cwf-footer .cwf-footer__thing` (two classes, not one) --
 * Elementor's kit CSS ships blanket `.elementor-kit-13 <tag>` rules
 * (specificity 0,1,1) for most text elements, which beat a single-class
 * rule (0,1,0). Hit this on `h3` here (heading rendered at the kit's
 * global 36px instead of our 26px); same pattern already hit `a` and
 * `button` in header.css/nav-menu.css. Scoping every element selector
 * this way up front, not just the one that visibly broke.
 */

.cwf-footer {
	background: var(--color-black);
	padding: 0 56px 30px;
}

.cwf-footer__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 80px 0 60px;
	gap: 0;
}

.cwf-footer__col {
	box-sizing: border-box;
}
.cwf-footer__col--brand { width: 21%; }
.cwf-footer__col:nth-child(2) { width: 25%; padding-left: 70px; }
.cwf-footer__col:nth-child(3) { width: 25%; }
.cwf-footer__col:nth-child(4) { width: 25%; padding-left: 40px; }

/* ---- Brand column: bordered logo box ---- */
.cwf-footer__logo-box {
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}
.cwf-footer__logo-box img {
	display: block;
	width: 80px;
	height: auto;
	margin: 0; /* the raw _elementor_data has a negative-margin "overlap" effect on this image via its atomic-widget class, but that isn't actually applied on production as rendered -- measured margin: 0px there, trust the measurement over the JSON */
}
.cwf-footer .cwf-footer__logo-box p {
	margin: 0;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px; /* measured from production -- not the 15px this was guessed at before measuring */
	line-height: 25.2px;
	color: var(--color-text);
}

/* ---- Column headings ---- */
.cwf-footer .cwf-footer__heading {
	margin: 0 0 20px;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: capitalize;
	color: var(--color-white);
}

/* ---- Pages / Services lists ---- */
.cwf-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cwf-footer .cwf-footer__list a {
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: none;
}
.cwf-footer .cwf-footer__list a:hover,
.cwf-footer .cwf-footer__list a:focus-visible {
	color: var(--color-primary);
}

/* ---- Contact list (icon + text rows) ---- */
.cwf-footer__contact-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cwf-footer .cwf-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.cwf-footer .cwf-footer__contact-list svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--color-primary);
}
.cwf-footer .cwf-footer__contact-list a,
.cwf-footer .cwf-footer__contact-list span {
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: none;
}
.cwf-footer .cwf-footer__contact-list a:hover,
.cwf-footer .cwf-footer__contact-list a:focus-visible {
	color: var(--color-primary);
}
/* "California HQ" / "Nevada HQ" label above each address, added
   2026-08-25 -- same span as the address text itself (see
   template-parts/site-footer.php), just a leading bold line. */
.cwf-footer .cwf-footer__contact-list .cwf-footer__contact-label {
	font-weight: 600;
	color: var(--color-white);
}

/* ---- Social icons ---- */
.cwf-footer__social {
	display: flex;
	gap: 6px;
}
.cwf-footer .cwf-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 10%;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-black);
}
.cwf-footer .cwf-footer__social-icon svg {
	width: 16px;
	height: 16px;
}
.cwf-footer .cwf-footer__social-icon:hover,
.cwf-footer .cwf-footer__social-icon:focus-visible {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-black);
}

/* ---- Bottom bar ---- */
.cwf-footer__bottom {
	border-top: 1px solid var(--color-border-on-dark);
	padding: 20px 0;
	text-align: center;
}
.cwf-footer .cwf-footer__bottom p {
	margin: 0;
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px;
	color: var(--color-text);
}

@media (max-width: 1024px) {
	.cwf-footer {
		padding: 0 50px 30px;
	}
	.cwf-footer__inner {
		flex-direction: column;
		padding: 100px 0 60px;
		gap: 40px;
	}
	.cwf-footer__col--brand,
	.cwf-footer__col:nth-child(2),
	.cwf-footer__col:nth-child(3),
	.cwf-footer__col:nth-child(4) {
		width: 100%;
		padding-left: 0;
	}
	/* Pages/Services/Contact Us columns left-aligned by default (the brand
	   column already centers itself unconditionally via
	   .cwf-footer__logo-box) -- client asked for these centered too once
	   stacked full-width on mobile/tablet. Centers headings, list items,
	   the icon+text contact rows (as a unit, not just the text), and the
	   social icon row. */
	.cwf-footer__col {
		text-align: center;
	}
	.cwf-footer__list,
	.cwf-footer__contact-list {
		align-items: center;
	}
	.cwf-footer .cwf-footer__contact-list li {
		justify-content: center;
	}
	.cwf-footer__social {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.cwf-footer {
		padding: 0 20px 20px;
	}
	.cwf-footer__inner {
		padding: 50px 0 40px;
	}
	.cwf-footer__heading {
		font-size: 24px;
	}
}