/* Flourish — design tokens.
 * Extracted from Figma "Future Care" homepage (node 216:3269).
 * Keep these in sync with Elementor -> Site Settings -> Global Colors / Global Fonts.
 */

:root {
	/* ---------- Brand colours ---------- */
	--fl-color-brand:      #F5FE67; /* lime/chartreuse — hero background + accents */
	--fl-color-ink:        #040805; /* near-black — display headings */
	--fl-color-dark:       #122718; /* dark green-black — nav links, deep text */
	--fl-color-black:      #000000; /* pill buttons, footer background */
	--fl-color-text:       #000000; /* body copy */
	--fl-color-text-muted: #6C6C6C; /* secondary paragraphs */
	--fl-color-white:      #FFFFFF;

	/* ---------- Font families ---------- */
	/* Three-font system. IvyPresto Text + Helvetica Neue LT Pro load via the
	 * Adobe Fonts kit gkg7ing; Geist Mono via Google Fonts (see functions.php).
	 * Body and UI share Helvetica Neue LT Pro; Proxima Nova / Source Serif Pro
	 * in the comp were strays and are deliberately not used. */
	--fl-font-display: "ivypresto-text", Georgia, "Times New Roman", serif;          /* headings — weights 300/400/700 */
	--fl-font-body:    "helvetica-neue-lt-pro", "Helvetica Neue", Arial, sans-serif;  /* body copy — weights 400/700 */
	--fl-font-ui:      "helvetica-neue-lt-pro", "Helvetica Neue", Arial, sans-serif;  /* nav, buttons */
	--fl-font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, monospace;         /* labels, captions */

	/* ---------- Fluid type scale ----------
	 * clamp(min @ ~390px, fluid, max @ ~1920px). Max values are the desktop comp
	 * sizes; mins are chosen for legibility on mobile. */
	--fl-size-display:  clamp(3rem,     calc(1.85rem + 4.71vw), 7.5rem);    /*  48 -> 120px  hero H1 */
	--fl-size-h1:       clamp(2.25rem,  calc(1.63rem + 2.55vw), 4.6875rem); /*  36 ->  75px  large statements */
	--fl-size-h2:       clamp(2rem,     calc(1.62rem + 1.57vw), 3.5rem);    /*  32 ->  56px  section headings */
	--fl-size-lead:     clamp(1.625rem, calc(1.32rem + 1.24vw), 2.8125rem); /*  26 ->  45px  CTA / pull quotes */
	--fl-size-body-lg:  clamp(1.25rem,  calc(1.09rem + 0.65vw), 1.875rem);  /*  20 ->  30px  intro paragraphs */
	--fl-size-body:     clamp(1.0625rem,calc(1.01rem + 0.20vw), 1.25rem);   /*  17 ->  20px  default body */
	--fl-size-caption:  0.875rem; /* 14px — Geist Mono labels (fixed) */
	--fl-size-legal:    0.75rem;  /* 12px — legal/footer (fixed) */

	/* ---------- Radii ---------- */
	--fl-radius-pill: 60px; /* buttons */
	--fl-radius-card: 30px; /* image / section cards */

	/* ---------- Layout ---------- */
	--fl-content-max: 1440px; /* inner content width (design canvas is 1920) */
}

/* ---------- Type utility classes ----------
 * Apply these to widgets (Advanced -> CSS Classes) for consistent type without
 * re-entering sizes. Each bundles family, size, weight, line-height and tracking
 * to match the comp. */
.fl-display {
	font-family: var(--fl-font-display);
	font-size: var(--fl-size-display);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fl-color-ink);
}

.fl-h1 {
	font-family: var(--fl-font-display);
	font-size: var(--fl-size-h1);
	font-weight: 300;
	line-height: 1.13;
	letter-spacing: -0.05em;
	color: var(--fl-color-ink);
}

.fl-h2 {
	font-family: var(--fl-font-display);
	font-size: var(--fl-size-h2);
	font-weight: 300;
	line-height: 1.1;
	color: var(--fl-color-ink);
}

.fl-lead {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-lead);
	font-weight: 400;
	line-height: 1.11;
}

.fl-body-lg {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-body-lg);
	font-weight: 400;
	line-height: 1.33;
	color: var(--fl-color-text);
}

.fl-body {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--fl-color-text);
}

.fl-caption {
	font-family: var(--fl-font-mono);
	font-size: var(--fl-size-caption);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.fl-legal {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-legal);
	font-weight: 400;
	line-height: 1;
}

/* ---------- Hero leaf decoration ----------
 * Add the `fl-hero` class to the hero Container and REMOVE its background image
 * (keep the lime background colour). The leaves are drawn as a pseudo-element so
 * they can be transformed — a slow, gentle "underwater" sway. The PNG is loaded
 * straight from the theme (no media-library upload needed). */
.fl-hero {
	position: relative;
	overflow: hidden; /* clip the leaves to the rounded hero bounds */
	isolation: isolate; /* predictable stacking for the layers below */
}

/* Lift the hero's content (caption, headline, arrow) above the leaves. */
.fl-hero > * {
	position: relative;
	z-index: 1;
}

.fl-hero::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -70px; /* bleed past the top/right edges so the sway never exposes the cropped edge */
	width: clamp(340px, 50%, 900px);
	aspect-ratio: 1496 / 2315; /* matches hero-leaves.png */
	z-index: 0; /* above the lime background, below the content */
	background: url("../images/hero-leaves.png") top right / contain no-repeat;
	transform-origin: top right; /* sway from where the fronds attach */
	animation: fl-sway 12s ease-in-out infinite;
	will-change: transform;
	pointer-events: none;
}

@keyframes fl-sway {
	0%   { transform: rotate(-1deg) translateY(0); }
	50%  { transform: rotate(1deg) translateY(-6px); }
	100% { transform: rotate(-1deg) translateY(0); }
}

/* Larger leaves on mobile (they read as a smaller slice of the screen). */
@media (max-width: 767px) {
	.fl-hero::after {
		width: 60%;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.fl-hero::after {
		animation: none;
	}
}

/* ---------- Video band ----------
 * Lock the card to the poster's aspect ratio so the photo (background: cover)
 * shows the full framing instead of over-zooming. Add `fl-video-band` to the
 * card container and clear its fixed min-height. */
.fl-video-band {
	/* Elementor's "Boxed" only constrains the inner content; the background lives
	 * on the full-width outer container. Cap the whole element so the poster
	 * (a background image) is inset to the content width too. !important beats
	 * Elementor's container width rule. */
	max-width: 1440px !important;
	margin-inline: auto !important;
	aspect-ratio: 1438 / 753;
	min-height: 0;
}

/* Tablet: drop the fixed aspect ratio so the card sizes to its content +
 * padding (the locked ratio left no room for top/bottom breathing space). */
@media (min-width: 768px) and (max-width: 1024px) {
	.fl-video-band {
		aspect-ratio: auto;
		min-height: 620px;
	}
}

/* Taller card on mobile so the overlay text has room. */
@media (max-width: 767px) {
	.fl-video-band {
		aspect-ratio: 4 / 5;
	}
}

/* Staggered headline: indent the second line to the right (matches the comp).
 * Wrap the second line in <span class="fl-stagger"> in the Heading title. */
.fl-stagger {
	display: inline-block;
	margin-left: 1.6em;
}

/* On mobile the staggered indent is dropped so the wrapped lines stay tidy. */
@media (max-width: 767px) {
	.fl-stagger {
		margin-left: 0;
	}
}

/* ---------- Video lightbox (see assets/js/main.js) ---------- */
.fl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba(4, 8, 5, 0.92);
}

.fl-lightbox__frame {
	position: relative;
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
}

.fl-lightbox__frame iframe,
.fl-lightbox__frame video {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--fl-radius-card);
}

.fl-lightbox__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 32px;
	line-height: 1;
	color: var(--fl-color-white);
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Signal the trigger is clickable. */
[data-fl-video] {
	cursor: pointer;
}

/* ---------- Intro section ----------
 * White-to-lime gradient behind the intro (exact values from Figma).
 * Add `fl-intro` to the section container; leave its Elementor background as None. */
.fl-intro {
	background-image: linear-gradient(
		162.79deg,
		#FFFFFF 41.34%,
		var(--fl-color-brand) 103.78%
	);
}

/* Uniform journal-card image crop. Add `fl-card-img` to the Featured Image
 * widget so every card shows the same landscape ratio regardless of the source
 * image's shape. */
.fl-card-img img {
	width: 100%;
	aspect-ratio: 458 / 266; /* ~1.72:1 */
	object-fit: cover;
	border-radius: var(--fl-radius-card);
}

/* Clamp text to 3 lines (journal card excerpts). Add `fl-clamp-3` to the widget. */
.fl-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Partner with us — cream-to-lime gradient card (exact values from Figma).
 * Add `fl-partner` to the card container; leave its Elementor background None. */
.fl-partner {
	background-image: linear-gradient(
		144.44deg,
		#E8E3D6 35.77%,
		var(--fl-color-brand) 93.73%
	);
}

/* Fixed-height clip viewport for the parallax image stack. Add `fl-intro-stack`
 * to the right-column container. (Elementor containers only offer Min Height,
 * which won't clip — a hard height + overflow does.) The inner "Cards" container
 * is taller than this, and that overflow is what scrolls via Motion Effects. */
.fl-intro-stack {
	position: relative;
	height: 620px;
	overflow: hidden;
}

/* On smaller screens the stack shrinks; disable the hard clip so it flows. */
@media (max-width: 1024px) {
	.fl-intro-stack {
		height: auto;
		overflow: visible;
	}
}