/* ========================================================
   VARIABILI GLOBALI
======================================================== */
:root{
  --container-max: 1280px;

  /* Header / Nav */
  --nav-h: 96px;
  --nav-pad-left: 8px;
  --nav-pad-right: 24px;
  --brand-gap: 12px;
  --logo-h: 100px;
  --brand-font: 20px;

  /* (solo desktop grande) micro-shift opzionali */
  --brand-left-shift: 310px;
  --call-right-shift: 270px;

  /* Call pill */
  --phone-ic: 30px;
  --call-pad-y: 10px;
  --call-pad-x: 16px;

  /* Hero default */
  --hero-h: 560px;

  /* Footer fixed */
  --footer-h: 60px;

  /* Colori */
  --primary: #0b4a7a;
  --ink: #0b2239;
}

/* ========================================================
   RESET & BASE
======================================================== */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink);
  background:#fff;
  line-height:1.45;

  /* Layout a tutta altezza + spazio per footer fixed */
  display:flex;
  flex-direction:column;
}
main{ flex:1; }

.container{ width:min(var(--container-max), 94vw); margin-inline:auto; }

/* ========================================================
   HEADER / NAVBAR
======================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.nav{
  height: var(--nav-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding-left: var(--nav-pad-left);
  padding-right: var(--nav-pad-right);
}
.brand{
  display:inline-flex; align-items:center; gap:var(--brand-gap);
  margin-left: calc(-1 * var(--brand-left-shift));
}
.brand__logo{ height:var(--logo-h); width:auto; object-fit:contain; }
.brand__name{ font-weight:800; font-size:var(--brand-font); letter-spacing:.4px; white-space:nowrap; }

/* Menu desktop */
.menu{ display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; }
.menu a{ font-weight:600; padding:8px 4px; }
.menu a:hover{ color:#0a66c2; }

/* Call pill */
.call-us{
  justify-self:end;
  display:inline-flex; align-items:center; gap:12px;
  padding:var(--call-pad-y) var(--call-pad-x);
  border-radius:10px; border:1px solid #e1e7f0; background:#f3f6fb; white-space:nowrap;
  margin-right: calc(-1 * var(--call-right-shift));
}
.phone-ic{ width:var(--phone-ic); height:var(--phone-ic); fill:#0a66c2; flex-shrink:0; }
.call-us__label{ font-size:12px; line-height:1.1; color:#385273; }
.call-us__num{ font-size:16px; font-weight:800; letter-spacing:.35px; }

/* ========================================================
   HAMBURGER / MENU MOBILE
======================================================== */
.hamburger{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid #e1e7f0; background:#f3f6fb; border-radius:10px; cursor:pointer;
  position:relative; z-index:1001;
}
.hamburger__bar{ display:block; width:22px; height:2px; background:#0b2239; margin:3px 0;
  transition: transform .2s ease, opacity .2s ease; }
body.menu-open .hamburger__bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
body.menu-open .hamburger__bar:nth-child(2){ opacity:0; }
body.menu-open .hamburger__bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* overlay scuro quando il menu è aperto */
body.menu-open::before{
  content:""; position:fixed; inset: var(--nav-h) 0 0 0; background:rgba(0,0,0,.3); z-index:900;
}

/* Stato MOBILE: nascondo menu finché non è aperto */
@media (max-width:1024px){
  .hamburger{ display:flex; }
  .menu{
    display:none !important;          /* baseline: nascosto */
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:#fff; padding:14px 16px; box-shadow:0 10px 20px rgba(0,0,0,.12);
    z-index:1000; flex-direction:column; gap:12px; align-items:center; justify-content:flex-start;
  }
  .menu a{ padding:12px 4px; font-size:18px; }
  body.menu-open .menu{ display:flex !important; }  /* visibile solo quando aperto */
}

/* Stato DESKTOP */
@media (min-width:1025px){
  .menu{ display:flex !important; position:static; gap:22px; }
  .hamburger{ display:none; }
}

/* ========================================================
   HERO (generico) e HERO pagina servizi
======================================================== */
.hero{
  background: var(--primary);
  color:#fff;
  padding: calc(var(--nav-h) + 16px) 0 40px; /* evita che lo sticky header copra il titolo */
  text-align:center;
}
.hero__title{ margin:0; font-size:clamp(28px, 4vw, 40px); font-weight:900; }
.hero__subtitle{ margin:10px 0 0; opacity:.95; }

/* Hero grande con immagine e overlay (servizi.html) */
.servizi-hero{
  position:relative;
  min-height: 70vh;
  display:flex; align-items:center;
  padding-top: calc(var(--nav-h) + 12px);   /* spazio sicuro sotto header */
  padding-bottom: 24px;
  background: url("../immagini/sfondo2.servizi.jpg") center/cover no-repeat;
}
.servizi-hero__overlay{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); }
.servizi-hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  width:min(1200px, 94%); margin:0 auto;
}
.service-card:nth-child(3){ grid-column:1 / span 2; justify-self:center; }

.service-card{
  position:relative; background:#fff; border-radius:14px; padding:30px;
  box-shadow:0 4px 12px rgba(0,0,0,.12); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.service-card h2{ font-size:26px; color:var(--primary); margin-bottom:10px; }
.service-card p{ font-size:15px; color:#555; margin-bottom:20px; }

.btn-primary{
  background:var(--primary); color:#fff; border:0; padding:12px 22px; border-radius:8px; font-weight:700; cursor:pointer;
}
.btn-primary:hover{ background:#185788; }

/* ========================================================
   HERO SLIM per pagine singole servizi (caf, patronato, immigrazione)
======================================================== */
.svc-hero-slim{
  position:relative;
  min-height:340px;
  padding: calc(var(--nav-h) + 10px) 0 30px; /* mai coperto dall'header */
  color:#fff; overflow:hidden;
}
.svc-hero-slim__overlay{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../immagini/caf.jpg') center/cover no-repeat;
}
.svc-hero-slim.patronato .svc-hero-slim__overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../immagini/patronat.jpg') center/cover no-repeat;
}
.svc-hero-slim.immigrazione .svc-hero-slim__overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../immagini/immigration.jpg') center/cover no-repeat;
}
.svc-hero-slim__inner{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; }
.svc-hero-slim h1{
  margin:0 0 8px; font-size:clamp(28px, 4.2vw, 44px); font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.svc-hero-slim p{ margin:0 auto 14px; max-width:820px; color:#eef3f8; }

/* ========================================================
   GRIGLIE / SEZIONI SERVIZI
======================================================== */
/* Immagini dentro le card servizi */
.service-card img,
.svc-card img{
  display:block;
  max-width:100%;
  height:auto;
}

.svc-section{ padding:48px 0; }
.svc-hero h2{ margin:0 0 8px; font-size:clamp(28px, 4.2vw, 40px); }
.svc-sub{ max-width:800px; opacity:.9; }

.svc-benefits{ display:flex; gap:18px; padding:0; margin:20px 0; flex-wrap:wrap; }
.svc-benefits li{ list-style:none; background:#f5f7fb; padding:10px 14px; border-radius:10px; }

.svc-grid{ display:grid; gap:16px; margin:24px 0 8px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.svc-card{ background:#fff; border:1px solid #eef1f6; border-radius:14px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.svc-card h3{ margin:0 0 6px; }
.svc-mini-cta{ display:inline-block; margin-top:8px; font-weight:700; color:#0a66c2; }

.svc-steps{ display:grid; gap:10px; margin:24px 0; padding:0; }
.svc-steps li{ list-style:none; background:#f7fafc; padding:12px 14px; border-radius:10px; }

/* griglia card centrata (pagina caf) */
.svc-grid-4{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.svc-card__actions{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.svc-card{ flex:1 1 260px; max-width:320px; }
@media (min-width:1100px){ .svc-card{ flex-basis:300px; } }

/* ========================================================
   FAQ ORIZZONTALE (sotto hero)
======================================================== */
.faq-global{
  width:100%; background:#f7fafc; color:#0b2239;
  padding:100px 0; border-top:2px solid #e1e7f0; border-bottom:2px solid #e1e7f0;
}
.faq-global .svc-h2{ text-align:center; margin-bottom:24px; font-weight:800; }
.faq-global__strip{ position:relative; width:100%; padding:0 16px; }
.faq-global__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:360px;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 0; scrollbar-width:none;
}
.faq-global__track::-webkit-scrollbar{ display:none; }
.faq-global__item{ scroll-snap-align:start; background:#fff; border:1px solid #eef1f6; border-radius:12px; padding:10px; box-shadow:0 8px 20px rgba(0,0,0,.05); }
.faq-global__q{
  width:100%; text-align:left; background:#f3f6fb; border:1px solid #e8edf5; border-radius:8px;
  padding:10px 12px; font-weight:800; cursor:pointer;
}
.faq-global__a{
  max-height:0; overflow:hidden; padding:0 12px; margin-top:8px;
  background:#f9fbff; border-left:3px solid #0a66c2; border-radius:8px;
  opacity:0; transition:max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.faq-global__item.open .faq-global__a{ max-height:220px; padding:10px 12px; opacity:1; }
.faq-global__prev, .faq-global__next{
  position:absolute; top:50%; transform:translateY(-50%);
  border:none; cursor:pointer; background:#0a66c2; color:#fff;
  width:36px; height:36px; border-radius:50%; font-size:20px; line-height:36px;
  box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:5; pointer-events:auto;
}
.faq-global__prev{ left:8px; } .faq-global__next{ right:8px; }

/* ========================================================
   FOOTER (standard, non fisso)
======================================================== */
.footer{
  position: static;
  width: 100%;
  background:#f8f8f8;
  text-align:left;
  font-size:10px;
  padding:10px 20px;
}
.footer .container{ width:100%; margin:0; padding:0 10px; }


/* ========================================================
   RESPONSIVE TUNING
======================================================== */
@media (max-width:1100px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){
  .servizi-hero__inner{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  /* Header compatto + niente “shift” forzati */
  :root{
    --nav-h: 68px;
    --logo-h: 56px;
    --brand-font: 18px;
    --brand-left-shift: 0;
    --call-right-shift: 0;
    --footer-h: 84px;       /* footer un filo più alto su mobile */
  }
  .brand__logo{ height:var(--logo-h); }
  .brand__name{ font-size:var(--brand-font); }
  .call-us{ gap:8px; padding:6px 10px; border-radius:8px; margin-right:0; }
  .phone-ic{ width:22px; height:22px; }

  /* Hero: spazi extra e CTA “contenute” */
  .servizi-hero{ padding-top: calc(var(--nav-h) + 16px); padding-bottom: 96px; }
  .hero{ padding: calc(var(--nav-h) + 12px) 0 48px; }

  .btn-primary{ width:100%; max-width:360px; margin-inline:auto; }
  .service-card{ padding:22px; }
}
@media (max-width:600px){
  .faq-global__track{ grid-auto-columns:280px; }
}
/* ====== HOTFIX MOBILE: niente sticky/fixed dentro gli hero ====== */
@media (max-width: 768px){

  /* qualunque cosa dentro gli hero torna normale */
  .hero, .servizi-hero, .svc-hero-slim {
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 96px;           /* spazio per CTA in basso */
  }


  /* se usi classi “sticky” generiche da altre parti */
  .sticky, .is-sticky { position: static !important; top:auto !important; }

  /* CTA a prova di overflow */
  .btn-primary{ width:100%; max-width:360px; margin-inline:auto; }
}
/* ——— Allinea header/mobile a “Chi Siamo” ——— */
@media (max-width: 1024px){
  /* 1) nascondi il titolo per fare spazio all’hamburger */
  .brand__name{ display:none; }

  /* 2) griglia a 4 colonne: logo | 1fr | call | hamburger */
  .nav{ grid-template-columns: auto 1fr auto auto; }
  .call-us{ grid-column: 3; }
  .hamburger{ display:flex; grid-column: 4; justify-self: end; }

  /* 3) elimina gli shift che stringono lo spazio */
  :root{
    --brand-left-shift: 0;
    --call-right-shift: 0;
  }
}