/* ========== Reset & safety ========== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html, body, h1, h2, h3, p, a, nav, header, main, footer, section, ul, li, div {
  writing-mode: horizontal-tb !important;  /* evita rendering verticale su alcuni browser */
  text-orientation: mixed !important;
  transform: none !important;
}
body { overflow-x: hidden; }

/* ========== Theme ========== */
:root{
  --bg-start:#e9fff4;
  --bg-end:#daf7ee;
  --text:#0a4b4b;
  --muted:#1f7c7a;
  --accent:#0fa58a;
  --accent-2:#0d8c74;
  --card:#ffffffda;
  --shadow:0 12px 30px rgba(0,0,0,.07);
  --radius:18px;
}

/* ========== Base ========== */
body{
  font-family: "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color: var(--text);
  background: linear-gradient(180deg,var(--bg-start),var(--bg-end));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Header / Navbar ========== */
header{
  position: sticky; top: 0; z-index: 50;
  background:#fff; backdrop-filter:saturate(1.1) blur(6px);
}
.nav{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.logo{
  font-weight:700; font-size: 1.15rem;
  color: var(--text); text-decoration:none; transition:opacity .18s ease;
}
/* mantieni sempre visibile il logo anche con menu aperto */
.is-nav-open .logo{ opacity:1; pointer-events:auto; }

.nav-links{
  list-style:none; display:flex; gap: 12px;
  margin:0 0 0 auto; padding:0; align-items:center; flex-wrap:wrap;
}
.nav-links a{
  text-decoration:none; color: var(--muted);
  padding: 8px 10px; border-radius: 10px;
}
.nav-links a:hover, .nav-links a.active{
  background:#ffffff8f; color:var(--text);
}

/* === Lingue: solo bandiere === */
.lang-switch{ display:flex; gap:10px; align-items:center; }
.lang-switch a{
  font-size:22px; text-decoration:none; border-radius:8px; padding:4px 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lang-switch a:hover{ transform:scale(1.15); box-shadow:0 0 0 3px rgba(14,165,233,.25); }
.lang-switch a.is-active{ transform:scale(1.2); box-shadow:0 0 0 3px rgba(14,165,233,.4); background:rgba(14,165,233,.08); }

/* ========== Hero (home) ========== */
main{ min-height: calc(100dvh - 120px); display:grid; place-items:center; }
.hero{
  text-align:center; max-width: 900px; padding: 40px 22px 60px;
}
.hero h1{ font-size: clamp(28px, 5vw, 44px); margin: 0 0 10px 0; }
.hero p{ font-size: clamp(16px, 2.6vw, 22px); color: var(--muted); margin: 0 0 26px; }
.cta-button{
  display:inline-block; text-decoration:none; background: var(--accent); color:#fff;
  padding: 14px 26px; border-radius: 999px; box-shadow: var(--shadow);
}
.cta-button:hover{ background: var(--accent-2); }

/* ========== Pagine interne ========== */
.page{ max-width:1100px; margin:0 auto; padding:34px 22px 70px; }
.page h1{ font-size: clamp(26px, 4.6vw, 38px); margin: 6px 0 14px; }
.lead{ color: var(--muted); max-width: 900px; }

/* Cards */
.cards{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top:16px; }
.card{ background: var(--card); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); }
.card h3{ margin: 4px 0 8px; }
.card p{ margin: 0; color: var(--muted); }

/* ========== Footer ========== */
footer{ text-align:center; color: var(--muted); font-size: 14px; padding: 22px 12px 26px; }

/* ========== Toggle menu mobile (≤ 900px) ========== */
.nav-burger{ display:none; }      /* nascosto su desktop */
.nav-check  { display:none; }

@media (max-width: 900px){
  /* mostra burger su mobile */
  .nav-burger{
    display:block; font-size:28px; padding:8px 12px;
    background:transparent; border:none; cursor:pointer; user-select:none;
  }

  /* barra in alto invariata con logo + burger */
  .nav{ align-items:center; }

  /* di default il pannello menu è chiuso su mobile */
  .nav-links{
    display:none; width:100%;
    flex-direction:column; align-items:flex-start; gap:12px;
    padding:14px 18px; background:#fff; border-top:1px solid #ddd;
    box-shadow:0 8px 20px -12px rgba(0,0,0,.15);
  }

  /* pannello menu che si apre SOTTO la barra */
  #nav-check:checked ~ .nav-links{
    display:flex; margin-top:8px; border-radius:12px;
    box-shadow:0 12px 28px -12px rgba(0,0,0,.18);
    animation: navDrop .22s ease-out both;
  }

  .nav-links a{ padding:8px 0; font-size:18px; }
}

/* animazione apertura menu */
@keyframes navDrop{
  from{ opacity:0; transform: translateY(-8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* iOS safe area per header sticky */
@supports (padding-top: env(safe-area-inset-top)){
  header{ padding-top: env(safe-area-inset-top); }
}

/* ========== About (Chi Siamo) ========== */
.about{ display:grid; grid-template-columns: 360px 1fr; gap: 28px; align-items:start; }
.about-aside{ position: sticky; top: 92px; }
.avatar{
  width:100%; height:auto; display:block;
  border-radius: 20px; border: 3px solid #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.14); object-fit: cover;
}
.chips{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#e7faf5; color:#0d8c74; text-decoration:none; font-weight:600;
  box-shadow: 0 4px 12px rgba(13,140,116,.12);
}
.chip .li{ margin-right:2px; }
.chip:hover{ background:#dff6ef; }

/* CV snapshot + valori */
.cv-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 12px 28px rgba(0,0,0,.08); margin:16px 0 10px; }
.values-grid{ margin:22px 0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.values-grid .card{ background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); }
.values-grid .bullets{ margin:10px 0 0; padding-left:18px; }
.values-grid .bullets li{ margin:6px 0; color:var(--muted); }
.about-body .tick{ margin:10px 0 0; padding-left:18px; }
.about-body .tick li{ margin:6px 0; }

/* === Timeline elegante === */
.timeline-block{ margin-top:24px; }
.timeline{
  list-style:none; margin:18px 0 0; padding:0 0 0 22px; position:relative;
}
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px;
  width:2px; background:linear-gradient(#cdeee6,#9ad9cc);
}
.timeline > li{ position:relative; margin:0 0 18px 0; }
.timeline > li::before{
  content:""; position:absolute; left:-2px; top:4px; width:12px; height:12px;
  border-radius:50%; background:#0fa58a; box-shadow:0 0 0 3px rgba(15,165,138,.18);
}
.t-badge{
  display:inline-block; font-size:.85rem; color:#0d8c74; background:#e7faf5;
  padding:4px 8px; border-radius:999px; margin-bottom:6px; font-weight:600;
}
.t-meta{ color:var(--muted); margin:.25rem 0 .35rem; }
.t-body{ margin:0; color:var(--muted); }
.org{ color:var(--text); font-weight:600; }

/* — Mobile: niente sticky per la foto, layout in colonna — */
@media (max-width: 900px){
  .about{ grid-template-columns: 1fr; }
  .about-aside{ position: static; }       /* evita che la foto blocchi lo scroll */
  .avatar{ max-height: 60vh; }
}

/* === Timeline: fix overlapping dots & date pills === */
.exp-timeline{ border-left: 2px solid #d7efe8; margin-left: 6px; padding-left: 22px; }
.exp-item{ position: relative; padding-left: 28px; margin: 34px 0; }
.exp-item::before{
  content: ""; position: absolute; left: -12px; top: 0.95rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #34e1b1 0%, #0fa58a 70%);
  box-shadow: 0 0 0 3px #e6fbf5;
}
.exp-when{
  display: inline-block; margin: 10px 0 0; padding: 6px 12px;
  border-radius: 999px; background: #e9fff4; border: 1px solid #c7f0e5;
  font-weight: 600; white-space: nowrap;
}
.exp-when::before, .exp-when::after{ content: none !important; }
@media (max-width: 700px){
  .exp-item{ padding-left: 24px; margin: 26px 0; }
  .exp-item::before{ left: -10px; top: 0.85rem; }
}

/* ========== Cookie/Consent bar (única definición) ========== */
.cookie-bar{
  position: fixed; left: 12px; right:12px; bottom:12px;
  z-index: 100000;                       /* por encima de todo */
  background:#fff; border:1px solid #e2efe9; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  padding:14px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  pointer-events: auto;                  /* asegura clics en la barra */
}
.cookie-bar *{ pointer-events: auto; }
.cookie-bar p{ margin:0; color:var(--text); }
.cookie-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cookie-link{ color:var(--muted); text-decoration:underline; font-size:14px; }
@media (max-width: 600px){
  .cookie-bar{ left:8px; right:8px; bottom:8px; }
}