/**
 * Framebrand Footer widget styles.
 *
 * Every value below is the Figma default ("Footer" node 1932:15550) and is
 * exposed as a CSS custom property so the Elementor controls can override it.
 *
 * Desktop reference geometry: 1920 x 387 = 45px top + 257px content + 40px
 * bottom bar + 45px bottom. 56px side padding, 704px brand column,
 * three menu columns 40px apart.
 *
 * Note on specificity: the Elementor kit emits `a`, `p` and heading rules at
 * (0,1,1), which outrank a bare class. Rules that set colour, margin or
 * decoration are therefore qualified with `.fb-footer` and/or the element,
 * which avoids needing `!important`.
 */

.fb-footer {
	--fb-footer-bg: #f1f1f1;
	--fb-footer-pad: 45px 56px;
	--fb-footer-col-gap: 48px;
	--fb-footer-row-gap: 0px;
	--fb-footer-top-min-h: 257px;

	--fb-logo-w: 62px;
	--fb-brand-row-gap: 40px;
	--fb-brand-gap: 24px;

	--fb-copyright-color: #161616;
	--fb-description-color: #161616;
	--fb-description-opacity: 0.8;
	--fb-description-max-w: 704px;

	--fb-cta-pad: 15px 25px;
	--fb-cta-radius: 5px;
	--fb-cta-gap: 18px;

	--fb-menus-gap: 40px;
	--fb-menu-title-gap: 24px;
	--fb-menu-item-gap: 16px;
	--fb-menu-title-color: #161616;
	--fb-menu-item-color: #161616;
	--fb-menu-item-color-hover: #260d40;
	--fb-menu-item-opacity: 0.8;

	--fb-bottom-color: rgba(22, 22, 22, 0.8);
	--fb-bottom-pad: 12px 0px;
	--fb-bottom-right-w: 407px;

	--fb-brand-offset: 11px;

	/* The site's <body> sets 24px/36px/0.48px; without these resets the menu
	   lists inherit them and the vertical rhythm and text widths drift. Every
	   text element below gets its own size from a typography control. */
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--fb-footer-row-gap);
	background: var(--fb-footer-bg);
	padding: var(--fb-footer-pad);
	box-sizing: border-box;
	width: 100%;
}

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

/* --- Top row ------------------------------------------------------------- */

.fb-footer__top {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--fb-footer-col-gap);
	min-height: var(--fb-footer-top-min-h);
	width: 100%;
}

/* --- Brand --------------------------------------------------------------- */

.fb-footer__brand {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: var(--fb-brand-offset);
	gap: var(--fb-brand-gap);
	flex: 0 1 auto;
	min-width: 0;
}

.fb-footer__brand-row {
	display: flex;
	align-items: flex-end;
	gap: var(--fb-brand-row-gap);
}

.fb-footer__logo {
	flex: 0 0 auto;
	line-height: 0;
}

.fb-footer__logo-link {
	display: block;
	text-decoration: none;
}

.fb-footer__logo-img {
	display: block;
	width: var(--fb-logo-w);
	height: var(--fb-logo-w);
	object-fit: contain;
	max-width: 100%;
}

.fb-footer .fb-footer__copyright {
	margin: 0;
	color: var(--fb-copyright-color);
}

.fb-footer p.fb-footer__description {
	margin: 0;
	max-width: var(--fb-description-max-w);
	color: var(--fb-description-color);
	opacity: var(--fb-description-opacity);
}

/* --- CTA buttons --------------------------------------------------------- */

.fb-footer__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fb-cta-gap);
}

.fb-footer a.fb-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fb-cta-pad);
	border-radius: var(--fb-cta-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* --- Menu columns -------------------------------------------------------- */

.fb-footer__menus {
	display: flex;
	align-items: flex-start;
	gap: var(--fb-menus-gap);
	flex: 0 0 auto;
}

.fb-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--fb-menu-title-gap);
}

.fb-footer h3.fb-footer__menu-title {
	margin: 0;
	padding: 0;
	color: var(--fb-menu-title-color);
}

.fb-footer .fb-footer__menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--fb-menu-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fb-footer .fb-footer__menu-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-footer .fb-footer__menu-list a {
	display: block;
	color: var(--fb-menu-item-color);
	opacity: var(--fb-menu-item-opacity);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease, opacity 0.18s ease;
}

.fb-footer .fb-footer__menu-list a:hover,
.fb-footer .fb-footer__menu-list a:focus-visible {
	color: var(--fb-menu-item-color-hover);
	opacity: 1;
}

/* --- Bottom bar ---------------------------------------------------------- */

.fb-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: var(--fb-bottom-pad);
	width: 100%;
}

.fb-footer p.fb-footer__bottom-left,
.fb-footer p.fb-footer__bottom-right {
	margin: 0;
	color: var(--fb-bottom-color);
}

/* The design puts the right-hand note in a fixed-width slot that is itself
   flush right, with the text left-aligned inside it — so the text stops short
   of the margin. Set the width to 0 for a conventional flush-right line. */
.fb-footer p.fb-footer__bottom-right {
	width: var(--fb-bottom-right-w);
	max-width: 100%;
	text-align: left;
}

.fb-footer .fb-footer__bottom-right a {
	color: inherit;
	text-decoration: none;
}

.fb-footer .fb-footer__bottom-right a:hover,
.fb-footer .fb-footer__bottom-right a:focus-visible {
	text-decoration: underline;
}

/* --- Below 1024px: matches this site's existing mobile breakpoint --------- */

@media (max-width: 1024px) {
	.fb-footer__top {
		flex-direction: column;
		min-height: 0;
		gap: 40px;
	}

	.fb-footer__brand {
		justify-content: flex-start;
		padding-top: 0;
	}

	.fb-footer__menus {
		flex-wrap: wrap;
		gap: 32px 40px;
	}
}

@media (max-width: 767px) {
	.fb-footer__brand-row {
		align-items: center;
		gap: 20px;
		flex-wrap: wrap;
	}

	/* Narrow phones: nothing in the brand block may force the page wider. */
	.fb-footer__brand,
	.fb-footer__top,
	.fb-footer__ctas {
		min-width: 0;
	}

	.fb-footer .fb-footer__copyright,
	.fb-footer p.fb-footer__description,
	.fb-footer p.fb-footer__bottom-left,
	.fb-footer p.fb-footer__bottom-right {
		overflow-wrap: break-word;
		min-width: 0;
	}

	.fb-footer a.fb-footer__cta {
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.fb-footer__menus {
		flex-direction: column;
		gap: 28px;
	}

	.fb-footer .fb-footer__menu-list a {
		white-space: normal;
	}

	.fb-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.fb-footer p.fb-footer__bottom-right {
		width: auto;
	}

	.fb-footer a.fb-footer__cta {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-footer *,
	.fb-footer *::before,
	.fb-footer *::after {
		transition-duration: 0.01ms !important;
	}
}