/*
Theme Name: Spazio Viterbo  
Theme URI:    https://www.spazioviterbo.it
Description: Sito web dello Spazio Viterbo
Author: Studio GTomasselli
Author URI:   https://www.gtomasselli.it
Text Domain:  spazioviterbo
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* VARIABILI COLORE BRAND */
:root {
  /*--color-lush-indigo: #253E53;*/
  --color-lush-indigo: var(--fs-color-primary);	
  --color-real-indigo: #5a7589;
  --color-subtle-sky: #adb3bd;
  --color-rosso-cardinale: #c41e3a;
  /*--color-rosso-scuro: #902537;*/
  --color-rosso-scuro: var(--fs-color-secondary);	
  /*--color-verde-foresta: #00673a;*/
  --color-verde-foresta: var(--fs-color-success);	
  --color-verde-foresta-light: #228b22;
  --color-oro: #ecad00;
  --color-grigio-peperino: #d1d3d4;
  --rounded-card-radius: 46px;
  --rounded-card-radius-mobile: 30px;
  --rounded-card-radius-small: 46px;
  --rounded-card-radius-medium: 46px;
  --rounded-card-radius-large: 50px;
  --rounded-card-radius-xl: 64px;
	
  --custom-arrow-circle-width:40px;	
	
}


/* Font weights specifici */
/*h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

h3, h4 {
  font-weight: 600;
}*/

/* MENU PERSONALIZZAZIONI */
.header-main {
  /*backdrop-filter: blur(10px);*/
}

.nav-top > li > a {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 0.9rem;
}

/* BOTTONI CUSTOM */
.button.primary {
  background-color: var(--color-lush-indigo) !important;
  border-color: var(--color-lush-indigo) !important;
}

.button.primary:hover {
  background-color: var(--color-rosso-cardinale) !important;
  border-color: var(--color-rosso-cardinale) !important;
}

.button.outline.white:hover {
  background-color: white !important;
  color: var(--color-lush-indigo) !important;
}

/* ANIMAZIONI SMOOTH */
.button, .nav-top > li > a, .ux-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* IMMAGINI CON DEPTH EFFECT */
.img-has-depth-3 {
  box-shadow: 0 20px 40px rgba(37, 62, 83, 0.2);
  border-radius: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-has-depth-3:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(37, 62, 83, 0.3);
}

/* SEZIONI SPACING */
.section-content {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* FORM STYLING */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  border: 2px solid #e5e7eb !important;
  border-radius: 3px !important;
  padding: 15px !important;
  font-size: 1rem !important;
  transition: border-color 0.3s ease !important;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  border-color: var(--color-lush-indigo) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 62, 83, 0.1) !important;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--color-lush-indigo) !important;
  color: white !important;
  border: none !important;
  padding: 15px 40px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: var(--color-rosso-cardinale) !important;
}

/* SLIDER PERSONALIZZAZIONI */
/*.flickity-button {
  background: var(--color-lush-indigo) !important;
}

.flickity-button:hover {
  background: var(--color-rosso-cardinale) !important;
}

.flickity-page-dots .dot {
  background: var(--color-oro) !important;
}*/

/* SOCIAL ICONS */
.icon-box .icon-inner {
  transition: all 0.3s ease;
}

.icon-box:hover .icon-inner {
  transform: scale(1.1);
  color: var(--color-rosso-cardinale) !important;
}

/* TESTI CON EFFETTI */
.text-shadow-1 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* OVERLAY PERSONALIZZATI */
.bg-overlay {
  transition: opacity 0.3s ease;
}

.ux_banner:hover .bg-overlay {
  opacity: 0.7;
}



/* FOOTER CUSTOMIZATION */
#footer {font-size:14px;}
.absolute-footer {
	background-color:#12212e !important;

  color: rgba(255, 255, 255, 0.8) !important;
}

.absolute-footer a {
  color: var(--color-oro) !important;
}

.absolute-footer a:hover {
  color: white !important;
}

#footer hr { color:rgba(255,255,255,0.2) !important; opacity:1 !important;}

@media screen and (min-width: 850px) {
	
    #footer  .row-divided > .col + .col:not(.large-12) {
        border-left:1px solid rgba(255,255,255,0.2);
    }
}

/* ANIMAZIONI CUSTOM */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out;
}

/* HOVER EFFECTS PER CARD */
/*.col:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}*/

/* LOGO IN HEADER */
.header-logo img {
  /*max-height: 60px;*/
  transition: transform 0.3s ease;
}

.header-logo:hover img {
  transform: scale(1.05);
}

/* BREADCRUMBS */
.breadcrumbs {
  color: var(--color-lush-indigo);
}

.breadcrumbs a {
  color: var(--color-rosso-cardinale);
}

/* ACCENTI DORATI */
.text-accent {
  color: var(--color-oro) !important;
}

/* BORDI E SEPARATORI */
.section-divider {
  border-top: 2px solid #e5e7eb;
  margin: 60px auto;
  max-width: 200px;
}

/* LINKS STYLING */
a {
  color: var(--color-rosso-cardinale);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-rosso-scuro);
}

/* IMMAGINI FULL WIDTH OPTIMIZATION */
.section-bg img {
  object-fit: cover;
  object-position: center;
}

/* GARANTIRE LEGGIBILITA' */
.dark p, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: white !important;
}


/* ============================================
   CSS SLIDER CARD CON ANGOLI ARROTONDATI
   ============================================ */

/* STILE BASE CARD ARROTONDATE */
.card-rounded-slider {
  border-radius: var(--rounded-card-radius) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Immagine di sfondo segue i bordi arrotondati */
.card-rounded-slider .banner-bg {
  border-radius: var(--rounded-card-radius) !important;
  overflow: hidden !important;
}

/* HOVER EFFECT - Card si solleva leggermente */
.card-rounded-slider:hover {
  transform: translateY(-10px) scale(1.02);
}

/* Assicura che l'immagine non esca dai bordi */
.card-rounded-slider .banner-inner,
.card-rounded-slider .bg-fill {
  border-radius: var(--rounded-card-radius) !important;
  overflow: hidden !important;
}

/* SPACING TRA LE CARD */
.card-rounded-slider {
  margin: 15px !important;
}

/* Compensa il margin aggiunto */
.flickity-viewport {
  /*padding: 15px 0 !important;*/
}


/* ============================================
   STILE CARD CON GRADIENT OVERLAY
   ============================================ */

.card-rounded-slider .bg-overlay {
  border-radius: var(--rounded-card-radius) !important;
}


/* ============================================
   OTTIMIZZAZIONE PRESTAZIONI
   ============================================ */

.card-rounded-slider {
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-rounded-slider img {
  transform: translateZ(0);
}

/* ============================================
   VISUALIZZAZIONE SLIDER
   ============================================ */
.visible-overflow-flickity-viewport .flickity-viewport {overflow:visible;}

.slider-nav-dark .flickity-prev-next-button:hover .arrow,
.slider-nav-dark .flickity-prev-next-button svg 
{fill:white;color:white;}

.flickity-prev-next-button:hover svg,
/*.flickity-prev-next-button:hover .flickity-button-icon,*/
/*.flickity-prev-next-button:hover .flickity-button-icon path,*/
/*.flickity-prev-next-button:hover .arrow {
  fill: #fff !important;
  color: #fff !important;
}*/


/* ============================================
   NAVIGAZIONE SLIDER PERSONALIZZATA
   (se abiliti le frecce)
   ============================================ */

/* Forza la visualizzazione delle frecce sempre */
/*.slider-arrows-always .flickity-button,
.slider-arrows-always .flickity-prev-next-button:disabled, 
.slider-arrows-always button.flickity-prev-next-button[disabled]{
  display: block !important;
  opacity: 1 !important; /* Oppure cambio il background*
  pointer-events: auto !important;
}*/

/* --- Colori e opacità --- */
.slider-arrows-always .slider .flickity-prev-next-button {
	opacity: 1;
}

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

.slider-arrows-always .slider .flickity-prev-next-button::before,
.slider-arrows-always .slider .flickity-prev-next-button:hover::before {
	background-color: var(--fs-color-secondary) !important;
}

/* --- Posizionamento e dimensioni --- */
/* Override inline styles - !important necessario */


.slider-arrow-close-title .flickity-button:hover {
  background: rgba(196, 30, 58, 0.9) !important;
}

.slider-arrow-close-title .flickity-button-icon {
  fill: white !important;
}


.slider-arrow-close-title  .slider .flickity-prev-next-button {
	bottom: initial !important;
	left: initial !important;
	top: -85px !important;
	right: 0 !important;
background: rgba(37, 62, 83, 0.9) !important;
  border-radius: 50% !important;
  width: var(--custom-arrow-circle-width) !important;
  height: var(--custom-arrow-circle-width) !important;
	font-size:0.1em;
}

/* Posizionamento freccia precedente - Calcolo: 0 - larghezza freccia - margine */
.slider-arrow-close-title .slider .flickity-prev-next-button.previous {
		right: calc((var(--custom-arrow-circle-width) + 10px)) !important;

}

.slider-arrow-close-title /* Posizionamento freccia successiva - 0 px */
.slider .flickity-prev-next-button.next {
	right: 0px !important;
}

/* --- Stile frecce personalizzate --- */
/*.slider-arrow-close-title .slider .flickity-prev-next-button.next::before,
.slider-arrow-close-title .slider .flickity-prev-next-button.previous::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;
}*/

/* ============================================
   SLIDER DELLE NEWS HOMEPAGE
   ============================================ */
.slide-home-blog-post .box.box-vertical.box-blog-post {display: flex;}
.slide-home-blog-post .box.box-vertical.box-blog-post .box-text {order: 1; width:50%; }
.slide-home-blog-post .box.box-vertical.box-blog-post .box-image {order: 2; padding: 50px;}
.slide-home-blog-post .is-divider {width:100%; max-width: 120px;background-color: var(--color-oro);}



/* ============================================
   FIX PER COMPATIBILITA' FLATSOME
   ============================================ */

/* Assicura che il contenitore non tagli le ombre */
/*.slider-wrapper,
.flickity-slider {
  overflow: visible !important;
}*/

/* Fix per evitare che le card si sovrappongano */
/*.card-rounded-slider .flickity-cell {
  z-index: 1;
}

.card-rounded-slider .flickity-cell.is-selected {
  z-index: 2;
}*/


/* ============================================
   VARIANTI DISPONIBILI - AGGIUNGI CLASSI
   ============================================ */

/*
Aggiungi queste classi al tuo shortcode per attivare gli stili:

class="card-rounded-slider"                  → Base (necessaria sempre)
class="card-rounded-slider glass-effect"     → Con glassmorphism
class="card-rounded-slider card-hover-effect"→ Contenuto appare al hover

Esempio combinato:
class="card-rounded-slider card-bordered accent-gold"
*/


/* ============================================
   ALTERNATIVE BORDER-RADIUS
   ============================================ */

/* Se 46px è troppo, usa queste varianti: */

.card-rounded-slider.radius-small {
  border-radius: var(--rounded-card-radius-small) !important;
}

.card-rounded-slider.radius-medium {
  border-radius: var(--rounded-card-radius-medium) !important;
}

.card-rounded-slider.radius-large {
  border-radius: var(--rounded-card-radius-large) !important;
}

.card-rounded-slider.radius-xl {
  border-radius: var(--rounded-card-radius-xl) !important;
}

/* ============================================
   FINE CSS SLIDER CARD
   ============================================ */

.services-box .col-inner {
	min-height:340px; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	
}

.services-box .concept-list {
	--arrow-width: 18px;
	--arrow-gap: 18px;
	--text-color: #f5f5f1;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.15;
}

.services-box .concept-list li {
	position: relative;
	padding-left: calc(var(--arrow-width) + var(--arrow-gap));
	display: flex;
	align-items: center;
	margin-bottom:3px;
}

.services-box .concept-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--arrow-width);
	height: 26px;

	background-image: url("data:image/svg+xml,%3Csvg width='48' height='26' viewBox='0 0 48 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13H44' stroke='%23F5F5F1' stroke-width='3' stroke-linecap='square'/%3E%3Cpath d='M34 2L45 13L34 24' stroke='%23F5F5F1' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transform: translateY(-50%);
}

.wpcf7 label.privacy {
	font-size:75%;
	position: relative;
	display: block;
	padding-left: 25px;
	line-height: 1.5;
	font-weight:normal; margin-bottom:calc(6.91px + 16px);
}

.wpcf7 label.privacy > .wpcf7-form-control-wrap {
	position: absolute;
	top: 0;
	left: 0;
}

.wpcf7 label.privacy .wpcf7-list-item {
	margin: 0;
}

.wpcf7 label.privacy input[type="checkbox"] {
	margin: 0;
}

.wpcf7 .wpcf7-submit:disabled,
.wpcf7 .wpcf7-submit[disabled],
.wpcf7 .wpcf7-submit[aria-disabled="true"] {
	background-color: #b8b8b8 !important;
	border-color: #b8b8b8 !important;
	color: #ffffff !important;
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
	transform: none !important;
	filter: grayscale(100%);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/  
  .section-content {
    padding-top: 40px;
    padding-bottom: 40px;
  }

	/* Su mobile card più piccole e bordi meno arrotondati */
  .card-rounded-slider {
    border-radius: var(--rounded-card-radius-mobile) !important;
  }
  
  .card-rounded-slider .banner-bg,
  .card-rounded-slider .banner-inner,
  .card-rounded-slider .bg-fill {
    border-radius: var(--rounded-card-radius-mobile) !important;
  }
  
  /* Meno margin su mobile */
  .card-rounded-slider {
    margin: 10px !important;
  }
	
	.services-box h2 {font-size:35px;}
	.services-box .col-inner {
		min-height:300px;
	}
	
	.services-box .concept-list {
		--arrow-width: 14px;
		--arrow-gap: 14px;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.15;
	}
}