/* Hero Section Block Styles */

/* Background Styles */
.hero-section.hero-bg-solid {
	background-color: var(--color-neutral, #edeef2);
	color: var(--color-neutral-content, #3e3f3d);
}

.hero-section.hero-bg-image {
	position: relative;
	background-attachment: fixed;
}

/* Background Overlays */
.hero-section.hero-overlay-light::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.2);
	z-index: 1;
}

.hero-section.hero-overlay-medium::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

.hero-section.hero-overlay-dark::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.hero-section.hero-overlay-gradient::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.3) 0%,
		rgba(0, 0, 0, 0.1) 50%,
		rgba(0, 0, 0, 0.4) 100%
	);
	z-index: 1;
}

/* Ensure content is above overlay */
.hero-section.hero-bg-image .container {
	position: relative;
	z-index: 10;
}

/* Text Color Styles */
.hero-section.hero-text-dark {
	color: var(--color-neutral-content, #3e3f3d);
}

.hero-section.hero-text-dark h1,
.hero-section.hero-text-dark h2,
.hero-section.hero-text-dark h3,
.hero-section.hero-text-dark h4,
.hero-section.hero-text-dark h5,
.hero-section.hero-text-dark h6 {
	color: var(--color-primary, #1e3a8a);
}

.hero-section.hero-text-dark p,
.hero-section.hero-text-dark span,
.hero-section.hero-text-dark li {
	color: var(--color-neutral-content, #3e3f3d);
}
.hero-section.hero-text-dark h1 span {
	color: var(--color-primary, #1e3a8a);
}
.hero-section.hero-text-white {
	color: white;
}

.hero-section.hero-text-white h1,
.hero-section.hero-text-white h2,
.hero-section.hero-text-white h3,
.hero-section.hero-text-white h4,
.hero-section.hero-text-white h5,
.hero-section.hero-text-white h6 {
	color: white;
}

.hero-section.hero-text-white p,
.hero-section.hero-text-white span,
.hero-section.hero-text-white li {
	color: rgba(255, 255, 255, 0.9);
}

.hero-section.hero-text-white .text-primary {
	color: rgba(255, 255, 255, 0.95) !important;
}

.hero-section.hero-text-white .text-base-content {
	color: white !important;
}

/* Custom text color inherits from section inline style */
.hero-section.hero-text-custom h1,
.hero-section.hero-text-custom h2,
.hero-section.hero-text-custom h3,
.hero-section.hero-text-custom h4,
.hero-section.hero-text-custom h5,
.hero-section.hero-text-custom h6,
.hero-section.hero-text-custom p,
.hero-section.hero-text-custom span,
.hero-section.hero-text-custom li {
	color: inherit;
}

/* SVG Mask for hero media */
.hero-section .hero-media-container {
	position: relative;
}

.hero-section .hero-main-media {
	mask: var(--hero-mask-url) no-repeat left / contain;
	-webkit-mask: var(--hero-mask-url) no-repeat left / contain;
}

/* Video specific styles */
.hero-section .hero-main-media iframe,
.hero-section .hero-main-media video {
	border-radius: 12px;
}

/* Custom z-index for proper layering */
.hero-section .z-15 {
	z-index: 15;
}

.hero-section .z-25 {
	z-index: 25;
}

/* Layout Variants */
.hero-layout-text_only {
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.hero-layout-text_centered {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.hero-layout-text_centered h1 {
	text-align: center;
}

.hero-layout-text_image {
	display: flex;
	align-items: stretch;
}

.hero-layout-text_image .hero-media-container {
	min-height: 100%;
}

.hero-layout-text_centered p {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.hero-layout-text_only .max-w-\[1200px\] {
	width: 100%;
}

/* Responsive adjustments */
@media (max-width: 782px) {
	.hero-section .card-position-3 {
		margin-top: -1rem;
		margin-left: auto;
		margin-right: auto;
	}
	.hero-section .hero-main-media {
		mask: var(--hero-mask-mobile-url) no-repeat left / contain;
		-webkit-mask: var(--hero-mask-mobile-url) no-repeat left / contain;
	}

	/* Mobile layout adjustments */
	.hero-layout-text_only,
	.hero-layout-text_centered {
		min-height: 50vh;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	/* Disable fixed background on mobile for better performance */
	.hero-section.hero-bg-image {
		background-attachment: scroll;
	}
}

@media (max-width: 640px) {
	.hero-section .card-position-3 {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -1rem;
	}

	/* Small screen layout adjustments */
	.hero-layout-text_only,
	.hero-layout-text_centered {
		min-height: auto;
	}

	.hero-layout-text_centered {
		text-align: center;
	}
}

/* Video Autoplay Muted Styles */
.video-container.video-autoplay-muted {
	position: relative;
}

.video-container.video-autoplay-muted video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sound Toggle Button */

/* Hidden by default, shown on video container hover/focus */
.video-sound-toggle {
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.video-container:hover .video-sound-toggle,
.video-container:focus-within .video-sound-toggle,
.video-sound-toggle:focus-visible {
	opacity: 0.9;
	pointer-events: auto;
}

.video-sound-toggle:hover {
	transform: scale(1.05);
}

.video-sound-toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

.video-sound-toggle svg {
	transition: transform 0.2s ease;
}

.video-sound-toggle:hover svg {
	transform: scale(1.1);
}

/* Responsive adjustments for sound toggle */
@media (max-width: 768px) {
	.video-sound-toggle {
		width: 40px;
		height: 40px;
		top: 12px;
		right: 12px;
	}

	.video-sound-toggle svg {
		width: 20px;
		height: 20px;
	}
}
