/**
 * Global Styles - The Financial Frontier
 *
 * Design tokens from .skylit/figma/figma-tokens.json
 */

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

:root {
	/* === Colors (from figma-tokens.json - colors) === */
	--white-linear-gradient: #ffffff;
	--absolute-black-gradient: #050505;
	--obsidian-slate-gradient: #1a1a1a;
	--antique-white-lin-grad: #f5f3ee;

	/* === Colors (from figma-tokens.json - colorVariables) === */
	--absolute-black: #050505;
	--antique-white: #f5f3ee;
	--regal-gold: #c6a667;
	--graphite-gray: #3c3c3c;
	--federal-blue: #0d1a2b;
	--infrared-red: #b73030;
	--obsidian-slate: #1a1a1a;
	--white: #ffffff;
	--absolute-black-3: #05050508;
	--absolute-black-5: #0505050d;
	--absolute-black-10: #0505051a;
	--absolute-black-20: #05050533;
	--absolute-black-40: #05050566;
	--federal-blue-5: #0d1a2b0d;
	--obsidian-slate-5: #1a1a1a0d;
	--white-90: #ffffffe5;
	--white-70: #ffffffb2;
	--white-60: #ffffff99;
	--white-30: #ffffff4d;
	--white-20: #ffffff33;
	--white-10: #ffffff1a;
	--white-5: #ffffff0d;
	--black-0: #00000000;
	--graphite-gray-60: #3c3c3c99;
	--regal-gold-30: #c6a6674d;
	--regal-gold-10: #c6a6671a;
	--regal-gold-5: #c6a6670d;
	--antique-white-60: #f5f3ee99;
	--federal-gray: #374151;
	--misty-steel: #9ca3af;
	--slate-ash: #6b7280;

	/* Legacy color aliases for compatibility */
	--color-white: var(--white-linear-gradient);
	--color-near-black: var(--absolute-black-gradient);
	--color-dark: var(--obsidian-slate-gradient);
	--color-off-white: var(--antique-white-lin-grad);
	--color-gray-dark: var(--graphite-gray);
	--color-gray-muted: var(--misty-steel);
	--color-black: #000000;
	--color-blue: #33629a;
	--color-red: #ff394a;
	--color-red-dark: var(--infrared-red);

	/* === Typography (from figma-tokens.json) - fluid clamp() for viewport scaling === */
	/* H1: IBM Plex Serif Bold - fluid 24px→52px */
	--h1: clamp(1.5rem, 5vw + 1.25rem, 3.25rem);
	--h1-font-family: "IBM Plex Serif", serif;
	--h1-font-weight: 700;
	--h1-line-height: normal;

	/* Hero title: non-home hero sections only, max 48px (3rem) */
	--hero-title: clamp(1.25rem, 4vw + 1rem, 3rem);

	/* H2: fluid 22px→48px */
	--h2: clamp(1.375rem, 4vw + 1.25rem, 3rem);
	--h2-font-family: "IBM Plex Serif", serif;
	--h2-font-weight: 600;
	--h2-line-height: 1.2;

	/* H2 small: same voice as H2; fluid scale a step above --h3-small (~18px→24px) */
	--h2-small: clamp(1.125rem, 1.15vw + 0.92rem, 1.5rem);
	--h2-small-font-family: "IBM Plex Serif", serif;
	--h2-small-font-weight: 600;
	--h2-small-line-height: 1.2;

	/* H3: IBM Plex Serif Medium 32px - scales 24px→32px */
	--h3: clamp(1.125rem, 2.5vw + 0.9rem, 2rem);
	--h3-font-family: "IBM Plex Serif", serif;
	--h3-font-weight: 500;
	--h3-line-height: 1.5;

	/* H4: fluid 16px→18px (no 20px) */
	--h4: clamp(1rem, 1vw + 0.9rem, 1.125rem);
	--h4-font-family: "IBM Plex Serif", serif;
	--h4-font-weight: 700;

	/* H5: IBM Plex Serif Bold 16px - scales 14px→16px */
	--h5: clamp(0.88rem, 0.4vw + 0.75rem, 1rem);
	--h5-font-family: "IBM Plex Serif", serif;
	--h5-font-weight: 700;

	/* H6: IBM Plex Serif Bold 14px - scales 13px→14px */
	--h6: clamp(0.81rem, 0.2vw + 0.75rem, 0.88rem);
	--h6-font-family: "IBM Plex Serif", serif;
	--h6-font-weight: 700;

	/* Lead paragraph: stays 16px longer, only nears 20px on very large viewports (gentler slope) */
	--lead-paragraph: clamp(1rem, 0.15vw + 0.97rem, 1.25rem);
	--lead-paragraph-font-family: "Inter", sans-serif;
	--lead-paragraph-font-weight: 300;
	--lead-paragraph-line-height: 1.5;

	/* Body paragraph: 14px @320, ~16px @1280–2560, up to 20px on larger viewports */
	--body-paragraph: clamp(0.875rem, 0.21vw + 0.833rem, 1.25rem);
	--body-paragraph-font-family: "Inter", sans-serif;
	--body-paragraph-font-weight: 300;
	--body-paragraph-line-height: 1.5;

	/* Small paragraph: Inter Light 14px - scales 13px→14px */
	--small-paragraph: clamp(0.81rem, 0.2vw + 0.75rem, 0.88rem);
	--small-paragraph-font-family: "Inter", sans-serif;
	--small-paragraph-font-weight: 300;
	--small-paragraph-line-height: 1.5;

	/* Button text: Inter Medium 14px */
	--button-text: clamp(0.81rem, 0.2vw + 0.75rem, 0.88rem);
	--button-text-font-family: "Inter", sans-serif;
	--button-text-font-weight: 500;

	/* Card heading: IBM Plex Serif Bold - fluid 18px→24px */
	--card-heading: clamp(1.125rem, 1.5vw + 0.9rem, 1.5rem);
	--card-heading-font-family: "IBM Plex Serif", serif;
	--card-heading-font-weight: 700;

	/* Pull quote: Inter Italic - fluid 18px→24px */
	--pull-quote: clamp(1.125rem, 1.5vw + 0.9rem, 1.5rem);
	--pull-quote-font-family: "Inter", sans-serif;
	--pull-quote-font-style: italic;

	/* H3 small: fluid 16px→18px (no 20px) */
	--h3-small: clamp(1rem, 0.8vw + 0.9rem, 1.125rem);
	--h3-small-font-family: "IBM Plex Serif", serif;
	--h3-small-font-weight: 500;

	/* Card excerpt: Inter Light - fluid 14px→16px */
	--card-excerpt: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
	--card-excerpt-font-family: "Inter", sans-serif;
	--card-excerpt-font-weight: 300;
	--card-excerpt-line-height: 1.5;

	/* Card excerpt small: Inter Light - fluid 12px→14px */
	--card-excerpt-small: clamp(0.75rem, 0.5vw + 0.6rem, 0.88rem);

	/* Form label: IBM Plex Serif Bold 16px */
	--form-label: clamp(0.88rem, 0.4vw + 0.75rem, 1rem);
	--form-label-font-family: "IBM Plex Serif", serif;
	--form-label-font-weight: 700;

	/* Form placeholder: fluid 14px→17px */
	--form-placeholder: clamp(0.875rem, 0.5vw + 0.75rem, 1.0625rem);
	--form-placeholder-font-family: "Inter", sans-serif;
	--form-placeholder-font-weight: 300;

	/* Tag / utility span: Inter Light 12px (card tags, badges) */
	--tag-font-size: clamp(0.69rem, 0.15vw + 0.65rem, 0.75rem);
	--tag-font-family: "Inter", sans-serif;
	--tag-font-weight: 300;

	/* === Spacing - Gaps === */
	--gap-1: 1px;
	--gap-3: 3px;
	--gap-6: 6px;
	--gap-8: 8px;
	--gap-10: 10px;
	--gap-12: 12px;
	--gap-16: 16px;
	--gap-24: 24px;
	--gap-32: 32px;
	--gap-36: 36px;
	--gap-48: 48px;
	--gap-64: 64px;
	--gap-96: 96px;

	/* === Spacing - Padding === */
	--padding-1: 1px;
	--padding-6: 6px;
	--padding-8: 8px;
	--padding-10: 10px;
	--padding-12: 12px;
	--padding-14: 14px;
	--padding-16: 16px;
	--padding-20: 20px;
	--padding-24: 24px;
	--padding-32: 32px;
	--padding-48: 48px;
	--padding-64: 64px;
	--padding-80: 80px;
	--padding-96: 96px;
	--padding-128: 128px;
	--padding-256: 256px;

	/* === Layout - Container Widths === */
	--container-narrow: 688px;
	--container-standard: 1280px;
	--container-wide: 1440px;
	--container-max: 1920px;

	/* === Borders === */
	--border-width-1: 1px;
	--border-color-default: var(--absolute-black-gradient);
}

/* Shared separator - 1px, stretches to fill available space in flex containers */
.tff-separator {
	flex: 1 1 0;
	min-width: 0;
	height: 0;
	margin: 0;
	border: none;
	border-top: var(--border-width-1) solid var(--absolute-black-10);
	align-self: center;
}

/* Modifier: remove all borders on self and direct first child (wins over component longhands) */
.tff-no-border,
.tff-no-border > :first-child {
	border: 0 !important;
}

/* Modifier: flex column for self and direct first child (inner layout) */
.tff-inner-content,
.tff-inner-content > :first-child {
	display: flex;
	flex-direction: column;
	gap: var(--gap-48);
}

/* Modifier: full-width block capped at container-wide, vertical padding, infrared bottom rule */
.tff-padded-rule-wide {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--border-width-1) solid var(--infrared-red);
}

/*
 * Modifier: turn a ul into a 2-column grid of small cards (same fill/border idea as
 * .tff-digest-receive__card; tighter padding than --padding-24). Two columns at all breakpoints.
 * Markup: ul.tff-card-list > li > p
 * Long selector wins over .tff-pc-content .tff-pc-content__list defaults.
 * Left accent (3px): default --infrared-red; optional ul modifiers --border-black, --border-gold, --border-blue.
 */
ul.tff-card-list,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-16);
	list-style: none;
	margin: 0 0 var(--padding-16);
	padding: 0;
}

ul.tff-card-list > li,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list > li {
	margin: 0;
	padding: var(--padding-12);
	border: var(--border-width-1) solid var(--absolute-black-10);
	border-left: 3px solid var(--infrared-red);
	background: var(--antique-white-lin-grad);
	min-width: 0;
}

ul.tff-card-list > li > p,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list > li > p {
	margin: 0;
	font-family: var(--card-excerpt-font-family);
	font-size: var(--card-excerpt);
	font-weight: 500;
	line-height: var(--card-excerpt-line-height);
	color: var(--graphite-gray);
}

/* Left accent color on list cards (default: infrared red on li). Add one class on the ul. */
ul.tff-card-list.tff-card-list--border-black > li,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list.tff-card-list--border-black > li {
	border-left-color: var(--absolute-black-gradient);
}

ul.tff-card-list.tff-card-list--border-gold > li,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list.tff-card-list--border-gold > li {
	border-left-color: var(--regal-gold);
}

ul.tff-card-list.tff-card-list--border-blue > li,
.tff-pc-content .tff-pc-content__main ul.tff-pc-content__list.tff-card-list.tff-card-list--border-blue > li {
	border-left-color: var(--federal-blue);
}

/* ==========================================================================
   Homepage Styles
   ========================================================================== */

/* Header: legacy wrappers only — same glass + token border as synced header pattern */
.tff-header:not(.wp-block-skylit-atomic-header) {
	background-color: rgba(255, 255, 255, 0.2);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0.16) 28%,
		rgba(255, 255, 255, 0.42) 62%,
		rgba(255, 255, 255, 0.72) 100%
	);
	backdrop-filter: blur(30px) saturate(1.15);
	-webkit-backdrop-filter: blur(30px) saturate(1.15);
	border-bottom: var(--border-width-1) solid var(--obsidian-slate-5);
}

.tff-header__inner {
	gap: var(--gap-16);
}

.tff-header__logo a {
	font-family: var(--h4-font-family);
	font-size: var(--h4);
	font-weight: var(--h4-font-weight);
	color: var(--absolute-black-gradient);
	text-decoration: none;
}

.tff-header__nav .wp-block-navigation-item__content {
	font-family: var(--body-paragraph-font-family);
	font-size: var(--body-paragraph);
	font-weight: var(--body-paragraph-font-weight);
	color: var(--absolute-black-gradient);
}

/* Footer - text on dark bg: use typography vars + --white / --white-90 / --white-70 / --regal-gold */
.tff-footer {
	color: var(--white);
}
.tff-footer p {
	font-family: var(--small-paragraph-font-family);
	font-size: var(--small-paragraph);
	color: var(--white-90);
}

.tff-homepage {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
}

/* Base section & container */
.tff-section {
	width: 100%;
}

.tff-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding-left: var(--padding-24);
	padding-right: var(--padding-24);
}

/* Smooth scroll for in-page anchor links (href="#id") */
html {
	scroll-behavior: smooth;
}
/* Offset so id targets aren’t hidden under sticky headers */
[id] {
	scroll-margin-top: 1rem;
}

/* ==========================================================================
   Global link styles
   (Underline pseudo-element animation; opt-out for button-like links)
   ========================================================================== */
p a:not(.tff-btn):not(.wp-element-button) {
	color: var(--absolute-black-gradient);
	text-decoration: none;
	position: relative;
	font-weight: 500;
}

p a:not(.tff-btn):not(.wp-element-button)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 0;
	border-bottom: var(--border-width-1) solid var(--infrared-red);
	transition: bottom 0.2s ease;
}

p a:not(.tff-btn):not(.wp-element-button):hover::after {
	bottom: 0;
}

p a:not(.tff-btn):not(.wp-element-button):focus-visible {
	outline: 2px solid var(--regal-gold-30);
	outline-offset: 2px;
	border-radius: 2px;
}

a.tff-digest-receive__read-more.tff-grid-card__link {
	color: var(--absolute-black-gradient);
	text-decoration: none;
	position: relative;
	font-weight: 500;
	box-shadow: none;
}

a.tff-digest-receive__read-more.tff-grid-card__link:hover,
a.tff-digest-receive__read-more.tff-grid-card__link:visited,
a.tff-digest-receive__read-more.tff-grid-card__link:active {
	color: var(--absolute-black-gradient);
	text-decoration: none;
}

a.tff-digest-receive__read-more.tff-grid-card__link:focus-visible {
	outline: 2px solid var(--regal-gold-30);
	outline-offset: 2px;
	border-radius: 2px;
}

a.tff-digest-receive__read-more.tff-grid-card__link .tff-grid-card__link-text {
	position: relative;
}

a.tff-digest-receive__read-more.tff-grid-card__link .tff-grid-card__link-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: var(--border-width-1);
	background: var(--infrared-red);
	opacity: 0;
	transition: opacity 0.2s ease;
}

a.tff-digest-receive__read-more.tff-grid-card__link:hover .tff-grid-card__link-text::after,
.tff-digest-receive__card:hover .tff-grid-card__link-text::after {
	opacity: 1;
}

/* Hero title: default for non-home hero sections (max 48px). Home overrides with larger size. */
.tff-hero__title {
	font-family: var(--h1-font-family);
	font-size: var(--hero-title);
	font-weight: var(--h1-font-weight);
	line-height: var(--h1-line-height);
	color: var(--absolute-black-gradient);
	margin: 0;
}

/* Tags list: reusable (cards, hero). ul with li > span, comma-separated. */
.tff-card__tags {
	font-family: var(--tag-font-family);
	font-size: var(--tag-font-size);
	font-weight: 200;
	font-style: normal;
	color: var(--absolute-black-gradient);
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.tff-card__tags li + li::before {
	content: ", ";
}

/* ==========================================================================
   Section header (reusable: podcast, resources, etc.)
   ========================================================================== */

.tff-section-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap-16);
	align-items: flex-start;
	min-width: 0;
	padding: var(--padding-24);
}

@media (min-width: 960px) {
	.tff-section-header__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--gap-48);
		flex-wrap: nowrap;
		padding-top: var(--padding-96);
		padding-bottom: var(--padding-48);
	}

	.tff-section-header__inner .tff-separator {
		flex: 0 0 auto;
		width: 0;
		height: auto;
		min-width: 0;
		align-self: stretch;
		border-top: none;
		border-left: var(--border-width-1) solid var(--absolute-black-10);
	}

	.tff-section-header__title-group,
	.tff-section-header__title:first-child {
		flex: 2 1 0;
		min-width: 0;
	}

	.tff-section-header__description {
		flex: 2 1 0;
		min-width: 0;
		max-width: none;
	}
}

.tff-section-header__title {
	font-family: var(--h2-font-family);
	font-size: var(--h2);
	font-weight: var(--h2-font-weight);
	line-height: var(--h2-line-height);
	color: var(--absolute-black-gradient);
	margin: 0;
}

/* Modifier: subsection title using --h2-small* tokens */
.tff-h2-small {
	font-family: var(--h2-small-font-family);
	font-size: var(--h2-small);
	font-weight: var(--h2-small-font-weight);
	line-height: var(--h2-small-line-height);
	color: var(--absolute-black-gradient);
	margin: 0;
}

.tff-section-header__tagline {
	font-family: var(--h4-font-family);
	font-size: var(--h4);
	font-weight: var(--h4-font-weight);
	color: var(--absolute-black-gradient);
	margin: var(--padding-24) 0 0;
}

.tff-section-header__description {
	font-family: var(--lead-paragraph-font-family);
	font-size: var(--lead-paragraph);
	font-weight: var(--lead-paragraph-font-weight);
	line-height: var(--lead-paragraph-line-height);
	color: var(--absolute-black-gradient);
	margin: 0;
	max-width: 532px;
	min-width: 0;
}

@media (min-width: 960px) {
	.tff-section-header__description {
		max-width: none;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.tff-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	object-fit: contain;
}

.tff-btn__icon svg {
	width: 1.25em;
	height: 1.25em;
}

.tff-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gap-10);
	width: fit-content;
	min-width: fit-content;
	padding: var(--padding-16) var(--padding-24);
	white-space: nowrap;
	font-family: var(--button-text-font-family);
	font-size: var(--button-text);
	font-weight: var(--button-text-font-weight);
	text-decoration: none;
	border: var(--border-width-1) solid transparent;
	cursor: pointer;
	transition:
		opacity 0.2s,
		background 0.2s;
	overflow: hidden;
}

.tff-btn:hover {
	opacity: 0.9;
}

.tff-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 0;
	border-bottom: var(--border-width-1) solid var(--regal-gold);
	transition: bottom 0.2s ease;
}

.tff-btn:hover::after {
	bottom: 12px;
}

.tff-btn--dark {
	background: var(--obsidian-slate);
	color: var(--white-linear-gradient);
	border: var(--border-width-1) solid var(--absolute-black-20);
}

.tff-btn--dark:hover::after {
	bottom: 14px;
}

.tff-btn--dark:hover {
	opacity: 1;
}

.tff-btn--light {
	background: var(--white-linear-gradient);
	color: var(--absolute-black-gradient);
	border-color: var(--absolute-black-gradient);
}

.tff-btn--white {
	background: var(--white-linear-gradient);
	color: var(--absolute-black-gradient);
	border-color: var(--white-linear-gradient);
}

.tff-btn--white:hover {
	opacity: 1;
	background: var(--white-linear-gradient);
}

/* Outline button - global styles only, used by hero and all sections */
.tff-btn--outline {
	background: var(--antique-white-60);
	color: var(--absolute-black-gradient);
	border: var(--border-width-1) solid var(--absolute-black-20);
}

.tff-btn--outline::after {
	border-bottom-color: var(--infrared-red);
}

.tff-btn--outline:hover {
	background: var(--antique-white);
}

/* Button groups - adjacent buttons share border */
.tff-btn + .tff-btn {
	margin-left: -1px;
}

/* Viewport-controlled animations: paused until section is in view */
.tff-section .tff-hero__visual-scroll,
.tff-section .tff-edge-scroll img,
.tff-section .tff-work-cta__strip-inner,
.tff-section .tff-main-cta__strip-inner {
	animation-play-state: paused;
}
.tff-section.tff-in-view .tff-hero__visual-scroll,
.tff-section.tff-in-view .tff-edge-scroll img,
.tff-section.tff-in-view .tff-work-cta__strip-inner,
.tff-section.tff-in-view .tff-main-cta__strip-inner {
	animation-play-state: running;
}

/* Atomic / theme CSS can reset position and break translateY on edge-scroll strips */
.tff-section .tff-edge-scroll img {
	position: relative !important;
}

/* ==========================================================================
   Fluent Forms — shared TFF layout scope
   Newsletter (.tff-newsletter__form), contact/advisory (same class), sponsorship
   (.tff-sp-inquiry-form__body). All [fluentform] instances get identical field + button UI.
   Plugin custom CSS (.wpf_has_custom_css) is overridden on submit buttons via !important.
   ========================================================================== */
.tff-newsletter__form,
.tff-sp-inquiry-form__body {
	display: flex;
	flex-direction: column;
}

.tff-newsletter__form p,
.tff-sp-inquiry-form__body p {
	margin: 0;
}

.tff-newsletter__form .fluentform,
.tff-newsletter__form [class^="fluentform_wrapper_"],
.tff-newsletter__form .ffs_default_wrap,
.tff-sp-inquiry-form__body .fluentform,
.tff-sp-inquiry-form__body [class^="fluentform_wrapper_"],
.tff-sp-inquiry-form__body .ffs_default_wrap {
	width: 100%;
	margin: 0;
}

.tff-newsletter__form form.frm-fluent-form,
.tff-sp-inquiry-form__body form.frm-fluent-form {
	width: 100%;
	margin: 0;
}

.tff-newsletter__form .ff-el-form-control,
.tff-newsletter__form .ff-el-form-control[type="text"],
.tff-newsletter__form .ff-el-form-control[type="email"],
.tff-newsletter__form .ff-el-form-control[type="tel"],
.tff-newsletter__form .ff-el-form-control textarea,
.tff-sp-inquiry-form__body .ff-el-form-control,
.tff-sp-inquiry-form__body .ff-el-form-control[type="text"],
.tff-sp-inquiry-form__body .ff-el-form-control[type="email"],
.tff-sp-inquiry-form__body .ff-el-form-control[type="tel"],
.tff-sp-inquiry-form__body .ff-el-form-control textarea {
	width: 100%;
	padding: var(--padding-16) var(--padding-24);
	font-family: var(--form-placeholder-font-family);
	font-size: var(--form-placeholder);
	font-weight: var(--form-placeholder-font-weight);
	color: var(--antique-white-lin-grad);
	background: var(--white-10);
	border: 0;
	border-bottom: var(--border-width-1) solid var(--white-20);
	border-radius: 2px;
	box-shadow: none;
	outline: none;
	resize: vertical;
	box-sizing: border-box;
}

.tff-newsletter__form .ff-el-form-control:focus,
.tff-sp-inquiry-form__body .ff-el-form-control:focus {
	border-bottom-color: var(--regal-gold);
}

.tff-newsletter__form .ff-el-form-control::placeholder,
.tff-sp-inquiry-form__body .ff-el-form-control::placeholder {
	color: var(--color-gray-muted);
}

.tff-newsletter__form .ff-el-input--label label,
.tff-sp-inquiry-form__body .ff-el-input--label label {
	font-family: var(--form-label-font-family);
	font-size: var(--form-label);
	font-weight: var(--form-label-font-weight);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--regal-gold);
}

.tff-newsletter__form .ff-el-group,
.tff-sp-inquiry-form__body .ff-el-group {
	display: flex;
	flex-direction: column;
	gap: var(--gap-8);
	width: 100%;
	margin-bottom: 0;
}

.tff-newsletter__form .ff-el-input--content,
.tff-sp-inquiry-form__body .ff-el-input--content {
	width: 100%;
}

/* 2-column rows: stack on mobile, side-by-side on desktop */
.tff-newsletter__form .ff-column-container,
.tff-sp-inquiry-form__body .ff-column-container {
	display: flex;
	flex-direction: column;
	gap: var(--gap-24);
}

.tff-newsletter__form .ff-t-cell,
.tff-sp-inquiry-form__body .ff-t-cell {
	flex: 1 1 100%;
	min-width: 0;
	width: 100%;
}

@media (min-width: 480px) {
	.tff-newsletter__form .ff-column-container,
	.tff-sp-inquiry-form__body .ff-column-container {
		flex-direction: row;
	}

	.tff-newsletter__form .ff-t-cell,
	.tff-sp-inquiry-form__body .ff-t-cell {
		flex: 1 1 0;
	}
}

/* Select / dropdown fields */
.tff-newsletter__form .ff-el-form-control[type="select"],
.tff-newsletter__form select.ff-el-form-control,
.tff-sp-inquiry-form__body .ff-el-form-control[type="select"],
.tff-sp-inquiry-form__body select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 2px;
}

/* Textarea */
.tff-newsletter__form textarea.ff-el-form-control,
.tff-sp-inquiry-form__body textarea.ff-el-form-control {
	min-height: 120px;
	border-radius: 2px;
}

/* Checkbox / radio labels */
.tff-newsletter__form .ff-el-form-check label,
.tff-sp-inquiry-form__body .ff-el-form-check label {
	font-family: var(--body-paragraph-font-family);
	font-size: var(--body-paragraph);
	font-weight: var(--body-paragraph-font-weight);
	color: var(--antique-white-lin-grad);
}

/* Submit: high specificity + !important beats Fluent “Custom CSS” (.wpf_has_custom_css) */
.tff-newsletter__form form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit,
.tff-newsletter__form form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css,
.tff-newsletter__form .ff-btn-submit,
.tff-sp-inquiry-form__body .ff-btn-submit {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-direction: row-reverse;
	gap: var(--gap-10);
	width: 100% !important;
	min-width: 0 !important;
	padding: var(--padding-16) var(--padding-24) !important;
	font-family: var(--button-text-font-family) !important;
	font-size: var(--button-text) !important;
	font-weight: var(--button-text-font-weight) !important;
	text-decoration: none !important;
	cursor: pointer;
	background: var(--white-linear-gradient) !important;
	background-color: var(--white-linear-gradient) !important;
	color: var(--absolute-black-gradient) !important;
	border: var(--border-width-1) solid var(--white-linear-gradient) !important;
	border-color: var(--white-linear-gradient) !important;
	border-radius: 2px;
	transition: opacity 0.2s ease, background 0.2s ease;
	overflow: hidden;
}

.tff-newsletter__form .ff_submit_btn_wrapper_custom,
.tff-newsletter__form .ff_submit_btn_wrapper,
.tff-sp-inquiry-form__body .ff_submit_btn_wrapper_custom,
.tff-sp-inquiry-form__body .ff_submit_btn_wrapper {
	width: 100%;
}

.tff-newsletter__form form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit:hover,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit:hover,
.tff-newsletter__form form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css:hover,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css:hover,
.tff-newsletter__form .ff-btn-submit:hover,
.tff-sp-inquiry-form__body .ff-btn-submit:hover {
	opacity: 0.9;
	background: var(--white-linear-gradient) !important;
	background-color: var(--white-linear-gradient) !important;
	color: var(--absolute-black-gradient) !important;
	border-color: var(--white-linear-gradient) !important;
}

/* Underline animation matching .tff-btn (same selectors as submit so Custom CSS cannot drop it) */
.tff-newsletter__form form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit::after,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit::after,
.tff-newsletter__form form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css::after,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css::after,
.tff-newsletter__form .ff-btn-submit::after,
.tff-sp-inquiry-form__body .ff-btn-submit::after {
	content: "" !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 0;
	border-bottom: var(--border-width-1) solid var(--regal-gold);
	transition: bottom 0.2s ease;
}

.tff-newsletter__form form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit:hover::after,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit:hover::after,
.tff-newsletter__form form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css:hover::after,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css:hover::after,
.tff-newsletter__form .ff-btn-submit:hover::after,
.tff-sp-inquiry-form__body .ff-btn-submit:hover::after {
	bottom: 12px;
}

/* Arrow icon — must mirror high-specificity submit selectors or Fluent overrides hide it */
.tff-newsletter__form form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit::before,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .wpf_has_custom_css.ff-btn-submit::before,
.tff-newsletter__form form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css::before,
.tff-sp-inquiry-form__body form[class*="fluent_form"] .ff-btn-submit.wpf_has_custom_css::before,
.tff-newsletter__form .ff-btn-submit::before,
.tff-sp-inquiry-form__body .ff-btn-submit::before {
	content: "" !important;
	width: 1.25em !important;
	height: 1.25em !important;
	flex-shrink: 0;
	background: url("/wp-content/uploads/2026/02/arrow-right.svg") center/contain
		no-repeat !important;
	background-image: url("/wp-content/uploads/2026/02/arrow-right.svg") !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* Step navigation buttons (multi-step forms) */
.tff-newsletter__form .step-nav .ff-btn,
.tff-sp-inquiry-form__body .step-nav .ff-btn {
	font-family: var(--button-text-font-family);
	font-size: var(--button-text);
	font-weight: var(--button-text-font-weight);
	padding: var(--padding-16) var(--padding-24);
	border-radius: 2px;
	cursor: pointer;
}

.tff-newsletter__form .ff-errors-in-stack,
.tff-sp-inquiry-form__body .ff-errors-in-stack {
	color: var(--color-red-dark);
	font-family: var(--small-paragraph-font-family);
	font-size: var(--small-paragraph);
	margin: var(--gap-8) 0 0;
}

/* Success message */
.tff-newsletter__form .ff-message-success,
.tff-sp-inquiry-form__body .ff-message-success {
	font-family: var(--lead-paragraph-font-family);
	font-size: var(--lead-paragraph);
	font-weight: var(--lead-paragraph-font-weight);
	color: var(--antique-white-lin-grad);
}

/* Disclaimer styling under Fluent forms */
.tff-newsletter__disclaimer {
	font-family: var(--small-paragraph-font-family);
	font-size: var(--small-paragraph);
	font-weight: var(--small-paragraph-font-weight);
	color: var(--color-gray-muted);
	text-align: center;
	margin: 0;
}

/* Resource grid (home resources section + TFF Resource Grid block) */
.tff-resources__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-48);
	width: 100%;
	max-width: 1400px;
}

@media (min-width: 640px) {
	.tff-resources__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Row / hub cards: 4-line excerpts.
	 * !important beats synced-pattern inline CSS and equal-specificity pattern sheets.
	 */
	.tff-resources .tff-grid-card__excerpt,
	.tff-resources-hub .tff-grid-card__excerpt,
	.tff-resources-hub__grid .tff-grid-card__excerpt {
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 4 !important;
		line-clamp: 4 !important;
		overflow: hidden !important;
	}
}

/* Whole-card <a.tff-grid-card> must not pick up theme.json / UA link underline. */
a.tff-grid-card,
a.tff-grid-card:link,
a.tff-grid-card:hover,
a.tff-grid-card:focus,
a.tff-grid-card:focus-visible,
a.tff-grid-card:visited,
a.tff-grid-card:active {
	color: inherit !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	box-shadow: none !important;
}

a.tff-grid-card .tff-grid-card__title,
a.tff-grid-card .tff-grid-card__excerpt,
a.tff-grid-card .tff-grid-card__link,
a.tff-grid-card .tff-grid-card__link-text {
	text-decoration: none !important;
	text-decoration-line: none !important;
	box-shadow: none !important;
}

.tff-image-fit .tff-about-background__image-placeholder img {
	object-fit: contain !important;
	object-position: center !important;
}

/* Title attribute hook — no instance class needed. Override pattern cover/top. */
img[title="tff-logo-fit"] {
	object-fit: contain !important;
	object-position: center !important;
}

@media (min-width: 960px) {
	section.tff-auto-grid .tff-about-platform__grid {
		/* Cap at 3 columns on wide viewports: min track is max(300px, ⅓ row minus gutters). */
		grid-template-columns: repeat(
			auto-fit,
			minmax(max(300px, calc((100% - 2 * var(--gap-48)) / 3)), 1fr)
		);
	}
}