/**
 * Style Variations CSS
 * Theme presets: Default, Compact, Executive
 */

/* =============================================================================
   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;
}

.is-style-compact.wp-block-voyager-hero-showcase,
.is-style-compact.wp-block-voyager-animated-section,
.is-style-compact.wp-block-voyager-parallax-section {
	padding-top: calc(40px * var(--voyager-spacing, 1));
	padding-bottom: calc(40px * var(--voyager-spacing, 1));
}

.is-style-compact .voyager-service-card,
.is-style-compact .voyager-magnetic-card,
.is-style-compact .voyager-portfolio-item {
	padding: calc(20px * var(--voyager-spacing, 1));
	border-radius: var(--voyager-border-radius, 12px);
}

.is-style-compact .voyager-stats-counter-item {
	padding: calc(15px * var(--voyager-spacing, 1));
}

.is-style-compact .voyager-testimonial-slide {
	padding: calc(25px * var(--voyager-spacing, 1));
}

/* 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;
}

.is-style-executive.wp-block-voyager-hero-showcase,
.is-style-executive.wp-block-voyager-animated-section,
.is-style-executive.wp-block-voyager-parallax-section {
	padding-top: calc(80px * var(--voyager-spacing, 1));
	padding-bottom: calc(80px * var(--voyager-spacing, 1));
}

.is-style-executive .voyager-service-card,
.is-style-executive .voyager-magnetic-card,
.is-style-executive .voyager-portfolio-item {
	padding: calc(40px * var(--voyager-spacing, 1));
	border-radius: var(--voyager-border-radius, 12px);
}

.is-style-executive .voyager-stats-counter-item {
	padding: calc(35px * var(--voyager-spacing, 1));
}

.is-style-executive .voyager-testimonial-slide {
	padding: calc(50px * var(--voyager-spacing, 1));
}

/* 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;
	}

	.is-style-compact.wp-block-voyager-hero-showcase,
	.is-style-compact.wp-block-voyager-animated-section,
	.is-style-compact.wp-block-voyager-parallax-section {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.is-style-executive.wp-block-voyager-hero-showcase,
	.is-style-executive.wp-block-voyager-animated-section,
	.is-style-executive.wp-block-voyager-parallax-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* =============================================================================
   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;
}

/* =============================================================================
   COMPONENT-SPECIFIC OVERRIDES
   ============================================================================= */

/* Portfolio Grid */
.is-style-compact .voyager-portfolio-grid {
	gap: 16px;
}

.is-style-executive .voyager-portfolio-grid {
	gap: 32px;
}

/* Service Cards */
.is-style-compact .voyager-service-cards-grid {
	gap: 16px;
}

.is-style-executive .voyager-service-cards-grid {
	gap: 32px;
}

/* Testimonial Carousel */
.is-style-compact .voyager-testimonial-carousel {
	gap: 16px;
}

.is-style-executive .voyager-testimonial-carousel {
	gap: 40px;
}

/* Stats Counter */
.is-style-compact .voyager-stats-counter {
	gap: 20px;
}

.is-style-executive .voyager-stats-counter {
	gap: 48px;
}

/* Comparison Slider */
.is-style-compact .voyager-comparison-slider {
	border-radius: 8px;
}

.is-style-executive .voyager-comparison-slider {
	border-radius: 20px;
}

/* Video Lightbox */
.is-style-compact .voyager-video-lightbox-trigger {
	border-radius: 8px;
}

.is-style-executive .voyager-video-lightbox-trigger {
	border-radius: 20px;
}

/* MacOS Dock */
.is-style-compact .voyager-macos-dock {
	padding: 8px;
	gap: 6px;
}

.is-style-executive .voyager-macos-dock {
	padding: 16px;
	gap: 16px;
}

/* =============================================================================
   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: rgba(0, 0, 0, 0.7);
	color: #fff;
	border-radius: 4px;
	pointer-events: none;
	z-index: 100;
	opacity: 0.8;
}

/* Editor: Show variation in block toolbar */
.components-toolbar-group .is-active[aria-label*="Style"] {
	background: #007cba;
	color: #fff;
}

/* =============================================================================
   ACCESSIBILITY - Focus Indicators (WCAG 2.4.7)
   ============================================================================= */

/* Interactive block focus indicators */
.voyager-magnetic-card:focus-visible,
.voyager-magnetic-card-item:focus-visible,
.voyager-service-card:focus-visible,
.wp-block-voyager-comparison-slider:focus-visible,
.voyager-comparison-slider__handle:focus-visible,
.voyager-video-lightbox__trigger:focus-visible,
.wp-block-voyager-testimonial-carousel:focus-visible,
.carousel-nav-dot:focus-visible,
.carousel-arrow:focus-visible,
.voyager-video-lightbox-modal__close:focus-visible,
.voyager-macos-dock-item:focus-visible,
.voyager-portfolio-item:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
}

/* Remove default outline on regular focus (keep for focus-visible) */
.voyager-magnetic-card:focus:not(:focus-visible),
.voyager-magnetic-card-item:focus:not(:focus-visible),
.voyager-service-card:focus:not(:focus-visible),
.wp-block-voyager-comparison-slider:focus:not(:focus-visible),
.voyager-video-lightbox__trigger:focus:not(:focus-visible),
.wp-block-voyager-testimonial-carousel:focus:not(:focus-visible),
.carousel-nav-dot:focus:not(:focus-visible),
.carousel-arrow:focus:not(:focus-visible) {
	outline: none;
}

/* 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;
}

/* =============================================================================
   ACCESSIBILITY - Reduced Motion (WCAG 2.3.3)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	/* Disable all CSS animations and transitions on Voyager blocks */
	.wp-block-voyager-animated-section,
	.wp-block-voyager-magnetic-cards,
	.wp-block-voyager-parallax-section,
	.wp-block-voyager-text-reveal,
	.wp-block-voyager-scroll-progress,
	.wp-block-voyager-service-cards,
	.wp-block-voyager-comparison-slider,
	.wp-block-voyager-video-lightbox,
	.wp-block-voyager-hero-showcase,
	.wp-block-voyager-stats-counter,
	.wp-block-voyager-testimonial-carousel,
	.wp-block-voyager-cursor-trail,
	.wp-block-voyager-macos-dock,
	.wp-block-voyager-portfolio-grid,
	.voyager-animate {
		animation: none !important;
		transition: none !important;
	}

	/* Ensure content is visible without animations */
	.wp-block-voyager-animated-section,
	.wp-block-voyager-text-reveal,
	.voyager-animate {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Disable parallax layer movement */
	.voyager-parallax-layer {
		transform: none !important;
	}

	/* Keep carousel functional but instant transitions */
	.wp-block-voyager-testimonial-carousel .wp-block-voyager-testimonial-item {
		transition: none !important;
	}
}