/**
 * Founders Helper — public design tokens and base components (11.x).
 *
 * Everything public the plugin renders sits inside `.fh-ui`, so these rules
 * never reach the theme or Elementor widgets. Colours come from the site's
 * Elementor kit globals first (same values the homepage uses), with the kit's
 * hex values as fallbacks. Font is always inherited from the site.
 *
 * Selectors use two classes where Elementor's kit (`.elementor-kit-10 a`,
 * `… button`) would otherwise win — no !important except `[hidden]`.
 */

.fh-ui {
	--fh-green: var(--e-global-color-secondary, #1DA678);
	--fh-green-hover: #168A63;
	--fh-green-ink: #0E7C57;
	--fh-green-light: var(--e-global-color-8ed0d9b, #E8F6F1);
	--fh-navy: var(--e-global-color-1be2e8c, #0D1B2A);
	--fh-navy-2: #192735;
	--fh-yellow: var(--e-global-color-781f24d, #F2C02A);
	--fh-yellow-light: #FFF8E1;
	--fh-red: var(--e-global-color-1ad8f47, #EF5743);
	--fh-red-light: #FFF1EE;
	--fh-text: #1F2933;
	--fh-muted: #5A6470;
	--fh-faint: #8A94A1;
	--fh-border: #E2E5EA;
	--fh-bg: #F8F9FA;
	--fh-surface: #FFFFFF;
	--fh-radius-sm: 8px;
	--fh-radius: 12px;
	--fh-radius-lg: 20px;
	--fh-radius-btn: 15px; /* kit button radius */
	--fh-pill: 50px;
	--fh-shadow-sm: 0 1px 3px rgba(13, 27, 42, .08);
	--fh-shadow: 0 4px 16px rgba(13, 27, 42, .10);
	--fh-shadow-lg: 0 12px 40px rgba(13, 27, 42, .14);
	--fh-focus: 0 0 0 3px rgba(29, 166, 120, .35);

	/* Language families (FH_Brand::FAMILIES). */
	--fh-lang-spanish: #C62828;   --fh-lang-spanish-bg: #FDECEA;
	--fh-lang-mandarin: #B45309;  --fh-lang-mandarin-bg: #FFF8E1;
	--fh-lang-english: #1565C0;   --fh-lang-english-bg: #E3F2FD;
	--fh-lang-german: #6A1B9A;    --fh-lang-german-bg: #F3E5F5;
	--fh-lang-indonesia: #0E7C57; --fh-lang-indonesia-bg: #E8F6F1;
	--fh-lang-other: #475569;     --fh-lang-other-bg: #F1F5F9;

	color: var(--fh-text);
	font-family: inherit;
	line-height: 1.55;
	box-sizing: border-box;
}

.fh-ui *,
.fh-ui *::before,
.fh-ui *::after {
	box-sizing: inherit;
}

.fh-ui [hidden] {
	display: none !important;
}

.fh-ui .fh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Buttons & chips ─────────────────────────────────────────────────── */

.fh-ui .fh-btn,
.fh-ui a.fh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--fh-radius-btn);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.fh-ui .fh-btn:focus-visible {
	outline: none;
	box-shadow: var(--fh-focus);
}

.fh-ui .fh-btn--primary,
.fh-ui a.fh-btn--primary {
	background: var(--fh-green);
	border-color: var(--fh-green);
	color: #fff;
}

.fh-ui .fh-btn--primary:hover,
.fh-ui a.fh-btn--primary:hover {
	background: var(--fh-green-hover);
	border-color: var(--fh-green-hover);
	color: #fff;
}

.fh-ui .fh-btn--outline,
.fh-ui a.fh-btn--outline {
	background: transparent;
	border-color: var(--fh-green);
	color: var(--fh-green-ink);
}

.fh-ui .fh-btn--outline:hover,
.fh-ui a.fh-btn--outline:hover {
	background: var(--fh-green);
	color: #fff;
}

.fh-ui .fh-btn--ghost {
	background: var(--fh-surface);
	border-color: var(--fh-border);
	color: var(--fh-text);
}

.fh-ui .fh-btn--ghost:hover {
	border-color: var(--fh-green);
	color: var(--fh-green-ink);
}

.fh-ui .fh-btn--sm {
	min-height: 36px;
	padding: 6px 14px;
	font-size: 13px;
}

.fh-ui .fh-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 5px 14px;
	border: 1.5px solid var(--fh-border);
	border-radius: var(--fh-pill);
	background: var(--fh-surface);
	color: var(--fh-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.fh-ui .fh-chip:hover {
	border-color: var(--fh-green);
	color: var(--fh-green-ink);
}

.fh-ui .fh-chip.is-active,
.fh-ui .fh-chip[aria-pressed="true"] {
	background: var(--fh-green-light);
	border-color: var(--fh-green);
	color: var(--fh-green-ink);
}

.fh-ui .fh-chip:focus-visible {
	outline: none;
	box-shadow: var(--fh-focus);
}

.fh-ui .fh-chip__count {
	min-width: 20px;
	padding: 0 6px;
	border-radius: var(--fh-pill);
	background: var(--fh-bg);
	color: var(--fh-muted);
	font-size: 11px;
	text-align: center;
}

/* ── Language pill ───────────────────────────────────────────────────── */

.fh-ui .fh-lang {
	--c: var(--fh-lang-other);
	--bg: var(--fh-lang-other-bg);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--fh-pill);
	background: var(--bg);
	color: var(--c);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
}

.fh-ui .fh-lang::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.fh-ui .fh-lang.fh-lang-spanish   { --c: var(--fh-lang-spanish);   --bg: var(--fh-lang-spanish-bg); }
.fh-ui .fh-lang.fh-lang-mandarin  { --c: var(--fh-lang-mandarin);  --bg: var(--fh-lang-mandarin-bg); }
.fh-ui .fh-lang.fh-lang-english   { --c: var(--fh-lang-english);   --bg: var(--fh-lang-english-bg); }
.fh-ui .fh-lang.fh-lang-german    { --c: var(--fh-lang-german);    --bg: var(--fh-lang-german-bg); }
.fh-ui .fh-lang.fh-lang-indonesia { --c: var(--fh-lang-indonesia); --bg: var(--fh-lang-indonesia-bg); }

/* ── Card ────────────────────────────────────────────────────────────── */

.fh-ui .fh-card {
	background: var(--fh-surface);
	border: 1.5px solid var(--fh-border);
	border-radius: var(--fh-radius);
	box-shadow: var(--fh-shadow-sm);
}

/* ── Skeleton (loading) ──────────────────────────────────────────────── */

.fh-ui .fh-skel {
	display: block;
	border-radius: var(--fh-radius-sm);
	background: linear-gradient(90deg, #EEF1F4 25%, #F6F8FA 37%, #EEF1F4 63%);
	background-size: 400% 100%;
	animation: fh-skel 1.3s ease infinite;
}

@keyframes fh-skel {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.fh-ui .fh-skel { animation: none; }
}