:root{
  --bg:#000; --fg:#e2e8f0; --muted:#94a3b8; --primary:#00ff7f; --border:#1f2937; --card:#0b0f0c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height:1.6}
a{color:var(--primary);text-decoration:none}
.container{max-width:80% !important;margin:0 auto;padding:24px}

/* Header / Nav */
.header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:12px;padding:12px 0}
.brand .title{font-size:1.4rem;font-weight:800;color:var(--primary)}
.menu{display:flex;gap:6px;flex-wrap:nowrap;flex-grow:1;justify-content:center}
.menu a{padding:10px 14px;border-radius:10px;position:relative;overflow:hidden;flex-shrink:0;min-width:fit-content;}
.menu a::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent, rgba(0,255,127,.15), transparent);transform:translateX(-100%);transition:transform .4s}
.menu a:hover::before{transform:translateX(0)}
.menu a.active{outline:1px solid var(--primary); background:rgba(0,255,127,.06)}
.lang{display:flex;gap:8px;align-items:center}
.lang a{border:1px solid var(--border);padding:6px 10px;border-radius:10px}
.lang a.active,.lang a:hover{border-color:var(--primary)}

/* Basics */
.hero{padding:40px 0 8px;border-bottom:1px dashed var(--border)}
h1{color:var(--primary);margin:.2rem 0}
h2{border-bottom:1px solid var(--border);padding-bottom:.4rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin:16px 0}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
.list{margin:0;padding-left:18px}
.small{color:var(--muted);font-size:.92rem}
footer{border-top:1px solid var(--border);margin-top:32px;padding:24px 0;color:var(--muted)}

/* Matrix subtle background */
.matrix-bg{
  position:fixed;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(90deg,#0f0 0 1px,transparent 1px 20px),
             repeating-linear-gradient(180deg,#0f0 0 1px,transparent 1px 16px);
  mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 70%);
}

/* --- Carousel (one image at a time) --- */
.carousel{position:relative; border-radius:14px; border:1px solid var(--border); background: #050805;}
.carousel-viewport{overflow:hidden; border-radius:14px;}
.carousel-track{display:flex; transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.slide{flex:0 0 100%;}
.slide img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}

/* Controls */
.carousel-controls{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  display:flex; justify-content:space-between; padding:0 8px; pointer-events:none;
}
.carousel-controls button{
  pointer-events:auto; cursor:pointer;
  background:rgba(0,0,0,.55); color:var(--fg);
  border:1px solid var(--border); border-radius:10px; padding:8px 12px;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.carousel-controls button:hover{transform:scale(1.06); border-color:var(--primary); background:rgba(0,0,0,.7);}

/* Dots */
.carousel-dots{display:flex; gap:8px; justify-content:center; align-items:center; padding:10px 0 4px;}
.carousel-dots .dot{
  width:9px; height:9px; border-radius:999px; border:1px solid var(--border);
  background:#0a0a0a; cursor:pointer;
}
.carousel-dots .dot.active{background:var(--primary); box-shadow:0 0 0 3px rgba(0,255,127,.12);}

.badge {
  display:inline-block;
  padding:4px 10px;
  margin:2px;
  border-radius:12px;
  background:rgba(0,255,127,0.1);
  border:1px solid var(--border);
  font-size:.85rem;
}

/* ---------- Hamburger & menu mobile ---------- */

/* di default (desktop) l'hamburger è nascosto */
.hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  background:#0a0a0a;
  color:var(--fg);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.hamburger:hover{ border-color: var(--primary); }

/* Mobile */
@media (max-width: 900px){
  .nav{ position:relative; } /* ancora il dropdown */

  .hamburger{ display:inline-flex; }
/*  .lang{ display:none; } opzionale: nasconde lo switch lingua su mobile */

  /* 🔒 Menu completamente nascosto di default su mobile */
  .menu{
    display:none;              /* <-- nascosto, non occupa spazio */
    position:absolute;
    top:100%;
    left:0;
    right:0;

    /* aspetto del pannello quando aperto */
    background:#0b0f0c;
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 14px 14px;
    padding:10px;
    gap:6px;

    /* sicurezza extra anche quando è hidden */
    max-height:0;
    overflow:hidden;
    pointer-events:none;
    visibility:hidden;
    opacity:0;
    z-index:100;
  }

  /* quando APERTO */
  .menu.open{
    display:flex;              /* <-- appare solo ora */
    flex-direction:column;
    pointer-events:auto;
    visibility:visible;
    opacity:1;
    max-height:60vh;
    transition:max-height .28s ease, opacity .2s ease;
  }

  .menu a{
    padding:12px 10px;
    border-radius:10px;
  }

  /* 🚫 Disabilita proprio gli effetti hover in mobile */
  .menu a::before{ display:none !important; }
  .menu a:hover{ background:none !important; outline:none !important; }

  .brand .title{ font-size:1.1rem; }
}

/* Desktop */
@media (min-width: 901px){
  .menu{ display:flex; position:static; pointer-events:auto; visibility:visible; opacity:1; }
  .hamburger{ display:none; }
}

/* --- PDF viewer --- */
.pdf-toolbar{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.pdf-viewport{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a;
  min-height:70vh;
}
.pdf-viewport iframe{
  width:100%;
  height:80vh;  /* comfortable default */
  border:0;
}

.btn {
  background: transparent;
  border: 0;
  padding: 0;            /* no button chrome */
  color: var(--primary); /* same green as links */
  text-decoration: none;
  line-height: 1;
}

.btn:hover {
  text-decoration: none; /* match typical link hover */
}

/* keep accessible focus for keyboard users */
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.dim{ opacity:.75; }