/**
 * Framebrand Banner widget styles.
 *
 * Every value below is the Figma default ("Banner" node 2180:30213) and is
 * exposed as a CSS custom property so the Elementor controls can override it.
 *
 * Desktop reference geometry: 1920 x 628 = 100px + 428px content + 100px,
 * 80px side padding, 1210px centred column, 40px pill badge, 32px badge gap,
 * 80px heading, 40px heading gap, 32px lead paragraph.
 */

.fb-banner {
	--fb-banner-bg: #ffffff;
	--fb-banner-pad: 100px 80px;
	--fb-banner-max-w: 1210px;
	--fb-banner-align: center;
	--fb-banner-items: center;

	--fb-badge-bg: #8069f0;
	--fb-badge-bg-hover: #6e58e0;
	--fb-badge-color: #ffffff;
	--fb-badge-color-hover: #ffffff;
	--fb-badge-pad: 0px 16px;
	--fb-badge-h: 40px;
	--fb-badge-radius: 9999px;
	--fb-badge-gap: 32px;

	--fb-heading-color: #161616;
	--fb-heading-max-w: 100%;
	--fb-heading-gap: 40px;
	--fb-heading-trim: trim-both;

	--fb-description-color: rgba(22, 22, 22, 0.7);
	--fb-description-max-w: 100%;

	/* This site's <body> is 24px/36px/0.48px; isolate so nothing inherits it. */
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;

	background: var(--fb-banner-bg);
	padding: var(--fb-banner-pad);
	box-sizing: border-box;
	width: 100%;
}

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

.fb-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: var(--fb-banner-items);
	gap: var(--fb-badge-gap);
	max-width: var(--fb-banner-max-w);
	margin-inline: auto;
	width: 100%;
	text-align: var(--fb-banner-align);
}

/* --- Badge --------------------------------------------------------------- */

/* Qualified so the kit's `a` rules (0,1,1) can't win over the colours. */
.fb-banner .fb-banner__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fb-badge-h);
	padding: var(--fb-badge-pad);
	border-radius: var(--fb-badge-radius);
	background: var(--fb-badge-bg);
	color: var(--fb-badge-color);
	max-width: 100%;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fb-banner a.fb-banner__badge:hover,
.fb-banner a.fb-banner__badge:focus-visible {
	background: var(--fb-badge-bg-hover);
	color: var(--fb-badge-color-hover);
}

/* --- Text ---------------------------------------------------------------- */

.fb-banner__text {
	display: flex;
	flex-direction: column;
	align-items: var(--fb-banner-items);
	gap: var(--fb-heading-gap);
	width: 100%;
}

.fb-banner .fb-banner__heading {
	margin: 0;
	padding: 0;
	max-width: var(--fb-heading-max-w);
	color: var(--fb-heading-color);
	/* Matches the design's trimmed text box: cap-top to baseline, no leading.
	   Browsers without support simply keep the normal line box. */
	text-box-trim: var(--fb-heading-trim);
	text-box-edge: cap alphabetic;
}

.fb-banner p.fb-banner__description {
	margin: 0;
	padding: 0;
	max-width: var(--fb-description-max-w);
	color: var(--fb-description-color);
}

.fb-banner .fb-banner__heading a,
.fb-banner .fb-banner__description a {
	color: inherit;
	text-decoration: underline;
}

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

@media (max-width: 1024px) {
	.fb-banner__inner {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.fb-banner .fb-banner__badge {
		white-space: normal;
		text-align: center;
		padding-block: 8px;
	}
}

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