/*
Theme Name: La Barbera
Description: 
Author: Studio GTomasselli.it
Template: flatsome
Version: 3.0
*/

/* =====================================================================
   VARIABILI CSS
   ===================================================================== */
:root {
	/* Colori */
	--fs-color-secondary-dark: #b09f62;
	
	/* Dimensioni frecce slider */
	--arrow-width: 111px;
	--arrow-height: 15px;
	--arrow-spacing: 15px;
	--arrow-margin: 30px;
	
	/* Dimensioni icone */
	--icon-bell-size: 16px;
	--icon-arrow-size: 20px;
	
	/* Spacing */
	--button-icon-gap: 8px;
	--button-padding: 10px;
	--button-padding-arrow: 30px;
	
	/* Transizioni */
	--transition-default: 0.4s ease;
	
	/* Border */
	--form-border-color: rgb(212, 209, 199);
	--form-height: 3.5em;
	
	/* Footer */
	--footer-bg-size: 800px;
	
	/* SVG Icons */
	--svg-bell: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3333 12.6664V11.3331C15.3309 9.50465 14.6461 7.74294 13.4131 6.39285C12.18 5.04276 10.4874 4.2015 8.66667 4.03377V3.14843C8.92086 3.00168 9.11952 2.77515 9.23184 2.50398C9.34416 2.23281 9.36387 1.93215 9.2879 1.64864C9.21194 1.36513 9.04454 1.11461 8.81168 0.935929C8.57882 0.75725 8.29351 0.6604 8 0.6604C7.70649 0.6604 7.42118 0.75725 7.18832 0.935929C6.95546 1.11461 6.78807 1.36513 6.7121 1.64864C6.63613 1.93215 6.65584 2.23281 6.76816 2.50398C6.88048 2.77515 7.07914 3.00168 7.33333 3.14843V4.03377C5.51259 4.2015 3.82001 5.04276 2.58694 6.39285C1.35386 7.74294 0.669088 9.50465 0.666667 11.3331V12.6664C0.489856 12.6664 0.320286 12.7367 0.195262 12.8617C0.0702379 12.9867 0 13.1563 0 13.3331C0 13.5099 0.0702379 13.6795 0.195262 13.8045C0.320286 13.9295 0.489856 13.9998 0.666667 13.9998H15.3333C15.5101 13.9998 15.6797 13.9295 15.8047 13.8045C15.9298 13.6795 16 13.5099 16 13.3331C16 13.1563 15.9298 12.9867 15.8047 12.8617C15.6797 12.7367 15.5101 12.6664 15.3333 12.6664ZM2 11.3331C2.31533 3.3771 13.6873 3.3831 14 11.3331V12.6664H2V11.3331Z' fill='black'/%3E%3C/svg%3E");
	
	--svg-arrow-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M7.875 6.125L13.641251 6.125L3.5 16.26625L4.7337499 17.5L14.875 7.3587499L14.875 13.125L16.625 13.125L16.625 4.375L7.875 4.375L7.875 6.125Z'/%3E%3C/svg%3E");
	
	--svg-arrow-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="111" height="15" viewBox="0 0 111 15"><path d="m 102.35363,0.79119055 6.34495,6.34494905 -108.19827532,-1e-6 8.9e-7,1.000605 108.19827443,2e-6 -6.34495,6.3449484 0.70965,0.709647 7.5549,-7.5549004 -7.5549,-7.55490015 z"/></svg>');
	
	--svg-arrow-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="111" height="15" viewBox="0 0 111 15"><path d="m 8.64637,0.79119055 -6.34495,6.34494905 108.19827532,-1e-6 -8.9e-7,1.000605 -108.19827443,2e-6 6.34495,6.3449484 -0.70965,0.709647 -7.5549,-7.5549004 7.5549,-7.55490015 z"/></svg>');

    --background-image-navigation-column: url('/wp-content/uploads/2025/11/doccia-1.webp');
}

/* =====================================================================
   LAYOUT GENERALE
   ===================================================================== */
.header .container {
	max-width: 90%;
}

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0.3px;
}

/* =====================================================================
   HEADER
   ===================================================================== */

/* --- Header Button --- */
.header-button-1 .button span {
	align-content: center;
}

.header-main .header-button-1 .header-button > .button {
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	gap: var(--button-icon-gap);
	padding: var(--button-padding);
}

.header-main .header-button-1 .header-button > .button:hover {
	background-color: var(--fs-color-primary) !important;
	border-color: var(--fs-color-primary) !important;
}

/* Icona bell nel button header */
.header-main .header-button-1 .header-button > .button::before {
	content: '';
	width: var(--icon-bell-size);
	height: var(--icon-bell-size);
	background-color: currentColor;
	-webkit-mask-image: var(--svg-bell);
	mask-image: var(--svg-bell);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* --- Header Stuck (fisso) --- */
.stuck .header-main .header-button-1 .header-button > .button {
	background-color: var(--fs-color-primary) !important;
	border-color: var(--fs-color-primary) !important;
	color: white !important;
}

.stuck .header-main .header-button-1 .header-button > .button:hover {
	background-color: var(--fs-color-primary) !important;
}

.stuck .header-main .nav > li > a > i:not(.icon-angle-down) {
	color: var(--fs-color-primary) !important;
}

.stuck .header-main .nav > li > a:hover > i:not(.icon-angle-down) {
	color: var(--fs-color-primary) !important;
}

/* =====================================================================
   NAVIGAZIONE
   ===================================================================== */

/* --- Menu Desktop --- */
.nav > li > a > i.icon-menu {
	font-size: 2.9em;
}

/* --- Menu Verticale in generale --- */
.nav.text-center.nav-center > li > a {
	justify-content: center;
}

/* Menu verticale off-canvas */
/* Grid con 3 colonne: vuota - link - toggle */
.off-canvas-center .nav-sidebar.nav-vertical > li.has-child {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

/* Il link va nella colonna centrale */
.off-canvas-center .nav-sidebar.nav-vertical > li.has-child > a {
    grid-column: 2;
    justify-self: end;
}

/* Il toggle va nella terza colonna */
.off-canvas-center .nav-sidebar.nav-vertical > li .toggle {
    position: static;
    grid-column: 3;
    justify-self: start;
	padding-bottom:15px;
}

/* L'ul sub-menu occupa tutte e 3 le colonne e si centra */
.off-canvas-center .nav-sidebar.nav-vertical > li.has-child > ul.sub-menu {
    grid-column: 1 / -1; /* span su tutte le colonne */
    text-align: center; /* centra i contenuti dell'ul */
}

.off-canvas-center .nav-sidebar.nav-vertical > li.active > .toggle {
    transform: translateY(-36%) rotate(-180deg); /* combina entrambi */
}

/* --- Main Menu --- */
#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover {
	background-color: transparent;
}

#main-menu .nav > li > a {
	color: white;
	display: block;
}

#main-menu .nav > li > a:after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.1);
	margin: 14px auto 0;
}

#main-menu .nav > li > ul > li > a {
	font-size: 1.2em;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

/* --- Base Button --- */
.button {
	font-weight: normal;
	display: inline-flex;
}

.button.is-outline {
	border-width: 1px;
}

/* --- Slide Button --- */
.button.is-slide {
	font-weight: normal;
	color: var(--fs-color-base);
	display: inline-flex;
	border: none;
	transition: color var(--transition-default);
	background: transparent;
}

.button.is-slide.secondary {
	border-left: solid 1px var(--fs-color-secondary);
	color: var(--fs-color-base);
}

.button.is-slide span {
	z-index: 1;
}

/* Effetto slide bidirezionale */
.button.is-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: var(--fs-color-secondary);
	transition: width var(--transition-default);
	z-index: 0;
}

.button.is-slide:hover {
	background-color: transparent;
}

.button.is-slide:hover::before {
	width: 100%;
}

.button.is-slide:hover,
.button.is-slide.secondary:hover {
	color: white;
}

/* --- Arrow Button --- */
.button.arrow-right {
	padding-right: calc(1.2em + var(--button-padding-arrow));
}

.button.is-slide.arrow-right {
	padding-right: calc(1.2em + var(--button-padding-arrow));
}

.button.arrow-right::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: var(--icon-arrow-size);
	height: var(--icon-arrow-size);
	mask-image: var(--svg-arrow-diagonal);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var(--svg-arrow-diagonal);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background-color: var(--fs-color-primary);
	transition: all var(--transition-default);
	z-index: 1;
}

.button.arrow-right:hover::after {
	transform: translateY(-50%) translateY(-5px);
}

.button.arrow-right.arrow-light::after {
	background-color: white;
}

/* Override inline styles - !important necessario */
.button.is-slide.secondary.arrow-right:hover::after {
	background-color: white;
}


.scroll-down-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: bounce 2s infinite;
}

.scroll-down-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Icona freccia SVG - PERFETTAMENTE CENTRATA */
.scroll-down-btn::after {
	background-color: rgba(255,255,255);
    content: '';	
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
	
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

        /* Animazione bounce */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(-10px);
	}
	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}


/* =====================================================================
   BANNER
   ===================================================================== */
.banner.no-container .banner-inner > .container {
	max-width: none;
}

.banner.container-95 .banner-inner > .container {
	max-width: 85%;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
	background-image: url(/wp-content/uploads/2025/10/tile-scaled.webp);
	background-repeat: repeat;
	background-size: var(--footer-bg-size) var(--footer-bg-size);
	background-position: top center;
}

.absolute-footer {
	display: none;
}

/* =====================================================================
   SUITES
   ===================================================================== */
.background-navigation-column {
	position:relative;	
}

.background-navigation-column::before {
	content: '';
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 0;
  	background-image: var(--background-image-navigation-column);
  	background-size: cover;
  	background-position: 64% 100%;
  	background-repeat: no-repeat;
  	filter: grayscale(70%) opacity(27%);
}

.background-navigation-column > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   BOOKING WIDGET
   ===================================================================== */
.wubook-widget-container {
	height: 88px;
	z-index: 99999;
}

/* =====================================================================
   SLIDER & RECENSIONI GOOGLE
   ===================================================================== */

/* --- Colori e opacità --- */
.slider .flickity-prev-next-button,
.wp-gr .grw-btns {
	opacity: 1;
}

/* Override inline styles - !important necessario */
.slider .flickity-prev-next-button:disabled,
button.flickity-prev-next-button[disabled] {
	opacity: .4 !important;
}

.slider .flickity-prev-next-button::before,
.slider .flickity-prev-next-button:hover::before,
.wp-gr .grw-btns::before,
.wp-gr .grw-btns:hover::before {
	background-color: var(--fs-color-secondary-dark) !important;
}

/* Nascondi icone default */
.slider .flickity-prev-next-button .flickity-button-icon,
.wp-gr .grw-btns svg {
	display: none;
}

/* --- Layout recensioni --- */
/* Override inline styles - !important necessario */
.wp-gr .grw-btns {
	position: absolute !important;
}

.wp-gr[data-layout=slider] .grw-reviews {
	gap: 4px !important;
}

/* --- Posizionamento e dimensioni --- */
/* Override inline styles - !important necessario */
.slider .flickity-prev-next-button {
	bottom: initial !important;
	left: initial !important;
	top: 20px !important;
	right: 0 !important;
	width: auto !important;
}

.wp-gr .grw-btns {
	top: -20px !important;
	right: 0 !important;
}

.wp-gr .grw-btns.grw-next,
.wp-gr .grw-btns.grw-prev {
	width: auto !important;
	height: auto !important;
}

/* Posizionamento freccia precedente - Calcolo: 0 - larghezza freccia - margine */
.slider .flickity-prev-next-button.previous {
	right: calc(-1 * (var(--arrow-width) + var(--arrow-margin))) !important;
}

/* Posizionamento freccia successiva - Calcolo: 0 - (2 frecce + 2 margini) */
.slider .flickity-prev-next-button.next {
	right: calc(-1 * (var(--arrow-width) * 2 + var(--arrow-spacing) + var(--arrow-margin))) !important;
}

.wp-gr .grw-btns.grw-prev {
	right: calc(var(--arrow-width) + var(--arrow-spacing)) !important;
}

.wp-gr .grw-btns.grw-next {
	right: 0 !important;
}

/* --- Stile frecce personalizzate --- */
.slider .flickity-prev-next-button.next::before,
.slider .flickity-prev-next-button.previous::before,
.wp-gr .grw-btns.grw-prev::before,
.wp-gr .grw-btns.grw-next::before {
	content: '';
	display: block;
	width: var(--arrow-width);
	height: var(--arrow-height);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* Freccia destra */
.slider .flickity-prev-next-button.next::before,
.wp-gr .grw-btns.grw-next::before {
	-webkit-mask-image: var(--svg-arrow-right);
	mask-image: var(--svg-arrow-right);
}

/* Freccia sinistra */
.slider .flickity-prev-next-button.previous::before,
.wp-gr .grw-btns.grw-prev::before {
	-webkit-mask-image: var(--svg-arrow-left);
	mask-image: var(--svg-arrow-left);
}

/* =====================================================================
   FORM
   ===================================================================== */
.select-resize-ghost,
.select2-container .select2-choice,
.select2-container .select2-selection,
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
	box-shadow: none;
	border: 1px solid var(--form-border-color);
	height: var(--form-height);
}
.sent .contact-form {display:none;}

/* =====================================================================
   CLASSI UTILITY
   ===================================================================== */

/* --- Allineamento --- */
.button.text-left {
	justify-content: flex-start;
	text-align: left;
}

/* --- Dimensioni button --- */
.button.wide {
	min-width: 250px;
}

.button.full-width {
	width: 100%;
	justify-content: space-between;
}

/* --- Padding --- */
.py-small {
	padding-top: 8px;
	padding-bottom: 8px;
}

.py-xsmall {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* --- Varie --- */
.no-border {
	border: 0 !important;
}

.is-full-height.is-full-height-dekstop {height:calc(100% - 100px) !important}

.nav-is-bold-hover > li > a {font-weight:400 !important;}
.nav-is-bold-hover > li.active > a, .nav-is-bold-hover > li > a:hover {font-weight:800 !important;}

/* =====================================================================
   MEDIA QUERIES - MOBILE
   ===================================================================== */

@media (min-width:549px){
	.has-video .bg {
		display: inline-block !important;
	}
}

@media only screen and (max-width: 48em) {
	
	/* --- Buttons Mobile --- */
	.button.is-slide {
		font-size: 14px;
		padding: 4px 24px;
	}
	
	.button.has-arrow,
	.button.arrow-auto {
		padding-right: 50px;
	}
	
	.button.is-slide .button-arrow,
	.button.arrow-auto::after {
		right: 15px;
	}
	
	/* Movimento freccia ridotto su mobile */
	.button.is-slide:hover .button-arrow,
	.button.arrow-auto:hover::after {
		transform: translateY(-50%) translateY(-3px);
	}
	
	/* --- Layout Mobile --- */
	.is-full-height.is-full-height-dekstop {
		height: auto;
		min-height: 1px;
	}
}