:root{
  --blue:#0b5ed7; 
  --blue-600:#0a58ca; 
  --blue-700:#0a4fb6; /* aggiunta: usata dai bottoni */
  --text:#0b0b0b; 
  --bg:#ffffff;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --radius:14px; --maxw:960px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;
  line-height:1.6;color:var(--text);background:var(--bg)
}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-2)}
.section{padding-block:calc(var(--space-4) + var(--space-1))}
.section-title{margin-bottom:var(--space-2)}
.lead{font-size:1.125rem}
.muted{opacity:.7}
.list{padding-left:1.1rem}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem 1rem;border:1px solid var(--blue);border-radius:.5rem;z-index:1000}

/* Header */
#header{
  background:linear-gradient(180deg,#f8f9ff 0%,#fff 100%);
  border-bottom:1px solid #e6e8ef;
  position: relative; 
}
#header .header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto; /* hamburger | brand | avatar  */
  align-items:center;
  gap:1.5rem;
  padding-block:var(--space-2);
}
#header .avatar{
  width:clamp(96px, 14vw, 160px);
  height:auto !important;
  aspect-ratio:1/1;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  justify-self: end; 
  border-radius:0;
}
#header .brand{ 
  text-align:center; 
  min-width:0; 
}
/* Brand title: scales with viewport, no layout changes */
.brand h1 {
  font-size: clamp(1.25rem, 6vw, 2.6rem); /* small→large without overflowing */
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-wrap: balance; /* nicer multi-line wrapping where supported */
}

#header .tagline{ color:#334; opacity:.9; margin:.25rem 0 0; }



/* Pulsante hamburger: look solido e coerente con il dropdown */
#header .menu-toggle {
  width: clamp(96px, 14vw, 160px);
  height: clamp(96px, 14vw, 160px);
  border-radius: .9rem;                         /* leggermente arrotondato, come le card */
  display: flex;
  align-items: center;
  justify-content: start;
  justify-content: center;
  border: 2px solid var(--blue-600);            /* bordo blu come i link attivi */
  background: #ffffff;                           /* fondo chiaro, pulito */
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);        /* ombra simile alle card e al menu */
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

/* Hover/focus: un po’ di movimento e cambio di colore coerente */
#header .menu-toggle:hover,
#header .menu-toggle:focus {
  background-color: #e7f1ff;                     /* azzurro chiaro come l'hover dei link */
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform: translateY(-2px);
  border-color: var(--blue);
}

/* SVG hamburger e X: scalano bene con la dimensione del pulsante */
#header .menu-toggle svg {
  width: 45%;   /* dimensione relativa per un aspetto equilibrato */
  height: 45%;
  fill: var(--blue-600);
  transition: fill .25s ease;
}

#header .menu-toggle:hover svg,
#header .menu-toggle:focus svg {
  fill: var(--blue);                              /* colore più vivo in hover */
}

/* Su mobile: se restringi ulteriormente l'avatar, anche il bottone segue */
@media (max-width: 640px) {
  #header .avatar,
  #header .menu-toggle {
    width: 96px !important;
    height: 96px !important;
  }
}

#header .menu-toggle:hover, 
#header .menu-toggle:focus{ background:#f2f5fc; }
#header .menu-toggle .ico-close{ display:none; }
#header .menu-toggle[aria-expanded="true"] .ico-open{ display:none; }
#header .menu-toggle[aria-expanded="true"] .ico-close{ display:block; }

/* Dropdown ancorato al lato destro della .container, sotto l'hamburger */
.menu-panel{
  position: absolute;
  top: 100%;
  right: var(--space-2); /* default: allinea al padding destro su mobile */
  width: min(240px, calc(100vw - 2*var(--space-2)));
  background: #fff;
  border-top: 1px solid #e6e8ef;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  z-index: 50;
}
.menu-panel[hidden]{ display:none !important; }

/* Desktop: allinea al bordo destro della .container centrata (max-width) */
@media (min-width: 992px){
  #header{
    /* gutter destro = (larghezza viewport - max width)/2 + padding interno container */
    --header-gutter-right: calc( (100vw - var(--maxw)) / 2 + var(--space-2) );
  }
  .menu-panel{
    right: var(--header-gutter-right);
    left: auto;
    width: 240px; /* o quello che preferisci */
  }
}



.menu-list{ list-style:none; margin:0; padding:.75rem 1rem; text-align: right; }
.menu-list li{ margin:.25rem 0; }
.menu-list a{
  display:block; padding:.7rem .9rem; border-radius:.6rem;
  text-decoration:none; color:#0b1b3a; font-weight:600; text-align: right;
}
.menu-list a:hover, .menu-list a:focus,
.menu-list a.active{ background:#e7f1ff; }



/* Hero */
.hero{
  position:relative; min-height:40vh;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; overflow:hidden;
  background:#0b1b3a;
}
.hero-bg{ background:url('/assets/img/hero-bg.jpg') center/cover no-repeat fixed }
.hero-overlay{ position:absolute; inset:0; background:rgba(5,12,32,.55) }
.hero-content{ position:relative; z-index:1 }
.hero-title{ font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem); margin:0 0 .25rem; }
.hero-subtitle{ margin-top:.25rem; }

/* Typed (versione fade: una parola alla volta) */
.hero .typed.is-scroll{
  display:inline-block;
  opacity:0; transition:opacity .4s ease;
  font-size:clamp(1.6rem, 2.5vw + .6rem, 2.6rem);
  font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
  text-decoration:none; border-bottom:none;
}
.hero .typed.is-scroll.show{ opacity:1; }

@media (max-width:720px){
  .hero{ min-height:60vh }
  .hero-title{ font-size:1.7rem }
  .hero .typed.is-scroll{ font-size:clamp(1.2rem, 4.5vw + .6rem, 1.8rem) }
}
/* === Ripristino underline animata per la scritta mobile === */
.hero .typed.is-scroll::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue), var(--blue-600));
  background-size: 200% 100%;
  animation: hero-uline 3s linear infinite;
  opacity:.95;
}
@keyframes hero-uline {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Footer */
#footer{padding-block:var(--space-2);border-top:1px solid #e6e8ef;background:#fafbff;text-align:center}

/* Publications buttons */
.pub-links{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.2rem; margin-top:1.5rem;
}




.btn-link{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1.2rem 1.8rem; border-radius:.8rem;
  background-color:var(--blue-600); color:#fff;
  font-size:1.3rem; font-weight:600; text-decoration:none;
  border:2px solid var(--blue-700);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-link:hover, .btn-link:focus{
  background-color:var(--blue);
  border-color:var(--blue);
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}

.btn-ico{
 display:inline-flex;
  width:34px; 
  height:34px; 
  flex-shrink:0; 
}



.pub-links .btn-ico i {
  font-size: 2rem;          /* aumenta la grandezza dell'icona */
}


/* Highlights / Cards */
.highlights-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.2rem; margin-top:1rem;
}
.highlight-card{
  position:relative;
  background:#fff; border:2px solid #d9dfeb; border-radius:.9rem;
  padding:1.1rem 1.1rem 1rem;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.highlight-card:hover, .highlight-card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  border-color:var(--blue-600);
}
.highlight-ico{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg, var(--blue-600), var(--blue));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:.6rem;
}

.highlight-ico svg{ width:22px; height:22px; fill:currentColor; }
.highlight-title{ font-size:1.05rem; margin:.1rem 0 .25rem; }
.highlight-text{ margin:0; color:#223; opacity:.9; font-size:.98rem; line-height:1.5; }
.highlight-text a{ text-decoration:underline; text-underline-offset:3px; }

/* Liste interne (news-list) */
.news-list{ padding-left:.8rem; margin-left:0; }
.news-list li{ margin:.4rem 0; }

/* Collassabile */
.highlight-body{ position:relative; overflow:hidden; max-height:8.5rem; }
.highlight-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.highlight-card.is-open .highlight-body{ max-height:none; }
.highlight-card.is-open .highlight-body::after{ display:none; }
.highlight-toggle{
  margin-top:1rem; display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1.2rem; border-radius:.8rem; background-color:var(--blue-600);
  color:#fff; font-size:1rem; font-weight:600; border:none; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.highlight-toggle:hover, .highlight-toggle:focus{
  background-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/* Grid 2-col (desktop) / 1-col (mobile) per Resume */
.highlights-grid.highlights-2 {
  grid-template-columns: 1fr;            /* mobile: 1 card per riga */
}

@media (min-width: 900px) {
  .highlights-grid.highlights-2 {
    grid-template-columns: 1fr 1fr;      /* desktop: 2 card per riga */
  }
}

/* Contact */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1rem; margin-top:1rem;
}
.contact-card{
  background:#fff; border:2px solid #d9dfeb; border-radius:.9rem;
  padding:1rem 1.1rem; box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.contact-card h3{ margin:.1rem 0 .4rem; font-size:1.05rem; }
.contact-card .link{ text-decoration:underline; text-underline-offset:3px; }
.contact-map{
  margin-top:1.2rem; border-radius:.9rem; overflow:hidden;
  border:2px solid #d9dfeb; box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Responsive tweaks */
@media (max-width:720px){
  #header .avatar{ width:96px !important; }
  #header .tagline{ display:none; }
}

/* Compact mode */
.is-compact .section{ padding-block:var(--space-2) }
.is-compact .lead{ font-size:1rem }



.menu-list{ 
  list-style:none;
  margin:0; 
  padding:.75rem 1rem; 
}
.menu-list li{ margin:.25rem 0; }
.menu-list a {
  display:block;
  padding:.7rem .9rem;
  border-radius:.6rem;
  text-decoration:none;
  color:#0b1b3a;
  font-weight:600;
}

/* Allinea a destra il testo dei link del menu a tendina */
.menu-list {
  text-align: right;
}

.menu-list a {
  text-align: right; /* opzionale, per sicurezza */
  justify-content: flex-end; /* se servisse in futuro con flex */
}

.menu-list a:hover, .menu-list a:focus,
.menu-list a.active{ background:#e7f1ff; }


/* header della card in riga */
.highlight-head{
  display:flex;
  align-items:center;
  gap:.5rem;            /* spazio tra icona e testo */
  margin-bottom:.4rem;  /* distacco dal contenuto sotto */
}

/* opzionale: dimensioni/coerenza dell'icona */
.highlight-ico{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:42px; height:42px; /* come le altre card */
}

/* Allow wrapping inside card content */
.news-list li > span,
.news-list li > small,
.news-list li a {
  white-space: normal;
  overflow-wrap: anywhere;   /* modern */
  word-break: break-word;    /* fallback */
}

/* Make description go full line (often helps on mobile) */
.news-list li > span,
.news-list li > small {
  display: block;
}