/* ==========================================================================
   VIC Theme — Button system (.vic-button)

   One structure, driven by custom properties. Variants and motions only set
   variables or add one pseudo-element; nothing is duplicated per variant.

   Works in two places with the same rules:
     1. Theme markup:      <a class="vic-button vic-button--outline vic-button--motion-fill">
     2. Elementor Button:  options are prefix classes on the widget wrapper
                           (.vic-button-wrap--*, .vic-button-motion--*, …), so the
                           editor preview updates instantly. Never tied to element IDs.

   Default style + Default motion = the existing VIC primary button (blue,
   48px, 8px radius) — existing buttons keep their look. Default motions per
   style: default/solid/outline → Fill Sweep · ghost → Lift ·
   underline → Underline Reveal · text → Arrow Shift.

   Per-widget colours set in Elementor's Style tab still win (higher specificity).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables. "Brand" colours are read with fallbacks so a dark section can
      redefine them once for every button inside it.
   -------------------------------------------------------------------------- */
:is(.vic-button, .elementor-widget-button) {
	--vic-button-bg: var(--vic-button-brand, var(--vic-blue));
	--vic-button-text: var(--vic-button-on-brand, var(--color-on-dark));
	--vic-button-border: var(--vic-button-brand, var(--vic-blue));
	--vic-button-hover-bg: var(--vic-button-brand-dark, var(--vic-blue-dark));
	--vic-button-hover-text: var(--vic-button-on-brand, var(--color-on-dark));
	--vic-button-hover-border: var(--vic-button-brand-dark, var(--vic-blue-dark));
	--vic-button-radius: var(--radius-control);
	--vic-button-height: var(--button-height);
	--vic-button-padding-x: var(--button-pad-x);
	--vic-button-font-size: var(--text-button-size);
	--vic-button-duration: var(--motion-default);
	--vic-button-easing: var(--ease-standard);
	--vic-button-origin: left center;
	--vic-button-underline-color: currentColor;
	--vic-button-underline-start: 0;
}

/* Dark backgrounds (.surface-dark / .on-dark): white becomes the "brand". */
:is(.surface-dark, .on-dark) {
	--vic-button-brand: var(--color-on-dark);
	--vic-button-brand-dark: var(--color-surface-muted);
	--vic-button-on-brand: var(--vic-blue);
	--vic-button-tint: rgba(255, 255, 255, 0.08);
	--vic-button-surface: transparent;
}

/* --------------------------------------------------------------------------
   2. Variants (only variables).
   -------------------------------------------------------------------------- */
/* Solid = Default. */

:is(.vic-button--outline, .vic-button-wrap--outline) {
	--vic-button-bg: transparent;
	--vic-button-text: var(--vic-button-brand, var(--vic-blue));
	--vic-button-border: var(--vic-button-brand, var(--vic-blue));
	--vic-button-hover-bg: var(--vic-button-brand, var(--vic-blue));
	--vic-button-hover-border: var(--vic-button-brand, var(--vic-blue));
}

:is(.vic-button--ghost, .vic-button-wrap--ghost) {
	--vic-button-bg: transparent;
	--vic-button-text: var(--vic-button-brand, var(--vic-blue));
	--vic-button-border: transparent;
	--vic-button-hover-bg: var(--vic-button-tint, rgba(0, 60, 127, 0.06));
	--vic-button-hover-text: var(--vic-button-brand, var(--vic-blue));
	--vic-button-hover-border: transparent;
	--vic-button-padding-x: var(--space-4);
}

:is(.vic-button--underline, .vic-button-wrap--underline, .vic-button--text, .vic-button-wrap--text) {
	--vic-button-bg: transparent;
	--vic-button-text: var(--vic-button-brand, var(--vic-blue));
	--vic-button-border: transparent;
	--vic-button-hover-bg: transparent;
	--vic-button-hover-text: var(--vic-button-brand-dark, var(--vic-blue-dark));
	--vic-button-hover-border: transparent;
	--vic-button-radius: 0;
	--vic-button-padding-x: 0;
	--vic-button-height: var(--touch-target);
}

:is(.vic-button--underline, .vic-button-wrap--underline) {
	--vic-button-underline-color: var(--vic-orange);
	--vic-button-underline-start: 0.3;
}

/* Legacy CSS classes from Stage 4 (Advanced → CSS Classes) keep their look. */
.vic-button-secondary {
	--vic-button-bg: var(--vic-button-surface, var(--color-background));
	--vic-button-text: var(--vic-button-brand, var(--vic-blue));
	--vic-button-hover-bg: var(--vic-button-tint, var(--color-surface-soft));
	--vic-button-hover-text: var(--vic-button-brand, var(--vic-blue-dark));
}

/* Sizes. Medium (48px) is the default. */
:is(.vic-button--small, .vic-button-size--small) {
	--vic-button-height: var(--button-height-sm);
	--vic-button-padding-x: var(--space-4);
	--vic-button-font-size: var(--text-body-sm-size);
}

:is(.vic-button--large, .vic-button-size--large, .vic-button-large) {
	--vic-button-height: var(--button-height-lg);
	--vic-button-padding-x: var(--space-7);
	--vic-button-font-size: var(--text-body-size);
}

/* Motion speed + direction. */
:is(.vic-button--speed-fast, .vic-button-speed--fast) { --vic-button-duration: var(--motion-fast); }
:is(.vic-button--speed-slow, .vic-button-speed--slow) { --vic-button-duration: var(--motion-slow); }
:is(.vic-button--dir-rtl, .vic-button-direction--rtl) { --vic-button-origin: right center; }
:is(.vic-button--dir-center, .vic-button-direction--center) { --vic-button-origin: center; }

/* --------------------------------------------------------------------------
   3. Structure (the button element itself).
   -------------------------------------------------------------------------- */
:is(.vic-button, .elementor-widget-button a.elementor-button, .elementor-widget-button button.elementor-button) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-icon);
	min-height: var(--vic-button-height);
	padding: 0 var(--vic-button-padding-x);
	border: 1px solid var(--vic-button-border);
	border-radius: var(--vic-button-radius);
	background-color: var(--vic-button-bg);
	color: var(--vic-button-text);
	fill: currentColor;
	font-family: inherit;
	font-size: var(--vic-button-font-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-button-line);
	text-align: center;
	text-decoration: none;
	transition:
		color var(--vic-button-duration) var(--vic-button-easing),
		background-color var(--vic-button-duration) var(--vic-button-easing),
		border-color var(--vic-button-duration) var(--vic-button-easing),
		box-shadow var(--vic-button-duration) var(--vic-button-easing),
		transform var(--vic-button-duration) var(--vic-button-easing);
}

/* Content stays above animated layers. */
:is(.vic-button, .elementor-widget-button .elementor-button) > * {
	position: relative;
	z-index: 1;
}

/* Hover and keyboard focus share the same visual state. */
:is(.vic-button, .elementor-widget-button a.elementor-button, .elementor-widget-button button.elementor-button):is(:hover, :focus-visible) {
	border-color: var(--vic-button-hover-border);
	background-color: var(--vic-button-hover-bg);
	color: var(--vic-button-hover-text);
	text-decoration: none;
}

/* Focus ring: the theme's 2px VIC-blue ring (white on dark surfaces). */
:is(.vic-button, .elementor-widget-button .elementor-button):focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Icons: one size, and the same span names for theme + Elementor markup. */
:is(.vic-button .icon, .elementor-widget-button .elementor-button-icon) {
	transition:
		transform var(--vic-button-duration) var(--vic-button-easing),
		opacity var(--vic-button-duration) var(--vic-button-easing);
}

/* Icons chosen in an Elementor icon picker (components/button 'icon_html'):
   SVG or font icon, sized like the theme's own icons. */
.vic-button__icon {
	display: inline-grid;
	place-items: center;
	stroke: none;
	font-size: var(--icon-sm);
	line-height: 1;
}

.vic-button__icon svg {
	width: 100%;
	height: 100%;
}

.vic-button__icon .e-font-icon-svg {
	fill: currentColor; /* Font Awesome as SVG; uploaded SVGs keep their own fill/stroke */
}

/* --------------------------------------------------------------------------
   4. Motions.

   Selector shape for each motion:
     .vic-button--motion-X                               theme markup
     .vic-button-motion--X .elementor-button             Elementor, chosen
     .vic-button-motion--default.<style> .elementor-button  Elementor, Default
   -------------------------------------------------------------------------- */

/* Fill Sweep: a pseudo-element scales in (transform only — never width). */
:is(
	.vic-button--motion-fill,
	.vic-button-motion--fill .elementor-button,
	.vic-button-motion--default:is(.vic-button-wrap--default, .vic-button-wrap--solid, .vic-button-wrap--outline) .elementor-button
)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--vic-button-hover-bg);
	transform: scaleX(0);
	transform-origin: var(--vic-button-origin);
	transition: transform var(--vic-button-duration) var(--vic-button-easing);
	pointer-events: none;
}

:is(
	.vic-button--motion-fill,
	.vic-button-motion--fill .elementor-button,
	.vic-button-motion--default:is(.vic-button-wrap--default, .vic-button-wrap--solid, .vic-button-wrap--outline) .elementor-button
):is(:hover, :focus-visible) {
	background-color: var(--vic-button-bg); /* the layer provides the hover colour */
}

:is(
	.vic-button--motion-fill,
	.vic-button-motion--fill .elementor-button,
	.vic-button-motion--default:is(.vic-button-wrap--default, .vic-button-wrap--solid, .vic-button-wrap--outline) .elementor-button
):is(:hover, :focus-visible)::before {
	transform: scaleX(1);
}

/* Underline: drawn under the label. The Underline style always shows it
   (30% at rest, orange); the Underline Reveal motion grows it to 100%. */
:is(.vic-button .vic-button__label, .elementor-widget-button .elementor-button-text) {
	position: relative;
}

:is(
	.vic-button--underline .vic-button__label,
	.vic-button--motion-underline .vic-button__label,
	.vic-button-wrap--underline .elementor-button-text,
	.vic-button-motion--underline .elementor-button-text
)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background-color: var(--vic-button-underline-color);
	transform: scaleX(var(--vic-button-underline-start));
	transform-origin: left center;
	transition: transform var(--vic-button-duration) var(--vic-button-easing);
}

:is(
	.vic-button--motion-underline,
	.vic-button-motion--underline .elementor-button,
	.vic-button-motion--default.vic-button-wrap--underline .elementor-button
):is(:hover, :focus-visible) :is(.vic-button__label, .elementor-button-text)::after {
	transform: scaleX(1);
}

/* Lift. */
:is(
	.vic-button--motion-lift,
	.vic-button-motion--lift .elementor-button,
	.vic-button-motion--default.vic-button-wrap--ghost .elementor-button
):is(:hover, :focus-visible) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 30, 64, 0.1);
}

/* Soft Scale. */
:is(.vic-button--motion-scale, .vic-button-motion--scale .elementor-button):is(:hover, :focus-visible) {
	transform: scale(1.025);
}

:is(.vic-button--motion-scale, .vic-button-motion--scale .elementor-button):active {
	transform: scale(0.985);
}

/* Arrow Shift: an icon placed AFTER the text moves forward. Applies with every
   motion except None and Icon Reveal (and Icon Animation = None). No fake
   arrow is ever added — the editor chooses the icon. */
:is(
	.vic-button:not(.vic-button--motion-none, .vic-button--motion-icon-reveal) > .icon:last-child,
	:is(.vic-button-icon--row-reverse, .vic-button-icon--right):not(.vic-button-motion--none, .vic-button-motion--icon-reveal, .vic-button-icon-motion--none) .elementor-button-icon
) {
	--vic-button-arrow-shift: 4px;
}

/* Hover-only motion is limited to real hover devices; on touch screens the
   button is fully visible and readable without hover. */
@media (hover: hover) {
	:is(.vic-button, .elementor-widget-button .elementor-button):is(:hover, :focus-visible) :is(.icon, .elementor-button-icon) {
		transform: translateX(var(--vic-button-arrow-shift, 0));
	}

	/* Icon Reveal: the icon keeps its space (no width jump) and fades/slides in. */
	:is(
		.vic-button--motion-icon-reveal > .icon,
		.vic-button-motion--icon-reveal:not(.vic-button-icon-motion--none) .elementor-button-icon
	) {
		opacity: 0;
		transform: translateX(-5px);
	}

	:is(
		.vic-button--motion-icon-reveal,
		.vic-button-motion--icon-reveal:not(.vic-button-icon-motion--none) .elementor-button
	):is(:hover, :focus-visible) :is(.icon, .elementor-button-icon) {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Keyboard users always get the revealed icon, even on touch devices. */
:is(
	.vic-button--motion-icon-reveal,
	.vic-button-motion--icon-reveal .elementor-button
):focus-visible :is(.icon, .elementor-button-icon) {
	opacity: 1;
}

/* Touch screens: no lift/scale (hover would "stick" after a tap). */
@media (hover: none) {
	:is(.vic-button, .elementor-widget-button .elementor-button):is(:hover, :focus-visible) {
		transform: none;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   5. Reduced motion: state changes are immediate (global rule shortens all
      transitions); movement is removed entirely. !important (as in the global
      reduced-motion rule) so no motion selector can out-rank it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:is(.vic-button, .elementor-widget-button .elementor-button),
	:is(.vic-button, .elementor-widget-button .elementor-button):is(:hover, :focus-visible, :active),
	:is(.vic-button, .elementor-widget-button .elementor-button):is(:hover, :focus-visible) :is(.icon, .elementor-button-icon) {
		transform: none !important;
	}

	:is(.vic-button, .elementor-widget-button .elementor-button)::before,
	:is(.vic-button__label, .elementor-button-text)::after {
		transition: none;
	}
}