:root {
	--fighter-black: #000000;
	--fighter-brand: #ff481f;
	--fighter-brand-yellow: #ffff69;
	--fighter-white: #f5f5f5;
	--fighter-white-80: rgba(245, 245, 245, 0.8);
	--fighter-white-50: rgba(245, 245, 245, 0.5);
	--fighter-white-7: rgba(255, 255, 255, 0.07);
	--fighter-gray-100: #15171b;
	--fighter-gray-80: rgba(21, 23, 27, 0.8);
	--fighter-gray-50: rgba(21, 23, 27, 0.5);
	--fighter-container-max: 1272px;
	--fighter-design-width: 1512px;
	--fighter-pre-header-height: 0px;
	--fighter-header-height: 96px;
	--fighter-header-height-scrolled: 64px;
	--fighter-section-x: clamp(1rem, 5vw, 7.5rem);
	--fighter-section-y: clamp(4rem, 8vw, 7.5rem);
	--fighter-radius-lg: 24px;
	--fighter-radius-pill: 9999px;
	--fighter-font-heading: "Work Sans", "Inter", system-ui, sans-serif;
	--fighter-font-heading-weight: 800;
	--fighter-font-body: "Inter", system-ui, sans-serif;
	--fighter-gradient-brand: linear-gradient(178deg, var(--fighter-brand) 11.5%, var(--fighter-brand-yellow) 121%);
	--fighter-shadow-brand: 0 8px 20px rgba(255, 72, 31, 0.2);
	--fighter-ellipse-cyan: #01d5ff;
	/* Absolute URL injected via PHP (relative urls break when var() is used from block CSS). */
	--fighter-bg-ellipse: none;
	--fighter-design-height: calc(var(--fighter-design-width) * 1208 / 1512);
	--fighter-hero-ellipse-glow: radial-gradient(
		circle at 50% 54.75%,
		rgba(1, 213, 255, 0.5) 0%,
		rgba(1, 213, 255, 0) 100%
	);
}

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

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Clear sticky header when jumping to in-page anchors */
.fighter-section[id],
section[id] {
	scroll-margin-top: calc(
		var(--wp-admin--admin-bar--height, 0px) + 16px +
			var(--fighter-header-height-scrolled, 64px) + 12px
	);
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--fighter-black);
	color: var(--fighter-white);
	font-family: var(--fighter-font-body);
	line-height: 1.625;
}

.fighter-skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100000;
	padding: 12px 16px;
	border-radius: 4px;
	background: var(--fighter-brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.fighter-skip-link.screen-reader-text:focus {
	top: 16px;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Work Sans ExtraBold — avoid faux-bold on top of 800 */
body,
.fighter-btn,
.fighter-section-title__title,
.fighter-section-title__eyebrow {
	font-synthesis: none;
}

/* Approximate until theme.js measures — keeps fixed chrome from overlapping content */
body.fighter-has-pre-header {
	--fighter-pre-header-height: 52px;
}

@media (max-width: 600px) {
	body.fighter-has-pre-header {
		--fighter-pre-header-height: 36px;
	}
}

/* Theme has its own header — hide FSE/WC chrome that can leak onto pages */
.wp-block-site-title,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart,
.widget_shopping_cart,
.site-header-cart {
	display: none !important;
}

@media (max-width: 991px) {
	:root {
		--fighter-section-x: 16px;
		--fighter-section-y: 64px;
		--fighter-radius-lg: 14px;
	}

	/*
	 * Mobile section rhythm (Figma): 64px vertical.
	 * !important beats block-support inline padding (often saved as 120px).
	 * Checkout / blog keep their own header-aware padding.
	 */
	.fighter-section:not(.fighter-hero):not(.fighter-checkout):not(.fighter-blog):not(.fighter-thankyou-page),
	[class*="wp-block-fighter-"]:not(.wp-block-fighter-hero):not(.fighter-hero):not(.wp-block-fighter-checkout):not(.fighter-checkout):not(.fighter-thankyou-page) {
		padding-top: var(--fighter-section-y) !important;
		padding-bottom: var(--fighter-section-y) !important;
	}

	.fighter-hero.fighter-section,
	.wp-block-fighter-hero {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

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

.fighter-section {
	position: relative;
	overflow: hidden;
}

.fighter-section--dark { background: var(--fighter-black); }
.fighter-section--gray { background: var(--fighter-gray-50); }

.fighter-container,
.fighter-layout-shell {
	width: min(100%, var(--fighter-container-max));
	max-width: var(--fighter-container-max);
	margin-inline: auto;
}

.fighter-container {
	padding-inline: var(--fighter-section-x);
}

.fighter-container--narrow {
	width: min(100%, 800px);
	margin-inline: auto;
}

.fighter-hero.fighter-section,
.fighter-programs.fighter-section,
.wp-block-fighter-hero,
.wp-block-fighter-programs {
	overflow: visible;
}

/* Motion: light GPU hint only while animating in — avoid permanent will-change */
.fighter-motion-ready .fighter-program-card,
.fighter-motion-ready .fighter-feature-card,
.fighter-motion-ready .fighter-step-card,
.fighter-motion-ready .fighter-review-card {
	will-change: transform, opacity;
}

/*
 * Hide all motion targets until animations.js finishes gsap.set() and flips to
 * fighter-motion-ready. Critical copy also inlined in wp_head for first paint.
 */
html.fighter-motion-pending .fighter-hero__fighter,
html.fighter-motion-pending .fighter-social-proof,
html.fighter-motion-pending .fighter-hero__title-wrap,
html.fighter-motion-pending .fighter-hero__subtitle,
html.fighter-motion-pending .fighter-hero__cta,
html.fighter-motion-pending .fighter-program-card,
html.fighter-motion-pending .fighter-transformations__header,
html.fighter-motion-pending .fighter-transformations-carousel,
html.fighter-motion-pending .fighter-video__header,
html.fighter-motion-pending .fighter-video__frame,
html.fighter-motion-pending .fighter-video__play,
html.fighter-motion-pending .fighter-prizes__header,
html.fighter-motion-pending .fighter-prizes__amount,
html.fighter-motion-pending .fighter-prizes__cta,
html.fighter-motion-pending .fighter-prizes__hero .fighter-btn,
html.fighter-motion-pending .fighter-prizes__row,
html.fighter-motion-pending .fighter-prizes__bonus,
html.fighter-motion-pending .fighter-howto__header,
html.fighter-motion-pending .fighter-step-card,
html.fighter-motion-pending .fighter-features__header,
html.fighter-motion-pending .fighter-feature-card,
html.fighter-motion-pending .fighter-features__cta,
html.fighter-motion-pending .fighter-testimonials__header,
html.fighter-motion-pending .fighter-review-card,
html.fighter-motion-pending .fighter-instagram__header,
html.fighter-motion-pending .fighter-instagram__feed,
html.fighter-motion-pending .fighter-instagram__cta,
html.fighter-motion-pending .fighter-faq__header,
html.fighter-motion-pending .fighter-faq__item,
html.fighter-motion-pending .fighter-countdown__title,
html.fighter-motion-pending .fighter-countdown__unit,
html.fighter-motion-pending .fighter-countdown__cta,
html.fighter-motion-pending .fighter-refund__inner {
	opacity: 0 !important;
	visibility: hidden !important;
}

html.fighter-motion-pending .fighter-hero .fighter-progress__fill {
	width: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	html.fighter-motion-pending .fighter-hero__fighter,
	html.fighter-motion-pending .fighter-social-proof,
	html.fighter-motion-pending .fighter-hero__title-wrap,
	html.fighter-motion-pending .fighter-hero__subtitle,
	html.fighter-motion-pending .fighter-hero__cta,
	html.fighter-motion-pending .fighter-program-card,
	html.fighter-motion-pending .fighter-transformations__header,
	html.fighter-motion-pending .fighter-transformations-carousel,
	html.fighter-motion-pending .fighter-video__header,
	html.fighter-motion-pending .fighter-video__frame,
	html.fighter-motion-pending .fighter-video__play,
	html.fighter-motion-pending .fighter-prizes__header,
	html.fighter-motion-pending .fighter-prizes__amount,
	html.fighter-motion-pending .fighter-prizes__cta,
	html.fighter-motion-pending .fighter-prizes__hero .fighter-btn,
	html.fighter-motion-pending .fighter-prizes__row,
	html.fighter-motion-pending .fighter-prizes__bonus,
	html.fighter-motion-pending .fighter-howto__header,
	html.fighter-motion-pending .fighter-step-card,
	html.fighter-motion-pending .fighter-features__header,
	html.fighter-motion-pending .fighter-feature-card,
	html.fighter-motion-pending .fighter-features__cta,
	html.fighter-motion-pending .fighter-testimonials__header,
	html.fighter-motion-pending .fighter-review-card,
	html.fighter-motion-pending .fighter-instagram__header,
	html.fighter-motion-pending .fighter-instagram__feed,
	html.fighter-motion-pending .fighter-instagram__cta,
	html.fighter-motion-pending .fighter-faq__header,
	html.fighter-motion-pending .fighter-faq__item,
	html.fighter-motion-pending .fighter-countdown__title,
	html.fighter-motion-pending .fighter-countdown__unit,
	html.fighter-motion-pending .fighter-countdown__cta,
	html.fighter-motion-pending .fighter-refund__inner {
		opacity: 1 !important;
		visibility: visible !important;
	}

	html.fighter-motion-pending .fighter-hero .fighter-progress__fill {
		width: inherit;
	}

	.fighter-progress__fill.is-animated::after,
	.fighter-progress__track.is-live .fighter-progress__fill::after {
		animation: none !important;
		display: none;
	}

	.fighter-progress__track.is-live .fighter-progress__fill {
		animation: none !important;
		filter: none !important;
	}

	.fighter-motion-ready .fighter-program-card,
	.fighter-motion-ready .fighter-feature-card,
	.fighter-motion-ready .fighter-step-card,
	.fighter-motion-ready .fighter-review-card {
		will-change: auto;
	}
}