/*
Theme Name: Stanza 101 Project
Theme URI:  https://stanza101project.com/
Author:     Raffaella Bonaschi
Author URI: https://www.wpserveur.net
Template:   astra
Version:    1.0
License:    GNU General Public License v2 or later
*/

/* Top Bar */

.top-bar {
    display: flex;
    height: 5px;
    width: 100%;
}

.top-bar div {
    flex: 1;
    height: 100%;
}

.red { background: red; }
.orange { background: orange; }
.yellow { background: yellow; }
.green { background: green; }
.blue { background: blue; }
.purple { background: #4B369D; }
.violet { background: #70369D; }

/* Typo */
html {
  font-size: 100%; /* Generalmente 16px */
}

/* Tipografia fluida per body */
body {
   font-size: clamp(1.2rem, 1.8vw, 1.5625rem) !important; /* 25px */
}

/* Titoli responsivi */
h1 {
  font-size: clamp(2.9rem, 6vw, 5.4rem) !important; /* 90px */
  font-weight: 900 !important;
  line-height: 1.1em !important;
  margin:0px!important;
  word-break: keep-all!important;
  white-space: normal!important;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4.375rem) !important; /* 70px */
  font-weight: 900 !important;
  line-height: 1.1em !important;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important; /* 40px */
}

h4 {
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important; /* 20px */
}

.titoletto {
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important; /* 20px */
}

/* Paragrafo adattivo */
p {
  font-size: clamp(1.25rem, 1.6vw, 1.35rem) !important; /* circa 20px - 21.6px */
  line-height: 1.5 !important;
  font-weight:400!important;
  margin-bottom:0px!important;
}

/* Footer adattivo */
.footer-link {
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important; /* 20px */
}

/* Stile per i testi di piccole dimensioni */
.small-text {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important; /* 20px */
}

.titolo-small{
	font-size: clamp(2.125rem, 3.8vw, 2.75rem) !important; /* circa 34px - 44px */
	line-height:1.2em;
}

.titolo-xsmall{
	font-size: clamp(1.625rem, 2.5vw, 2rem) !important; /* circa 26px - 32px */
	line-height:1.2em;
}

.titolo-xxsmall {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important; /* circa 20px - 24px */
    line-height: 1.2em;
}

/* Menu Link */
.main-header-menu > .menu-item > .menu-link {
	font-size: clamp(1rem, 3.2vw, 1.5625rem) !important; /* circa 16px - 25px */
	font-weight:600;
}

/* Assicura che gli item del menu si allarghino uniformemente */
.main-header-menu > .menu-item {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
}

/* Assicura che il link occupi tutto lo spazio disponibile */
.main-header-menu > .menu-item > .menu-link {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* Variabili CSS aggiornate */
:root {
  --font-small: clamp(1rem, 1.4vw, 1.25rem);   /* 20px */
  --font-base: clamp(1.2rem, 1.8vw, 1.5625rem);  /* 25px */
  --font-h1: clamp(2.5rem, 6vw, 5.4rem);     /* 90px */
  --font-h2: clamp(2rem, 5vw, 4.375rem);     /* 70px */
  --font-h3: clamp(1.5rem, 3vw, 2.5rem);     /* 40px */
  --font-h4: clamp(1rem, 1.5vw, 1.25rem);    /* 20px */
  --font-menu: clamp(1rem, 1.8vw, 1.4rem);   /* 22px */
  --dark-blue: #05263E;
}

/* Video Background */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Contenitore del video */
.video-container-hero {
    position: relative;
    width: 100%;
    height:88vh;
    overflow: hidden;
	display:flex;
	justify-content:flex-end;
	flex-direction:column;
	padding: 2.5em;
}

/* Video di sfondo */
.video-container-hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.video-container {
    position: relative;
    width: 100%;
    height:100%!important;
    overflow: hidden;
}

.video-container-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* effetto scurente */
    z-index: 1;
}

/* Video di sfondo */
.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
	display:block;
}

.video-desktop {
  display: block;
}

.video-mobile {
  display: none;
}

@media (max-width: 768px) {
  .video-desktop {
    display: none;
  }

  .video-mobile {
    display: block;
  }
}


/* Contenuto sopra il video */
.content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
    padding: 20px;
}

.content h1 {
    font-size: clamp(2rem, 5vw, 4rem); /* Titolo responsivo */
}

.content p {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

/* Titoli spacing */

.title-sm{
	margin-bottom:0.5em!important;
}

.title-big{
	position:relative;
	margin-bottom:0.5em!important;
	word-break: keep-all!important;
    white-space: normal!important;
	color:#f7f7f7!important;
	z-index: 2!important;
}

/* Elenco puntato solo per ul con classe "elenco" */
ul.elenco {
    list-style: none; /* Rimuove i puntatori predefiniti */
    padding-left: 0;
}

ul.elenco li {
    position: relative;
    padding-left: 50px; /* Spazio per l'icona */
    margin-bottom: 10px;
}

@media(max-width:900px){
    .entry-content ul.elenco {
        padding-left: 0px;
    }
	.video-container {
    position: relative;
    width: 100%;
    height:60vh!important;
    overflow: hidden;
}
	.video-container-hero {
    position: relative;
    width: 100%;
    height:60vh!important;
    overflow: hidden;
}
}

ul.elenco li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    transform: translateY(-50%); /* Centra l'icona verticalmente */
    width: 40px; /* Larghezza dell'icona */
    height: 40px; /* Altezza dell'icona */
    background-image: url('/wp-content/uploads/2025/03/asterisk-green.png'); /* Percorso dell'icona */
    background-size: contain; /* Adatta l'immagine al contenitore */
    background-repeat: no-repeat;
}

.elenco-item{
	color: var(--dark-blue);
	font-weight:400;
	font-size: clamp(1.25rem, 1.6vw, 1.35rem) !important; /* circa 20px - 21.6px */
}


.entry-content h2{
	margin-bottom:0px;
}

.entry-content h3{
	margin-bottom:0px;
}

.titolo-contatti{
	margin-bottom:1rem!important;
}

.titolo-progetti {
    font-size: clamp(2rem, 3.5vw, 5.5rem) !important;
    font-weight: 900 !important;
    line-height: 1em !important;
}


.titolo-progetti-2 {
  font-size: clamp(1.8rem, 3vw, 3.5rem) !important;
	font-weight:900!important;
	line-height:1em!important
}

.text-progetti{
	color: var(--dark-blue);
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row{
	align-items:center;
}

.img-menu{
	width:50px;
}
.img-menu-2{
	width:30px;
	margin-right:5px;
}

a:focus {
    outline: none;
}

.footer-text{
	color:#05263E;
}

/* Menu 

.menu {
    position: relative; 
	margin-right:3em;
}

@media(max-width:900px){
	.menu {
    position: relative; 
	margin-right:0em;
}
}

.menu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/uploads/2025/03/chi-siamo-e1742886811738.png');
    background-size: cover; 
    opacity: 0;
	transition: opacity 0.5s ease;}


.menu:hover::before {
    opacity: 1;
}



.menu-last {
    position: relative;
}


.menu-last::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: -35px; 
    transform: translateY(-50%); 
    width: 35px; 
    height: 35px;
    background-image: url('/wp-content/uploads/2025/03/chi-siamo-e1742886811738.png'); 
    background-size: cover; 
    opacity: 0; 
    transition: opacity 0.5s ease;
}


.menu-last:hover::before {
    opacity: 1; 
}*/

#masthead .ast-container{
	height:85px;
}

/* Button */

button {
 position: relative;
 border: none;
 background: transparent;
 padding: 0;
 cursor: pointer;
 outline-offset: 4px;
 transition: filter 250ms;
 user-select: none;
 touch-action: manipulation;
}

.shadow {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 12px;
 background: hsl(0deg 0% 0% / 0.25);
 will-change: transform;
 transform: translateY(2px);
 transition: transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.edge {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 12px;
 background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.front {
 display: block;
 position: relative;
 padding: 20px 70px;
 border-radius: 12px;
 font-size: 1.1rem;
 color: white;
 background: #ed4867;
 will-change: transform;
 transform: translateY(-4px);
 transition: transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

button:hover {
 filter: brightness(110%);
}

button:hover .front {
 transform: translateY(-6px);
 transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

button:active .front {
 transform: translateY(-2px);
 transition: transform 34ms;
}

button:hover .shadow {
 transform: translateY(4px);
 transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

button:active .shadow {
 transform: translateY(1px);
 transition: transform 34ms;
}

.front-text{
	line-height:1em;
}

/*
button:focus, a:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid #eb4b69 !important;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}*/
		
/* Box Progetti */

.box-reti {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
}

.box-reti::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 50%);
  transition: all 0.4s ease-out;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
}

.box-reti:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.box-reti:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	cursor:pointer;
	z-index: 10;
}

/* Disabilita hover su mobile */
@media (max-width: 900px) {
  .box-reti:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  .box-reti::before {
    display: none;
  }
}

/* Immagine Progetti */
.left-image {
  width: 100%;
  height: auto;
  object-fit: cover; 
}

.social{
	padding:0px!important;
}

/* Team */
.team-title{
	font-weight:700!important;
	line-height:1.2em!important;
	font-size:25px!important;
	color:#fff!important;
	text-align:center;
	width:100%;
	font-family:'Archivo', sans-serif!important;
}

.team-job{
	margin-top:10px;
	font-weight:400!important;
	line-height:1.2em!important;
	font-size:14px!Important;
	color:#fff;
	text-align:center;
}
/* Ecoavventura */
.icon-title{
	width:100px;
}

.flex-title{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:15px;
}

@media(max-width:768px){
	
.flex-title{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;;
	gap:25px;
}
	.title-big{
	margin-bottom:1rem!important;
}
}

.footer-link{
	color:#616c7b;
	font-size: 10pt!important;
}

.footer-link:hover{
	color:#ed4867;
	font-size: 10pt!important;
}

.site-header .site-description{
	font-size:10pt!important;
	width:150px;
	text-align:center;
	color:#05263e;
}

@media(max-width:768px){
	.ast-header-break-point .site-header .main-header-bar-wrap .site-branding{
		flex-direction:column;
	}
}

/* Sticky menu Astra - desktop e mobile */
.site-header.header-main-layout-1.ast-primary-menu-enabled.ast-logo-title-inline.ast-hide-custom-menu-mobile.ast-builder-menu-toggle-icon.ast-mobile-header-inline {
  position: sticky;
  top: 0;
  z-index: 9999;
/* o il colore di sfondo del tuo header */
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* opzionale per effetto ombra */
}

/* Se il menu mobile è in un altro contenitore */
.ast-header-break-point .main-header-bar {
  position: sticky;
  top: 0;
}

/* Azioni */
.icons-azioni{
	display:flex;
	gap:20px;
	align-items:center;
}

.icons-cf{
	display:flex;
	gap:20px;
	align-items:center;
}

.icon-text{
	color:#05263e;
	font-size: clamp(1.25rem, 1.6vw, 1.35rem) !important; /* circa 20px - 21.6px */
	font-weight:600!important;
	line-height:1.2em!important;
}


.azioni{
	font-size:40px!Important;
	color:#7bc12b;
}


.obiettivi{
	font-size:40px!Important;
	color:#ed4867!Important;
}

.icon-text-ob{
	color:#f7f7f7;
	font-size: clamp(1.25rem, 1.6vw, 1.35rem) !important; /* circa 20px - 21.6px */
	font-weight:600!important;
	line-height:1.2em!important;
}

@media(max-width:768px){
	h1 {
    font-size: clamp(2.3rem, 6vw, 2.5rem) !important; /* mobile: circa 28px–40px */
	line-height:1.3em!important;
  }
	.titolo-small {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem) !important; /* circa 24px - 34px */
  line-height:1.3em!important;
}
	
	.icons-azioni{
	display:flex;
	gap:20px;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	text-align:center;
}
	
	.icons-cf{
	display:flex;
	gap:20px;
	align-items:center!Important;
}
	
	.box-icon{
		width: 50px;
        padding-right: 10px;
	}
	
	
.menu-link{
	color:#fff!important;
}
.menu-link:hover{
	color:#DADADB!important;
}
}

.menu-link{
	color:#07273d!important;
}
.menu-link:hover{
	color:#DADADB!important;
}

.elenco-cf{
	transform:translatey(-15px);
}