/* =========================================================
   Millennium Giardini — HEADER CRISTALLO
   Va caricato SEPARATO dal resto: sull'.elementor-location-header
   il CSS del kit Elementor si applica in modo inaffidabile.
   ========================================================= */

/* variabili usate dall'header — duplicate come rete di sicurezza,
   così l'header regge anche se design.css non viene caricato */
:root{
  --verde-notte:#071E18; --foglia:#8FB48F;
  --mx:clamp(20px,5vw,84px); --max:1240px;
  --display:'Fraunces',ui-serif,Georgia,serif;
}

.hd{position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .38s ease,box-shadow .38s ease,border-color .38s ease}
.hd::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,30,24,.55),rgba(7,30,24,0));
  opacity:1;transition:opacity .38s ease}
.hd__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:18px;min-height:84px;
  padding-inline:max(var(--mx),(100% - var(--max)) / 2);
  transition:min-height .38s ease}

/* stato scrollato: fondo verde notte solido */
body.scrollato .hd{background:rgba(7,30,24,.96);
  box-shadow:0 12px 34px -20px rgba(0,0,0,.7)}
body.scrollato .hd::after{opacity:0}
body.scrollato .hd__in{min-height:70px}

/* brand */
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand__mark{width:34px;height:34px;flex:none;color:var(--foglia);transition:color .3s}
.brand__nome{display:flex;flex-direction:column;line-height:1;color:#fff}
.brand__nome b{font-family:var(--display);font-weight:500;font-size:1.02rem;
  letter-spacing:.055em;margin-right:-.055em}
.brand__nome span{font-size:.6rem;letter-spacing:.34em;margin-right:-.34em;
  color:rgba(255,255,255,.62);font-weight:600;margin-top:5px}

/* menu desktop — centrato in grid 1fr auto 1fr */
.nav{justify-self:center}
.nav ul{display:flex;align-items:center;gap:4px}
.nav a{position:relative;display:block;padding:9px 15px;border-radius:999px;
  font-size:.935rem;font-weight:500;color:rgba(255,255,255,.86);
  transition:color .25s,background-color .25s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.11)}

/* azioni a destra */
.hd__azioni{justify-self:end;display:flex;align-items:center;gap:10px}
.tel-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 17px;
  border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;
  font-weight:600;font-size:.9rem;transition:background-color .25s,border-color .25s}
.tel-chip:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.tel-chip svg{width:16px;height:16px;flex:none}
.hd .btn{min-height:44px;padding:0 21px;font-size:.9rem}

/* burger — flex column (⚠️ mai grid: place-items stira le righe e la X non chiude) */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
.burger i{display:block;width:19px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .2s}
body.menu-aperto .burger i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-aperto .burger i:nth-child(2){opacity:0}
body.menu-aperto .burger i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* tendina mobile CRISTALLO: full-width, attaccata alla base, SEMPRE solida */
.tendina{position:absolute;top:100%;left:0;right:0;z-index:60;
  background:var(--verde-notte);border-radius:0 0 20px 20px;
  padding:8px max(var(--mx),(100% - var(--max)) / 2) 26px;box-shadow:0 26px 46px -22px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;transition:none}
body.menu-aperto .tendina{opacity:1;visibility:visible;pointer-events:auto}
.tendina a{display:block;padding:15px 2px;font-size:1.12rem;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09)}
.tendina .btn{width:100%;margin-top:22px}

@media (max-width:1080px){
  .nav,.hd__azioni .btn{display:none}
  .burger{display:flex}
  .tel-chip{padding:0;width:44px;justify-content:center}
  .tel-chip span{display:none}
}


/* logo vettoriale in barra */
.brand__logo{height:58px;width:auto;flex:none;transition:height .38s ease}
body.scrollato .brand__logo{height:48px}
@media (max-width:760px){.brand__logo{height:44px}}
body.scrollato .brand__logo{filter:none}