:root {
	/* Colors */
	--wffa-color-primary: #0C0108;
	--wffa-color-primary-hover: #1847cc;
	--wffa-color-secondary: #ffb600;
	--wffa-color-secondary-hover: #e0a200;
	--wffa-color-neutral-900: #111111;
	--wffa-color-neutral-700: #444444;
	--wffa-color-neutral-100: #f5f5f5;
	--wffa-color-white: #ffffff;
	--wffa-color-accent1: #E42046;
	--wffa-color-accent2: #6B0D39;

	/* Typography */
	--wffa-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wffa-font-size-xs: 0.75rem;
	--wffa-font-size-sm: 0.875rem;
	--wffa-font-size-md: 1rem;
	--wffa-font-size-lg: 1.125rem;
	--wffa-font-size-xl: 1.5rem;
	--wffa-font-size-xxl: 2.25rem;
	--wffa-font-weight-regular: 400;
	--wffa-font-weight-semibold: 600;
	--wffa-font-weight-bold: 700;

	/* Spacing */
	--wffa-space-xs: 0.25rem;
	--wffa-space-sm: 0.5rem;
	--wffa-space-md: 0.75rem;
	--wffa-space-lg: 1rem;
	--wffa-space-xl: 1.5rem;
	--wffa-space-xxl: 3rem;

	/* Radius & shadows */
	--wffa-radius-sm: 4px;
	--wffa-radius-md: 999px; /* pill for buttons */
	--wffa-radius-lg: 16px;
	--wffa-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.12);

	/* Layout */
	--wffa-content-max-width: 72rem;
}

/* Base button */
.wffa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wffa-space-sm);
	padding: var(--wffa-space-sm) var(--wffa-space-lg);
	border-radius: var(--wffa-radius-md);
	border: 1px solid transparent;
	font-family: var(--wffa-font-family-base);
	font-size: var(--wffa-font-size-md);
	font-weight: var(--wffa-font-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease;
	white-space: nowrap;
}

/* Primary variant */
.wffa-button--primary {
	background-color: var(--wffa-color-accent1);
	color: var(--wffa-color-white);
	box-shadow: var(--wffa-shadow-soft);
}

.wffa-button--primary:hover,
.wffa-button--primary:focus-visible {
	background-color: var(--wffa-color-primary-hover);
	color: var(--wffa-color-white);
	transform: translateY(-1px);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* Secondary variant */
.wffa-button--secondary {
	background-color: var(--wffa-color-secondary);
	color: var(--wffa-color-neutral-900);
	box-shadow: var(--wffa-shadow-soft);
}

.wffa-button--secondary:hover,
.wffa-button--secondary:focus-visible {
	background-color: var(--wffa-color-secondary-hover);
	color: var(--wffa-color-neutral-900);
	transform: translateY(-1px);
}

/* Ghost / outline variant */
.wffa-button--ghost {
	background-color: transparent;
	color: var(--wffa-color-primary);
	border-color: rgba(31, 90, 255, 0.4);
	box-shadow: none;
}

.wffa-button--ghost:hover,
.wffa-button--ghost:focus-visible {
	background-color: rgba(31, 90, 255, 0.08);
	border-color: var(--wffa-color-primary);
}

/* Sizes */
.wffa-button--sm {
	padding: var(--wffa-space-xs) var(--wffa-space-md);
	font-size: var(--wffa-font-size-sm);
}

.wffa-button--md {
	padding: var(--wffa-space-sm) var(--wffa-space-lg);
	font-size: var(--wffa-font-size-md);
}

.wffa-button--lg {
	padding: var(--wffa-space-md) var(--wffa-space-xl);
	font-size: var(--wffa-font-size-lg);
}

/* Inner span so we can add icons later if needed */
.wffa-button__label {
	display: inline-block;
}

/* “Block” wrapper – useful for the standalone Button block */
.wffa-button-block {
	display: flex;
}

.wffa-button-block.alignleft {
	justify-content: flex-start;
}

.wffa-button-block.aligncenter {
	justify-content: center;
}

.wffa-button-block.alignright {
	justify-content: flex-end;
}


/* Base hero section */
.wffa-hero-block {
	position: relative;
	padding-block: var(--wffa-space-xxl);
	background-color: var(--wffa-color-neutral-900);
	color: var(--wffa-color-white);
	overflow: hidden;
	border-radius: 25px;
}

/* Inner layout container */
.wffa-hero-block__inner {
	max-width: var(--wffa-content-max-width);
	margin-inline: auto;
	/* Respect global theme padding if present, fallback if not */
	padding-inline: var(--wp--style--root--padding-right, 1.5rem);
	text-align: center;
}

/* Heading */
.wffa-hero-block__heading {
	margin: 0 0 var(--wffa-space-md);
	font-size: var(--wffa-font-size-xxl);
	font-weight: var(--wffa-font-weight-bold);
	line-height: 1.1;
}

/* Body copy */
.wffa-hero-block__body {
	margin: 0 auto var(--wffa-space-xl);
	max-width: 40rem;
	font-size: var(--wffa-font-size-md);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

/* Actions row (buttons) */
.wffa-hero-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wffa-space-sm);
	justify-content: center;
}

/* Optional: background gradient variant */
.wffa-hero-block--gradient {
	background: radial-gradient(circle at top left, #2b6fff 0%, #111111 45%, #000000 100%);
}

/* Optional: light variant (for a hero on white background) */
.wffa-hero-block--light {
	background-color: var(--wffa-color-neutral-100);
	color: var(--wffa-color-neutral-900);
}

.wffa-hero-block--light .wffa-hero-block__body {
	color: var(--wffa-color-neutral-700);
}

/* Responsive tweaks */
@media (min-width: 768px) {
	.wffa-hero-block__inner {
		text-align: left;
	}

	.wffa-hero-block__body {
		margin-inline: 0 0;
	}

	.wffa-hero-block__actions {
		justify-content: flex-start;
	}
}


/* ============================
   HERO BACKGROUND LAYERS
   ============================ */

/* Make sure the hero can contain absolutely positioned layers */
.wffa-hero-block {
	position: relative;
	overflow: hidden;
}

/* Background image layer */
.wffa-hero-block__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	/* The size/position are mainly set inline from PHP based on object-fit, but these are safe defaults */
	background-size: cover;
	background-position: center;
}

/* Overlay layer (uses native background colour/gradient + ACF opacity) */
.wffa-hero-block__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Content sits above background + overlay */
.wffa-hero-block__inner {
	position: relative;
	z-index: 2;
}

/* Optional: height variations when you use block style variations */
.wffa-hero-block.is-style-hero-compact {
	padding-block: calc(var(--wffa-space-xl));
}

.wffa-hero-block.is-style-hero-default {
	padding-block: var(--wffa-space-xxl);
}

.wffa-hero-block.is-style-hero-tall {
	padding-block: calc(var(--wffa-space-xxl) * 1.5);
}

/* Text alignment classes from native sidebar */
.wffa-hero-block.has-text-align-center .wffa-hero-block__inner {
	text-align: center;
}

.wffa-hero-block.has-text-align-right .wffa-hero-block__inner {
	text-align: right;
}

.wffa-hero-block.has-text-align-left .wffa-hero-block__inner {
	text-align: left;
}



/* Base hero height (standard) */
.wffa-hero-block {
	min-height: 50vh; /* your “standard” height */
	display: flex;
	align-items: center;        /* optional: vertically center content */
}

/* Height: Compact */
.wffa-hero-block.is-style-hero-compact {
	min-height: 350px;
}

/* Height: Default (full viewport) */
.wffa-hero-block.is-style-hero-default {
	height: 600px;
}

/* Height: Tall (slightly larger than full viewport if you want) */
.wffa-hero-block.is-style-hero-tall {
	height: 100vh;
}

/* ============================
   WFFA HEADING BLOCK
   ============================ */

.wffa-heading-block {
	/* optional block-level spacing if you want */
}

.wffa-heading {
	margin: 0 0 var(--wffa-space-md);
	font-family: var(--wffa-font-family-base);
	font-weight: var(--wffa-font-weight-bold);
	/* DO NOT set color/font-size here strongly; let native controls override via inline styles */
}

/* ============================
   WFFA TEXT BLOCK
   ============================ */

.wffa-text-block {
	/* optional spacing */
}

.wffa-text {
	margin: 0 0 var(--wffa-space-md);
	font-family: var(--wffa-font-family-base);
	line-height: 1.6;
}