/* ===========================================================================
   Cosmick footer (2026-10) — enqueued from inc/cm-footer.php.

   Port of the approved reference's Footer component (layout.tsx) and its
   studio refinements (entire-site.css: .site-footer, .footer-opening). The
   brand column lists all three locations (the reference lists two) and no
   map is embedded.

   CASCADE: this sheet prints in <head> BEFORE cosmick-2026.css (a hard-coded
   <link> after wp_head()). Every selector is therefore scoped `.cm-footer
   .cm-ft-*` — (0,2,0) or more — so it outranks the base layer's (0,1,0)
   component rules and the legacy element styles (Bootstrap `p`, `ul`, `a`)
   without !important. The base layer's `.cm-footer-*` rules match nothing in
   the new markup except `.cm-footer` itself and `.cm-footer-rule`, which are
   kept on purpose (charcoal ground, solid coral top band).

   Colours on the studio charcoal #292725:
     #fbf8f5 opening line ....... 14.9:1
     #ece6e0 links / addresses .. 12.6:1
     #cfc6be blurb .............. 9.9:1
     #c8b9ac labels ............. 8.6:1
     #bdb3aa legal / status ..... 7.6:1
     #ff9b91 CTA / actions ...... 7.3:1
     #292725 on #ff675b button .. 5.0:1
   =========================================================================== */

.cm-footer {
	font-family: var(--cm26-font-body);
}

.cm-footer .cm-ft-opening-line,
.cm-footer .cm-ft-blurb,
.cm-footer .cm-ft-legal-row p {
	margin: 0;
}

.cm-footer .cm-ft-links,
.cm-footer .cm-ft-locs,
.cm-footer .cm-ft-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Opening line + CTA (reference .footer-opening)
   ------------------------------------------------------------------------ */
.cm-footer .cm-ft-opening {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 35px;
	border-bottom: 1px solid #5d5149;
}

.cm-footer .cm-ft-opening-line {
	max-width: 23ch;
	font-family: var(--cm26-font-display);
	font-size: clamp(22px, 3vw, 35px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.04em;
	color: #fbf8f5;
}

.cm-footer .cm-ft-cta {
	min-height: 32px;
	font-size: 14px;
	line-height: 1.65;
	color: #ff9b91;
}

.cm-footer .cm-ft-cta:hover,
.cm-footer .cm-ft-cta:focus-visible {
	color: #ff9b91;
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   Brand + link columns (reference: grid gap-10 py-14 lg:[1.4fr_1fr_1fr_1fr])
   ------------------------------------------------------------------------ */
.cm-footer .cm-ft-main {
	display: grid;
	gap: 40px;
	padding-block: 56px;
}

.cm-footer .cm-ft-logo {
	display: block;
	width: auto;
	height: 40px;
}

.cm-footer .cm-ft-blurb {
	max-width: 36ch;
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.625;
	color: #cfc6be;
}

.cm-footer .cm-ft-nav {
	display: grid;
	gap: 40px;
}

/* Column headings: h2, as in the reference. (0,2,0) resets style.css's
   element-level h2 margins/padding/size. */
.cm-footer .cm-ft-label {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #c8b9ac;
}

.cm-footer .cm-ft-links {
	display: grid;
	gap: 8px;
	font-size: 15px;
	line-height: 1.65;
}

.cm-footer .cm-ft-links a {
	color: #ece6e0;
	text-decoration: none;
}

.cm-footer .cm-ft-links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------------------------------------------------------------------------
   Locations + phone, in the brand column (reference: mt-6 grid gap-5
   text-[15px] sm:grid-cols-2 lg:grid-cols-1; each a pin + <address>)
   ------------------------------------------------------------------------ */
.cm-footer .cm-ft-locs {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	font-size: 15px;
}

.cm-footer .cm-ft-loc {
	display: flex;
	gap: 10px;
	min-width: 0;
}

.cm-footer .cm-ft-pin {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--studio-coral, #ff675b);
}

.cm-footer .cm-ft-address {
	margin: 0;
	font-style: normal;
	line-height: 1.375;
	color: #ece6e0;
}

/* Street and locality as balanced blocks, so "Suite 300 PMB 1031" never
   leaves "1031" alone on a line in a narrow column. */
.cm-footer .cm-ft-address br { display: none; }

.cm-footer .cm-ft-address > :is(.cm-loc-street, .cm-loc-locality) {
	display: block;
	text-wrap: balance;
}

.cm-footer .cm-ft-address .cm-loc-label {
	font-family: var(--cm26-font-display);
	font-weight: 600;
	color: #fff;
}

.cm-footer .cm-ft-address .cm-loc-kind {
	display: inline-block;
	margin-left: 6px;
	font-family: var(--cm26-font-display);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: 1px;
	color: #ff9b91;
}

.cm-footer .cm-ft-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-family: var(--cm26-font-display);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.65;
	color: #fff;
	text-decoration: none;
}

.cm-footer .cm-ft-phone .cm-icon { width: 16px; height: 16px; color: var(--studio-coral, #ff675b); }

.cm-footer .cm-ft-phone:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------------------------------------------------------------------------
   Legal row
   ------------------------------------------------------------------------ */
.cm-footer .cm-ft-legal { border-top: 1px solid rgba(255, 255, 255, .1); }

.cm-footer .cm-ft-legal-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 24px;
	font-size: 13.5px;
	line-height: 1.65;
	color: #bdb3aa;
}

.cm-footer .cm-ft-legal-lists,
.cm-footer .cm-ft-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.cm-footer .cm-ft-legal-links a {
	color: inherit;
	text-decoration: none;
}

.cm-footer .cm-ft-legal-links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------------------------------------------------------------------------
   Focus — one visible ring for every control on the charcoal.
   ------------------------------------------------------------------------ */
/* style.css gives every link `transition: all .3s`, which animated the focus
   ring in from nothing. Only colours ease here; the ring appears at once. */
.cm-footer :is(a, button) {
	transition-property: color, background-color, text-decoration-color;
}

.cm-footer :is(a, button):focus-visible {
	outline: 3px solid #ff9b91;
	outline-offset: 3px;
	border-radius: 4px;
}

/* `hidden` must beat the display values above (UA [hidden] is (0,1,0)). */
.cm-footer [hidden][hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Breakpoints (reference: grid gap-10 py-14 md:grid-cols-2
   lg:grid-cols-[1.4fr_1fr_1fr_1fr])

   The three link columns stay inside ONE <nav aria-label="Footer">, so the
   nav takes the parent's tracks through subgrid: at md it spans both rows
   and places Services beside the brand, Company and Support below; at lg it
   takes columns 2-4. The brand column is lifted above the nav's (empty)
   cell so its links stay clickable where the two boxes overlap.
   ------------------------------------------------------------------------ */

/* Phones: one column, the reference's 25px link rows on an 8px gap
   (each link is >= 24px tall with the gap, WCAG 2.5.8). */
@media (max-width: 767px) {
	.cm-footer .cm-ft-opening { padding-block: 30px; gap: 18px 24px; }

	.cm-footer .cm-ft-cta { min-height: 44px; }

	.cm-footer .cm-ft-legal-row { gap: 8px; }

	.cm-footer .cm-ft-legal-lists,
	.cm-footer .cm-ft-legal-links { gap: 8px 20px; }
}

/* Two address columns only while the brand column spans the full width
   (640-767px). From 768px it is a half-width column, and three addresses
   two-up there wrapped every street line (the reference has two locations). */
@media (min-width: 640px) and (max-width: 767px) {
	.cm-footer .cm-ft-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.cm-footer .cm-ft-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cm-footer .cm-ft-brand { position: relative; z-index: 1; grid-column: 1; grid-row: 1; }

	.cm-footer .cm-ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@supports (grid-template-columns: subgrid) {
		.cm-footer .cm-ft-nav {
			grid-column: 1 / -1;
			grid-row: 1 / span 2;
			grid-template-columns: subgrid;
			grid-template-rows: subgrid;
		}

		.cm-footer .cm-ft-col-services { grid-column: 2; grid-row: 1; }
		.cm-footer .cm-ft-col-company { grid-column: 1; grid-row: 2; }
		.cm-footer .cm-ft-col-support { grid-column: 2; grid-row: 2; }
	}

	.cm-footer .cm-ft-legal-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.cm-footer .cm-ft-main { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

	.cm-footer .cm-ft-nav {
		grid-column: 2 / -1;
		grid-row: 1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@supports (grid-template-columns: subgrid) {
		.cm-footer .cm-ft-nav {
			grid-column: 2 / -1;
			grid-row: 1;
			grid-template-columns: subgrid;
			grid-template-rows: none;
		}

		.cm-footer .cm-ft-col-services,
		.cm-footer .cm-ft-col-company,
		.cm-footer .cm-ft-col-support { grid-row: 1; grid-column: auto; }
	}
}

/* ---------------------------------------------------------------------------
   Social proof notification body (was an inline style in footer.php's script)
   ------------------------------------------------------------------------ */
.social-proof-notification .notification-body {
	display: flex;
	align-items: center;
}