/* CyberSec Blog v5 — sidebar fissa solo su home, post centrati ------------ */
:root { --sidebar-w: 280px; }          /* larghezza barra laterale */


/* ----------------------------------------------------------------------- */
/*  BASE                                                                   */
/* ----------------------------------------------------------------------- */
body{
  margin:0;
  font-family:'Source Code Pro',monospace;
  background:#352e2e;
  color:#ffffff;
  line-height:1.6;
}

a{color:#39ff14;text-decoration:none;transition:color .2s,text-shadow .2s;}
a:hover{color:#ff5555;text-shadow:0 0 6px #ff2222;}

h1,h2,h3,h4{color:#39ff14;text-shadow:0 0 6px #39ff14;}
.post-item time{color:#ff5555;}
.post-meta{color:#ff5555;font-size:.9rem;margin-bottom:1rem;}

/* header / nav ----------------------------------------------------------- */
.site-header{
  text-align:center;padding:2.5rem 1rem;
  animation:pulse 4s infinite alternate;
}
.site-title{font-size:2.4rem;color:#39ff14;text-shadow:0 0 8px #39ff14;}
.site-description{color:#ff5555;font-size:1.1rem;}
.nav{margin-bottom:1rem;}
.nav-item{margin:0 .6rem;}

/* ----------------------------------------------------------------------- */
/*  SIDEBAR  (appare solo nella home)                                      */
/* ----------------------------------------------------------------------- */
.sidebar{
  position:fixed;top:0;left:0;
  width:260px;height:100vh;
  background:#161b22;padding:1rem;
  border-right:4px solid #39ff14;
  color:#e5e9ea;
  overflow-y:auto;
}
.profile-pic{width:100%;border-radius:50%;margin-bottom:1rem;}
.author-name{margin:0;color:#f0f6fc;}
.location{font-size:.9rem;color:#8b949e;margin:0 0 1rem;}
.bio{margin:0 0 1.5rem;}
.social a{color:#39ff14;}
.social a:hover{color:#ff5555;}

/* ----------------------------------------------------------------------- */
/*  CONTAINER (valido per TUTTE le pagine)                                 */
/* ----------------------------------------------------------------------- */
.container{
  max-width:840px;             /* larghezza classica articolo */
  margin:0 auto;               /* sempre centrato */
  padding:1rem;
}

/* ----------------------------------------------------------------------- */
/*  HOME: layout griglia attivato con .home sul body                       */
/* ----------------------------------------------------------------------- */
body.home{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;   /* sidebar | contenuto */
}

/* header attraversa entrambe le colonne */
body.home .site-header{
  grid-column:1 / -1;
  z-index:5;
  padding-left:calc(var(--sidebar-w) + 1rem);    /* opz: commenta per centro puro */
}

/* wrapper che contiene sidebar+griglia post */
body.home .layout{
  grid-column:2;
  padding:1rem 1.5rem;
}

/* griglia delle card post */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:2rem;
}
.post-card{
  background:#252121;
  padding:1.5rem;
  border:1px solid #39ff14;
  border-radius:8px;
}
.post-card h2{margin-top:0;}
.post-card .excerpt{color:#b8c7c5;margin:.6rem 0 1rem;}
.read-more{color:#39ff14;font-size:.9rem;}

/* ----------------------------------------------------------------------- */
/*  SINGOLO ARTICOLO                                                       */
/* ----------------------------------------------------------------------- */
.post{background:none;border:none;padding:0 0.5rem;}  /* niente riquadro */

/* ----------------------------------------------------------------------- */
/*  CODE & IMAGES                                                          */
/* ----------------------------------------------------------------------- */
pre{
  overflow-x:auto;background:#000;padding:1rem;
  border-left:4px solid #39ff14;margin:1.5rem 0;
}
pre code{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:.9rem;
}
code{background:#161b22;padding:.2rem .4rem;border-radius:3px;}

.post-content img,.posts-grid img{
  max-width:100%;height:auto;display:block;
  margin:1.5rem auto;border:1px solid #ff5555;
}

/* footer ---------------------------------------------------------------- */
.footer{text-align:center;padding:2.2rem 1rem;font-size:.9rem;color:#b8c7c5;}

@keyframes pulse{from{text-shadow:0 0 6px #39ff14;}to{text-shadow:0 0 12px #39ff14;}}

/* ----------------------------------------------------------------------- */
/*  MOBILE / TABLET                                                        */
/* ----------------------------------------------------------------------- */
@media(max-width:900px){
  body.home{display:block;}       /* disattiva grid su schermi stretti   */
  .sidebar{
    position:static;width:100%;height:auto;
    border-right:none;border-bottom:4px solid #39ff14;
  }
  body.home .site-header{padding-left:1rem;}  /* ri-centra header mobile */
  .posts-grid{grid-template-columns:1fr;}
}