/* ============================================================
   style.css — stile condiviso dell'hub Airoldi
   Palette: navy / sage  (coerente con riccardoairoldi.it)
   ============================================================ */
:root{
  --navy:#1F2A44; --sage:#8AA292; --sage-dk:#5F7568;
  --cream:#F6F5F1; --ink:#26302B; --line:#E7E6DF;
  --warn:#C8923B; --danger:#B45A5A; --ok:#5B8A5B;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::placeholder{color:#A8AFA9;}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* header */
.topbar{background:var(--navy);color:#fff;padding:14px 0;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:11px;}
.brand h1{font-size:22px;font-weight:600;letter-spacing:.3px;}
.brand .dot{color:var(--sage);}
.brand small{font-size:12px;opacity:.7;}
.brand-logo{height:52px;width:auto;display:block;}

/* navigazione desktop */
.topnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.topnav a{font-size:13px;text-decoration:none;padding:7px 13px;border-radius:999px;opacity:.85;color:#fff;}
.topnav a:hover{background:rgba(255,255,255,.12);opacity:1;}
.topnav a.active{background:var(--sage);opacity:1;font-weight:600;}

/* tasto Esci — elegante, coerente con la barra */
.logoutbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-family:inherit;
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,.28);
  padding:7px 14px;border-radius:999px;cursor:pointer;opacity:.85;transition:background .15s,opacity .15s,border-color .15s;}
.logoutbtn:hover{background:rgba(255,255,255,.12);opacity:1;border-color:rgba(255,255,255,.5);}
.logoutbtn svg{width:14px;height:14px;}

/* la barra desktop: nav a sinistra dei bottoni, esci in fondo */
.topnav-wrap{display:flex;align-items:center;gap:14px;margin-left:auto;}

/* bottone hamburger: nascosto su desktop */
.hamburger{display:none;background:transparent;border:none;color:#fff;cursor:pointer;padding:6px;border-radius:8px;}
.hamburger:hover{background:rgba(255,255,255,.12);}
.hamburger svg{width:26px;height:26px;display:block;}

/* ─── MOBILE: header = logo + hamburger, menu a pannello laterale ─── */
@media(max-width:760px){
  .hamburger{display:inline-flex;}
  .topbar .wrap{position:relative;flex-wrap:nowrap;}

  /* velo scuro dietro il pannello: appare con il menu, chiude al tocco */
  .nav-overlay{
    position:fixed;inset:0;background:rgba(15,20,34,.5);
    opacity:0;visibility:hidden;transition:opacity .25s;z-index:240;
  }
  .topbar.menu-open ~ .nav-overlay,
  body.menu-open .nav-overlay{opacity:1;visibility:visible;}

  /* il pannello entra da destra, largo ~85% */
  .topnav-wrap{
    position:fixed;top:0;right:0;bottom:0;
    width:85%;max-width:360px;margin:0;gap:0;
    background:var(--navy);
    flex-direction:column;align-items:stretch;
    padding:76px 0 20px;
    box-shadow:-16px 0 40px rgba(0,0,0,.4);
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:250;overflow-y:auto;
  }
  .topbar.menu-open .topnav-wrap{transform:translateX(0);}

  /* voci allineate a destra */
  .topnav{flex-direction:column;gap:2px;width:100%;}
  .topnav a{
    padding:15px 28px;border-radius:0;font-size:16px;opacity:.92;
    text-align:right;
  }
  .topnav a.active{
    background:rgba(138,162,146,.18);
    border-right:3px solid var(--sage);font-weight:600;
  }
  .logoutbtn{
    margin:14px 28px 0;justify-content:flex-end;gap:9px;
    border-color:rgba(255,255,255,.3);padding:12px 18px;
  }

  /* la X per chiudere, in alto nel pannello */
  .nav-close{
    position:absolute;top:18px;right:20px;
    background:transparent;border:none;color:#fff;cursor:pointer;
    padding:6px;border-radius:8px;opacity:.8;
  }
  .nav-close:hover{background:rgba(255,255,255,.12);opacity:1;}
  .nav-close svg{width:24px;height:24px;display:block;}
}
/* la X di chiusura non si vede su desktop */
.nav-close{display:none;}
@media(max-width:760px){ .nav-close{display:block;} }

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;
  padding:10px 16px;font-weight:600;font-size:14px;}
.btn-sage{background:var(--sage);color:#fff;}
.btn-sage:hover{background:var(--sage-dk);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--cream);}
.btn-danger{background:var(--danger);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* fields */
.fld{width:100%;padding:10px 12px;border:1px solid #DEDDD5;border-radius:10px;
  font-size:14px;background:#fff;color:var(--ink);}
.fld:focus{outline:2px solid var(--sage);border-color:var(--sage);}
.fl-label{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:6px;display:block;}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;}
.card:hover{box-shadow:0 6px 20px rgba(31,42,68,.08);}

/* banner di stato (config mancante ecc.) */
.banner{border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.5;margin:18px 0;}
.banner-warn{background:#FBF1DF;border:1px solid #EAD2A0;color:#7A5B1E;}
.banner-info{background:#E7EEF5;border:1px solid #C4D6E6;color:#2C4A66;}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;}
.toast.show{opacity:1;}

.muted{color:#8A908B;}
.chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;color:#fff;white-space:nowrap;}

/* footer con versione dell'hub, presente su tutte le pagine */
.site-foot{
  max-width:1080px;margin:40px auto 24px;padding:16px 20px 0;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:#9AA0A6;
}
.site-foot .ver{font-weight:600;color:#7A817C;}
.site-foot a{color:#9AA0A6;text-decoration:none;}
.site-foot a:hover{text-decoration:underline;color:var(--sage-dk);}