/* ====================================================================
   Guida Alkemy Play — foglio di stile unico
   Per cambiare il colore del brand, modifica --accent qui sotto.
   ==================================================================== */
@font-face{font-family:'Aeonik';src:url('font/Aeonik-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('font/Aeonik-RegularItalic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Aeonik';src:url('font/Aeonik-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('font/Aeonik-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Aeonik';src:url('font/Aeonik-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
:root{
  --accent:#5b3df5;          /* colore principale (bottoni, link, titoli) */
  --accent-dark:#4322d6;
  --bg:#f6f7fb;              /* sfondo pagina */
  --sidebar:#ffffff;
  --text:#1f2330;
  --muted:#6b7280;
  --border:#e6e8ef;
  --radius:12px;
  --maxw:820px;
  font-size:17px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Aeonik',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.65;
}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:280px;flex:0 0 280px;background:var(--sidebar);
  border-right:1px solid var(--border);padding:24px 18px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.content{flex:1;display:flex;justify-content:center;padding:40px 28px 80px}
.content-inner{width:100%;max-width:var(--maxw)}

/* ---------- Sidebar / brand ---------- */
.brand{display:block;margin-bottom:10px}
.brand img{width:120px;height:auto;display:block}
.role-badge{
  display:inline-block;margin:14px 0 22px;padding:5px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  background:#ede9ff;color:var(--accent-dark);
}
.nav-group{margin-bottom:18px}
.nav-group > .nav-title{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin:0 0 8px 6px;
}
.sidebar a{
  display:block;padding:7px 10px;border-radius:8px;color:var(--text);
  text-decoration:none;font-size:.95rem;
}
.sidebar a:hover{background:var(--bg)}
.sidebar a.active{background:#ede9ff;color:var(--accent-dark);font-weight:600}

/* sotto-gruppi collassabili (livelli annidati) */
.nav-sub{margin:1px 0}
.nav-sub > summary{
  list-style:none;cursor:pointer;padding:7px 10px;border-radius:8px;
  font-size:.95rem;color:var(--text);position:relative;
}
.nav-sub > summary::-webkit-details-marker{display:none}
/* freccia posizionata nel padding: il testo resta allineato ai link "fratelli" */
.nav-sub > summary::before{
  content:"▸";position:absolute;left:1px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.7rem;transition:transform .15s;
}
.nav-sub[open] > summary::before{transform:translateY(-50%) rotate(90deg)}
.nav-sub > summary:hover{background:var(--bg)}
/* indentazione dei figli (un livello in più rispetto al gruppo) */
.nav-sub > a,.nav-sub > .nav-sub{margin-left:14px}

/* ---------- Card della home ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:24px 0 32px}
.card{display:block;text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(91,61,245,.10);transform:translateY(-2px)}
.card .card-icon{font-size:1.6rem;line-height:1}
.card .card-title{font-weight:600;color:var(--accent-dark);margin:10px 0 4px}
.card .card-desc{font-size:.9rem;color:var(--muted);line-height:1.4}

/* ---------- Tipografia contenuto ---------- */
.content-inner h1{font-size:2rem;line-height:1.2;margin:0 0 8px}
.content-inner h2{font-size:1.35rem;margin:36px 0 12px;color:var(--accent-dark)}
.content-inner h3{font-size:1.1rem;margin:26px 0 8px}
.content-inner p{margin:0 0 16px}
.content-inner ul{margin:0 0 16px;padding-left:22px}
.content-inner li{margin:6px 0}
.lead{font-size:1.1rem;color:var(--muted);margin-bottom:28px}
a{color:var(--accent)}

/* ---------- Riquadri ---------- */
.note{
  border-left:4px solid var(--accent);background:#f1eefe;
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:22px 0;
}
.note.warn{border-color:#e0a400;background:#fff7e3}
.note .note-title{font-weight:700;margin-bottom:4px}

/* ---------- Video ---------- */
figure.video{margin:22px 0}
figure.video video{width:100%;border-radius:var(--radius);border:1px solid var(--border);background:#000;display:block}

/* ---------- Slot screenshot ---------- */
.shot{
  border:2px dashed #c9ccda;border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#fafbff,#fafbff 12px,#f1f3fb 12px,#f1f3fb 24px);
  text-align:center;color:var(--muted);padding:34px 20px;margin:22px 0;
}
.shot code{background:#fff;border:1px solid var(--border);padding:2px 7px;border-radius:6px;font-size:.85rem}
.shot img{max-width:100%;border-radius:var(--radius);border:1px solid var(--border);display:block;margin:0 auto}

/* ---------- Footer nav ---------- */
.pager{display:flex;justify-content:space-between;margin-top:48px;gap:12px}
.pager a{
  flex:1;text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px;background:#fff;color:var(--text);
}
.pager a:hover{border-color:var(--accent)}
.pager .label{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pager .title{font-weight:600;color:var(--accent-dark)}
.pager .next{text-align:right}

/* ---------- Mobile ---------- */
@media(max-width:820px){
  .layout{flex-direction:column}
  .sidebar{width:100%;flex:none;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border)}
  .content{padding:28px 18px 60px}
}