:root{

  --header-h:140px;

  --bg:#f7f7f8;

  --border:#e5e7eb;

  --text:#111827;

  --muted:#6b7280;

  --card-bg:#ffffff;

}



*{ box-sizing:border-box; }

body{

  margin:0;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:var(--text);

  background:#fff;

}



header{

  height:var(--header-h);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:0 1rem;

  border-bottom:1px solid var(--border);

  color:#fff;

  position:relative;

  text-align:center;

  background:#333;

}

header::after{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.45);

  pointer-events:none;

  z-index:0;

}

header h1{

  margin:0;

  font-size:1.5rem;

  line-height:1.2;

  position:relative;

  z-index:1;

  max-width:90%;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

header.has-bg{

  background-image: url("/livio/images/sfondo.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}





/* ===== MAIN ===== */

main{

  margin-left:0;

  min-height:calc(100vh - var(--header-h));

  padding:1.25rem 1.5rem;

}



/* ===== CONTENUTI ===== */

.section-header{

  margin:0 0 .75rem;

  font-size:1.25rem;

  font-weight:700;

}

.content-wrap{

  display:grid;

  grid-template-columns:1fr;

  gap:1rem;

  margin-bottom:2rem;

}

.content-images{

  display:grid;

  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

  gap:.75rem;

}

.content-images img{

  width:100%;

  height:auto;

  display:block;

  border-radius:12px;

  border:1px solid var(--border);

}

.content-text{

  background:var(--card-bg);

  border:1px solid var(--border);

  border-radius:12px;

  padding:1rem;

}

.content-text *{ max-width:100%; }

.content-text a{ word-break:break-word; }



/* ===== PUBBLICAZIONI ===== */

.pub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }

.pub-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }

.pub-img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:1px solid var(--border); }

.pub-body{ padding:.85rem .95rem; display:grid; gap:.35rem; }

.pub-title{ margin:0; font-weight:700; font-size:1rem; }

.pub-sub{ margin:0; color:var(--muted); font-size:.9rem; }

.pub-meta{ font-size:.85rem; color:var(--muted); }

.pub-actions{ margin-top:.5rem; }

.btn-link{ display:inline-block; text-decoration:none; border:1px solid var(--border); padding:.45rem .7rem; border-radius:10px; font-size:.9rem; color:var(--text); background:#fff; }

.btn-link:hover{ background:#f9fafb; }



/* ===== MENU (APP DRAWER) ===== */

.menu-toggle{

  display:block;

  position:absolute;

  left:1rem;

  top:50%;

  transform:translateY(-50%);

  width:44px;

  height:44px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.25);

  background:rgba(0,0,0,.25);

  color:#fff;

  cursor:pointer;

  z-index:5;

  backdrop-filter: blur(6px);

}

.menu-toggle:active{ transform:translateY(-50%) scale(.98); }



.menu-toggle .icon{

  position:relative;

  display:block;

  width:22px;

  height:2px;

  background:#fff;

  margin:0 auto;

  border-radius:2px;

  transition: background .2s ease;

}

.menu-toggle .icon::before,

.menu-toggle .icon::after{

  content:"";

  position:absolute;

  left:0;

  width:22px;

  height:2px;

  background:#fff;

  border-radius:2px;

  transition: transform .2s ease, top .2s ease;

}

.menu-toggle .icon::before{ top:-7px; }

.menu-toggle .icon::after{ top:7px; }



/* overlay */

.overlay{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.45);

  backdrop-filter: blur(2px);

  z-index:3;

  opacity:0;

  display:none;

  transition: opacity .25s ease;

}

.overlay.show{

  display:block;

  opacity:1;

}



/* drawer */

nav.sidebar{

  position:fixed;

  top:var(--header-h);

  left:0;

  bottom:0;

  width:min(86vw, 360px);

  max-width:360px;

  background:var(--bg);

  border-right:1px solid var(--border);

  padding:1rem;

  overflow:auto;



  transform:translateX(-102%);

  transition:transform .25s ease;

  z-index:4;

  box-shadow:0 16px 48px rgba(0,0,0,.18);

  will-change:transform;

  -webkit-overflow-scrolling:touch;

}

body.menu-open nav.sidebar{ transform:translateX(0); }

body.menu-open{ overflow:hidden; }



/* hamburger -> X */

body.menu-open .menu-toggle .icon{ background:transparent; }

body.menu-open .menu-toggle .icon::before{ top:0; transform:rotate(45deg); }

body.menu-open .menu-toggle .icon::after{ top:0; transform:rotate(-45deg); }



/* menu items */

.brand{

  font-weight:700;

  font-size:.95rem;

  letter-spacing:.3px;

  margin-bottom:.5rem;

  color:var(--muted);

  text-transform:uppercase;

}

.menu-list{ list-style:none; padding:0; margin:0; }

.menu-item{ margin:0 0 .5rem; }

.menu-link{

  display:block;

  text-decoration:none;

  padding:.6rem .7rem;

  border-radius:10px;

  background:var(--card-bg);

  color:var(--text);

  border:1px solid transparent;

}

.menu-link:hover{ border-color:var(--border); }

.menu-link.active{

  border-color:var(--border);

  box-shadow:0 0 0 2px rgba(0,0,0,.03) inset;

  font-weight:600;

}

.title{ font-weight:600; margin:0; font-size:1rem; }

.subtitle{ margin:.2rem 0 0; font-size:.86rem; color:var(--muted); }



@media (max-width: 760px){

  header h1 { white-space: normal; }

  main { padding: 1.1rem 1rem; }

}

.admin-link{

  position:absolute;

  right:1rem;

  top:50%;

  transform:translateY(-50%);

  padding:.45rem .8rem;

  border-radius:12px;

  background:rgba(0,0,0,.35);

  backdrop-filter: blur(6px);

  border:1px solid rgba(255,255,255,.25);

  color:#fff;

  text-decoration:none;

  font-size:.9rem;

  z-index:5;

  transition: background .15s ease, transform .1s ease;

}



.admin-link:hover{

  background:rgba(0,0,0,.55);

}



.admin-link:active{

  transform:translateY(-50%) scale(.97);

}