/* =====================================================================
 * Nabed — global Footer, redesigned.
 *
 * Replaces the previous verbatim Webflow `.footer.dark` port. That port
 * styled Webflow class names (.footer-link, .column1, .div-block-86,
 * .w-row…) that the redesigned renderer no longer emits, so keeping it
 * would have left ~490 lines matching nothing. The renderer now emits a
 * single BEM tree under `.seamlessmd-footer__*`.
 *
 * Enqueued with `seamlessmd-theme` as a dependency (functions.php) so it
 * loads AFTER the legacy bundle and wins at equal specificity without
 * editing the 107 KB global file.
 *
 * Every selector is scoped under `.seamlessmd-site-footer`. Nothing here
 * may match page content, the header, or any block.
 *
 * Reference: `.ai-local/design-references/New Website - Home Page option
 * 2.jpeg` is the only supplied image containing a footer, and it shows a
 * single-row compact footer, not this column layout. The column
 * structure, "very light blue/white" surface, vertical separators and
 * Stay Updated control come from the approved written target; the
 * reference governs the brand/legal row direction (logo start, socials
 * end, divider, copyright start / legal end) only. Where the two differ,
 * the written target wins — see the report.
 * ===================================================================== */

.seamlessmd-site-footer {
	/* Footer-local tokens. The global palette has no blue and adding one
	 * needs approval, so the brand blue lives on this root only — same
	 * approach the header stylesheet takes. */
	--seamlessmd-footer-blue: #3b53f0;
	--seamlessmd-footer-blue-hover: #2f44cc;
	--seamlessmd-footer-ink: #1f2544;
	--seamlessmd-footer-ink-muted: #5b6180;
	/* The one supplied footer reference samples at rgb(254,254,254) — all but
	 * white. The previous #f4f7ff read as a distinctly blue panel; this keeps
	 * the surface separable from the page above it without the colour cast. */
	--seamlessmd-footer-surface: #fbfcfe;
	--seamlessmd-footer-rule: #e4e8f2;
	/* Follows the shared page-margin token so the footer's edges align
	 * with content sections and the header at every width. */
	--seamlessmd-footer-max: var(--seamlessmd-container-max, 1440px);

	display: block;
	background-color: var(--seamlessmd-footer-surface);
	color: var(--seamlessmd-footer-ink);
}

.seamlessmd-site-footer .seamlessmd-footer__inner {
	max-inline-size: var(--seamlessmd-footer-max);
	margin-inline: auto;
	padding-inline: var(--seamlessmd-gutter, 24px);
	padding-block: 64px 24px;
}

/* Visually-hidden utility. The theme ships no global equivalent, so the
 * footer defines its own rather than introducing a global class. */
.seamlessmd-site-footer .seamlessmd-footer__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * Top row: brand | four link columns | Stay Updated.
 * The brand column is the wide one; every other track sizes to content
 * with a sensible floor. `min-inline-size: 0` on the children keeps a
 * long link from widening its own track past the container.
 * ------------------------------------------------------------------ */
.seamlessmd-site-footer .seamlessmd-footer__top {
	display: grid;
	grid-template-columns: minmax(240px, 1.35fr) minmax(0, 2.6fr) minmax(230px, 1.05fr);
	gap: 40px;
	align-items: stretch;
}

.seamlessmd-site-footer .seamlessmd-footer__top > * {
	min-inline-size: 0;
}

/* ---------------------------------------------------------------------
 * Brand column — logo, tagline, socials.
 * ------------------------------------------------------------------ */
.seamlessmd-site-footer .seamlessmd-footer__logo {
	display: inline-block;
	text-decoration: none;
}

.seamlessmd-site-footer .seamlessmd-footer__logo img {
	display: block;
	block-size: auto;
	max-block-size: 44px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

.seamlessmd-site-footer .seamlessmd-footer__tagline {
	margin-block: 18px 0;
	max-inline-size: 44ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--seamlessmd-footer-ink-muted);
}

.seamlessmd-site-footer .seamlessmd-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block: 24px 0;
	padding: 0;
	list-style: none;
}

/* Standalone glyphs, per the reference — no card, no border, no fill. The
 * inline padding is hit-area only and stays invisible. */
.seamlessmd-site-footer .seamlessmd-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: none;
	border: 0;
	color: var(--seamlessmd-footer-blue);
	transition: color 160ms ease;
}

.seamlessmd-site-footer .seamlessmd-footer__social:hover,
.seamlessmd-site-footer .seamlessmd-footer__social:focus-visible {
	color: var(--seamlessmd-footer-blue-hover);
}

.seamlessmd-site-footer .seamlessmd-footer__social:focus-visible {
	outline: 2px solid var(--seamlessmd-footer-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.seamlessmd-site-footer .seamlessmd-footer__social-glyph {
	inline-size: 20px;
	block-size: 20px;
}

/* ---------------------------------------------------------------------
 * Link columns. `border-inline-start` gives the vertical separators and
 * mirrors automatically under RTL; the first column drops its rule so
 * the group does not open with a stray line.
 * ------------------------------------------------------------------ */
/* Four explicit tracks, not `auto-fit`: the approved structure is exactly
 * four groups on one row, and auto-fit measured the available width as
 * room for three and wrapped `About Us` under `Platform`. `minmax(0, 1fr)`
 * (not `1fr`) so a long heading cannot widen its own track. */
.seamlessmd-site-footer .seamlessmd-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.seamlessmd-site-footer .seamlessmd-footer__col {
	min-inline-size: 0;
	padding-inline: 20px;
	border-inline-start: 1px solid var(--seamlessmd-footer-rule);
}

.seamlessmd-site-footer .seamlessmd-footer__col:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.seamlessmd-site-footer .seamlessmd-footer__col-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--seamlessmd-footer-ink);
}

.seamlessmd-site-footer .seamlessmd-footer__col-title a {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.seamlessmd-site-footer .seamlessmd-footer__col-title a:hover,
.seamlessmd-site-footer .seamlessmd-footer__col-title a:focus-visible {
	color: var(--seamlessmd-footer-blue);
}

.seamlessmd-site-footer .seamlessmd-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-block: 16px 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-site-footer .seamlessmd-footer__link {
	font-size: 14px;
	line-height: 1.5;
	color: var(--seamlessmd-footer-ink-muted);
	text-decoration: none;
	transition: color 160ms ease;
}

.seamlessmd-site-footer .seamlessmd-footer__link:hover,
.seamlessmd-site-footer .seamlessmd-footer__link:focus-visible {
	color: var(--seamlessmd-footer-blue);
}

.seamlessmd-site-footer .seamlessmd-footer__col-title a:focus-visible,
.seamlessmd-site-footer .seamlessmd-footer__link:focus-visible {
	outline: 2px solid var(--seamlessmd-footer-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Editor-typed `.mod__hide` on a menu item — carried over from the
 * legacy footer, where it was the documented way to park a link. */
.seamlessmd-site-footer .mod__hide {
	display: none;
}

/* ---------------------------------------------------------------------
 * Stay Updated. Presentation only — the controls are `disabled`, so the
 * styling below has to read as "intentionally inert", not "broken".
 * ------------------------------------------------------------------ */
.seamlessmd-site-footer .seamlessmd-footer__subscribe {
	padding-inline-start: 24px;
	border-inline-start: 1px solid var(--seamlessmd-footer-rule);
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-text {
	margin-block: 14px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--seamlessmd-footer-ink-muted);
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-control {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-block-start: 18px;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 44px;
	padding-inline: 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--seamlessmd-footer-ink);
	background-color: #fff;
	border: 1px solid var(--seamlessmd-footer-rule);
	border-radius: 12px;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-input::placeholder {
	color: #9aa1bd;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-input:disabled {
	cursor: not-allowed;
	background-color: #fbfcff;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background-color: var(--seamlessmd-footer-blue);
	color: #fff;
	transition: background-color 160ms ease;
}

/* Full brand blue even while disabled — the design shows a solid blue send
 * control and there is no explanatory copy beside it to soften. The `disabled`
 * attribute, not a dimmed swatch, is what makes the state real: the button
 * cannot be focused, clicked or submitted. */
.seamlessmd-site-footer .seamlessmd-footer__subscribe-button:disabled {
	cursor: not-allowed;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-button:not(:disabled):hover,
.seamlessmd-site-footer .seamlessmd-footer__subscribe-button:not(:disabled):focus-visible {
	background-color: var(--seamlessmd-footer-blue-hover);
}

.seamlessmd-site-footer .seamlessmd-footer__send-glyph {
	inline-size: 18px;
	block-size: 18px;
}

/* The send arrow is a fixed SVG path, so it does NOT mirror on its own —
 * same explicit correction the header CTA arrow needs. The social glyphs
 * and the "|" legal separator are symmetric and must be left alone. */
[dir="rtl"] .seamlessmd-site-footer .seamlessmd-footer__send-glyph {
	transform: scaleX(-1);
}


/* ---------------------------------------------------------------------
 * Stay Updated — live Contact Form 7 form.
 *
 * CF7 emits the shared `seamlessmd-form-*` markup (label + email + submit)
 * that Contact Us and Book a Demo also use. Those classes carry NO global
 * styling by design: every consumer scopes them to its own surface. This
 * block is the footer's scope, restyling that shared markup into the
 * compact input + square send button the footer column already had.
 *
 * The form DEFINITION is shared with the News & FAQ cta-band, so nothing
 * here may change it — appearance is carried entirely by these selectors.
 * ------------------------------------------------------------------ */

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form {
	margin-block-start: 18px;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-form {
	margin: 0;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .seamlessmd-form-row {
	display: flex;
	/* The email + send pair is one line and must never wrap. */
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}

/* Placeholder-only, matching the control this replaced: the label text and
 * required asterisk collapse visually but stay in the DOM, so the wrapping
 * <label> still supplies the input's accessible name. */
.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .seamlessmd-form-label {
	flex: 1 1 0%;
	min-inline-size: 0;
	display: block;
	margin: 0;
	gap: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .seamlessmd-form-req {
	display: none;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-form-control-wrap {
	display: block;
	inline-size: 100%;
}

/* Mirrors .seamlessmd-footer__subscribe-input exactly. */
.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-form-control.wpcf7-email {
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 44px;
	margin: 0;
	padding-inline: 14px;
	font-size: 14px;
	font-family: inherit;
	line-height: normal;
	color: var(--seamlessmd-footer-ink);
	background-color: #fff;
	border: 1px solid var(--seamlessmd-footer-rule);
	border-radius: 12px;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-form-control.wpcf7-email::placeholder {
	color: #9aa1bd;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .seamlessmd-form-submit {
	flex: 0 0 auto;
	display: flex;
	margin: 0;
}

/* Mirrors .seamlessmd-footer__subscribe-button. `[submit]` is an <input>, so
 * the arrow cannot be a child SVG the way the placeholder's <button> had it —
 * it is painted as a background image instead, and `font-size: 0` hides the
 * "Subscribe" value while leaving it as the accessible name. */
.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-submit {
	flex: 0 0 auto;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background-color: var(--seamlessmd-footer-blue);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h14"/><path d="m12 5 7 7-7 7"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-submit:hover,
.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-submit:focus-visible {
	background-color: var(--seamlessmd-footer-blue-hover);
}

/* Same correction the placeholder glyph needs — the arrow is a fixed path.
 * Flipping the whole control is safe: it is a centred square. */
[dir="rtl"] .seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-submit {
	transform: scaleX(-1);
}

/* CF7 feedback. Unstyled it inherits a 2px block border and wide margins built
 * for a full-width form panel, which breaks this narrow column. */
.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-width: 1px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.45;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-not-valid-tip {
	margin-block-start: 6px;
	font-size: 12px;
	line-height: 1.4;
}

.seamlessmd-site-footer .seamlessmd-footer__subscribe-form .wpcf7-spinner {
	margin: 0 0 0 8px;
	align-self: center;
}


/* ---------------------------------------------------------------------
 * Bottom row — divider above, copyright at the inline start, legal at
 * the inline end. `space-between` mirrors under RTL on its own.
 * ------------------------------------------------------------------ */
.seamlessmd-site-footer .seamlessmd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-block-start: 48px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--seamlessmd-footer-rule);
}

.seamlessmd-site-footer .seamlessmd-footer__copyright {
	margin: 0;
	font-size: 14px;
	color: var(--seamlessmd-footer-ink-muted);
}

.seamlessmd-site-footer .seamlessmd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

/* The `|` separator from the reference, drawn between items so it never
 * dangles at either end. `::before` on all but the first mirrors under
 * RTL because it follows source order. */
.seamlessmd-site-footer .seamlessmd-footer__legal li {
	display: flex;
	align-items: center;
	gap: 16px;
}

.seamlessmd-site-footer .seamlessmd-footer__legal li + li::before {
	content: "";
	inline-size: 1px;
	block-size: 14px;
	background-color: var(--seamlessmd-footer-rule);
}

.seamlessmd-site-footer .seamlessmd-footer__legal a {
	color: var(--seamlessmd-footer-blue);
	text-decoration: none;
}

.seamlessmd-site-footer .seamlessmd-footer__legal a:hover,
.seamlessmd-site-footer .seamlessmd-footer__legal a:focus-visible {
	text-decoration: underline;
}

/* The legal row itself is not rendered right now (see site-footer.php §5) —
 * the rules above are kept because the slot returns unchanged the moment the
 * team confirms the two destinations. The `--legal-inert` plain-text state
 * that used to live here is gone: showing a label with no destination was
 * rejected, so there is nothing left to style. */

/* ---------------------------------------------------------------------
 * Responsive. No mobile design was supplied, so this is the minimum safe
 * adaptation: the three top-level tracks collapse, then the link columns
 * do, then the separators become horizontal rules so a stacked column
 * never carries a vertical line beside nothing.
 * ------------------------------------------------------------------ */
@media (max-width: 1280px) {
	/* Three full-width bands. Keeping nav and subscribe side by side here
	 * squeezed the four link tracks to ~120px each, which clipped the
	 * longer headings — the nav gets the whole row instead.
	 *
	 * The bound is 1280px, not 1100px: the brand and subscribe tracks have
	 * 240px and 230px floors and the row carries two 40px gaps, so 550px is
	 * spoken for before the nav gets anything. At 1100px that left the four
	 * tracks at ~122px each — still the squeeze this rule exists to prevent,
	 * and it covers tablet landscape (1112 / 1194). They only clear ~170px
	 * once the row passes ~1280px. */
	.seamlessmd-site-footer .seamlessmd-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.seamlessmd-site-footer .seamlessmd-footer__subscribe {
		padding-inline-start: 0;
		padding-block-start: 32px;
		border-inline-start: 0;
		border-block-start: 1px solid var(--seamlessmd-footer-rule);
	}

	.seamlessmd-site-footer .seamlessmd-footer__subscribe-control {
		max-inline-size: 420px;
	}
}

@media (max-width: 860px) {
	.seamlessmd-site-footer .seamlessmd-footer__inner {
		padding-block: 48px 20px;
	}

	.seamlessmd-site-footer .seamlessmd-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.seamlessmd-site-footer .seamlessmd-footer__nav {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 28px 24px;
	}

	/* Vertical rules stop making sense once columns wrap onto several
	 * rows — the rule would sit beside an empty gap. */
	.seamlessmd-site-footer .seamlessmd-footer__col {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.seamlessmd-site-footer .seamlessmd-footer__subscribe {
		padding-inline-start: 0;
		padding-block-start: 28px;
		border-inline-start: 0;
		border-block-start: 1px solid var(--seamlessmd-footer-rule);
	}

	.seamlessmd-site-footer .seamlessmd-footer__subscribe-control {
		max-inline-size: 420px;
	}
}

@media (max-width: 560px) {
	.seamlessmd-site-footer .seamlessmd-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.seamlessmd-site-footer .seamlessmd-footer__bottom {
		justify-content: flex-start;
	}
}