/**
 * Site footer — Figma node 163:1452.
 *
 * The footer is one column on the mobile artboard and there is no desktop
 * artboard, so it stays one column on a phone and opens into three tracks
 * from 850px up, where a 390px measure would leave most of the row empty.
 *
 * WHERE THE LAYOUT LIVES — not here.
 *
 * Structure is [section] > [row] > [col] > [kw_container], and every stacking
 * decision (direction, gap, padding, alignment, wrapping, and their tablet and
 * mobile overrides) is a container option set in UX Builder. This file is
 * appearance only: colour, type, and the three third-party widgets that ship
 * their own markup — Flatsome's `follow`, its `divider`, and Contact Form 7.
 *
 * Two earlier versions of this got that split wrong and are worth not
 * repeating. The first faked the desktop three-track layout with
 * `grid-template-areas` on `.col-inner`, so the arrangement was invisible to
 * anyone editing the footer and Flatsome's own span controls did nothing. The
 * second used real columns but set the gutter with `column-gap` on the row —
 * Flatsome column widths are percentages already totalling 100%, so the gap
 * had nowhere to go and the last column in each row wrapped onto its own line.
 * The gutter is now left padding on the container inside the second and third
 * columns, which stays inside the percentage because columns are border-box.
 *
 * Values are the Figma's, rounded onto the 4px rhythm in tokens.css:
 * 32.5 → 32, 22.5 → 24, 8.5 → 8, 16.5 → 16, 10.5 → 12.
 */

.smarti-footer {
	background: var(--kw-footer-bg, #0f172a);
	color: var(--kw-footer-ink, #fff);
}

/* Flatsome caps .row at the Customizer site width; the footer sets its own. */
.smarti-footer .section-content > .row {
	max-width: 1250px;
	margin-inline: auto;
	padding-inline: var(--kw-space-6, 24px);
}

.smarti-footer .col,
.smarti-footer .col-inner {
	padding: 0;
}

/* ── brand ─────────────────────────────────────────────────────────── */

/*
 * max-width, not width. [ux_image] always prints its own per-instance rule —
 * `#image_123 { width: 100% }` — from an ID selector, which outranks any class
 * here. max-width is not part of that rule, so it caps the 100% instead of
 * fighting it, and no !important is needed.
 */
.smarti-footer__logo {
	/*
	 * The logo wrapper is a div.img from the UX Builder image element on some
	 * builds of this footer and a bare <a> on others. An inline <a> ignores
	 * max-width, so the cap below silently did nothing and the image expanded to
	 * the full column. Setting display here makes the rule hold for either markup.
	 */
	display: block;
	max-width: 170px;
	margin: 0;
}

.smarti-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.smarti-footer__tagline p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--kw-fs-meta, 13px);
	font-weight: var(--kw-fw-medium, 500);
	line-height: 20px;
	color: var(--kw-footer-muted, #94a3b8);
}

/* ── contact lines ─────────────────────────────────────────────────── */
/*
 * Two visually identical rows built from two different elements, because they
 * are two different things. The e-mail is a link, so it is a [ux_menu_link]
 * with a mailto: — Flatsome renders the anchor and the icon slot for us. The
 * postal address is not a link, and [ux_menu_link] always emits an <a>,
 * falling back to the site URL when none is set, which would have pointed the
 * address at the homepage. So that one is [kw_container] + [kw_icon] +
 * [ux_text].
 *
 * They share one class and this rule reaches the text node of either shape.
 */
.smarti-footer__contactline,
.smarti-footer__contactline .ux-menu-link__link {
	display: flex;
	align-items: center;
	gap: var(--kw-space-2, 8px);
	padding: 0;
	min-height: 0;
	font-size: var(--kw-fs-meta, 13px);
	font-weight: var(--kw-fw-bold, 700);
	line-height: 1.4;
	color: var(--kw-footer-ink, #fff);
}

.smarti-footer__contactline p {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Both element shapes render the icon through kw_icon_svg(), so one selector
   covers them and the registry guarantees a single appearance. */
.smarti-footer__contactline .kw-icon {
	flex: 0 0 auto;
	color: var(--kw-accent, #34aeeb);
}

.smarti-footer__contactline .ux-menu-link__link:hover,
.smarti-footer__contactline .ux-menu-link__link:focus-visible {
	color: var(--kw-footer-ink, #fff);
	text-decoration: underline;
}

/* ── headings ──────────────────────────────────────────────────────── */

.smarti-footer__heading p {
	margin: 0;
	font-size: var(--kw-fs-lead, 16px);
	font-weight: var(--kw-fw-bold, 700);
	line-height: 1.3;
	color: var(--kw-footer-ink, #fff);
}

/* The link-list heading sits a step down — it labels a list, not a section. */
.smarti-footer__heading--sm p {
	font-size: var(--kw-fs-body, 14px);
}

/*
 * Gutter between "stopped centring" and "stacked".
 *
 * The row is max-width 1250 with a 24px gutter, so above ~1300px the viewport
 * supplies the breathing room and 24 is invisible. Below that the row goes
 * full-bleed and 24px is all that separates three columns of text from the
 * screen edge — fine on a phone, mean on a laptop, which is the width the
 * columns have not stacked at yet.
 *
 * !important because the gutter arrives as a UX Builder per-element <style>,
 * which no plain selector can outrank.
 */
@media (min-width: 550px) and (max-width: 1299px) {
	.smarti-footer .section-content > .row {
		padding-right: var(--kw-space-7, 32px) !important;
		padding-left: var(--kw-space-7, 32px) !important;
	}
}

/* ── follow ────────────────────────────────────────────────────────── */

.smarti-footer .smarti-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/*
 * Flatsome's `follow` renders each network in its own brand colour. The design
 * puts them all on one translucent tile so the row reads as a set rather than
 * three logos competing with the newsletter button below it.
 */
.smarti-footer .smarti-footer__social a.button,
.smarti-footer .smarti-footer__social a {
	/*
	 * Flatsome centres its icon buttons with a line-height that matches the box.
	 * The 40px box here overrides the size but not the 28.9px line-height, which
	 * left every glyph 6.5px high inside its circle. Centring with flex makes the
	 * position independent of line-height and font-size.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--kw-radius-pill, 999px) !important;
	background-color: var(--kw-footer-tile, rgba(105, 205, 255, .12)) !important;
	color: var(--kw-footer-ink, #fff) !important;
	box-shadow: none;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

/*
 * Hover inverts the tile: solid white behind a blue glyph. --kw-accent (#34aeeb)
 * only reaches 2.5:1 on white, under the 3:1 floor for UI glyphs, so the darker
 * accent carries it at 3.8:1.
 *
 * Two Flatsome rules have to be out-scored, not just overridden:
 *   .social-icons .button.icon:hover { background-color: currentcolor !important }
 *   .button.<network>:hover          { color: <brand> !important }
 * The first paints the tile with whatever `color` resolves to, so setting the
 * glyph blue without winning this one turns the *background* blue instead. Both
 * score 0,4,0, hence `a.button.icon` here rather than a bare `a`. The glyph takes
 * its colour explicitly for the same reason — `inherit` loses to the network rule.
 */
.smarti-footer .smarti-footer__social a.button.icon:hover,
.smarti-footer .smarti-footer__social a.button.icon:focus-visible {
	background-color: #fff !important;
	color: var(--kw-accent-dark, #2a8bbc) !important;
}

.smarti-footer .smarti-footer__social a.button.icon:hover i,
.smarti-footer .smarti-footer__social a.button.icon:focus-visible i {
	color: var(--kw-accent-dark, #2a8bbc) !important;
}

.smarti-footer .smarti-footer__social a i,
.smarti-footer .smarti-footer__social a svg {
	/*
	 * <i> is inline by default, so the height below was ignored and the glyph box
	 * was line-height tall (21px), landing 1.5px above centre. display + a 1
	 * line-height make the box exactly the 18px the flex parent then centres.
	 */
	display: block;
	line-height: 1;
	font-size: 18px;
	width: 18px;
	height: 18px;
	/*
	 * Flatsome nudges its icon glyphs up with `top: -1.5px` to compensate for the
	 * line-height centring it normally relies on. The flex parent centres the box
	 * geometrically now, so that nudge would double-count and sit the icon high.
	 */
	top: 0;
	color: inherit;
	fill: currentColor;
}

/* ── newsletter (Contact Form 7 markup) ────────────────────────────── */

.smarti-footer__note p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--kw-fs-meta, 13px);
	font-weight: var(--kw-fw-medium, 500);
	line-height: 20px;
	color: var(--kw-footer-muted, #94a3b8);
}

.smarti-footer .wpcf7 form > .newsletter-footer,
.smarti-footer .wpcf7 .newsletter-footer {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.smarti-footer .wpcf7 input[type="email"] {
	width: 100%;
	height: 44px;
	margin: 0;
	/* The design puts a mail mark inside the field, left of the placeholder. */
	padding: 0 var(--kw-space-4, 16px) 0 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 16px center;
	background-color: #fff;
	border: 0;
	border-radius: var(--kw-radius-sm, 8px);
	box-shadow: none;
	font-size: var(--kw-fs-body, 14px);
	font-weight: var(--kw-fw-medium, 500);
	color: var(--kw-ink, #111827);
}

.smarti-footer .wpcf7 input[type="email"]::placeholder {
	color: var(--kw-ink-muted, #6b7280);
	opacity: 1;
}

/*
 * The design gives the newsletter a full-width button, not the underlined text
 * link the build had — it is the only action in this part of the page.
 */
.smarti-footer .wpcf7 input.wpcf7-submit,
.smarti-footer .wpcf7 input[type="submit"],
.smarti-footer .wpcf7 .button {
	display: block;
	width: 100%;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--kw-space-4, 16px);
	border: 0;
	border-radius: var(--kw-radius-sm, 8px) !important;
	background-color: var(--kw-accent, #34aeeb);
	color: #fff;
	font-size: var(--kw-fs-body, 14px);
	font-weight: var(--kw-fw-bold, 700);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}

.smarti-footer .wpcf7 input.wpcf7-submit:hover,
.smarti-footer .wpcf7 input[type="submit"]:hover,
.smarti-footer .wpcf7 .button:hover {
	background-color: var(--kw-accent-dark, #2a8bbc);
}

/* CF7 wraps each control in its own <p>; the flex gap above does the spacing. */
.smarti-footer .wpcf7 .newsletter-footer p {
	margin: 0;
}

.smarti-footer .wpcf7 form {
	margin-bottom: 0;
}

/*
 * The spinner is hidden until a submit is in flight, but it still reserved a
 * line under the button — 32px of dead space at the bottom of the footer.
 */
.smarti-footer .wpcf7 .newsletter-footer p:last-child {
	position: relative;
}

.smarti-footer .wpcf7-spinner {
	position: absolute;
	margin: 0 auto;
}

.smarti-footer .wpcf7-response-output {
	margin: 0;
	padding: var(--kw-space-2, 8px) var(--kw-space-3, 12px);
	border-radius: var(--kw-radius-sm, 8px);
	border: 0;
	background: rgba(255, 255, 255, .08);
	font-size: var(--kw-fs-meta, 13px);
	color: var(--kw-footer-ink, #fff);
}

/* ── divider ───────────────────────────────────────────────────────── */

/* Flatsome's `divider` shortcode drops the `class` attribute, so the rule
   hangs off the markup it actually emits. */
.smarti-footer .is-divider {
	width: 100%;
	max-width: 100%;
	height: 1px;
	margin: 0;
	background-color: var(--kw-footer-line, rgba(255, 255, 255, .1));
}

/* ── info links ────────────────────────────────────────────────────── */

/* Row vs column and the gaps are container options; only colour is here. */
.smarti-footer__linklist .ux-menu-link__link {
	padding: 0;
	min-height: 0;
	font-size: var(--kw-fs-meta, 13px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--kw-footer-link, #cbd5e1);
	text-decoration: none;
}

.smarti-footer__linklist .ux-menu-link__link:hover,
.smarti-footer__linklist .ux-menu-link__link:focus-visible {
	color: var(--kw-footer-ink, #fff);
	text-decoration: underline;
}

/* The page you are already on, now that these items point at pages. */
.smarti-footer__linklist .current-menu-item .ux-menu-link__link {
	color: var(--kw-footer-ink, #fff);
}

/* ── copyright ─────────────────────────────────────────────────────── */

.smarti-footer__copyright p {
	margin: 0;
	font-size: var(--kw-fs-caption, 12px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--kw-footer-muted, #94a3b8);
}

/* ── focus ─────────────────────────────────────────────────────────── */

.smarti-footer a:focus-visible,
.smarti-footer input:focus-visible,
.smarti-footer button:focus-visible {
	outline: 3px solid var(--kw-accent, #34aeeb);
	outline-offset: 2px;
}