/**
 * Style Variations CSS
 * Theme presets: Default, Compact, Executive
 *
 * This is the one plugin-wide stylesheet, and it carries no block paint:
 * every rule that targets a specific voyager/* block lives in that block's
 * own style.scss and ships only when the block renders (VOY-614). What stays
 * here is generic to the variation (custom properties, typography scale,
 * the GSAP duration multiplier), editor chrome, the screen-reader utility,
 * and the reduced-motion rule for the core-block animation extension class.
 * tests/Unit/PluginWideStylesheetTest.php fails on any block wrapper or
 * block-internal selector added back here.
 */

/* =============================================================================
   COMPACT VARIATION
   Tighter spacing, faster animations, smaller radius
   ============================================================================= */

/* Compact: Reduce padding/margins */
.is-style-compact {
	--voyager-spacing: 0.75;
	--voyager-animation-speed: 0.75;
	--voyager-border-radius: 8px;
}

/* Compact: Faster animations */
.is-style-compact * {
	--gsap-duration-multiplier: var(--voyager-animation-speed, 1);
}

/* =============================================================================
   EXECUTIVE VARIATION
   Generous spacing, refined animations, larger radius
   ============================================================================= */

/* Executive: Increase padding/margins */
.is-style-executive {
	--voyager-spacing: 1.5;
	--voyager-animation-speed: 1.3;
	--voyager-border-radius: 20px;
}

/* Executive: Slower, more refined animations */
.is-style-executive * {
	--gsap-duration-multiplier: var(--voyager-animation-speed, 1);
}

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

/* Tablet: Reduce spacing multipliers slightly */
@media (max-width: 1024px) {
	.is-style-compact {
		--voyager-spacing: 0.85;
	}

	.is-style-executive {
		--voyager-spacing: 1.3;
	}
}

/* Mobile: Further reduce spacing */
@media (max-width: 768px) {
	.is-style-compact {
		--voyager-spacing: 1;
	}

	.is-style-executive {
		--voyager-spacing: 1.15;
	}
}

/* =============================================================================
   TYPOGRAPHY ADJUSTMENTS
   ============================================================================= */

/* Compact: Slightly smaller typography scale */
.is-style-compact h1,
.is-style-compact h2,
.is-style-compact h3 {
	line-height: 1.2;
}

.is-style-compact p {
	line-height: 1.5;
}

/* Executive: More generous line height */
.is-style-executive h1,
.is-style-executive h2,
.is-style-executive h3 {
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.is-style-executive p {
	line-height: 1.7;
}

/* =============================================================================
   EDITOR PREVIEW
   ============================================================================= */

/* Show style variation label in editor */
.block-editor-block-list__block[class*="is-style-"]:hover::before {
	content: attr(class);
	position: absolute;
	top: -24px;
	left: 0;
	font-size: 11px;
	padding: 2px 8px;
	background: rgb(0 0 0 / 0.7);
	color: var(--accent-fg-on, #ffffff);
	border-radius: 4px;
	pointer-events: none;
	z-index: 100;
	opacity: 0.8;
}

/* Editor: Show variation in block toolbar — WP admin blue, editor chrome. */
/* stylelint-disable declaration-property-value-disallowed-list */
.components-toolbar-group .is-active[aria-label*="Style"] {
	background: #007cba;
	color: #ffffff;
}
/* stylelint-enable declaration-property-value-disallowed-list */

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

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

/* Reduced motion for the core-block animation extension class (WCAG 2.3.3).
   Each voyager/* block carries its own reduced-motion rule in its style.scss. */
@media (prefers-reduced-motion: reduce) {
	.voyager-animate {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}