/* Global reset e box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variabili colori */
:root {
  --bg: #fafafa;
  --fg: #111;
  --accent: #444;
  --link: #0066cc;
  --link-hover: #004999;
}

/* Tema scuro */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --fg: #fafafa;
    --accent: #aaa;
    --link: #66aaff;
    --link-hover: #99cfff;
  }
}

/* Body e layout principale */
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--fg);
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
}

/* Header e navigazione */
header {
  margin-bottom: 2rem;
  text-align: center;
}

nav a {
  margin: 0 0.5rem;
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover { color: var(--link-hover); text-decoration: none; }
nav a.active { color: var(--fg); font-weight: 600; text-decoration: none; }

h1, h2 { 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    text-align: center; 
}

section h3 { 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    text-align: left; 
}

/* Sezioni */
section { margin-bottom: 2rem; }

/* Footer */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--accent);
  margin-top: 3rem;
  border-top: 1px solid var(--accent);
  padding-top: 1rem;
}

/* Ritratto personale */
.circular_image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 2rem auto;
  display: block;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}

.circular_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Link globali */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: none; }

/* Contatti centrati */
#contatti { text-align: center; }
#contatti ul {
  display: inline-block;
  text-align: left;
  padding: 0;
  margin: 1rem auto;
  list-style: none;
}

/* Blog dinamico */
#blog-container {
  display: grid;
  grid-template-columns: 1fr; /* 1 colonna di default */
  gap: 1.5rem;
}

#blog-container article {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1rem;
}

#blog-container article h3 a { color: var(--link); }
#blog-container article h3 a:hover { color: var(--link-hover); }

/* Liste generali */
ul { list-style: none; padding-left: 0; }
ul li { margin-bottom: 0.5rem; }

/* Media query per schermi più grandi */
@media (min-width: 600px) {
  #blog-container {
    grid-template-columns: 1fr 1fr; /* 2 colonne su tablet/desktop piccoli */
  }
}

@media (min-width: 900px) {
  #blog-container {
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonne su desktop grandi */
  }
}

/* Miglior leggibilità testi e articoli */
p, li, small {
  font-size: 1rem;
  line-height: 1.5;
}

/* Piccoli miglioramenti estetici per pulsanti/link futuri */
button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.homepage-content {
  margin-bottom: 50px;
}

/*
.blog-article {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

.blog-article h3 a {
  text-decoration: none;
  color: #333;
}

.blog-article p {
  font-size: 1rem;
  color: #555;
}
*/

/* Container principale degli articoli */
.blog-articles {
  display: flex;
  flex-direction: column; /* forza colonna singola */
  gap: 1.5rem;           /* spazio tra articoli */
  max-width: 800px;       /* opzionale, per leggibilità */
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Stile dei singoli articoli */
.blog-article {
  padding: 0;
  background: none;
  border: none;
  width: 100%;
}

/* Titolo articolo */
.blog-article h3 {
  margin: 0 0 0.5rem 0;
  text-align: left; /* allineamento a sinistra */
}

/* Paragrafo e testo */
.blog-article p {
  margin: 0 0 0.5rem 0;
  text-align: left;
}

/* Data o meta */
.blog-article small {
  color: #666;
  display: block;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Link titolo articolo */
.blog-article h3 a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-article h3 a:hover {
  color: var(--link-hover);
  text-decoration: none;
}


#blog h2 { margin-bottom: 0.25rem; }
.blog-articles { margin-top: 0.5rem; }



/* Container principale: colonna singola */
.projects-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* spazio tra i singoli progetti */
  margin-top: 0.5rem;  /* invece di 2rem */
  margin-bottom: 2rem; /* mantieni respiro dopo */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Stile dei singoli progetti */
.project {
  padding: 0;
  background: none;
  border: none;
}

/* Titolo progetto */
.project h2 {
  margin: 0 0 0.5rem 0;
  text-align: left;  /* allineamento a sinistra */
}

/* Paragrafo e link */
.project p {
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.project a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s ease;
}

.project a:hover {
  color: var(--link-hover);
  text-decoration: none;
}





#quote {
  margin-top: 2rem;
  padding: 1rem;
  border-left: 4px solid #ccc;
  font-style: italic;
}

#quote blockquote {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

#quote cite {
  display: block;
  text-align: right;
  font-weight: 500;
  color: #666;
}

.interests {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  max-width: 700px;
  flex-wrap: wrap; /* permette di adattare le colonne su schermi piccoli */
  margin-left: 15%; /* sposta il blocco verso destra */
}

.interests ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 45%; /* due colonne */
}

.interests li {
  margin-bottom: 0.4rem;
  text-align: left;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .interests {
    justify-content: center; /* centra le colonne su schermi stretti */
    margin-left: 0;          /* rimuove lo spostamento a destra */
  }

  .interests ul {
    width: 45%; /* mantieni due colonne anche su mobile */
  }
}



#chi-sono h3 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#chi-sono h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #1a5e9a;
  margin: 0.3rem auto 0;
  border-radius: 1px;
}


.education {
    max-width: 600px;       /* larghezza massima del blocco */
    margin: 0 auto 2rem;    /* centra orizzontalmente e margine sotto */
    text-align: center;     /* centra il testo */
}

.education p {
    line-height: 1.6;       /* migliora la leggibilità */
    margin: 0;              /* rimuove margini extra */
}



.education .details {
    color: #888888; /* grigio chiaro */
    font-style: italic; /* opzionale, per distinguerlo leggermente */
}

ul.contact-icons {
  display: flex;               /* Flexbox per riga */
  justify-content: center;     /* Centra le icone orizzontalmente */
  align-items: center;         /* Allinea verticalmente */
  gap: 1rem;                   /* Spazio tra le icone */
  list-style: none;            /* Rimuove i bullet */
  padding: 0;
  margin: 1rem auto;           /* Centra il blocco e margine verticale */
}

ul.contact-icons li {
  margin: 0;
  padding: 0;
}

ul.contact-icons a {
  font-size: 1.8rem;
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s ease;
}

ul.contact-icons a:hover {
  color: var(--link-hover);
}
@media (max-width: 480px) {
  ul.contact-icons a {
    font-size: 1.5rem;
  }
}