/**
 * Site-wide custom styles
 *
 * Design tokens (colors, font size presets) live in theme.json.
 * Typography utility classes below match Figma Design text styles.
 * Header, footer, and editor styles stay in their dedicated stylesheets.
 */

/* -------------------------------------------------------------------------
   Figma Design color aliases (optional shorthand for component CSS)
   ------------------------------------------------------------------------- */

:root {
	--color-teal: var(--wp--preset--color--teal);
	--color-teal-20: var(--wp--preset--color--teal-20);
	--color-teal-10: var(--wp--preset--color--teal-10);
	--color-teal-5: var(--wp--preset--color--teal-5);
	--color-white: var(--wp--preset--color--white);
	--color-white-80: var(--wp--preset--color--white-80);
	--color-gray-200: var(--wp--preset--color--gray-200);
	--color-gray-300: var(--wp--preset--color--gray-300);
	--color-gray-400: var(--wp--preset--color--gray-400);
	--color-gray-500: var(--wp--preset--color--gray-500);
	--color-dark-600: var(--wp--preset--color--dark-600);
	--color-dark-700: var(--wp--preset--color--dark-700);
	--color-dark-800: var(--wp--preset--color--dark-800);
	--color-dark-850: var(--wp--preset--color--dark-850);
	--color-dark-900: var(--wp--preset--color--dark-900);
	--color-border: var(--wp--preset--color--border-black-6);
	--gradient-bg-light: var(--wp--preset--gradient--bg-light);
	--gradient-bg-dark: var(--wp--preset--gradient--bg-dark);
	--gradient-bg-teal-glow: var(--wp--preset--gradient--bg-teal-glow);
	--gradient-bg-teal-radial: var(--wp--preset--gradient--bg-teal-radial);
	--gradient-heading-teal-fade: var(--wp--preset--gradient--heading-teal-fade);
	--gradient-heading-teal-fade-light: var(--wp--preset--gradient--heading-teal-fade-light);
	--gradient-card-surface: var(--wp--preset--gradient--card-surface);
	--gradient-button-filled: var(--wp--preset--gradient--button-filled);
	--shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

/* -------------------------------------------------------------------------
   Background gradients — Figma Design (dev mode)
   Available in the block editor via theme.json presets, or use these classes.
   ------------------------------------------------------------------------- */

.gm-bg-light {
	background: var(--wp--preset--gradient--bg-light);
}

.gm-bg-dark {
	background: var(--wp--preset--gradient--bg-dark);
	color: var(--wp--preset--color--white);
}

.gm-bg-teal-glow {
	background: var(--wp--preset--gradient--bg-teal-glow);
}

.gm-bg-teal-radial {
	background: var(--wp--preset--gradient--bg-teal-radial);
}

/**
 * Layer the teal glow over another background.
 * Example: class="gm-bg-light gm-bg-teal-glow--overlay"
 */
.gm-bg-teal-glow--overlay {
	background: var(--wp--preset--gradient--bg-teal-glow), var(--wp--preset--gradient--bg-light);
}

.gm-bg-teal-radial--overlay {
	background: var(--wp--preset--gradient--bg-teal-radial), var(--wp--preset--gradient--bg-light);
}

.gm-bg-dark.gm-bg-teal-glow--overlay {
	background: var(--wp--preset--gradient--bg-teal-glow), var(--wp--preset--gradient--bg-dark);
	color: var(--wp--preset--color--white);
}

.gm-bg-dark.gm-bg-teal-radial--overlay {
	background: var(--wp--preset--gradient--bg-teal-radial), var(--wp--preset--gradient--bg-dark);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   Teal glow blobs — Figma Design (1640 × 870 section reference)
   Combine with a background class, e.g.:
   class="gm-bg-light gm-bg-teal-glow--overlay gm-bg-teal-blobs"
   ------------------------------------------------------------------------- */

.gm-bg-teal-blobs {
	position: relative;
	isolation: isolate;
}

.gm-bg-teal-blobs::before,
.gm-bg-teal-blobs::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 384px;
	height: 384px;
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
}

/* Upper-right — teal 10% */
.gm-bg-teal-blobs::before {
	top: 80px;
	right: 40px;
	background: var(--wp--preset--color--teal-10, rgba(0, 161, 185, 0.10));
}

/* Lower-left — teal 5% */
.gm-bg-teal-blobs::after {
	bottom: 80px;
	left: 40px;
	background: var(--wp--preset--color--teal-5, rgba(0, 161, 185, 0.05));
}

.gm-bg-teal-blobs > * {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
   Columns block styles — Cards
   Columns → Styles → "Cards" | "Cards (dark)"
   ------------------------------------------------------------------------- */

.wp-block-columns.is-style-cards,
.wp-block-columns.is-style-cards-dark {
	align-items: stretch;
}

.wp-block-columns.is-style-cards,
.wp-block-columns.is-style-cards-dark {
	gap: 32px;
}

.wp-block-columns.is-style-cards > .wp-block-column {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--border-black-6, rgba(0, 0, 0, 0.06));
	background: var(--gradient-card-surface);
	box-shadow: var(--shadow-card);
	padding: 32px;
}

.wp-block-columns.is-style-cards-dark > .wp-block-column {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--border-black-6, rgba(0, 0, 0, 0.06));
	background: var(--wp--preset--color--dark-700, #1a1f28);
	box-shadow: var(--shadow-card);
	padding: 32px;
	color: var(--wp--preset--color--white, #ffffff);
}

/* -------------------------------------------------------------------------
   List block styles (unordered lists only)
   List → Styles → "Check list" | "Dot list" | "Dot list (dark)"
   ------------------------------------------------------------------------- */

ul.wp-block-list.is-style-check-teal,
ul.wp-block-list.is-style-dot-light,
ul.wp-block-list.is-style-dot-dark {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.wp-block-list.is-style-check-teal > li,
ul.wp-block-list.is-style-dot-light > li,
ul.wp-block-list.is-style-dot-dark > li {
	position: relative;
	box-sizing: border-box;
	min-height: 34px;
	padding-top: 14px;
	padding-bottom: 2px;
	padding-left: 32px;
	color: var(--wp--preset--color--gray-500, #64748b);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

ul.wp-block-list.is-style-check-teal > li::before,
ul.wp-block-list.is-style-dot-light > li::before,
ul.wp-block-list.is-style-dot-dark > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

ul.wp-block-list.is-style-check-teal > li::before {
	background-image: url("../images/list-marker-check.svg");
}

ul.wp-block-list.is-style-dot-light > li::before {
	background-image: url("../images/list-marker-dot-light.svg");
}

ul.wp-block-list.is-style-dot-dark > li::before {
	background-image: url("../images/list-marker-dot-dark.svg");
}

/* -------------------------------------------------------------------------
   Accordion block — FAQ layout & custom toggle icons
   ------------------------------------------------------------------------- */

.wp-block-accordion-item:not(.is-open) {
	min-height: 105px;
}

.wp-block-accordion-heading {
	margin: 0;
	font: inherit;
}

.wp-block-accordion-heading__toggle {
	gap: 16px;
	padding: 0;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	min-height: 0;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle-title {
	max-width: 660px;
	color: var(--wp--preset--color--dark-900, #0a0a0a);
	font-family: var(--wp--preset--font-family--heading, "Montserrat", sans-serif);
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	font-style: normal;
	font-weight: 600;
	line-height: 28px;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
	margin-block-start: 36px;
	padding: 0 !important;
}

.wp-block-accordion-panel {
	max-width: 660px;
	color: var(--wp--preset--color--gray-500, #64748b);
	font-family: var(--wp--preset--font-family--body, "Inter", sans-serif);
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

.wp-block-accordion-panel > :first-child {
	margin-block-start: 0;
}

.wp-block-accordion-panel > :last-child {
	margin-block-end: 0;
}

.wp-block-accordion-heading__toggle-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: url("../images/accordion-toggle-closed.svg") center / contain no-repeat;
	transform: none !important;
	transition: none !important;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	background-image: url("../images/accordion-toggle-open.svg");
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   Buttons — Figma Design (filled default, outlined via block style)
   Button → Styles → "Outline" for outlined variant
   ------------------------------------------------------------------------- */

.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-element-button:not(.is-style-outline) {
	padding: 16px 32px;
	border-radius: 16px;
	border: none;
	background: var(--gradient-button-filled);
	color: var(--wp--preset--color--white, #ffffff);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 16px 32px;
	border-radius: 16px;
	border: 2px solid var(--wp--preset--color--gray-200, #e5e5e5);
	background: var(--wp--preset--color--white, #ffffff);
	color: var(--wp--preset--color--dark-900, #0a0a0a);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
.wp-element-button:not(.is-style-outline):hover,
.wp-element-button:not(.is-style-outline):focus-visible {
	color: var(--wp--preset--color--white, #ffffff);
	filter: brightness(0.95);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--teal, #00a1b9);
	color: var(--wp--preset--color--dark-900, #0a0a0a);
}

/* -------------------------------------------------------------------------
   Gradient heading text — Figma Design
   Block styles (Heading → Styles):
     - "Teal gradient fade"        — dark text, for light backgrounds
     - "Teal gradient fade (light)" — light text, for dark backgrounds
   Utilities: .gm-type-heading-gradient / .gm-type-heading-gradient-light
   ------------------------------------------------------------------------- */

.is-style-gradient-teal-fade,
.is-style-gradient-teal-fade-light,
.gm-type-heading-gradient,
.gm-type-heading-gradient-light {
	display: block;
	width: fit-content;
	max-width: var(--wp--style--global--content-size, 760px);
	overflow: visible;
	padding-block-end: 0.12em;
	margin-block-end: -0.12em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.is-style-gradient-teal-fade,
.gm-type-heading-gradient {
	background-image: var(--gradient-heading-teal-fade);
}

.is-style-gradient-teal-fade-light,
.gm-type-heading-gradient-light {
	background-image: var(--gradient-heading-teal-fade-light);
}

.has-text-align-center:is(
	.is-style-gradient-teal-fade,
	.is-style-gradient-teal-fade-light,
	.gm-type-heading-gradient,
	.gm-type-heading-gradient-light
) {
	margin-inline: auto;
}

.has-text-align-right:is(
	.is-style-gradient-teal-fade,
	.is-style-gradient-teal-fade-light,
	.gm-type-heading-gradient,
	.gm-type-heading-gradient-light
) {
	margin-inline: auto 0;
}

/* Reset alignwide breakout when gradient is sized to text content. */
.alignwide.has-text-align-center:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light),
.gm-entry-content > .alignwide.has-text-align-center:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light) {
	width: fit-content;
	max-width: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 2rem));
	margin-left: auto;
	margin-right: auto;
	transform: none;
}

.alignwide.has-text-align-right:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light),
.gm-entry-content > .alignwide.has-text-align-right:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light) {
	width: fit-content;
	max-width: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 2rem));
	margin-left: auto;
	margin-right: 0;
	transform: none;
}

.alignwide.has-text-align-left:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light),
.gm-entry-content > .alignwide.has-text-align-left:is(.is-style-gradient-teal-fade, .is-style-gradient-teal-fade-light) {
	width: fit-content;
	max-width: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 2rem));
	margin-left: 0;
	margin-right: auto;
	transform: none;
}

/* -------------------------------------------------------------------------
   Typography utilities — Figma Design text styles
   Use when a block/section needs a variant other than the HTML default.
   ------------------------------------------------------------------------- */

/* Headings */

.gm-type-h1-black {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--96);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.gm-type-h1-semibold {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--96);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.gm-type-h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--60);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
}

.gm-type-h2-large {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--60);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0;
}

.gm-type-h3-bold {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--30);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.gm-type-h3-black {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--30);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
}

.gm-type-h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0;
}

.gm-type-h4-tight {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.025em;
}

.gm-type-h5 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--18);
	font-weight: 600;
	line-height: 1.556;
	letter-spacing: 0;
}

.gm-type-h6 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Display */

.gm-type-stat-number {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--36);
	font-weight: 900;
	line-height: 1.111;
	letter-spacing: 0;
}

.gm-type-step-number {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 900;
	line-height: 1.333;
	letter-spacing: 0;
}

/* Body */

.gm-type-lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0;
}

.gm-type-lead-bold {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0;
}

.gm-type-large {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--20);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
}

.gm-type-large-relaxed {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--20);
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0;
}

.gm-type-medium {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--18);
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0;
}

.gm-type-regular {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.gm-type-regular-relaxed {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0;
}

.gm-type-small {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0;
}

/* UI */

.gm-type-button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--18);
	font-weight: 600;
	line-height: 1.556;
	letter-spacing: 0;
}

.gm-type-nav-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}

.gm-type-label-semibold {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	line-height: 1.429;
	letter-spacing: 0;
}

.gm-type-label-bold {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 700;
	line-height: 1.429;
	letter-spacing: 0;
}

.gm-type-overline {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 700;
	line-height: 1.429;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Fluent forms — form stylesFigma Design text styles
   ------------------------------------------------------------------------- */

form.fluent_form_3 {
	max-width: 768px;
	margin-left: auto;
    margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

form.fluent_form_3 .ff-el-form-control {
	border-radius: 20px;
	border: 1px solid #2A3040;
	background: #1A1F28;
	color: var(--wp--preset--color--gray-400)
}

form.fluent_form_3 .ff-el-input--label{
	color: var(--wp--preset--color--gray-400);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
}

form.fluent_form_3 .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--wp--preset--color--gray-400);
    content: " *";
    margin-left: 3px;
}

form.fluent_form_3 .ff-btn-submit {
	padding: 16px 47.188px 16px 48px;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(90deg, #00A1B9 0%, #009EB6 10%, #009CB4 20%, #0099B1 30%, #0097AF 40%, #0094AC 50%, #0092AA 60%, #008FA7 70%, #008DA5 80%, #008AA2 90%, #0088A0 100%);
}

form.fluent_form_3 .ff-btn-submit:hover {
	border-color: var(--wp--preset--color--teal, #00a1b9);
	color: var(--wp--preset--color--dark-900, #0a0a0a);
}

form.fluent_form_3 .ff-el-form-control:focus {
    background-color: var(--wp--preset--color--white-80);
    border-color: var(--fluentform-primary);
    color: var(--wp--preset--color--dark-800);
    outline: none;
}