/**
 * Hero Slider Styles - Ernesto Theme
 * Supports CSS Scroll Snap and Splide.js
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* ============================================
   1. BASE SLIDER STYLES (Both Types)
   ============================================ */

.ernesto-hero-slider {
	position: relative;
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
	background-color: var(--bg-surface);
}

.slider-slide,
.splide__slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	background-size: cover;
	background-position: center;
}

/* Slide Image */
.slide-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay — gradient controlled per-slide via .slide-text-light / .slide-text-dark */
.slide-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Slide Content */
.slide-content {
	position: relative;
	z-index: 2;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--space-3xl) var(--container-padding);
	text-align: center;
	color: var(--text-on-dark);
}

.slide-title {
	font-family: var(--font-special);
	font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-6xl));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin-bottom: var(--space-lg);
	color: #FFFFFF;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.slide-description {
	font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-2xl));
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--space-xl);
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.slide-button {
	display: inline-block;
	padding: var(--space-md) var(--space-2xl);
	background-color: var(--color-secondary);
	color: var(--text-on-brand);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	border-radius: var(--button-border-radius, 9999px);
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-md);
}

/* Override customizer's `border: N solid currentColor` — .slide-button.button wins on specificity */
.slide-button.button {
	border-color: var(--color-secondary);
}

.slide-button:hover,
.slide-button:focus {
	background-color: var(--color-secondary-hover);
	border-color: var(--color-secondary-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	text-decoration: none;
}

/* ============================================
   2. TEXT COLOR VARIANTS
   ============================================ */

/* Light text (default) — dark overlay, white text */
.slide-text-light .slide-image::after {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.3) 0%,
		rgba(0, 0, 0, 0.5) 100%
	);
}

/* Dark text — subtle light overlay, dark text for bright background images */
.slide-text-dark .slide-image::after {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.25) 0%,
		rgba(255, 255, 255, 0.45) 100%
	);
}

.slide-text-dark .slide-content {
	color: var(--text-primary);
}

.slide-text-dark .slide-title {
	color: var(--color-text, #1a1a1a) !important;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6) !important;
}

.slide-text-dark .slide-description {
	color: rgba(0, 0, 0, 0.8) !important;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* .slide-text-light: always white text (dark overlay) — wins over color-scheme overrides */
.slide-text-light .slide-title {
	color: #FFFFFF !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.slide-text-light .slide-description {
	color: rgba(255, 255, 255, 0.95) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   2b. LIGHT / DARK MODE ADAPTIVE TEXT
   Default slide text (no explicit variant class) adapts to the
   active color scheme. Slides with .slide-text-light / .slide-text-dark
   keep their explicit colors via !important above.
   ============================================ */

/* System light mode → dark text */
@media (prefers-color-scheme: light) {
	.slide-title {
		color: #1a1a1a;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
	}

	.slide-description {
		color: rgba(0, 0, 0, 0.85);
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
	}
}

/* Customizer: explicit dark mode → white text */
html[style*="color-scheme: dark"] .slide-title,
html[style*="color-scheme:dark"] .slide-title {
	color: #FFFFFF;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

html[style*="color-scheme: dark"] .slide-description,
html[style*="color-scheme:dark"] .slide-description {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Customizer: explicit light mode → dark text */
html[style*="color-scheme: light"] .slide-title,
html[style*="color-scheme:light"] .slide-title {
	color: #1a1a1a;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

html[style*="color-scheme: light"] .slide-description,
html[style*="color-scheme:light"] .slide-description {
	color: rgba(0, 0, 0, 0.85);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ============================================
   3. CSS SCROLL SNAP SLIDER
   ============================================ */

.scroll-snap-slider .slider-viewport {
	overflow: hidden;
}

.scroll-snap-slider .slider-container {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar */
.scroll-snap-slider .slider-container::-webkit-scrollbar {
	display: none;
}

.scroll-snap-slider .slider-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Slider Arrows */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.75;
	transition: opacity var(--transition-fast);
}

.slider-arrow:hover {
	opacity: 1;
	transform: translateY(-50%);
	background: none !important;
	border: none !important;
}

.slider-arrow:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 4px;
	opacity: 1;
}

.slider-arrow-prev {
	left: var(--space-lg);
}

.slider-arrow-next {
	right: var(--space-lg);
}

.slider-arrow span[aria-hidden] {
	font-size: 2rem;
	line-height: 1;
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	font-family: sans-serif;
}

/* Slider Dots */
.slider-dots {
	position: absolute;
	bottom: var(--space-xl);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: var(--space-sm);
}

.slider-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: all var(--transition-fast);
	padding: 0;
}

.slider-dot:hover {
	background-color: rgba(255, 255, 255, 0.7);
	transform: scale(1.2);
}

.slider-dot:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.slider-dot.active {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(255, 255, 255, 1);
	width: 32px;
	border-radius: 6px;
}

/* Pause/Play Toggle */
.slider-pause-toggle {
	position: absolute;
	bottom: var(--space-xl);
	right: var(--space-xl);
	z-index: 10;
	width: 44px;
	height: 44px;
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast);
	font-size: 16px;
}

.slider-pause-toggle:hover {
	background-color: rgba(255, 255, 255, 1);
	transform: scale(1.1);
}

.slider-pause-toggle:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

/* ============================================
   4. SPLIDE.JS OVERRIDES
   ============================================ */

.splide-slider .splide__track {
	overflow: visible;
}

.splide-slider .splide__slide {
	opacity: 0.4;
	transition: opacity var(--transition-base);
}

.splide-slider .splide__slide.is-active {
	opacity: 1;
}

/* Splide Arrows */
.splide__arrow {
	background-color: rgba(255, 255, 255, 0.9);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: all var(--transition-fast);
}

.splide__arrow:hover {
	background-color: rgba(255, 255, 255, 1);
	transform: scale(1.1);
}

.splide__arrow svg {
	fill: var(--color-primary);
}

.splide__arrow:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

/* Splide Pagination */
.splide__pagination {
	bottom: var(--space-xl);
}

.splide__pagination__page {
	background-color: rgba(255, 255, 255, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.8);
	width: 12px;
	height: 12px;
	transition: all var(--transition-fast);
}

.splide__pagination__page:hover {
	background-color: rgba(255, 255, 255, 0.7);
	transform: scale(1.2);
}

.splide__pagination__page.is-active {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(255, 255, 255, 1);
	width: 32px;
	border-radius: 6px;
	transform: scale(1);
}

.splide__pagination__page:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* ============================================
   5. ACCESSIBILITY
   ============================================ */

/* Skip to next slide keyboard shortcut hint */
.slider-keyboard-hint {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 10;
	padding: var(--space-sm) var(--space-md);
	background-color: rgba(0, 0, 0, 0.7);
	color: #FFFFFF;
	font-size: var(--font-size-sm);
	border-radius: var(--border-radius-md);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

body.using-keyboard .slider-keyboard-hint {
	opacity: 1;
}

/* High contrast mode */
.high-contrast .slider-dot,
.high-contrast .slider-pause-toggle {
	border: 3px solid #000000;
}

.high-contrast .slider-arrow span[aria-hidden] {
	color: #FFF !important;
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.high-contrast .slider-arrow {
	opacity: 1;
}

.high-contrast .slide-title,
.high-contrast .slide-description {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* ============================================
   6. REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.scroll-snap-slider .slider-container {
		scroll-behavior: auto;
	}

	.slider-arrow,
	.slider-dot,
	.slider-pause-toggle,
	.slide-button,
	.splide__slide {
		transition: none;
	}

	/* Disable autoplay */
	.scroll-snap-slider[data-autoplay="true"],
	.splide[data-splide*="autoplay"] {
		/* Autoplay disabled by JS */
	}
}

.reduced-motion .scroll-snap-slider .slider-container {
	scroll-behavior: auto;
}

.reduced-motion .slider-arrow,
.reduced-motion .slider-dot,
.reduced-motion .slider-pause-toggle,
.reduced-motion .slide-button {
	transition: none;
}

/* ============================================
   7. RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.slider-slide,
	.splide__slide {
		min-height: 50vh;
	}

	.slide-content {
		padding: var(--space-xl) var(--container-padding);
	}

	.slide-title {
		font-size: clamp(var(--font-size-2xl), 8vw, var(--font-size-4xl));
		margin-bottom: var(--space-md);
	}

	.slide-description {
		font-size: var(--font-size-base);
		margin-bottom: var(--space-lg);
	}

	.slide-button {
		padding: var(--space-sm) var(--space-lg);
		font-size: var(--font-size-base);
	}

	/* Hide navigation arrows on mobile (swipe or dots only) */
	.slider-arrow {
		display: none;
	}

	/* Dots at bottom on mobile */
	.slider-dots {
		bottom: var(--space-md);
	}

	/* Reduce slider dot size on mobile */
	.slider-dot {
		width: 6px;
		height: 6px;
		border-width: 1px;
	}

	.slider-dot.active {
		width: 16px;
		border-width: 1px;
	}

	.slider-pause-toggle {
		bottom: var(--space-md);
		right: var(--space-md);
		width: 32px;
		height: 32px;
		font-size: 10px;
	}
}

@media (max-width: 480px) {
	.slider-slide,
	.splide__slide {
		aspect-ratio: 4 / 5;
		min-height: auto;
	}

	.slide-title {
		font-size: var(--font-size-2xl);
	}

	.slide-description {
		font-size: var(--font-size-sm);
	}

	/* Even smaller pause button on very small screens */
	.slider-pause-toggle {
		width: 28px;
		height: 28px;
		font-size: 8px;
	}
}

/* ============================================
   8. PRINT
   ============================================ */

@media print {
	/* Hide slider entirely — background images don't print, leaving a full blank page */
	.ernesto-hero-slider {
		display: none !important;
	}
}