/**
 * JS Footer Bottom.
 *
 * Ported from cci-core's Footer Bottom and re-skinned for Joe Shew
 * (Figma footer 21927:4814). Same parts — social icons, disclaimer, divider,
 * copyright — but this design stacks them centred with the socials on top,
 * where CCI puts the disclaimer first and lays the copyright and socials out
 * space-between. Both are reachable: Socials Position and Alignment are
 * controls, not a fork.
 *
 * The design's footer is dark (#111827 band, white text), like CCI's — an
 * earlier note here said the opposite, which was wrong and is corrected. The
 * widget itself is colour-agnostic: it ships light defaults and every colour is
 * a control, so the dark treatment is set on the instance in the footer
 * template rather than baked in here. Each block carries its own Top Spacing
 * control because the design uses three different gaps (48 / 40 / 28) rather
 * than one repeated one.
 *
 * No outer padding is baked in: the Elementor container owns the gutters,
 * consistent with the Nav and Carousel.
 */

/* Fill the container even inside a flex parent that would shrink to content. */
.elementor-widget-js_footer_bottom {
	width: 100%;
}

.js-footer-bottom {
	--js-footer-text: var(--js-color-primary, #111827);
	--js-footer-divider: var(--js-color-border, #b0bed2);
	--js-footer-icon: var(--js-color-primary, #111827);
	--js-footer-icon-hover: var(--js-color-highlight, #b28b2c);
	--js-footer-icon-size: 32px;
	--js-footer-icon-gap: 20px;

	display: flex;
	flex-direction: column;
	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-footer-bottom *,
.js-footer-bottom *::before,
.js-footer-bottom *::after {
	box-sizing: border-box;
}

/* -------- Socials -------- */
.js-footer-bottom__socials {
	display: flex;
	align-items: center;
	gap: var(--js-footer-icon-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.js-footer-bottom__social {
	display: block;
}

.js-footer-bottom__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--js-footer-icon-size);
	height: var(--js-footer-icon-size);
	color: var(--js-footer-icon);
	text-decoration: none;
	transition: color 0.2s ease;
}

.js-footer-bottom__social-link svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.js-footer-bottom__social-link i {
	font-size: var(--js-footer-icon-size);
	line-height: 1;
}

@media (hover: hover) {
	a.js-footer-bottom__social-link:hover {
		color: var(--js-footer-icon-hover);
	}
}

a.js-footer-bottom__social-link:focus-visible {
	outline: 2px solid var(--js-color-highlight, #b28b2c);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------- Disclaimer -------- */

/* Body Sm Regular: Inter 14/20, letter-spacing 0. */
.js-footer-bottom__disclaimer {
	margin: 0;
	color: var(--js-footer-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
}

.js-footer-bottom__disclaimer p {
	margin: 0;
}

.js-footer-bottom__disclaimer p + p {
	margin-top: 0.5em;
}

/* -------- Divider -------- */
.js-footer-bottom__divider {
	width: 100%;
	height: 1px;
	background-color: var(--js-footer-divider);
}

/* -------- Bar: copyright (+ socials when they sit here) -------- */
.js-footer-bottom__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.js-footer-bottom__copyright {
	margin: 0;
	color: var(--js-footer-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
}

.js-footer-bottom__copyright p {
	margin: 0;
}

/* -------- Alignment -------- */

/* Centred (the Joe Shew design): every block centres on the axis. */
.js-footer-bottom--center {
	align-items: center;
	text-align: center;
}

.js-footer-bottom--center .js-footer-bottom__bar {
	flex-direction: column;
	justify-content: center;
}

.js-footer-bottom--left {
	align-items: flex-start;
	text-align: left;
}

/* Space-between (CCI's layout): copyright left, socials right in the bar. */
.js-footer-bottom--between {
	align-items: stretch;
	text-align: left;
}

.js-footer-bottom--between .js-footer-bottom__bar {
	justify-content: space-between;
}

/* With no socials in the bar there is nothing to push against, so keep the
   copyright where the alignment says rather than stranded left. */
.js-footer-bottom--between .js-footer-bottom__bar--no-socials {
	justify-content: flex-start;
}

/* Stack and centre the bar on mobile whatever the desktop alignment. */
/* The icons step down a size below desktop, where the column is narrower:
   32 at desktop (21927:4814), 24 at tablet (21939:5084) and mobile
   (21939:4949), on the same 20px gap throughout. This is the fallback — the
   Icon Size control is responsive and overrides it per breakpoint. */
@media (max-width: 1024px) {
	.js-footer-bottom {
		--js-footer-icon-size: 24px;
	}
}

@media (max-width: 767px) {
	.js-footer-bottom__bar {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-footer-bottom__social-link {
		transition: none;
	}
}