/*
Theme Name: BFF
Theme URI: https://buildingfuturefamilies.org
Author: Building Future Families
Description: Purpose-built theme for Building Future Families. Minimal by design — layout is
             authored in Elementor Pro's Theme Builder, so this theme supplies design tokens,
             self-hosted typography, and template fallbacks rather than markup.
Version: 1.0.0
Requires at least: 6.9
Tested up to: 7.0.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bff
Tags: elementor, nonprofit
*/

/* ---------------------------------------------------------------------------
   Typography — self-hosted, latin subset, variable.
   Two files cover every weight the design uses. Serving these from Google's CDN
   would leak visitor IPs to a third party before any consent banner is answered.
   font-display: swap keeps text visible during load.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/manrope.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk.woff2") format("woff2-variations");
}

/* ---------------------------------------------------------------------------
   Design tokens — transcribed from the demo's CSS custom properties.
   Exposed as custom properties so Elementor's Global Colors can reference the
   same values; editors change them in one place rather than per-widget.
   --------------------------------------------------------------------------- */

:root {
	/* Brand */
	--bff-primary: #2e3fab;
	--bff-primary-soft: rgba(46, 63, 171, 0.12);
	--bff-accent: #10b981;

	/* Surfaces */
	--bff-canvas: #eff3f8;
	--bff-surface: #ffffff;

	/* Text */
	--bff-ink: #0f172a;
	--bff-ink-muted: #64748b;
	--bff-ink-faint: #94a3b8;

	/* Lines */
	--bff-border: rgba(148, 163, 184, 0.22);
	--bff-border-strong: rgba(148, 163, 184, 0.35);

	/* Type */
	--bff-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bff-font-display: "Space Grotesk", var(--bff-font-sans);

	/* Rhythm */
	--bff-radius: 12px;
	--bff-measure: 68ch;
}

/* ---------------------------------------------------------------------------
   Base. Deliberately thin — Elementor owns layout. Anything added here that
   Elementor also controls becomes a specificity fight later.
   --------------------------------------------------------------------------- */

body {
	margin: 0;
	background: var(--bff-canvas);
	color: var(--bff-ink);
	font-family: var(--bff-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bff-font-display);
	color: var(--bff-ink);
	line-height: 1.2;
	text-wrap: balance;
}

a {
	color: var(--bff-primary);
}

img {
	max-width: 100%;
	height: auto;
}

/* Keyboard focus must stay visible; Elementor resets outlines in places. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--bff-primary);
	outline-offset: 2px;
}

/* Skip link — visually hidden until focused. Required for keyboard users, since
   Elementor headers place navigation ahead of content in the DOM. */
.bff-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--bff-surface);
	color: var(--bff-primary);
	border-radius: 0 0 var(--bff-radius) 0;
	font-weight: 600;
	text-decoration: none;
}

.bff-skip-link:focus {
	left: 0;
}

/* Fallback template wrapper. Only renders when no Elementor template matches. */
.bff-fallback {
	max-width: var(--bff-measure);
	margin: 0 auto;
	padding: 3rem 1.25rem;
	background: var(--bff-surface);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Effects Elementor has no native control for. Applied by adding the class to
   a widget's "CSS Classes" field, so they stay editable rather than hard-coded
   into the layout JSON.
   --------------------------------------------------------------------------- */

/* Two-tone gradient wordmark in the hero headline. */
.bff-grad {
	background: linear-gradient(96deg, var(--bff-primary) 0%, #3b82f6 48%, #22d3ee 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Frosted tiles that sit over the hero photograph. */
.bff-glass {
	background: rgba(255, 255, 255, 0.66) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.4);
}

/* Secondary hero button: white with a hairline border. */
.bff-btn-ghost .elementor-button {
	border: 1px solid var(--bff-border-strong);
}

/* Header wordmark lockup: rule between the mark and the name. */
.bff-lockup {
	border-left: 1px solid var(--bff-border-strong);
	padding-left: 14px;
}

@supports not (backdrop-filter: blur(1px)) {
	.bff-glass { background: rgba(255, 255, 255, 0.9) !important; }
}

/* --- Demo-matching components ---------------------------------------------- */

/* Gradient hairline along the top edge of a card (priorities, footer rule). */
.bff-topgrad { position: relative; overflow: hidden; }
.bff-topgrad::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #2e3fab 0%, #3b82f6 45%, #10b981 100%);
}

/* Numbered badge: rounded square, gradient stepped per index. */
.bff-badge .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #fff !important;
	font-size: 15px;
}
.bff-badge-1 .elementor-heading-title { background: linear-gradient(140deg,#2e3fab,#4f46e5); }
.bff-badge-2 .elementor-heading-title { background: linear-gradient(140deg,#4f46e5,#3b82f6); }
.bff-badge-3 .elementor-heading-title { background: linear-gradient(140deg,#3b82f6,#22d3ee); }
.bff-badge-4 .elementor-heading-title { background: linear-gradient(140deg,#4f46e5,#3b82f6); }
.bff-badge-5 .elementor-heading-title { background: linear-gradient(140deg,#22d3ee,#67e8f9); }

/* Small green capsule used for "Strategic focus". */
.bff-pill .elementor-heading-title {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: #d1fae5;
	color: #047857 !important;
}

/* Divider between numbered rows inside the priorities card. */
.bff-divider { border-top: 1px solid var(--bff-border); }

/* Dark leadership section, with the mark ghosted into the right edge. */
.bff-dark { background-color: #0b1533 !important; }

/* Outlined button on dark, and on the light CTA card. */
.bff-btn-outline .elementor-button {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.35);
}
.bff-btn-outline-blue .elementor-button {
	background: #fff !important;
	border: 1.5px solid #3b82f6;
}

/* Header — values measured from the demo's computed styles, not eyeballed.
   Bar is 73px tall; items are 13px/600 with 10px 12px padding; the active item
   is a 38px white chip with a 1px ring and a 3px gradient underline. */

.bff-nav .elementor-nav-menu .elementor-item {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	padding: 10px 12px !important;
	border-radius: 12px;
	transition: color .15s ease, background-color .15s ease;
}

.bff-nav .elementor-nav-menu .elementor-item:hover {
	color: #0f172a !important;
	background: rgba(255,255,255,0.6);
}

.bff-nav .elementor-nav-menu .elementor-item.elementor-item-active {
	color: #0f172a !important;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0 0 1px rgba(226,232,240,0.6), 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.06);
}

/* 3px fully-rounded gradient bar under the active label. */
.bff-nav .elementor-nav-menu .elementor-item.elementor-item-active::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 3px;
	width: auto !important;
	border-radius: 999px;
	background: linear-gradient(to right, #2e3fab 0%, #0ea5e9 100%) !important;
	opacity: 1 !important;
}

/* Donate + primary CTA: 12px radius, not a pill; gradient ends on sky-500. */
.bff-cta-grad .elementor-button {
	background-image: linear-gradient(to right, #2e3fab 0%, #0ea5e9 100%) !important;
	border: none;
	border-radius: 12px !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bff-cta-grad .elementor-button:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -12px rgba(46,63,171,0.9);
}

/* Ghost secondary button, matched to the same metrics. */
.bff-btn-ghost .elementor-button {
	border: 1px solid rgba(148,163,184,0.45);
	border-radius: 12px !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	transition: border-color .15s ease, background-color .15s ease;
}
.bff-btn-ghost .elementor-button:hover {
	border-color: #2e3fab;
	background: #fff !important;
}

/* Wordmark lockup: 10px/2.2px label over a 15px Space Grotesk name. */
.bff-lockup {
	white-space: nowrap;
	border-left: 1px solid rgba(148,163,184,0.45);
	padding-left: 14px;
}

/* --- Footer ---------------------------------------------------------------- */

/* Logo sits in its own white card, as in the demo. */
.bff-logocard {
	background: #fff;
	border: 1px solid var(--bff-border);
	border-radius: 14px;
	box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.5);
}

/* Email rendered as a soft capsule rather than a bare link. */
.bff-chip .elementor-heading-title {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--bff-border);
	color: #3b82f6 !important;
	font-size: 14px;
	word-break: break-all;
}

/* Footer link lists: small dot markers, muted until hover. */
.bff-links .elementor-icon-list-item > a,
.bff-links .elementor-icon-list-text {
	color: var(--bff-ink) !important;
	font-size: 15px;
}
.bff-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--bff-primary) !important; }
.bff-links .elementor-icon-list-icon { color: var(--bff-ink-faint) !important; }

/* Hairline above the copyright line. */
.bff-footer-base { border-top: 1px solid var(--bff-border); }

/* Header bar height: the demo measures 73px. Elementor's heading widgets carry
   default margins that pushed the lockup — and therefore the bar — to 119px. */
.elementor-location-header .bff-lockup .elementor-widget-heading,
.elementor-location-header .bff-lockup .elementor-heading-title { margin: 0 !important; line-height: 1.15 !important; }
.elementor-location-header .elementor-widget { margin-bottom: 0 !important; }
.elementor-location-header .e-con-inner > .e-con,
.elementor-location-header .e-con > .e-con-inner { row-gap: 0 !important; }