/* Native footer component. All rules scoped under .cwm-footer -- no
   bare-element selectors (same rule as header.css). Colors reused from
   the theme's own theme.json palette / the footer's own measured
   values (#D2D3D5 copyright text, #C3C0C0 secondary address text).

   Spacing follows one consistent scale throughout (6/12/18/24/32px) --
   an earlier version scattered ad-hoc values (10px here, 16px there,
   20px, 40px...) with no shared rhythm, which is what read as
   inconsistent/too tall. The original also leaned tight: its "Click to
   Pay" widget had large *negative* margins (-60px/-79px) pulling it
   right up against the socials row above it -- not reproduced at that
   exact magnitude (calibrated against a different image size), but
   the intent (compact, not loosely stacked) carries through here. */

.cwm-footer {
	/* Re-hosted as a theme asset (was hotlinked to a third-party demo
	   domain, see MIGRATION.md Phase 2) -- 0.5 black overlay, matching
	   the original's background_overlay_color with no explicit opacity
	   (Elementor's own default when unspecified). */
	background:
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('../images/footer-bg.png') center center / cover no-repeat;
	padding: 32px 0 18px;
}

.cwm-footer__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 70px;
}

.cwm-footer__row {
	display: grid;
	/* Brand + Links (About/Contact + the header's 4 top-level categories,
	   now one combined 3x2 column, see .cwm-footer__categories below) +
	   Addresses -- was 4 real columns (2026-08-22 to 2026-08-25 history:
	   originally 5, reduced to 4 when 2 service-link columns became 1),
	   down to 3 now that the Company and top-level-links columns merged
	   into a single list (2026-08-26: first "2 columns of 3", now "3x2
	   with Contact Us and About in the 3rd column"). The middle slot
	   gets more room than the other two since it now holds 3 sub-columns
	   of text side by side, wider than the 2-sub-column version this
	   fraction was originally tuned for. */
	grid-template-columns: 1fr 2.2fr 1fr;
	gap: 24px;
}

/* The combined Training/Services/Events & Spaces/Equipment & Rentals +
   About/Contact list (site-footer.php, in that order) -- plain CSS
   multi-column splits its 6 real <li> items into 3 columns of 2,
   filling top-to-bottom then wrapping to the next column, which is why
   the source order in the PHP (not a CSS property) is what actually
   puts About/Contact in the 3rd column. */
.cwm-footer__categories {
	columns: 3;
	column-gap: 24px;
}

.cwm-footer__col a {
	color: #ffffff;
	text-decoration: none;
}

.cwm-footer__col a:hover {
	/* Cyan, matching the header nav's own active-item color (#75CABA) --
	   not the site's brand green -- replaced 2026-08-21 per direct
	   request. */
	color: #75CABA;
}

.cwm-footer__logo img {
	display: block;
	max-height: 48px;
	width: auto;
	margin-bottom: 12px;
}

.cwm-footer__email {
	margin: 0 0 6px;
	font-size: 16px;
}

/* .cwm-footer__phone is an <h6> on purpose (matches the original
   widget's own markup) so it inherits the theme's real h6 font-family/
   weight via the global h6 selector -- only the size was explicitly
   customized in the original (25px, not h6's default), so that's the
   only property set here. */
.cwm-footer__phone {
	margin: 0 0 6px;
	font-size: 25px;
	line-height: 1.2;
}

.cwm-footer__socials {
	display: flex;
	gap: 12px;
	margin: 12px 0;
	padding: 0;
	list-style: none;
}

.cwm-footer__socials a {
	font-size: 16px;
}

.cwm-footer__pay {
	margin-top: 6px;
}

.cwm-footer__pay img {
	display: block;
	max-width: 160px;
	height: auto;
}

.cwm-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cwm-footer__col ul li {
	margin-bottom: 6px;
}

/* No color/font-size rule here on purpose: the nav menus are handled
   by the theme's own sc_layouts_menu_nav classes (see site-footer.php)
   -- an earlier version of this rule had equal CSS specificity to
   .sc_layouts_menu_nav>li>a and, loading later, silently won the tie,
   overriding the theme's real configured menu font size back down to
   a hardcoded 15px. Socials (the other <ul><a> in this column) fall
   back to .cwm-footer__col a's white color, which is correct for them. */

.cwm-footer__address-title {
	color: #ffffff;
	font-size: 16px;
	margin: 0 0 4px;
}

/* Extra gap before "Event Space", not "Studio" -- targets only a
   title that follows another address block, so the column's first
   title stays flush with the top, matching the other 3 columns. */
.cwm-footer__address + .cwm-footer__address-title {
	margin-top: 16px;
}

.cwm-footer__address {
	color: #C3C0C0;
	font-size: 14px;
	margin: 0 0 12px;
	line-height: 1.4;
}

.cwm-footer__bar {
	margin-top: 18px;
	padding: 10px 24px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 100px;
	text-align: center;
}

.cwm-footer__bar p {
	margin: 0;
	color: #D2D3D5;
	font-size: 14px;
}

@media (max-width: 1100px) {
	.cwm-footer__row {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.cwm-footer__row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.cwm-footer__inner {
		padding: 0 20px;
	}

	.cwm-footer__row {
		grid-template-columns: 1fr;
	}

	/* 2026-08-22 direct request: center all footer content once it's
	   stacked to one column -- was left-aligned (fine for a multi-column
	   row, reads as randomly ragged once every column is full-width). */
	.cwm-footer__col {
		text-align: center;
	}

	.cwm-footer__logo img,
	.cwm-footer__pay img {
		margin-left: auto;
		margin-right: auto;
	}

	.cwm-footer__socials {
		justify-content: center;
	}

	/* The two service nav menus keep their own left-aligned <a> (the
	   theme's own .footer_wrap .sc_layouts_menu > ul > li > a rule sets
	   display:inline-block, confirmed via computed style -- one more
	   element in its selector chain than the rule below, so it was
	   winning on plain specificity even though neither side originally
	   used !important). display needs !important here too, not just
	   width/text-align -- an inline-block box only centers *within*
	   itself; without also forcing it to a real full-width block, the
	   box still shrink-wraps to its own text and never actually moves
	   from the left. */
	.cwm-footer__col .sc_layouts_menu_nav > li > a {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
}