/* =========================
   Variabili + Reset Base
========================= */
:root{
    --c-white:#fff;
    --c-offwhite:rgb(254,255,251);
    --c-text: #333;
    --c-muted: #555;
    --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: .3s ease;
  }
  
  *,
  *::before,
  *::after{ box-sizing:border-box; }
  
  html, body{
    margin:0;
    padding:0;
    height:100%;
    min-height:100vh;
    font-family: Arial, sans-serif;
    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;
  }
  

/* =========================
   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
  ========================= */
  main{
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  
  /* =========================
     Sezione FAQ / Formazione
  ========================= */
  #formazione{
    margin-top:20px;
    width:100vw;
    background: var(--c-white);
    padding: 0 clamp(10px, 5vw, 20px) clamp(10px, 5vw, 20px);
    position:relative;
    z-index:1;
  }
  
  .formazione-header{
    width:100%;
    text-align:center;
    padding:6% 0;
  }
  .formazione-header h1{
    font-size: clamp(1.5rem, 2.5vw, 4.5rem);
    color: #fff; /* testo su hero, se sopra sfondo scuro */
    margin:0 0 5px;
    font-weight:bold;
  }
  
  .services-content{
    max-width:90vw;
    width: clamp(300px, 90vw, 1200px);
    margin:0 auto;
    padding:5% 0;
    text-align:justify;
  }
  
  .service h3{
    font-size: clamp(2em, 3vw, 2.5em);
    color: var(--c-text);
    margin: clamp(15px, 3vw, 25px) 0;
    font-weight:bold;
  }
  .service p{
    line-height:1.8;
    color: var(--c-muted);
    font-size: clamp(.9em, 2.5vw, 1.1em);
    margin: 0 0 clamp(10px, 2vw, 15px);
    text-align:justify;
  }
  
  /* Collapsible FAQ */
  .collapsible{
    background: var(--c-white);
    color: var(--c-text);
    cursor:pointer;
    padding:18px;
    width:100%;
    border:none;
    text-align:left;
    font-weight:bold;
    outline:none;
    font-size:20px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .collapsible::before{
    content:"\25B6"; /* ▶ */
    color: var(--c-text);
    font-weight:bold;
    transition: transform .2s ease-in-out;
  }
  .active::before{
    content:"\25BC"; /* ▼ */
  }
  .content{
    padding:0 18px;
    max-height:0;
    overflow:hidden;
    transition: max-height .2s ease-out;
    background: var(--c-white);
    border-bottom:1px solid #ddd;
  }
  .content:last-of-type{ border-bottom:none; }
  .content p{
    text-align:left;
    font-size: clamp(.85em, 2vw, 1em);
    line-height:1.5;
  }
  .content ul{
    text-align:left;
    padding-left:1rem;
    list-style:disc;
    line-height:1.5;
  }
  .content li{
    font-size: clamp(.85em, 2vw, 1em);
    line-height:1.6;
  }
  
  /* Link stile */
  .styled-link{
    color: var(--c-muted);
    font-weight:bold;
    text-decoration:none;
    transition: color var(--tr);
  }
  .styled-link:hover{
    color:#A8D5BA;
    text-decoration:underline;
  }
  
  /* FAQ responsive */
  @media (max-width:768px){
    #formazione{ padding: 0 clamp(8px, 3vw, 15px); }
    .service h3{
      font-size: clamp(1em, 3vw, 1.8em);
      margin-bottom: clamp(15px, 3vw, 25px);
    }
    .service p{ font-size: clamp(.85em, 2vw, 1em); }
  
    .collapsible{ font-size:16px; }
  }
  
/* =========================
   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; }
  }
  
  /* =========================
     Separatori Header responsive
  ========================= */
  @media (max-width:768px){
    .nav-bar .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;
  }