:root {
  --primary:#2B419B;
  --primaryHover:#24367D;
  --bgAlt:#E9EDF6; /* più saturo */
}
*{box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--headerH, 72px) + 12px); }
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial; margin:0; color:#0f172a; background:#fff}
.container{width:min(1100px,92vw); margin-inline:auto; padding-inline:clamp(16px,4vw,24px)}

/* Header */
header.sticky{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);background:rgba(255,255,255,.82);border-bottom:1px solid #e2e8f0}
a{color:var(--primary); text-decoration:none}

/* Buttons */
.btn, .btn-outline{display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border-radius:.75rem; font-weight:600; transition:transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s}
.btn{background:var(--primary); color:#fff}
.btn:hover,.btn:focus{background:var(--primaryHover); transform:translateY(-1px); box-shadow:0 10px 20px rgba(2,6,23,.15); outline:none}
.btn-outline{border:2px solid #cbd5e1; background:#fff; color:#0f172a}
.btn-outline:hover,.btn-outline:focus{background:#E8EBF8; border-color:var(--primary); transform:translateY(-1px); box-shadow:0 10px 20px rgba(2,6,23,.08); outline:none}

/* Base (già esistente nel tuo progetto) – lasciala com'è se l'hai già */
.card{
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(2,6,23,.07);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,6,23,.10);
  border-color: rgba(2,6,23,.14);
}

/* Modifica: card grigia (Impresa Locale) */
.card--muted{
  background: rgb(233, 237, 246);           /* grigio/azzurro tenue */
  color: #0f172a;                            /* slate-900 */
  border-color: rgba(15,23,42,.12);
}
.card--muted .card__title{ transition: color .15s ease; }
.card--muted:hover .card__title{ color: #2B419B; }

/* Card blu invertita (Brand Nazionale) – mantiene il tuo blu brand */
.card-invert{
  background: #2B419B;
  border-color: #2B419B;
  box-shadow: 0 8px 24px rgba(43,65,155,.25);
}
.card-invert:hover{
  box-shadow: 0 12px 32px rgba(43,65,155,.35);
}

/* Titolo della card blu (Brand Nazionale) */
.card-invert .card__title {
  transition: color .15s ease;
  color: #e5e7eb;
}

.card-invert:hover .card__title {
  color: #fff; /* in hover forziamo che resti bianco */
}

/* Testo leggibile dentro la card blu */
.locale-nazionale .card-invert ul,
.locale-nazionale .card-invert li{ color: rgba(255,255,255,.92); }

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s}
.reveal-in{opacity:1; transform:none}

/* Utility */
.text-muted{color:#64748b}
.section-alt{background:var(--bgAlt)}

/* Footer scuro (home) */
.footer--dark {
  background-color: #2B419B;
  color: white;
}
.footer--dark a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.footer--dark a:hover {
  color: #ffffff;
}

/* Footer chiaro (pagine interne) */
/* Footer chiaro su sfondo azzurro tenue */
.footer--light{
  background-color: rgb(233, 237, 246);
  color: #334155; /* slate-700 */
}

/* Tipografia */
.footer--light h3,
.footer--light .brand { color: #0f172a; /* slate-900 */ }
.footer--light p,
.footer--light li { color: #334155; }

/* Link */
.footer--light a{
  color: #334155;
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.footer--light a:hover{
  color: #2B419B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer--light a:focus-visible{
  outline: 2px solid #2B419B;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Badge logo “R” */
.footer--light .brand-badge{
  background-color: #2B419B;
  color: #fff;
}

/* Divisore inferiore più delicato sullo sfondo chiaro */
.footer--light .divider{
  border-top: 1px solid rgba(43, 65, 155, .18);
}

/* Testo più tenue dove serve */
.footer--light .muted{ color: #64748b; /* slate-500 */ }

.container.section-pad { padding-top: clamp(3.5rem, 6vw, 6.5rem); padding-bottom: clamp(3.5rem, 6vw, 6.5rem); }

/* Inverse (blue) card variant */
.card-invert { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(43,65,155,.25); }
.card-invert:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(43,65,155,.35); border-color: transparent; }
.card-invert h3, .card-invert .card-title { color: #fff; }
.card-invert .text-muted, .card-invert .text-slate-700, .card-invert .text-slate-600 { color: rgba(255,255,255,.9) !important; }
.card-invert .text-slate-500 { color: rgba(255,255,255,.75) !important; }


/* Inverse (blue) card variant – gradient + hover fixes */
.card-invert { 
  background: linear-gradient(180deg, #2B419B 0%, #24367D 100%);
  color: #fff; border-color: transparent; 
  box-shadow: 0 6px 16px rgba(43,65,155,.25);
}
.card-invert:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 14px 28px rgba(43,65,155,.35); 
  border-color: transparent; 
}
/* Prevent blue hover titles from becoming unreadable on inverted cards */
.card-invert h3, .card-invert .card-title { color: #fff; }
.card-invert:hover h3, .card-invert:hover .card-title { color: #fff; }
.card-invert .text-muted, 
.card-invert .text-slate-700, 
.card-invert .text-slate-600 { color: rgba(255,255,255,.92) !important; }
.card-invert .text-slate-500 { color: rgba(255,255,255,.78) !important; }


/* Hero containment to prevent overlay bleeding */
.section-hero { position: relative; overflow: hidden; isolation: isolate; }
.section-hero > * { contain: paint; }


/* Inset inner border & focus glow for inverted cards */
.card-invert { 
  position: relative;
  background: linear-gradient(180deg, #2B419B 0%, #24367D 100%);
}
.card-invert::after {
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
}
.card-invert:focus-within, .card-invert:focus { outline:none; }
.card-invert:focus-within::before, .card-invert:focus::before {
  content:"";
  position:absolute; inset:-2px;
  border-radius: calc(1rem + 2px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.28);
  pointer-events:none;
}

/* Stronger hero containment */
.section-hero { position: relative; overflow: clip; isolation: isolate; }
.section-hero [data-hero-rotator], 
.section-hero .hero-slide { will-change: transform; }


/* Stronger interactive hover for inverted cards */

@keyframes cardSheen {
  0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  20% { opacity: .35; }
  40% { opacity: .15; }
  100% { transform: translateX(140%) skewX(-12deg); opacity: 0; }
  30% { opacity: .35; }
  60% { opacity: .2; }
  100% { transform: translateX(140%) skewX(-15deg); opacity: 0; }
}
.card-invert { transition: transform .25s ease, box-shadow .25s ease, background-position .35s ease; background-size: 100% 100%; }
.card-invert:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(43,65,155,.45);
  background: linear-gradient(180deg, #2e48ad 0%, #1f2e68 100%);
}
/* animated sheen sweep */
.card-invert:hover::before { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%); filter: blur(6px); border-radius: inherit; animation: cardSheen .6s ease forwards; pointer-events:none; }


/* Hero hard clipping to stop any bleed below */
.section-hero { position: relative; overflow: hidden; isolation: isolate; }
.section-hero .hero-clip { position:absolute; inset:0; clip-path: inset(0); contain: paint; }
.section-hero .hero-clip > * { position:absolute; inset:0; }

/* Hero layering */
.section-hero { position: relative; overflow: hidden; isolation: isolate; }
.section-hero .hero-clip { position:absolute; inset:0; clip-path: inset(0); overflow:hidden; }
.section-hero .hero-clip > * { position:absolute; inset:0; z-index:0; }
.section-hero .hero-content { position:relative; z-index:10; }


/* --- FIX: card-invert sheen overflow --- */
@media (hover:hover) {
  .card-invert { overflow: hidden; contain: paint; }
  .card-invert::before {
    inset: 0;               /* clip inside card bounds */
    border-radius: inherit; /* match rounded corners */
    transform: translateX(-120%) skewX(-12deg);
  }
  .card-invert:hover::before {
    transform: translateX(140%) skewX(-12deg);
  }
}
@media (hover:none), (prefers-reduced-motion: reduce) {
  .card-invert::before { display: none; }
}

/* stile link header + underline animata */
.nav-link{
  position: relative;
  padding-bottom: 4px;
  transition: color .15s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:#2B419B;
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
}
/* hover e attivo */
.nav-link:hover::after,
.nav-link.is-active::after{
  transform:scaleX(1);
}

/* Blog/Case search input emphasis */
#q, #cs-q{
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  padding: .625rem .875rem;
  border-radius: .5rem;
}
#q:focus,#cs-q:focus{
  outline: none;
  border-color: #2B419B;
  box-shadow: 0 0 0 3px rgba(43,65,155,.15);
}

/* Skeleton loader */
.skeleton{ position: relative; overflow: hidden; background: #e5e7eb; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shine 1.2s infinite;
}
@keyframes shine{ 100% { transform: translateX(100%); } }

/* Back to Top button */
#backToTop{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: none; padding: 10px 14px; border-radius: 9999px;
  border: 1px solid #cbd5e1; background: white; box-shadow: 0 10px 20px rgba(2,6,23,.08);
  cursor: pointer; font-weight: 600;
}
#backToTop:hover{ background: #f8fafc; border-color: #94a3b8; }

/* Fade-in up animation for cards */
@keyframes fadeInUp { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
.fade-in-up { animation: fadeInUp .35s ease-out both; }

/* Tag pills */
.tag-pill{
  display:inline-block;
  padding:.375rem .75rem;
  border:1px solid #cbd5e1;      /* slate-300 */
  border-radius:9999px;
  font-size:.875rem;
  line-height:1;
  background:#fff;
  color:#0f172a;                  /* slate-900 */
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tag-pill:hover{
  background:#f8fafc;             /* slate-50 */
}
.tag-pill.is-active{
  background:#2B419B;
  border-color:#2B419B;
  color:#fff;
  box-shadow:0 0 0 3px rgba(43,65,155,.18);
}

/* Archivio: testo più piccolo e compatto */
#archive {
  font-size: 0.875rem;   /* ~14px */
  line-height: 1.4;
  max-height: calc(100vh - 200px); /* limite verticale */
  overflow-y: auto; /* scrollbar se troppi elementi */
}

/* Titolo Archivio un po’ più piccolo rispetto agli altri h2 */
#archive ~ h2,
#archive h2 {
  font-size: 0.85rem;
}

/* Versione tablet/mobile */
@media (max-width: 768px) {
  #archive {
    font-size: 0.8rem;   /* ~13px */
    line-height: 1.3;
  }
}

:root { --header-h: 88px; } /* fallback */
.page-main {  /* forza il padding-top del main */
  padding-top: calc(var(--header-h) + 32px) !important;
}
.sticky-under-header { /* offset per elementi sticky in sidebar */
  top: calc(var(--header-h) + 8px) !important;
}
/* opzionale: quando scrolli ad ancora/id non taglia i titoli */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 32px); }

nav a.active {
  border-bottom: 2px solid #2B419B; /* oppure underline */
  color: #2B419B; /* evidenzia in blu */
}

/* Altezza fissa della hero */
/* desktop */
#hero.hero-waves{
  height: 960px;           
  min-height: 960px;
}

/* Mobile/tablet: un filo più bassa per non “mangiare” lo schermo */
@media (max-width: 1024px){
  #hero.hero-waves{ height: 620px; min-height: 620px; }
}
@media (max-width: 640px){
  #hero.hero-waves{ height: 560px; min-height: 560px; }
}
@media (max-width: 430px){
  #hero.hero-waves{ height: 740px; min-height: 740px; }
}

#map-skeleton{
  background: linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 37%,#e5e7eb 63%);
  background-size: 400% 100%;
  animation: map-shimmer 1.4s ease-in-out infinite;
}
@keyframes map-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}