/*
 * Nova CTA Block — novafolio/cta
 * Token-first design via --nvf- CSS custom properties.
 * No hard-coded colors or sizes outside of fallback defaults.
 */

/* ========================================================================
   BASE
   ======================================================================== */

.nvf-cta {
	position: relative;
	width: 100%;
	max-width: var(--nvf-layout-max-width, 1440px);
	margin-inline: auto;
	box-sizing: border-box;
	font-family: var(--nvf-cta-font-family, inherit);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nvf-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--nvf-space-m, 1.5rem);
	width: 100%;
	max-width: var(--nvf-layout-wide-width, 1440px);
	margin-inline: auto;
	padding-inline: var(--nvf-space-l, 34px);
}

/* ========================================================================
   CONTENT SPACING (gap between elements)
   ======================================================================== */

.nvf-cta--gap-tight .nvf-cta__inner {
	gap: var(--nvf-cta-gap-tight, 0.5rem);
}

.nvf-cta--gap-normal .nvf-cta__inner {
	gap: var(--nvf-cta-gap-normal, 1.5rem);
}

.nvf-cta--gap-loose .nvf-cta__inner {
	gap: var(--nvf-cta-gap-loose, 3rem);
}

/* ========================================================================
   EYEBROW / TITLE / SUBTITLE
   ======================================================================== */

/* Specificity bump: .nvf-cta.nvf-cta (0,3,0) beats the Customizer
   typography rules generated by typography-css.php:
     :is(.entry-content, .nvf-prose, …) h2:not([class*="has-"]) → 0,2,1
     h2:not([class*="has-"]):not(.wp-block-heading)              → 0,2,1
   These set font-size + font-family + font-weight on ALL h2/p inside
   content areas. Doubling the parent class raises our specificity above
   theirs without using !important. */
.nvf-cta.nvf-cta .nvf-cta__eyebrow {
	display: block;
	font-size: var(--nvf-cta-eyebrow-fs, 0.75rem);
	font-weight: var(--nvf-cta-eyebrow-weight, 600);
	letter-spacing: var(--nvf-cta-eyebrow-ls, 0.12em);
	text-transform: var(--nvf-cta-eyebrow-transform, uppercase);
	color: var(--nvf-cta-eyebrow-color, var(--nvf-color-accent, #4F46E5));
	margin-bottom: calc(-1 * var(--nvf-space-xs, 4px));
}

.nvf-cta.nvf-cta .nvf-cta__title {
	margin: 0;
	font-size: var(--nvf-cta-title-size, clamp(1.6rem, 3.5vw, var(--nvf-h1-font-size, 2.375rem)));
	font-family: var(--nvf-cta-font-family, inherit);
	font-weight: var(--nvf-cta-title-weight, var(--nvf-headings-weight, 700));
	letter-spacing: var(--nvf-cta-title-ls, normal);
	text-transform: var(--nvf-cta-title-transform, none);
	line-height: var(--nvf-h2-line-height, 1.2);
	color: var(--nvf-cta-title-color, inherit);
}

.nvf-cta.nvf-cta .nvf-cta__subtitle {
	margin: 0;
	/* !important required: typography-css.php injects
	   :is(.entry-content,…) p:not([class*="has-"]){font-size:…!important}
	   which targets this <p> and cannot be beaten by specificity alone. */
	font-size: var(--nvf-cta-subtitle-size, var(--nvf-base-font-size, 1rem)) !important;
	font-family: var(--nvf-cta-font-family, inherit) !important;
	font-weight: var(--nvf-cta-subtitle-weight, normal);
	letter-spacing: var(--nvf-cta-subtitle-ls, normal);
	text-transform: var(--nvf-cta-subtitle-transform, none);
	line-height: var(--nvf-base-line-height, 1.6) !important;
	color: var(--nvf-cta-subtitle-color, inherit);
	opacity: 0.85;
}

/* ========================================================================
   ACTIONS
   ======================================================================== */

.nvf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nvf-space-s, 14px);
	align-items: center;
}

.nvf-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nvf-space-xs, 4px);
	padding: var(--nvf-btn-pad-y, 0.78rem) var(--nvf-btn-pad-x, 1.35rem);
	font-size: var(--nvf-small-font-size, 0.875rem);
	font-weight: var(--nvf-btn-font-weight, 600);
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--nvf-cta-btn-radius, var(--nvf-btn-radius, var(--nvf-radius-sm, 8px)));
	cursor: pointer;
	transition:
		background-color var(--nvf-transition-fast, 160ms ease),
		color var(--nvf-transition-fast, 160ms ease),
		border-color var(--nvf-transition-fast, 160ms ease),
		box-shadow var(--nvf-transition-fast, 160ms ease);
	white-space: nowrap;
}

/* Primary */
.nvf-cta__btn--primary {
	background-color: var(--nvf-cta-btn-bg, var(--nvf-btn-primary-bg, var(--nvf-color-accent, #4F46E5)));
	color: var(--nvf-cta-btn-text, var(--nvf-btn-primary-text, #fff));
	border-color: var(--nvf-cta-btn-bg, var(--nvf-btn-primary-bg, var(--nvf-color-accent, #4F46E5)));
}

.nvf-cta__btn--primary:hover,
.nvf-cta__btn--primary:focus-visible {
	background-color: var(--nvf-color-button-bg-hover, #0F172A);
	border-color: var(--nvf-color-button-bg-hover, #0F172A);
	color: var(--nvf-btn-primary-text, #fff);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 30%, transparent);
}

/* Secondary (ghost style) */
.nvf-cta__btn--secondary {
	background-color: transparent;
	color: var(--nvf-cta-btn-secondary-color, inherit);
	border-color: var(--nvf-cta-btn-secondary-color, currentColor);
	opacity: 0.8;
}

.nvf-cta__btn--secondary:hover,
.nvf-cta__btn--secondary:focus-visible {
	opacity: 1;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* Focus ring */
.nvf-cta__btn:focus-visible {
	outline: 3px solid var(--nvf-color-accent, #4F46E5);
	outline-offset: 2px;
}

/* ========================================================================
   ALIGNMENT: center (default)
   ======================================================================== */

.nvf-cta--align-center .nvf-cta__inner {
	align-items: center;
	text-align: center;
}

.nvf-cta--align-center .nvf-cta__actions {
	justify-content: center;
}

/* ========================================================================
   ALIGNMENT: left
   ======================================================================== */

.nvf-cta--align-left .nvf-cta__inner {
	align-items: flex-start;
	text-align: left;
}

/* ========================================================================
   ALIGNMENT: split  (text left / actions right)
   ======================================================================== */

.nvf-cta--align-split .nvf-cta__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: left;
}

.nvf-cta--align-split .nvf-cta__text-col {
	flex: 1 1 40%;
	min-width: 0;
}

.nvf-cta--align-split .nvf-cta__actions {
	flex-shrink: 0;
	justify-content: flex-end;
}

/* ========================================================================
   ACTIONS LAYOUT: stacked
   ======================================================================== */

.nvf-cta--actions-stacked .nvf-cta__actions {
	flex-direction: column;
	align-items: inherit;
}

.nvf-cta--actions-stacked .nvf-cta__btn {
	width: 100%;
	max-width: 24rem;
}

/* ========================================================================
   SPACING HELPERS — scoped to .nvf-cta
   Padding-based (internal spacing for bg blocks). Global margin-based
   .nvf-space-* lives in section.css / columns.css.
   ======================================================================== */

/* CTA uses padding (not margin) for spacing so the background extends
   into the space. !important needed to beat section.css’s
   .nvf-space-*{margin:…!important} utilities (specificity 0,1,0 +
   !important). With .nvf-cta prefix we have (0,2,0) + !important → wins. */
.nvf-cta.nvf-space-top-none    { padding-top: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-cta.nvf-space-top-xs      { padding-top: var(--nvf-space-xs, 8px) !important; margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-cta.nvf-space-top-s       { padding-top: var(--nvf-space-s, 14px) !important; margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-cta.nvf-space-top-m       { padding-top: var(--nvf-space-m, 22px) !important; margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-cta.nvf-space-top-l       { padding-top: var(--nvf-space-xl, 48px) !important; margin-top: 0 !important; margin-block-start: 0 !important; }
.nvf-cta.nvf-space-top-xl      { padding-top: calc(var(--nvf-space-xl, 48px) * 1.5) !important; margin-top: 0 !important; margin-block-start: 0 !important; }

.nvf-cta.nvf-space-bottom-none { padding-bottom: 0 !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-cta.nvf-space-bottom-xs   { padding-bottom: var(--nvf-space-xs, 8px) !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-cta.nvf-space-bottom-s    { padding-bottom: var(--nvf-space-s, 14px) !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-cta.nvf-space-bottom-m    { padding-bottom: var(--nvf-space-m, 22px) !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-cta.nvf-space-bottom-l    { padding-bottom: var(--nvf-space-xl, 48px) !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }
.nvf-cta.nvf-space-bottom-xl   { padding-bottom: calc(var(--nvf-space-xl, 48px) * 1.5) !important; margin-bottom: 0 !important; margin-block-end: 0 !important; }

/* ========================================================================
   BACKGROUNDS
   ======================================================================== */

/* none — transparent */
.nvf-cta--bg-none {
	background: transparent;
	color: var(--nvf-color-text, #1a1a1a);
}

/* soft — subtle tinted surface */
.nvf-cta--bg-soft {
	background-color: var(--nvf-color-accent-soft, #EEF2FF);
	color: var(--nvf-color-text, #1a1a1a);
}

/* accent — brand accent fill */
.nvf-cta--bg-accent {
	background-color: var(--nvf-color-accent, #4F46E5);
	color: var(--nvf-color-on-accent, #fff);
}

.nvf-cta.nvf-cta--bg-accent .nvf-cta__eyebrow {
	color: var(--nvf-cta-eyebrow-color, var(--nvf-color-on-accent, #fff));
	opacity: 0.7;
}

.nvf-cta--bg-accent .nvf-cta__btn--primary {
	background-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
	color: var(--nvf-cta-btn-text, var(--nvf-color-accent, #4F46E5));
	border-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
}

.nvf-cta--bg-accent .nvf-cta__btn--primary:hover,
.nvf-cta--bg-accent .nvf-cta__btn--primary:focus-visible {
	background-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
	color: var(--nvf-cta-btn-text, color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 80%, black));
	border-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
	filter: brightness(0.92);
}

.nvf-cta--bg-accent .nvf-cta__btn--secondary {
	color: var(--nvf-cta-btn-secondary-color, var(--nvf-color-on-accent, #fff));
}

/* dark — dark surface */
.nvf-cta--bg-dark {
	background-color: var(--nvf-color-ink-deep, #0F172A);
	color: var(--nvf-color-on-accent, #fff);
}

.nvf-cta.nvf-cta--bg-dark .nvf-cta__eyebrow {
	color: var(--nvf-cta-eyebrow-color, var(--nvf-color-accent, #4F46E5));
}

/* gradient — brand gradient */
.nvf-cta--bg-gradient {
	background: var(
		--nvf-gradient-brand,
		linear-gradient(135deg, color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 80%, black) 0%, var(--nvf-color-accent, #4F46E5) 100%)
	);
	color: var(--nvf-color-on-accent, #fff);
}

.nvf-cta.nvf-cta--bg-gradient .nvf-cta__eyebrow {
	color: var(--nvf-cta-eyebrow-color, var(--nvf-color-on-accent, #fff));
	opacity: 0.75;
}

.nvf-cta--bg-gradient .nvf-cta__btn--primary {
	background-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
	color: var(--nvf-cta-btn-text, var(--nvf-color-accent, #4F46E5));
	border-color: var(--nvf-cta-btn-bg, var(--nvf-color-on-accent, #fff));
}

.nvf-cta--bg-gradient .nvf-cta__btn--secondary {
	color: var(--nvf-cta-btn-secondary-color, var(--nvf-color-on-accent, #fff));
}

/* ========================================================================
   ROUNDED OVERRIDES
   ======================================================================== */

.nvf-cta--rounded-none .nvf-cta__btn  { border-radius: var(--nvf-cta-btn-radius, 0); }
.nvf-cta--rounded-sm   .nvf-cta__btn  { border-radius: var(--nvf-cta-btn-radius, var(--nvf-radius-sm, 8px)); }
.nvf-cta--rounded-md   .nvf-cta__btn  { border-radius: var(--nvf-cta-btn-radius, var(--nvf-radius-md, 12px)); }
.nvf-cta--rounded-lg   .nvf-cta__btn  { border-radius: var(--nvf-cta-btn-radius, var(--nvf-radius-lg, 16px)); }

/* ========================================================================
   BUTTON SIZES
   ======================================================================== */

.nvf-cta--btn-sm .nvf-cta__btn {
	padding: 0.55rem 1rem;
	font-size: 0.8125rem;
}

.nvf-cta--btn-md .nvf-cta__btn {
	padding: var(--nvf-btn-pad-y, 0.78rem) var(--nvf-btn-pad-x, 1.35rem);
	font-size: var(--nvf-small-font-size, 0.875rem);
}

.nvf-cta--btn-lg .nvf-cta__btn {
	padding: 1rem 2rem;
	font-size: 1rem;
}

/* ========================================================================
   BUTTON HOVER EFFECTS
   ======================================================================== */

/* Lift — shadow + translate */
.nvf-cta--hover-lift .nvf-cta__btn:hover,
.nvf-cta--hover-lift .nvf-cta__btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.nvf-cta--hover-lift .nvf-cta__btn {
	transition:
		background-color var(--nvf-transition-fast, 160ms ease),
		color var(--nvf-transition-fast, 160ms ease),
		border-color var(--nvf-transition-fast, 160ms ease),
		box-shadow 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
		transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Glow — accent glow ring */
.nvf-cta--hover-glow .nvf-cta__btn:hover,
.nvf-cta--hover-glow .nvf-cta__btn:focus-visible {
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--nvf-cta-btn-bg, var(--nvf-color-accent, #4F46E5)) 30%, transparent),
		0 0 20px color-mix(in srgb, var(--nvf-cta-btn-bg, var(--nvf-color-accent, #4F46E5)) 25%, transparent) !important;
}

/* Underline — animated underline */
.nvf-cta--hover-underline .nvf-cta__btn {
	position: relative;
}

.nvf-cta--hover-underline .nvf-cta__btn::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width 280ms ease, left 280ms ease;
}

.nvf-cta--hover-underline .nvf-cta__btn:hover::after,
.nvf-cta--hover-underline .nvf-cta__btn:focus-visible::after {
	width: 80%;
	left: 10%;
}

/* Text — color swap (bg becomes transparent, text takes accent) */
.nvf-cta--hover-text .nvf-cta__btn {
	transition:
		background-color 220ms ease,
		color 220ms ease,
		border-color 220ms ease;
}

.nvf-cta--hover-text .nvf-cta__btn:hover,
.nvf-cta--hover-text .nvf-cta__btn:focus-visible {
	background-color: transparent !important;
	color: var(--nvf-cta-btn-bg, var(--nvf-color-accent, #4F46E5)) !important;
	border-color: currentColor;
}

.nvf-cta--hover-text .nvf-cta__btn--secondary:hover,
.nvf-cta--hover-text .nvf-cta__btn--secondary:focus-visible {
	color: var(--nvf-cta-btn-secondary-color, var(--nvf-color-accent, #4F46E5)) !important;
}

/* ========================================================================
   BUTTON ICONS
   ======================================================================== */

.nvf-cta__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	transition: transform 280ms ease;
}

.nvf-cta__btn:hover .nvf-cta__icon,
.nvf-cta__btn:focus-visible .nvf-cta__icon {
	transform: translateX(3px);
}

/* ========================================================================
   CONTENT WIDTH
   ======================================================================== */

/* "Content (narrow)" — intentionally below --nvf-layout-content-width
   so the CTA text area is visibly narrower than the page container,
   creating a focused, centered feel for call-to-action copy.
   Customise the token --nvf-cta-content-max to adjust. */
.nvf-cta--width-content .nvf-cta__inner {
	max-width: var(--nvf-cta-content-max, 720px);
}

/* Outer wrapper width overrides — must beat the theme's
   :is(.entry-content,.nvf-prose)>[class*="wp-block-novafolio-"]:not(...) constraint rule.
   Both classes on the same element give specificity 0,2,0 > 0,1,0 of .nvf-cta. */
.nvf-cta.nvf-cta--width-wide {
	max-width: var(--nvf-layout-wide-width, 1440px);
	margin-inline: auto;
}

.nvf-cta.nvf-cta--width-full {
	max-width: none;
	margin-inline: 0;
	width: 100%;
}

/* Production-safe override: if only cta.css is deployed, the theme's inline
   content-width constraint can still win on the outer block wrapper. Use a
   direct-child selector plus !important so wide/full keep their intended width
   even before functions.php is redeployed. */
:is(.entry-content, .nvf-prose) > .wp-block-novafolio-cta.nvf-cta.nvf-cta--width-wide {
	max-width: var(--nvf-layout-wide-width, 1440px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
}

:is(.entry-content, .nvf-prose) > .wp-block-novafolio-cta.nvf-cta.nvf-cta--width-full {
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

.nvf-cta--width-wide .nvf-cta__inner {
	max-width: var(--nvf-layout-wide-width, 1440px);
}

.nvf-cta--width-full .nvf-cta__inner {
	max-width: none;
	padding-inline: 0;
}

/* ========================================================================
   IMAGE DE FOND
   ======================================================================== */

.nvf-cta--has-bg-img {
	position: relative;
	overflow: hidden;
}

.nvf-cta__bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}

.nvf-cta__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.nvf-cta--has-bg-img .nvf-cta__inner {
	position: relative;
	z-index: 2;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 768px) {
	.nvf-cta__inner {
		padding-inline: var(--nvf-space-m, 22px);
	}

	/* Split → stacked on mobile */
	.nvf-cta--align-split .nvf-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.nvf-cta--align-split .nvf-cta__actions {
		justify-content: flex-start;
	}

	/* Inline actions → wrap nicely */
	.nvf-cta--actions-inline .nvf-cta__actions {
		flex-direction: column;
		align-items: inherit;
	}

	.nvf-cta--actions-inline .nvf-cta__btn {
		width: 100%;
	}
}