/* =========================
   Variabili / Base Reset
========================= */
:root{
  --c-text:#333;
  --c-white:#fff;
  --c-offwhite:rgb(254,255,251);
  --c-brand:#e7cb93;
  --c-brand-strong:#f0896a;
  --c-header-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.6);
  --c-fullscreen-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.9);
  --tr-fast:.3s ease;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  min-height:100vh;
  font-family:Arial, sans-serif;
  color:var(--c-text);
  overflow-x:hidden;
}



body {
  /* niente transform sul body! */
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
              url('../img/home.png') no-repeat center center / cover;
}

/* Accessibilità: elementi focus */
a, button{
  outline:none;
}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--c-offwhite);
  outline-offset:2px;
}

/* =========================
   Header / Navigazione
========================= */
header{
  position:relative;
  width:100%;
  height:10vh;
  min-height:64px;
  display:flex;
  align-items:center;
  background:var(--c-header-grad);
}

.header-content{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1% 0;
}

/* Logo + testi */
.header-icon{
  width:clamp(10px, 10vw, 60px);
  max-width:60px;
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
}

.header-text{
  position:absolute;
  top:50%;
  left:calc(5px + 70px);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

header h1{
  margin:0;
  font-size:clamp(.5rem, 2vw, 1.3rem);
  color:var(--c-offwhite);
}
header .subtitle{
  margin:5px 0 0 0;
  font-size:clamp(.4rem, 1.2vw, .9rem);
  font-style:italic;
  color:var(--c-offwhite);
}

/* Adattamenti landscape con poca altezza */
@media (max-height:500px) and (orientation:landscape){
  .header-icon{ width:25px; }
  .header-text{ left:calc(10px + 40px); }
}

/* Nav principale */
.nav-bar{
  display:flex;
  align-items:center;
  margin-left:auto;
}

.nav-bar .menu{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-bar .menu li + li{ position:relative; }
.nav-bar .menu li + li::before{
  content:"|";
  opacity:.5;
  margin-right:.75rem;
  color:var(--c-offwhite);
}

.nav-bar a{
  color:var(--c-offwhite);
  text-decoration:none;
  font-size:1.1em;
  transition:color var(--tr-fast), text-decoration var(--tr-fast);
}
.nav-bar a:hover{ color:#333; }

/* Hamburger */
.hamburger{
  font-size:1.5em;
  cursor:pointer;
  display:none;
  color:var(--c-offwhite);
  background:none;
  border:0;
}

/* Menu fullscreen (mobile) */
.fullscreen-menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0;
  background:var(--c-fullscreen-grad);
  z-index:9999;
}
.fullscreen-menu[hidden]{ display:none; }

.fullscreen-menu a{
  color:var(--c-offwhite);
  font-size:1.5em;
  text-decoration:none;
}

.close-btn{
  position:absolute;
  top:20px;
  right:20px;
  font-size:2em;
  color:var(--c-offwhite);
  background:none;
  border:none;
  cursor:pointer;
}

/* Nav responsive */
@media (max-width:965px){
  .nav-bar .menu{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}

/* =========================
   Main / Hero
========================= */
main{
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

#team-section{
  padding:5vh 3vw;
  text-align:center;
  color:var(--c-offwhite);
  width:90%;
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#team-section h2{
  font-size:clamp(1.5rem, 2.5vw, 4.5rem);
  color:var(--c-offwhite);
  margin:0 0 5px;
  font-weight:bold;
}
#team-section p{
  font-size:clamp(.9rem, 3vw, 1.1rem);
}

@media (min-width:1024px){
  #team-section{ padding:6vh 5vw; max-width:70%; }
}
@media (max-width:600px){
  #team-section{ width:95%; }
  #team-section h2{ font-size:clamp(1.2rem, 4vw, 1.8rem); }
  #team-section p{ font-size:clamp(.9rem, 3vw, 1.1rem); }
}

/* =========================
   Sezioni Contatti
========================= */
.contatti{
  width:100%;
  background:var(--c-white);
  padding:30px 0;
}

.contatti-contenitore{
  display:flex;
  align-items:flex-start;
  width:100%;
}

.testo{
  margin-left:5%;
  margin-right:40px;
}
.separatore{
  width:1px;
  height:200px;
  background:#ccc;
  margin-right:20px;
}
.lista-contatti{ margin-left:20px; }

.lista-contatti ul{
  list-style:none;
  margin:0;
  padding:0;
}
.lista-contatti li{
  display:flex;
  align-items:center;
  margin:30px 0;
}
.icon{
  width:24px;
  height:24px;
  margin-right:10px;
}

/* Mobile layout contatti */
@media (max-width:800px){
  .contatti-contenitore{
    flex-direction:column;
    padding:0 10px;
  }
  .testo{
    width:100%;
    margin:0 0 20px;
    text-align:center;
    font-size:15px;
  }
  .separatore{
    align-self:center;
    width:70%;
    height:1px;
    margin-bottom:20px;
  }
  .lista-contatti{
    margin:10px 0 0;
    width:80%;
    text-align:left;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding-left:0;
  }
  .lista-contatti li{
    margin:0 30px;
    padding:10px 0;
    justify-content:flex-start;
  }
  .lista-contatti a{ width:80%; font-size:12px; }
  .icon{ width:20px; height:20px; margin-right:10px; }
}

/* Icone social */
.in-icon{
  width:30px;
  height:30px;
  display:block;
  margin:0 auto;
}

/* Blocco social */
.info-section{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  padding:20px 0;
  width:100%;
  gap:30px;
}
#contact-info{ background:var(--c-white); }

.link{
  text-decoration:none;
  color:var(--c-text);
}
.link:hover{
  color:var(--c-brand-strong);
  text-decoration:underline;
}

/* =========================
   Mappa + Form
========================= */
#contacts{
  width:100%;
  background:var(--c-white);
}

.contacts-wrapper{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  overflow-x:hidden;
}

.map-box,
.form-box{
  flex:1 1 45%;
  min-width:300px;
  height:450px;
  overflow:hidden;
}

.form-box{
  padding:20px;
  display:flex;
  flex-direction:column;
}
.form-box h2,
.form-box p{
  margin-left:3%;
  color:var(--c-brand);
  align-self:center;
}
.form-box form{
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:center;
}
.form-box input,
.form-box textarea{
  width:90%;
  padding:12px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:10px;
}
.form-box button{
  width:50%;
  padding:12px;
  font-size:16px;
  background:var(--c-brand);
  color:var(--c-white);
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:background-color var(--tr-fast), transform var(--tr-fast);
}
.form-box button:hover{
  background:var(--c-brand-strong);
  transform:translateY(-1px);
}

/* Responsive mappa+form */
@media (max-width:768px){
  .contacts-wrapper{
    flex-direction:column;
    align-items:stretch;
  }
  .map-box{ width:100%; height:300px; margin:0; padding:0; }
  .map-box iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
  }
  .form-box{
    width:90%;
    margin:0 auto;
    padding:20px;
  }
}

/* =========================
   Footer
========================= */
footer{
  color:var(--c-offwhite);
  text-align:center;
  padding:clamp(8px, 3vw, 15px);
  width:100%;
  background:var(--c-header-grad);
  margin:0 auto;
  font-size:clamp(.9em, 2vw, 1.2em);
  box-sizing:border-box;
}
@media (max-width:768px){
  footer{
    padding:clamp(7px, 4vw, 9px);
    font-size:clamp(.8em, 3vw, 1em);
  }
}

.footer-content{ text-align:center; padding:20px; }

.footer-menu{
  list-style:none;
  padding:0;
  margin:5px 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.footer-menu li{ display:inline; font-size:1em; }
.footer-menu-inline li{
  font-size:clamp(.6em, 3vw, .8em);
}
.footer-menu a{
  text-decoration:none;
  color:var(--c-offwhite);
}
.footer-menu a:hover{ text-decoration:underline; }

/* separatori solo visivi nel menu footer principale (non usare <li>|</li>) */
.footer-menu li + li::before{
  content:"|";
  color:#aaa;
  opacity:.7;
  margin-right:8px;
}

/* Nota legale */
.footer-small{
  padding-top:1%;
  font-size:clamp(.6em, 3vw, .8em);
}

/* Footer responsive */
@media (max-width:768px){
  .footer-content{ padding:15px; }
  .footer-menu{ gap:5px; }
}
@media (max-width:480px){
  .footer-menu{
    flex-direction:column;
    gap:5px;
  }
  /* Mantieni inline solo il secondo menu */
  .footer-menu-inline{
    flex-direction:row !important;
    flex-wrap:nowrap;
    gap:8px;
  }
  /* rimuovi separatori visivi quando a colonna */
  .footer-menu li + li::before{ content:none; }
}

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

/* Riduci motion se preferito dall’utente */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}