/* =====================================================
   Global Theme – Carmelo Bertolami Portfolio (static)
   Lightweight, elegant, dark‑mode ready
   ===================================================== */

/* =============================
   Modern Theme – Carmelo Bertolami Portfolio
   ============================= */
:root {
  --clr-bg:            #f6f8fb;
  --clr-surface:       #fff;
  --clr-surface-alt:   #f3f6fa;
  --clr-primary:       #2a3a8c;
  --clr-primary-dark:  #1a255c;
  --clr-accent:        #4f8cff;
  --clr-text:          #1a1a1a;
  --clr-muted:         #7a8599;
  --ff-heading: 'Playfair Display', serif;
  --ff-body:    'Poppins', sans-serif;
  --section-padding:   4rem;
  --radius-lg:         1.1rem;
  --radius-pill:       999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px rgba(0,0,0,.09);
}

/* Dark theme overrides */
[data-theme='dark'] {
  --clr-bg:          #10121a;
  --clr-surface:     #181b23;
  --clr-surface-alt: #15171e;
  --clr-text:        #e6e8ef;
  --clr-muted:       #9ba7c6;
  --shadow-sm:       0 2px 8px rgba(0,0,0,.5);
  --shadow-md:       0 6px 24px rgba(0,0,0,.45);
}

/* ---------- 1. CSS Variables ---------- */
:root {
  /* Palette – light  */
  --clr-bg:            #f9fafc;
  --clr-surface:       #ffffff;
  --clr-surface-alt:   #f1f3f9;
  --clr-primary:       #23408e;
  --clr-primary-dark:  #1a2e6c;
  --clr-accent:        #3197ff;
  --clr-text:          #1f1f1f;
  --clr-muted:         #6e7a8a;

  /* Typography */
  --ff-heading: 'Playfair Display', serif;
  --ff-body:    'Poppins', sans-serif;

  /* Spacing & radius */
  --section-padding:   6rem;
  --radius-lg:         1rem;
  --radius-pill:       999px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
}

/* ---------- 2. Reset & Basics ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--ff-body); background:var(--clr-bg); color:var(--clr-text); line-height:1.7;}
a{color:var(--clr-primary); text-decoration:none; transition:color .2s;}a:hover{color:var(--clr-accent);}
img{max-width:100%; display:block; border-radius:var(--radius-lg);}

/* Utility text classes */
.text-center{text-align:center;}
.clr-muted{color:var(--clr-muted);} .mt-0{margin-top:0;} .mt-2{margin-top:.7rem;}

/* ---------- 3. Layout ---------- */
.container{width:90%; max-width:1200px; margin-inline:auto;}
.section{padding:var(--section-padding) 0; position:relative;}
.section--alt{background:var(--clr-surface-alt);} /* alterna sfondo chiaro */

/* Responsive grid helper */
.section-grid{display:grid; gap:2.2rem;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

/* Section header */
.section-header{text-align:center; margin-bottom:2rem;}
.section-header h2{font-family:var(--ff-heading); font-size:1.8rem; margin:.2rem 0; color:var(--clr-primary)}
.section-header p{max-width:600px; margin-inline:auto;}

/* ---------- 4. Components ---------- */

/* Badge / pill button */
.badge{display:inline-block; padding:.6rem 1.3rem; background:var(--clr-primary); color:#fff; border-radius:var(--radius-pill); font-weight:500; font-size:1rem; line-height:1; box-shadow:var(--shadow-sm); transition:background .2s, transform .2s; cursor:pointer;}
.badge:hover{background:var(--clr-accent); color:#fff; transform:scale(1.07);}

/* Card (glassmorphism) */
.card{background:rgba(255,255,255,.7); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:1.5rem; transition:transform .25s, box-shadow .25s;}
[data-theme='dark'] .card{background:rgba(24,27,35,.7); border-color:rgba(255,255,255,.10);}  /* darker glass */
.card:hover{transform:translateY(-7px) scale(1.03); box-shadow:0 10px 32px rgba(0,0,0,.10);}

/* Timeline migliorata */
.timeline{position:relative; margin-left:2.5rem; padding-left:0.5rem;}
.timeline::before{content:""; position:absolute; left:0; top:0; width:5px; height:100%; background:linear-gradient(180deg,var(--clr-accent),var(--clr-primary)); border-radius:3px; opacity:.25; transition:opacity .3s ease;}
.timeline-item{position:relative; margin:0 0 2.5rem 0; padding-left:2.5rem; background:none; box-shadow:none; border:none;}
.timeline-item.card{box-shadow:var(--shadow-md); background:var(--clr-surface); border-radius:var(--radius-lg); padding:1.5rem 2rem; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; z-index:1;}
.timeline-item.card:hover{transform:translateY(-3px); box-shadow:0 12px 40px rgba(44,64,142,.15);}
.timeline-item.card:hover + .timeline-item.card{transform:translateY(-2px);}
.timeline-dot{position:absolute; left:-2.2rem; top:1.3rem; width:22px; height:22px; background:var(--clr-accent); border:4px solid #fff; border-radius:50%; box-shadow:0 0 0 6px rgba(79,140,255,.18),0 2px 8px rgba(44,64,142,.10); z-index:2; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);}
.timeline-item.card:hover .timeline-dot{transform:scale(1.2); box-shadow:0 0 0 8px rgba(79,140,255,.25),0 4px 20px rgba(44,64,142,.15);}
.timeline-item.card:hover ~ .timeline::before{opacity:.4;}
.timeline-content{position:relative;}
.timeline-content h3{margin-top:0; margin-bottom:.3rem; font-size:1.25rem; color:var(--clr-primary); transition:color .3s ease;}
.timeline-item.card:hover .timeline-content h3{color:var(--clr-accent);}
.timeline-content p{margin:0;}
.timeline-desc{margin-top:.7rem; color:var(--clr-muted); font-size:.98rem;}
@media(max-width:700px){
  .timeline{margin-left:1.2rem;}
  .timeline-item.card{padding:1.1rem 1rem;}
  .timeline-dot{left:-1.3rem; width:16px; height:16px;}
}

/* Shape divider */
.shape-divider path{fill:var(--clr-bg);} /* assume divider tra bright e alt */
[data-theme='dark'] .shape-divider path{fill:var(--clr-bg);} /* still dark bg */

/* Fade‑in on scroll */
.fade-in{opacity:0; transform:translateY(40px) scale(.98);}
.fade-in.is-visible{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);}

/* Blob animation keyframes (fallback if not inlined) */
@keyframes blob{0%,100%{transform:translate(0,0)scale(1);}33%{transform:translate(30%,-20%)scale(1.1);}66%{transform:translate(-20%,10%)scale(.9);} }

/* ---------- 5. Footer ---------- */
.footer{background:linear-gradient(135deg,var(--clr-primary)0%,var(--clr-primary-dark)100%); color:#fff; text-align:center; padding:3rem 1rem 1.5rem 1rem; position:relative;}
.footer p{margin:0 0 1rem 0; font-size:1rem; letter-spacing:.03em; font-family:var(--ff-body);}
.footer-contact{margin-bottom:1rem;}
.footer-email{color:#fff; text-decoration:none; font-size:1rem; font-weight:500; transition:opacity .2s, transform .2s; display:inline-block;}
.footer-email:hover{opacity:.8; transform:scale(1.05);}
.footer-social{display:flex; justify-content:center; gap:1.2rem; margin-bottom:.5rem;}
.footer-social a{color:#fff; opacity:.8; transition:opacity .2s, transform .2s;}
.footer-social a:hover{opacity:1; transform:scale(1.15);}

/* ---------- 6. Media queries ---------- */
@media(max-width:768px){
  :root{--section-padding:2.5rem;}
  .section-header h2{font-size:1.6rem;}
  .footer-social svg{width:20px; height:20px;}
  
  /* Hero mobile improvements */
  .hero-title{font-size:clamp(1.5rem,6vw+0.5rem,2.2rem) !important;}
  .hero-subtitle{font-size:clamp(0.9rem,3vw+0.3rem,1.1rem) !important; line-height:1.4;}
  
  /* Navbar mobile */
  .navbar-container{padding:0 1rem;}
  .navbar-links{right:1rem; top:65px; padding:1rem 1.5rem; min-width:160px;}
  
  /* Cards mobile */
  .card{padding:1.2rem;}
  .education-grid{grid-template-columns:1fr; gap:1rem;}
  .education-item.card{padding:1rem;}
  
  /* Skills mobile */
  .skills-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.8rem;}
  .skill-card{padding:0.7rem 0.5rem; font-size:0.85rem; min-height:40px;}
  
  /* Timeline mobile */
  .timeline{margin-left:1rem;}
  .timeline-item.card{padding:1rem;}
  .timeline-dot{left:-1.2rem; width:16px; height:16px;}
  
  /* Grid adjustments */
  .section-grid.grid-2{grid-template-columns:1fr;}
  .section-grid.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  
  /* About section mobile */
  .about-avatar-wrap img{max-width:200px !important;}
}

@media(max-width:480px){
  :root{--section-padding:2rem;}
  .container{width:95%;}
  
  /* Hero extra small */
  .hero-title{font-size:clamp(1.3rem,5vw+0.4rem,1.8rem) !important;}
  .hero-subtitle{font-size:clamp(0.8rem,2.5vw+0.2rem,1rem) !important;}
  
  /* Navbar extra small */
  .navbar-container{padding:0 0.5rem;}
  .navbar-links{right:0.5rem; padding:0.8rem 1rem;}
  
  /* Cards extra small */
  .card{padding:1rem;}
  .education-item.card{padding:0.8rem;}
  
  /* Skills extra small */
  .skills-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:0.6rem;}
  .skill-card{padding:0.6rem 0.4rem; font-size:0.8rem; min-height:35px;}
  
  /* Footer mobile */
  .footer{padding:2rem 0.5rem 1rem;}
  .footer-email{font-size:0.9rem;}
}

.hero-bg{position:relative; overflow:hidden; min-height:50vh; display:flex; align-items:center; justify-content:center;}
.hero-bg::before{content:""; position:absolute; z-index:0; left:0; top:0; width:100%; height:100%; background:linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-primary) 50%, var(--clr-primary-dark) 100%); opacity:.15; pointer-events:none;}
.hero-content{position:relative; z-index:1; max-width:800px; margin:0 auto;}
.hero-title{font-family:var(--ff-heading); font-size:clamp(1.8rem,3.5vw+0.6rem,2.5rem); font-weight:700; color:var(--clr-primary); margin:0 0 0.6rem 0; line-height:1.2; letter-spacing:-0.02em;}
.hero-subtitle{font-size:clamp(0.9rem,1.5vw+0.3rem,1.1rem); color:var(--clr-accent); font-weight:600; margin:0 0 0.6rem 0; opacity:0.9;}
.hero-description{font-size:clamp(0.8rem,1.2vw+0.3rem,1rem); color:var(--clr-muted); margin:0 0 1rem 0; line-height:1.6; max-width:600px; margin-left:auto; margin-right:auto;}
.hero-buttons{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem;}
.hero-btn-primary{background:var(--clr-primary); color:#fff; padding:0.8rem 1.8rem; font-size:1.1rem; font-weight:600; border-radius:var(--radius-pill); transition:all .3s ease; box-shadow:0 4px 20px rgba(44,64,142,.2);}
.hero-btn-primary:hover{background:var(--clr-accent); transform:translateY(-2px); box-shadow:0 8px 30px rgba(44,64,142,.3);}
.hero-btn-secondary{background:transparent; color:var(--clr-primary); border:2px solid var(--clr-primary); padding:0.8rem 1.8rem; font-size:1.1rem; font-weight:600; border-radius:var(--radius-pill); transition:all .3s ease;}
.hero-btn-secondary:hover{background:var(--clr-primary); color:#fff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(44,64,142,.2);}
.hero-stats{display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; margin-top:2rem;}
.stat-item{text-align:center; padding:1rem; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.2); min-width:120px;}
.stat-number{display:block; font-size:1.8rem; font-weight:700; color:var(--clr-primary); margin-bottom:0.3rem;}
.stat-label{display:block; font-size:0.9rem; color:var(--clr-muted); font-weight:500;}
@media(max-width:768px){
  .hero-buttons{flex-direction:column; align-items:center;}
  .hero-btn-primary, .hero-btn-secondary{width:200px; text-align:center;}
  .hero-stats{gap:1.5rem;}
  .stat-item{min-width:100px; padding:0.8rem;}
  .stat-number{font-size:1.5rem;}
  .stat-label{font-size:0.8rem;}
}

.sticky-nav{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(44,64,142,.06); transition:background .3s;}
[data-theme='dark'] .sticky-nav{background:rgba(24,27,35,.85);}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--clr-primary); transition:transform .2s; margin:0 auto;}
.logo:hover{transform:scale(1.05);}
.navbar-logo{display:block; border-radius:50%; box-shadow:0 2px 8px rgba(44,64,142,.15); transition:box-shadow .2s;}
.logo:hover .navbar-logo{box-shadow:0 4px 16px rgba(44,64,142,.25);}
.logo-text{font-family:var(--ff-heading); font-size:1.3rem; font-weight:700; letter-spacing:.01em; color:var(--clr-primary);}
@media(max-width:600px){
  .navbar-logo{width:32px; height:32px;}
  .logo-text{font-size:1.1rem;}
}

/* Navbar styles */
.navbar{padding-top:1.1rem; padding-bottom:1.1rem;}
.navbar-container{display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:1200px; margin:0 auto; padding:0 2rem;}
.navbar-toggle{display:none; background:none; border:none; font-size:2rem; cursor:pointer; color:var(--clr-primary);}
.navbar-toggle.open{color:var(--clr-accent);}
.navbar-toggle:focus{outline:2px solid var(--clr-accent);}
.logo{display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--clr-primary); transition:transform .2s; flex-shrink:0;}
.logo:hover{transform:scale(1.05);}
.navbar-logo{display:block; border-radius:50%; box-shadow:0 2px 8px rgba(44,64,142,.15); transition:box-shadow .2s;}
.logo:hover .navbar-logo{box-shadow:0 4px 16px rgba(44,64,142,.25);}
.navbar-links{display:flex; gap:1.5rem; align-items:center; font-size:1.05rem; font-weight:500; justify-content:center; flex:1; margin:0 2rem;}
.navbar-links a{color:var(--clr-text); padding:.2rem .7rem; border-radius:var(--radius-pill); transition:background .2s, color .2s; position:relative; text-decoration:none; outline:none;}
.navbar-links a.active, .navbar-links a:hover{background:var(--clr-accent); color:#fff;}
.navbar-links a.active::after, .navbar-links a:hover::after{content:""; display:block; position:absolute; left:20%; right:20%; bottom:3px; height:3px; border-radius:2px; background:#fff; opacity:.7; transition:all .2s;}
.navbar-links .navbar-ext{background:none; color:var(--clr-primary); font-weight:600;}
.navbar-links .navbar-ext:hover{background:var(--clr-accent); color:#fff;}
.navbar-divider{display:inline-block; width:1.5px; height:1.5em; background:var(--clr-muted); margin:0 .7rem; border-radius:2px; opacity:.3;}
.navbar-links a:focus{box-shadow:0 0 0 2px var(--clr-accent);}
@media(max-width:900px){
  .navbar-container{justify-content:space-between; padding:0 1rem;}
  .navbar-toggle{display:inline-block;}
  .navbar-links{position:absolute; right:1rem; top:70px; background:var(--clr-surface); box-shadow:var(--shadow-md); flex-direction:column; align-items:flex-start; gap:1.2rem; padding:1.5rem 2rem; border-radius:var(--radius-lg); opacity:0; pointer-events:none; transform:translateY(-10px) scale(.98); transition:all .3s; min-width:180px; margin:0;}
  .navbar-links.open{opacity:1; pointer-events:auto; transform:none;}
  .navbar-divider{display:none;}
}
@media(max-width:600px){
  .navbar-logo{width:32px; height:32px;}
  .navbar-links{right:1rem; top:60px; padding:1rem 1.2rem;}
  .navbar-container{padding:0 .5rem;}
}
/* About avatar migliorato */
.about-avatar-wrap{text-align:center;}
.about-avatar{max-width:220px; margin-inline:auto; box-shadow:0 8px 32px rgba(44,64,142,.10); border:4px solid var(--clr-surface);}
@media(max-width:900px){
  .about-avatar{max-width:160px;}
}

/* Education section */
.education-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; margin-top:2.5rem;}
.education-item.card{padding:1.7rem 1.2rem; text-align:left;}
.education-item h3{margin-top:0; color:var(--clr-primary); font-size:1.18rem;}
.education-item p{margin:.3rem 0;}
@media(max-width:700px){
  .education-grid{gap:1rem;}
  .education-item.card{padding:1.1rem .7rem;}
}

/* Certifications section migliorata */
.section-grid.grid-3 li.card{min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
@media(max-width:700px){
  .section-grid.grid-3{gap:1rem;}
  .section-grid.grid-3 li.card{padding:1.1rem .7rem; font-size:.98rem;}
}

/* Skills section elegante */
.skills-category{margin-bottom:2rem;}
.skills-category:last-child{margin-bottom:0;}
.skills-category-title{font-family:var(--ff-body); font-size:1.3rem; color:var(--clr-primary); margin-bottom:1rem; text-align:center; font-weight:600;}
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; justify-items:center; margin-top:0.8rem;}
.skill-card{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--clr-surface),var(--clr-surface-alt) 80%); border-radius:var(--radius-lg); box-shadow:0 3px 16px rgba(44,64,142,.06); padding:0.8rem 0.6rem; font-size:0.95rem; font-weight:500; color:var(--clr-primary-dark); transition:transform .22s, box-shadow .22s, background .22s, color .22s; position:relative; cursor:default; min-height:45px; letter-spacing:.01em; text-align:center;}
.skill-card:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 8px 24px rgba(44,64,142,.12); background:linear-gradient(135deg,var(--clr-accent) 10%,var(--clr-primary) 90%); color:#fff;}
@media(max-width:700px){
  .skills-category-title{font-size:1.1rem;}
  .skills-grid{gap:0.8rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
  .skill-card{padding:0.7rem 0.5rem; font-size:.85rem; min-height:40px;}
}