/**
 * NIYAPRESS: Hero Slider - CRITICAL CONTRAST FIX
 * Fix text visibility and overlay issues
 */

/* ========================================
   OVERLAY - STRONGER GRADIENT FOR READABILITY
   ======================================== */

.hero-section-slider .hero-slide-overlay {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 75% !important;
	background: linear-gradient(
		to top, 
		rgba(0, 0, 0, 0.95) 0%, 
		rgba(0, 0, 0, 0.85) 25%,
		rgba(0, 0, 0, 0.65) 50%, 
		rgba(0, 0, 0, 0.35) 70%,
		rgba(0, 0, 0, 0.1) 85%,
		transparent 100%
	) !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* Additional dark vignette for better text contrast */
.hero-section-slider .hero-slide-media::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: radial-gradient(
		circle at center, 
		transparent 0%, 
		rgba(0, 0, 0, 0.3) 100%
	) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* ========================================
   CAPTION - BETTER POSITIONING & CONTRAST
   ======================================== */

.hero-section-slider .hero-slide-caption {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: clamp(30px, 4vw, 50px) !important;
	z-index: 10 !important;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.6) 0%,
		transparent 100%
	) !important;
}

/* ========================================
   TITLE - MAXIMUM READABILITY
   ======================================== */

.hero-section-slider .hero-slide-title {
	margin: 0 !important;
	font-size: clamp(22px, 3vw, 36px) !important;
	font-weight: 900 !important;
	line-height: 1.4 !important;
	max-width: 95% !important;
	direction: rtl !important;
	text-align: right !important;
}

.hero-section-slider .hero-slide-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	text-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.8),
		0 4px 8px rgba(0, 0, 0, 0.6),
		0 8px 16px rgba(0, 0, 0, 0.4) !important;
	transition: opacity 0.3s ease, text-shadow 0.3s ease !important;
	display: block !important;
	/* Force line breaks for long text */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
}

.hero-section-slider .hero-slide-title a:hover {
	opacity: 0.95 !important;
	text-shadow: 
		0 2px 6px rgba(0, 0, 0, 0.9),
		0 4px 12px rgba(0, 0, 0, 0.7),
		0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   CATEGORY BADGE - BETTER CONTRAST
   ======================================== */

.hero-section-slider .hero-slide-cat {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	background: rgba(0, 29, 131, 0.95) !important;
	backdrop-filter: blur(8px) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	padding: 6px 16px !important;
	border-radius: 25px !important;
	z-index: 11 !important;
	letter-spacing: 0.5px !important;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.4),
		0 0 0 2px rgba(255, 255, 255, 0.2) !important;
	text-transform: uppercase !important;
}

/* ========================================
   SLIDE COUNTER - BETTER VISIBILITY
   ======================================== */

.hero-section-slider .hero-slide-counter {
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	backdrop-filter: blur(8px) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 8px 16px !important;
	border-radius: 25px !important;
	z-index: 11 !important;
	font-family: 'Tajawal', sans-serif !important;
	direction: ltr !important;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.4),
		0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* ========================================
   PROGRESS BAR - STRONGER VISIBILITY
   ======================================== */

.hero-section-slider .hero-progress {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	height: 4px !important;
	background: linear-gradient(90deg, #001D83 0%, #0066ff 100%) !important;
	z-index: 12 !important;
	width: 0% !important;
	box-shadow: 0 0 10px rgba(0, 29, 131, 0.6) !important;
}

.hero-section-slider .hero-slide.is-active .hero-progress {
	animation: heroProgress 5s linear forwards !important;
}

@keyframes heroProgress {
	from { width: 0%; }
	to { width: 100%; }
}

/* ========================================
   NAVIGATION ARROWS - BETTER CONTRAST
   ======================================== */

.hero-section-slider .hero-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 50px !important;
	height: 50px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(8px) !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 15 !important;
	transition: all 0.3s ease !important;
	box-shadow: 
		0 4px 15px rgba(0, 0, 0, 0.2),
		0 0 0 3px rgba(255, 255, 255, 0.3) !important;
	opacity: 0 !important;
}

.hero-section-slider .hero-main-slider:hover .hero-nav {
	opacity: 1 !important;
}

.hero-section-slider .hero-nav:hover {
	background: #ffffff !important;
	transform: translateY(-50%) scale(1.15) !important;
	box-shadow: 
		0 6px 25px rgba(0, 0, 0, 0.3),
		0 0 0 4px rgba(0, 29, 131, 0.2) !important;
}

.hero-section-slider .hero-nav svg {
	color: var(--brand-red, #001D83) !important;
	width: 24px !important;
	height: 24px !important;
}

.hero-section-slider .hero-nav-prev {
	left: 20px !important;
}

.hero-section-slider .hero-nav-next {
	right: 20px !important;
}

/* ========================================
   IMAGE - SLIGHT DARKENING FOR CONTRAST
   ======================================== */

.hero-section-slider .hero-slide-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 8s ease !important;
	filter: brightness(0.85) !important;
}

.hero-section-slider .hero-slide.is-active .hero-slide-img {
	transform: scale(1.08) !important;
	filter: brightness(0.8) !important;
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 1024px) {
	.hero-section-slider .hero-slide-overlay {
		height: 80% !important;
	}
	
	.hero-section-slider .hero-slide-caption {
		padding: clamp(24px, 3vw, 40px) !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(20px, 3vw, 28px) !important;
	}
}

@media (max-width: 768px) {
	.hero-section-slider .hero-slide-overlay {
		height: 85% !important;
		background: linear-gradient(
			to top, 
			rgba(0, 0, 0, 0.98) 0%, 
			rgba(0, 0, 0, 0.90) 30%,
			rgba(0, 0, 0, 0.70) 55%, 
			rgba(0, 0, 0, 0.40) 75%,
			rgba(0, 0, 0, 0.15) 90%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-caption {
		padding: 20px !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(18px, 4vw, 24px) !important;
		max-width: 100% !important;
	}
	
	.hero-section-slider .hero-slide-cat {
		top: 15px !important;
		right: 15px !important;
		font-size: 11px !important;
		padding: 5px 12px !important;
	}
	
	.hero-section-slider .hero-slide-counter {
		top: 15px !important;
		left: 15px !important;
		font-size: 12px !important;
		padding: 6px 12px !important;
	}
	
	.hero-section-slider .hero-nav {
		opacity: 1 !important;
		width: 44px !important;
		height: 44px !important;
	}
	
	.hero-section-slider .hero-nav svg {
		width: 20px !important;
		height: 20px !important;
	}
	
	.hero-section-slider .hero-nav-prev {
		left: 15px !important;
	}
	
	.hero-section-slider .hero-nav-next {
		right: 15px !important;
	}
}

@media (max-width: 480px) {
	.hero-section-slider .hero-slide-title {
		font-size: clamp(16px, 4.5vw, 20px) !important;
		line-height: 1.5 !important;
	}
	
	.hero-section-slider .hero-slide-caption {
		padding: 15px !important;
	}
	
	.hero-section-slider .hero-nav {
		width: 40px !important;
		height: 40px !important;
	}
	
	.hero-section-slider .hero-nav svg {
		width: 18px !important;
		height: 18px !important;
	}
}

/* ========================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
	.hero-section-slider .hero-slide-overlay {
		background: linear-gradient(
			to top, 
			rgba(0, 0, 0, 1) 0%, 
			rgba(0, 0, 0, 0.9) 40%,
			rgba(0, 0, 0, 0.6) 70%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-title a {
		text-shadow: 
			0 0 8px rgba(0, 0, 0, 1),
			0 2px 4px rgba(0, 0, 0, 1) !important;
	}
}