/*
Theme Name: Aura
Author: Neiko srl
Author URI: http://www.neiko.it/
Description: Aura - 2025
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  FONTS e COLORI */
:root {
	interpolate-size: allow-keywords;
	/* COLORI */
	--c-50: #f5f7f8;
	--c-150: #e4e6e7;
	--c-300: #bdc3c4;
	--c-500: #2e5560;
	--c-600: #153c47;
	--c-900: #00242c;

	/* FONTS */
	--font-family: 'Funnel Sans', sans-serif;
	--font-weight-regular: 300;

	/* EASING */
	--transition: 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

/* LENIS */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

.lenis.lenis-autoToggle {
	transition-property: overflow;
	transition-duration: 1ms;
	transition-behavior: allow-discrete;
}

/* GENERAL */

html {
	/* scrollbar-gutter: stable; */
}

html,
body {
	& .light {
		--background-color: var(--c-50);
		--line-color: var(--c-300);
		--text-color: var(--c-900);
	}

	& .dark {
		--background-color: var(--c-900);
		--line-color: var(--c-500);
		--text-color: var(--c-50);
	}

	background-color: var(--c-900);
	color: var(--c-50);
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-weight: var(--font-weight-regular);
	font-size: 16px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
}

img,
a img {
	border: none !important;
}

::-moz-selection {
	background: none repeat scroll 0 0 #FFF;
	color: #000;
}

* {
	outline: 0;
}

b,
strong,
.bold {
	font-weight: var(--font-weight-bold);
}

a,
a:visited {
	position: relative;
	outline-style: none;
	text-decoration: none;
	color: var(--primary-color);

	&::after {
		content: '';
		width: 0;
		height: 1px;
		position: absolute;
		bottom: -1px;
		right: 0;
		background-color: var(--c-300);
		transition: var(--transition);
	}

	&:hover::after,
	&:focus-visible::after {
		left: 0;
		right: 0;
		width: 100%;
	}
	
	&.no-decoration::after {
		display: none;
	}
}

.container-fluid {
	padding-left: var(--50);
	padding-right: var(--50);
}

.row {
	/* GUTTER MODIFICATI */
	--bs-gutter-x: var(--50);
}

.light,
.dark {
	background-color: var(--background-color);
	border-color: var(--line-color);
	color: var(--text-color);
}

.border-left {
	position: absolute;
	border-left: none !important;

	span& {
		position: absolute;
		top: 0;
		left: calc(var(--50) / 2);
		;
		width: 1px;
		height: 100%;
		display: block;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 0%;
			background-color: var(--line-color);
			transition: var(--transition);
		}

		&.full::after {
			height: 100%;
		}

		&.animate::after {
			height: 100%;
		}
	}
}

.border-right {
	position: relative;
	border-right: none !important;

	span& {
		position: absolute;
		top: 0;
		right: calc(var(--50) / 2);
		width: 1px;
		height: 100%;
		display: block;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 1px;
			height: 0%;
			background-color: var(--line-color);
			transition: var(--transition);
		}

		&.full::after {
			height: 100%;
		}

		&.animate::after {
			height: 100%;
		}
	}
}

.border-top {
	position: relative;
	border-top: none !important;

	span& {
		position: absolute;
		top: 0;
		left: calc(var(--50) / 2);
		display: block;
		width: calc(100% - var(--50));

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0%;
			height: 1px;
			background-color: var(--line-color);
			transition: var(--transition);
		}

		&.full::after {
			width: 100%;
		}

		&.animate::after {
			width: 100%;
		}
	}
}

.border-bottom {
	position: relative;
	border-bottom: none !important;

	span& {
		position: absolute;
		bottom: 0;
		left: calc(var(--50) / 2);
		display: block;
		width: calc(100% - var(--50));

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0%;
			height: 1px;
			background-color: var(--line-color);
			transition: var(--transition);
		}

		&.full::after {
			width: 100%;
		}

		&.animate::after {
			width: 100%;
		}
	}
}

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

.img-negative {
	object-fit: cover;
	width: 100%;
	height: calc(100% + var(--100));
	margin-top: calc(-1 * var(--100));

	@media (max-width: 991.98px) {
		margin-top: 0;
		width: 100%;
		height: auto;
		object-fit: unset;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* TYPO */

.big {
	font-size: 1.1rem;
}

.small {
	font-size: 0.9rem;
}

.indent *:first-child {
	text-indent: 4ch;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--font-family);
	font-weight: var(--font-weight-regular);
	text-transform: uppercase;
	margin: 0;
}

h1,
.h1 {
	font-size: clamp(2.188rem, 3.646vw, 4.375rem);
	line-height: clamp(2.188rem, 3.646vw, 4.375rem);
}

h2,
.h2 {
	font-size: clamp(2.000rem, 2.500vw, 3.000rem);
	line-height: clamp(2.000rem, 2.500vw, 3.000rem);
}

h3,
.h3 {
	font-size: clamp(1.500rem, 1.667vw, 2.000rem);
	line-height: clamp(1.500rem, 1.667vw, 2.000rem);
}

h4,
.h4 {
	font-size: clamp(1.250rem, 1.250vw, 1.500rem);
	line-height: clamp(1.250rem, 1.250vw, 1.500rem);
}

p {
	text-indent: 4ch;
	margin-bottom: 0;

	&.no-indent {
		text-indent: 0;
	}
}

.no-indent {
	text-indent: 0;
	& p {
		text-indent: 0 !important;
	}
}

.paragrafo {
	font-size: 1rem;
	line-height: normal;
}

/* ICONE */

.ph-light {
	font-size: clamp(1.250rem, 1.250vw, 1.500rem);
	line-height: clamp(1.250rem, 1.250vw, 1.500rem);
}

/* ANIMAZIONE TESTI */

.animated-text {
	overflow: hidden;
	display: block;
}

.animated-text span {
	display: inline-block;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 1.5s cubic-bezier(0.08, 0.82, 0.17, 1), opacity 1s cubic-bezier(0.08, 0.82, 0.17, 1);
}

.animated-text.visible span {
	transform: translateY(0);
	opacity: 1;
}

/* BUTTONS */

.primary-button {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px;
	gap: 20px;
	background-color: transparent;
	border: none;
	color: var(--c-50);
	text-transform: uppercase;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		aspect-ratio: 1 / 1;
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: var(--100);
		transition: var(--transition);
	}

	&:hover,
	&:focus-visible {
		padding-right: 15px;
	}

	&:hover::before,
	&:focus-visible::before {
		width: 100%;
	}

	&::after {
		display: none;
	}
}

/* LOADER */

#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #212121;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition);

	&.remove {
		transform: translateY(-100%);
	}
}

.loader-inner {
	border: 8px solid #fff;
	/* Colore di sfondo del loader */
	border-top: 8px solid #000;
	/* Colore del loader */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* HEADER */

#header {
	background: transparent;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: var(--50);
	/* position: sticky;
	top: 0;
	z-index: 998; */
	

	& #logo {
		height: 50px;
		width: auto;
	}
}

#header .wpml-ls-legacy-list-horizontal{
	padding:0 !important;
	border: none;
}

.wpml-ls-legacy-list-horizontal{
	padding:0 !important;
	display: inline;
	border: none;
}

#header .wpml-ls-legacy-list-horizontal ul{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.wpml-ls-legacy-list-horizontal ul{
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

#header .wpml-ls-legacy-list-horizontal a{
	padding: 0 !important;
	margin: 0 0 0 0 !important;
	text-transform: uppercase;
}

.wpml-ls-legacy-list-horizontal a{
	padding: 0 !important;
	margin: 0 0 0 10px !important;
	text-transform: uppercase;
}

#header .wpml-ls-legacy-list-horizontal li:last-of-type{
	margin-left:15px;
}

.wpml-ls-legacy-list-horizontal .wpml-ls-current-language a::after{
	width:100%;
}

nav#navbar {
	position: relative;
	width: 50%;
	height: auto;
	border-left: 1px solid var(--c-500);

	@media (max-width: 1300.98px) {
		width: 65%;
	}

	ul#menu-top {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 var(--50) var(--50);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;

		li.menu-item {
			list-style: none;
			text-transform: uppercase;

			a {
				position: relative;
				text-decoration: none;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					bottom: calc(-1 * (var(--15) / 2));
					width: 0;
					height: 1px;
					background-color: var(--c-150);
					transition: var(--transition);
				}

				&:hover::after,
				&:focus-visible::after {
					left: 0;
					width: 100%;
				}
			}
		}
	}
}


#menu-toggle {
	position: fixed;
	top: var(--50);
	right: var(--50);
	width: 50px;
	height: 50px;
	background-color: var(--c-500);
	z-index: 999;
	border: none;
	border-radius: 50%;
	transition: var(--transition);

	&:hover {
		background-color: var(--c-600);
	}

	&:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.1);
		outline-offset: 2px;
	}

	&[aria-expanded="false"]::after {
		font-family: "Phosphor-Light" !important;
		content: "\e2f0";
		font-size: 20px;
		color: var(--c-150);
	}

	&[aria-expanded="true"]::after {
		font-family: "Phosphor-Light" !important;
		content: "\e4f6";
		font-size: 20px;
		color: var(--c-150);
	}
}


#menuMobile {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	padding: var(--50);
	background-color: var(--c-900);
	display: flex;
	justify-content: start;
	align-items: end;
	z-index: 998;
	transform: translateX(100%);
	transition: var(--transition);

	&.show {
		transform: translateX(0);
	}

	ul {
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		justify-content: end;
		gap: var(--50);

		li a {
			font-size: clamp(2rem, 2.5vw, 3rem);
			line-height: clamp(2rem, 2.5vw, 3rem);
			text-transform: uppercase;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: calc(-1 * (var(--15) / 2));
				width: 0;
				height: 1px;
				background-color: var(--c-150);
				transition: var(--transition);
			}

			&:hover::after,
			&:focus-visible::after {
				left: 0;
				width: 100%;
			}
		}
	}

	.wpml-ls-legacy-list-horizontal {
		ul {
			display: block;
		}
	
		a {
			font-size: 1.3rem;
	
		}
	
		.wpml-ls-current-language {
			a::after {
				width: 100%;
			}
		}
	}
}


/* FOOTER */

#contact-infos {
	display: flex;
	gap: var(--50);
}


/* PAGINE */

#hero {
	position: relative;

	@media (max-width: 991.98px) {
		display: flex;
		flex-direction: column-reverse;
	}
}

#virtual-tour-card {
	display: flex;
	padding: var(--50);
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--30);
	border-radius: 2px;
	background: var(--c-600);
}

#video-container {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vh - var(--elements-height));

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

	@media (max-width: 991.98px) {
		aspect-ratio: 1 / 1;
	}
}

#discover {
	display: flex;
	align-items: center;
	gap: var(--20);
	text-transform: uppercase;
	text-decoration: none;

	& .circle {
		padding: var(--20);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--c-500);
		border-radius: 50%;
		transition: var(--transition);
	}

	&::after {
		display: none;
	}

	&:hover .circle,
	&:focus-visible .circle {
		background-color: var(--c-500);
	}

}

#title-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	& #title {
		width: 50%;
		text-align: end;
		padding-left: var(--50);
		border-left: 1px solid var(--c-500);

		@media (max-width: 991.98px) {
			width: 100%;
			border-left: 0;
			text-align: start;
			padding-left: 0;
		}
	}
}

.dati {
	display: flex;
	flex-direction: column;
	gap: var(--20);

	& .dato {
		display: flex;
		flex-direction: row;
		gap: var(--10);
		align-items: center;
	}
}

.img-fullscreen {
	position: relative;

	& h2 {
		position: absolute;
		top: var(--50);
		left: var(--50);

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

/* PLANIMETRIE */

.piano-tablist {
	display: flex;
	flex-wrap: nowrap;
	/* gap: var(--10); */
	list-style: none;
	padding: 0;
	margin: 0;

	@media (max-width: 991.98px) {
		overflow-x: auto;
		margin-left: calc(-1 * var(--50));
		margin-right: calc(-1 * var(--50));
		padding-left: var(--50);
		padding-right: var(--50);
	}
}

.piano-tab {
	background-color: transparent;
	border: 1px solid var(--c-150);
	background-color: var(--c-150);
	border-radius: 2px;
	color: var(--c-600);
	cursor: pointer;
	padding: var(--15) var(--30);
	transition: var(--transition);
	position: relative;
	text-transform: uppercase;
	white-space: nowrap;
}

.piano-tab:hover,
.piano-tab:focus-visible {
	border: 1px solid var(--c-500);
	text-decoration: none;
}

.piano-tab[aria-selected="true"] {
	background-color: #FFF;
	border-color: #FFF;
	color: var(--c-900);
}

.piano-tab[aria-selected="true"]:focus-visible {
	outline: 2px solid rgba(0, 0, 0, .3);
	outline-offset: 2px;
}

[role="tabpanel"] {
	display: none;
	transition: opacity 0.3s ease;
}

[role="tabpanel"][aria-hidden="false"] {
	display: flex;
	opacity: 1;
}

.map-image {
	mix-blend-mode: darken;
	aspect-ratio: 372 / 209;
}

/* Stili per migliorare la lettura dei dati */
dt.value {
	margin: 0;
	margin-top: var(--20);
}

dd.label {
	margin: 0;
}

/* Helper class per elementi accessibili solo a screen reader */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Migliora la responsività per dispositivi mobili */
@media (max-width: 767.98px) {
	.piano-tab {
		padding: 8px 15px;
		font-size: 0.9rem;
	}

	dt.value {
		font-size: 1.5rem;
	}
}

.dettagli {
	width: 100%;
	display: flex;
	flex-direction: column;

	& .dettaglio {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: var(--10) 0;
		border-bottom: 1px solid var(--c-300);

		& .etichetta {
			opacity: .5;
			text-transform: uppercase;
		}
	}
}

#panel-villaA .list-unstyled, #panel-villaB .list-unstyled{
	height:120px;
}

.row.white-background {
	
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc(var(--bs-gutter-x) / 2);
		width: calc(100% - var(--bs-gutter-x));
		height: 100%;
		background-color: #FFF;
	}
}

/* FANCY BOX */

.fancybox__content {
	padding: 0;
}

.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,
.fancybox__carousel .fancybox__slide.has-map .fancybox__content,
.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content {
	height: 90% !important;
}

.fancybox__content > .carousel__button.is-close {
	position: fixed;
	top: var(--50);
	right: var(--50);
}

.description {
	display: flex;
	flex-direction: row;
	gap: var(--20);
	justify-content: flex-start;
	align-items: center;
	padding-bottom: var(--30);
	border-bottom: 1px solid var(--line-color);
}

/* COOKIE */

#nk-cookie-page-page p,
#nk-privacy-page-page p,
#nk-cookie-banner-banner p {
	text-indent: 0 !important;
}