/*
 * Real site footer - replaces Astra's bare default footer text.
 * Structure/content ported from production's Elementor footer
 * (`<footer data-elementor-id="1241">`), re-verified via a fresh curl of
 * https://vibesequence.com/ on 2026-08-22. See theme/special/footer.php.
 */

/* Astra's Header/Footer Builder is active on this site (same system the
   primary/mobile nav menus use), which fully replaces the classic
   astra_footer_content hooks - so its own default "Copyright (c) ... |
   Powered by Astra" output can't be swapped out via those hooks (see the
   long comment in theme/special/footer.php for how this was diagnosed).
   Hiding its output here and rendering our own <footer id="vs-site-footer">
   right after it (astra_footer_after) instead. */
#colophon {
	display: none;
}

#vs-site-footer {
	display: block;
	background: #14121a;
	color: #e5e1ee;
	padding: 48px 20px 28px;
}

.vs-footer {
	max-width: 1100px;
	margin: 0 auto;
}

.vs-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vs-footer__brand {
	flex: 0 0 auto;
}

.vs-footer__logo-link {
	display: inline-block;
}

.vs-footer__logo {
	display: block;
	height: auto;
	max-width: 180px;
}

.vs-footer__newsletter {
	flex: 1 1 280px;
	max-width: 380px;
}

/* Hide the sitewide footer signup form on /community/ (the Vibe Notes
   landing page) — it already has its own dedicated #join/#join-form
   signup section, so the footer duplicate is redundant there. Production
   does this too (a body.page-id-2165 rule, 2165 being production's post ID
   for /community/ — see a fresh curl of https://vibesequence.com/, comment
   there literally says "hide newsletter on community page" in Hebrew).
   Using WordPress's automatic slug-based body class (`page-community`)
   instead of a numeric page-id class here on purpose: local and production
   have different post IDs for this page (81 vs 2165), so a numeric
   selector copied verbatim wouldn't actually match locally, and would
   silently break again if either environment's ID ever changes. The
   slug-based class is stable across environments and produces the exact
   same visible result. 2026-08-22. */
body.page-community footer .vs-footer__newsletter {
	display: none !important;
}

/* Real MailerLite embed styling — ported verbatim (selectors, values, and
   !important flags all kept exactly as production has them) from a fresh
   curl of https://vibesequence.com/'s own footer <style> block, QA round 2
   2026-08-22. These target MailerLite's own injected form DOM
   (.ml-form-embedWrapper / .ml-form-embedBody / .ml-form-embedContent /
   .ml-form-embedSubmit) so the real form matches the site once
   universal.js renders it — see theme/special/footer.php + analytics.php.
   Selectors use a bare `footer` element selector (not #vs-site-footer)
   because that's what production uses; matches our real footer the same
   way. --vs-grad/--vs-btn-shadow(-hover) aren't defined as custom
   properties anywhere in this theme (same as the rest of components.css),
   so kept as fallback-only var() calls consistent with that pattern. */
footer .vs-newsletter {
	width: 100% !important;
	display: grid !important;
	place-items: center !important;
	text-align: center !important;
	padding: 12px 0 !important;
}

footer .vs-newsletter .ml-embedded,
footer .vs-newsletter .ml-form-embedContainer,
footer .vs-newsletter .ml-form-embedWrapper,
footer .vs-newsletter .ml-form-embedBody,
footer .vs-newsletter .ml-form-embedContent {
	max-width: 520px !important;
	width: 100% !important;
	margin: 0 auto !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Gap closed against WPCode 2679 (VS — Community UI polish), read in full
   2026-08-23: production also force-centers the embed's own heading text
   (h1-h4/.form-title) directly, not just the wrapper block — matters for
   any multi-line heading MailerLite's script injects, since block-centering
   the wrapper alone (above) doesn't guarantee the text inside a left-aligned
   heading is also centered. Added to fully close the gap so 2679 can be
   disabled at cutover without a visual regression. */
footer .vs-newsletter .ml-form-embedContent :is(h1, h2, h3, h4, .form-title, .ml-title) {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Contrast fix (footer follow-up): MailerLite's own injected inline
   <style> (selector #mlb2-31103385...h4 / ...p) hardcodes color:#000
   for its embed heading and body copy, meant for a light background —
   wrong against this footer's near-black #14121a. Nothing here
   previously overrode color (only text-align), so the black won by
   default. !important required: MailerLite's rule carries an ID
   selector, which no class-based rule can outrank without it. */
footer .vs-newsletter .ml-form-embedContent :is(h1, h2, h3, h4, .form-title, .ml-title),
footer .vs-newsletter .ml-form-embedContent p {
	color: #e5e1ee !important;
}

footer .vs-newsletter input[type="email"] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 16px !important;
	background: #fff !important;
	font: 500 16px/1.2 'Poppins', Arial, sans-serif !important;
	outline: none !important;
}

footer .vs-newsletter .ml-form-embedSubmit > button.loading {
	display: none !important;
}

footer .vs-newsletter .ml-form-embedSubmit > button.primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: 280px !important;
	width: 100% !important;
	margin: 12px auto 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	font: 700 15px/1 Arial, 'Poppins', sans-serif !important;
	color: #fff !important;
	background: var(--vs-gradient-primary) !important;
	box-shadow: var(--vs-btn-shadow, 0 10px 18px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.10)) !important;
	cursor: pointer !important;
	transition: transform .12s ease, box-shadow .12s ease !important;
	height: 48px;
}

footer .vs-newsletter .ml-form-embedSubmit > button.primary:hover {
	transform: translateY(-1px) !important;
	box-shadow: var(--vs-btn-shadow-hover, 0 14px 26px rgba(0,0,0,.20), 0 6px 12px rgba(0,0,0,.12)) !important;
}

@media (max-width: 560px) {
	footer .vs-newsletter .ml-form-embedWrapper {
		max-width: 94% !important;
	}
}

.vs-footer .vs-nl-disclaimer {
	margin: 12px 0 0;
	font-size: 12px;
	color: rgba(229, 225, 238, 0.65);
}

.vs-footer .vs-nl-disclaimer a {
	color: var(--vs-color-lavender, #c39bff);
}

.vs-footer__mini-chat {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.vs-footer-mini-chat-btn {
	font-size: 14px;
	padding: 12px 22px;
	white-space: nowrap;
}

.vs-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vs-footer__legal-col {
	flex: 1 1 140px;
}

.vs-footer__legal-heading {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(229, 225, 238, 0.55);
}

.vs-footer__legal-col p {
	margin: 0;
}

.vs-footer__legal-col a {
	color: #e5e1ee;
	text-decoration: none;
	font-size: 15px;
}

.vs-footer__legal-col a:hover,
.vs-footer__legal-col a:focus-visible {
	color: var(--vs-color-lavender, #c39bff);
	text-decoration: underline;
}

.vs-footer__copyright {
	padding-top: 20px;
	text-align: center;
}

.vs-footer__copyright p {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(229, 225, 238, 0.6);
}

.vs-footer__copyright a {
	color: rgba(229, 225, 238, 0.8);
}

@media (max-width: 640px) {
	.vs-footer__top {
		flex-direction: column;
	}

	.vs-footer__mini-chat {
		width: 100%;
	}

	.vs-footer-mini-chat-btn {
		display: block;
		text-align: center;
	}
}