/*
Theme Name: NeikoVRE
Template: neiko
Description: Neiko Visual Real Estate - 2026
Version: 1.0
License: GNU General Public License v2 or later
*/

:root {
    /* COLORE SCROLLBAR NEIKO VRE */
	scrollbar-color: var(--vre-500) transparent;

	--accent: var(--vre-500);

	/* COLOR HEADER NEIKO VRE */
	--header-color: var(--text-light);

	/* COLOR HEADER ATTIVO NEIKO VRE */
	--header-color-active-scrolled: var(--text-light);

	/* COLOR HEADER SCROLLATO NEIKO VRE */
    --header-color-scrolled: var(--text-dark);
	
    /* BACKGROUND HEADER SCROLLATO NEIKO VRE */
	--header-background-color-scrolled: var(--vre-500);

	/* SOVRASCRITTURA COLORI INPUT NEIKO VRE */
	--input-default: var(--mono-800);
	--input-hover: var(--mono-600);
	--input-focus: var(--mono-300);
}

body {
	background: var(--mono-200);
}

img,
video {
	border-radius: var(--radius-x-small);
}

#hero {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;

	&.menu-spacing {
		padding-top: calc(var(--header-height) + var(--30));
	}

	&.overlay {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.1);
			background: linear-gradient( 180deg, rgb(from var(--mono-200) r g b / 0) 60%, rgb(from var(--mono-200) r g b / 1) 100%);
			z-index: 0;
		}
	}

	#hero-visual-content {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		padding: clamp(0.625rem, 1.302vw, 1.563rem);
		overflow: hidden;
		z-index: -1;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			border-radius: var(--radius-small);
		}

		& .video-wrapper {
			position: relative;
			overflow: hidden;
			border-radius: var(--radius-small);
			width: 100%;
			height: 100%;

			& video {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				display: block;
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--accent);
				mix-blend-mode: multiply;
			}
		}

		/*
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}
		*/
	}

	.background-video-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		width: 100%;
		height: 100%;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--accent);
			mix-blend-mode: multiply;
			opacity: var(--background-hero-opacity, 1);
		}

		.background-hero-video,
		.background-video,
		.background-hero-image,
		.background-image {
			width: 100%;
			height: 100svh;
			object-fit: cover;
			object-position: center;
			z-index: 0;
			opacity: var(--background-hero-opacity, 1);
			border-radius: 0;
		}
	}

	#text-hero {
		padding-top: calc(var(--header-height) + (var(--30) * 2));
		padding-bottom: var(--80);
		width: 100%;
		height: 100vh;
		margin-top: -100vh;
	}

	#showreel-video-container {
		position: relative;
		padding: 0 var(--external-padding);
		z-index: 2;

		#showreel-video,
		#showreel-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			border-radius: var(--radius-x-small);
		}

		#content {
			position: absolute;
			bottom: 0;
			right: var(--external-padding);
			left: 50%;
			padding: 0 var(--external-padding) var(--80) calc(var(--40) / 2);

			@media (max-width: 991.98px) {
				position: relative;
				bottom: auto;
				right: auto;
				left: auto;
				padding: 0;
				margin-top: var(--80);
			}
		}
	}
}

.single-service {
	position: sticky;
	top: 0;
	min-height: 100vh;
	padding-top: var(--160);
	padding-bottom: var(--160);
	border-radius: var(--radius-large) var(--radius-large) 0 0;
	background: var(--mono-200);

	.service-video-showreel {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	@media (max-width: 991.98px) {
		position: relative;
		padding-top: var(--100);
		padding-bottom: var(--100);
	}
}