/*
  site.css — Stili condivisi (tema verde chiaro + accessibilità)
  Palette ispirata al logo/header: verde #02733E e verde chiaro #B3D5C5
  Uso: <link rel="stylesheet" href="site.css">
*/

:root{
  /* Tema predefinito: chiaro/verde (alto contrasto) */
  --bg:#B3D5C5;
  --bgTop:#B3D5C5;
  --panel:#ffffff;

  /* testo su sfondi chiari */
  --text:#063b24;         /* verde molto scuro */
  --muted:#1f5b3b;        /* testo secondario (ancora leggibile) */

  /* colori brand */
  --brand:#02733E;        /* verde header */
  --brand2:#03A559;       /* verde per hover/gradient */
  --accent:#f6c177;       /* focus/accendo caldo */

  /* superfici e bordi */
  --stroke:rgba(6,59,36,.18);
  --shadow:0 18px 45px rgba(0,0,0,.10);
  --radius:18px;
  --max:1100px;

  /* header e card */
  --headerBg: rgba(2,115,62,.96);   /* #02733E */
  --card1: rgba(255,255,255,.98);
  --card2: rgba(255,255,255,.92);
  --surface: rgba(2,115,62,.06);
  --surface2: rgba(2,115,62,.10);

  /* glow di sfondo (molto leggero) */
  --rad1: rgba(2,115,62,.10);
  --rad2: rgba(179,213,197,.45);   /* #B3D5C5 */
}

/* (Opzionale) Se nel sito esiste ancora il toggle tema, la modalità "dark"
   resta comunque in palette verde e non torna al blu/scuro precedente. */
html[data-theme="dark"]{
  color-scheme: light;
  --bg:#B3D5C5;
  --bgTop:#B3D5C5;
  --panel:#ffffff;
  --text:#063b24;
  --muted:#1f5b3b;
  --stroke:rgba(6,59,36,.22);
  --shadow:0 18px 45px rgba(0,0,0,.12);

  --headerBg: rgba(2,115,62,.96);
  --card1: rgba(255,255,255,.98);
  --card2: rgba(255,255,255,.92);
  --surface: rgba(2,115,62,.06);
  --surface2: rgba(2,115,62,.10);

  --rad1: rgba(2,115,62,.10);
  --rad2: rgba(179,213,197,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme: light;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 0%, var(--rad1), transparent 55%),
    radial-gradient(700px 500px at 95% 10%, var(--rad2), transparent 50%),
    linear-gradient(180deg, var(--bgTop), var(--bg));
  line-height:1.6;
}

/* Link distinguibili (non solo colore) */
a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:.09em;
}
a:hover{text-decoration-thickness:.14em}
a:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* Link usati come componenti UI */
.brand, .links a, .btn, .tile, .toc a{text-decoration:none}
.brand:hover, .links a:hover, .btn:hover, .tile:hover, .toc a:hover{text-decoration:none}
.brand:focus-visible, .links a:focus-visible, .btn:focus-visible, .tile:focus-visible, .toc a:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#ffffff;
  color:#063b24;
  border:2px solid rgba(2,115,62,.35);
  transform:translateY(-140%);
  transition:transform .15s ease;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}

/* Ancore + header sticky */
[id]{scroll-margin-top:88px}

/* Layout base */
.wrap{max-width:var(--max); margin:0 auto; padding:24px}

header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: var(--headerBg);
  border-bottom:1px solid rgba(255,255,255,.28);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:var(--max); margin:0 auto}
.nav-right{display:flex; align-items:center; gap:10px}

.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px; color:rgba(255,255,255,.98)}
.badge{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#9ae6b4,#03A559); box-shadow:var(--shadow)}

.links{display:flex; flex-wrap:wrap; gap:10px}
.links a{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:rgba(255,255,255,.96);
  background:rgba(255,255,255,.10);
}
.links a:hover{
  border-color:rgba(255,255,255,.40);
  background:rgba(255,255,255,.16);
  color:rgba(255,255,255,.98);
}
.links a[aria-current="page"]{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
  color:#ffffff;
}

/* Toggle tema (se presente) */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.98);
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
}
.theme-toggle:hover{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.18)}

/* Solo per screen reader */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Componenti */
.card{
  background: linear-gradient(180deg, var(--card1), var(--card2));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.hr{height:1px; background:var(--stroke); margin:18px 0}

.hero{padding:30px 0 10px}
.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px}
@media (max-width: 860px){.hero-grid{grid-template-columns:1fr;}}

h1{font-size:clamp(28px, 3.2vw, 44px); margin:0 0 12px; line-height:1.12}
h2{margin:0 0 10px; font-size:22px}
h3{margin:0 0 8px; font-size:16px}

.lead{margin:0; color:var(--muted); font-size:clamp(16px, 1.6vw, 18px)}
p{margin:0 0 12px}

.section{padding:18px 0}

.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 0; padding:0; list-style:none}
@media (max-width: 560px){.kpis{grid-template-columns:1fr;}}
.kpi{padding:12px 14px; border:1px solid var(--stroke); border-radius:14px; background:rgba(2,115,62,.06)}
.kpi b{display:block; font-size:15px}
.kpi span{color:var(--muted); font-size:13px}

.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(2,115,62,.28);
  background:rgba(2,115,62,.08);
  color:var(--text);
}
.btn:hover{
  border-color:rgba(2,115,62,.42);
  background:rgba(2,115,62,.12);
}
.btn.primary{
  background:linear-gradient(135deg, rgba(2,115,62,.18), rgba(3,165,89,.16));
  border-color:rgba(2,115,62,.50);
}
.btn.primary:hover{background:linear-gradient(135deg, rgba(2,115,62,.22), rgba(3,165,89,.20))}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; padding:0; margin:0; list-style:none}
@media (max-width: 900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 560px){.grid{grid-template-columns:1fr;}}

.tile{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(2,115,62,.05);
  /* niente altezza minima: proporzionale al contenuto */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.tile h3{margin:0; font-size:16px}
.tile p{margin:0; color:var(--muted); font-size:14px}
.tile .go{display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:650}
.tile:hover{border-color:rgba(2,115,62,.45); background:rgba(2,115,62,.07)}

.note{
  border-left:3px solid rgba(2,115,62,.85);
  padding:14px 14px 14px 16px;
  background:rgba(2,115,62,.06);
  border-radius:14px;
  color:var(--muted);
}

/* Breadcrumb */
.crumbs{font-size:14px; color:var(--muted)}
.crumbs ol{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.crumbs li{margin:0; color:var(--muted)}
.crumbs a{color:var(--text)}
.sep{opacity:.7}

/* Meta pills */
.meta{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; padding:0; list-style:none}
.meta li{margin:0}
.pill{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(2,115,62,.06); color:var(--muted); font-size:13px}

/* TOC */
.toc ol{margin:0; padding-left:18px}
.toc li{margin:0 0 8px; color:var(--muted)}
.toc a{display:inline-block; padding:8px 10px; border-radius:12px; border:1px solid var(--stroke); background:rgba(2,115,62,.05); margin:6px 0; color:var(--text)}
.toc a:hover{border-color:rgba(2,115,62,.45); background:rgba(2,115,62,.07)}

footer{padding:30px 0 60px; color:var(--muted)}
footer small{display:block; opacity:.95}

/* Riduzione movimento */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto !important; transition:none !important;}
}

/* Contrasto aumentato (automatico se impostato nel sistema) */
@media (prefers-contrast: more){
  :root{
    --text:#062b1b;
    --muted:#104027;
    --stroke:rgba(6,59,36,.28);
  }
  body{background:#ffffff;}
  .tile,.kpi,.pill,.toc a{background:rgba(2,115,62,.08)}
  .btn{background:rgba(2,115,62,.12)}
}

/* High Contrast (Windows) */
@media (forced-colors: active){
  .card,.tile,.btn,.links a,.kpi,.theme-toggle,.toc a{forced-color-adjust:auto; border:1px solid CanvasText;}
  .badge{forced-color-adjust:auto; border:1px solid CanvasText; background:CanvasText}
  .hr{background:CanvasText}
  a:focus-visible,.btn:focus-visible,.tile:focus-visible,.links a:focus-visible,.theme-toggle:focus-visible,.toc a:focus-visible{
    outline:2px solid Highlight;
    outline-offset:3px;
  }
}

/* Utility */
.muted{color: var(--muted);}

/* Layout pagina (indice + contenuto) */
.page-grid{display:grid; grid-template-columns:.75fr 1.25fr; gap:14px; align-items:start}
@media (max-width: 900px){.page-grid{grid-template-columns:1fr;}}

/* Liste di contenuto (pagine sezione) */
.values, .steps, .list{margin:0; padding-left:18px}
.values li, .steps li, .list li{margin:0 0 10px; color:var(--muted)}
.values b, .steps b, .list b{color:var(--text)}

/* Timeline (proposta politica) */
.timeline{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.titem{border:1px solid var(--stroke); border-radius:14px; background:rgba(2,115,62,.05); padding:12px 14px}
.titem h3{margin:0 0 6px}
.titem p{margin:0; color:var(--muted)}

/* Footer layout (supporta footer.php) */
.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:14px;
}

.footer-grid strong{ color: var(--text); }

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* Link in stile "pill" come la nav */
.footer-links a{
  text-decoration:none;
  padding:8px 10px;
  border:1px solid rgba(6,59,36,.18);
  border-radius:999px;
  color:var(--text);
  background:rgba(2,115,62,.05);
}

.footer-links a:hover{
  border-color:rgba(2,115,62,.45);
  background:rgba(2,115,62,.08);
}

@media (max-width: 760px){
  .footer-grid{ flex-direction:column; }
  .footer-links{ justify-content:flex-start; }
}


/* Utility opzionali per richiamare il verde chiaro dello screenshot */
.bg-soft{ background:#B3D5C5; }
.section-soft{
  background:#B3D5C5;
  color:#063b24;
  padding: 36px 0;
}
.section-soft .wrap{ padding-top: 0; padding-bottom: 0; }
.section-soft a:focus-visible{ outline-color: var(--accent); }


/* =========================================================
   OVERRIDE FORZATO (se restano colori blu/scuri)
   Metti questo file DOPO gli altri CSS oppure incollalo in fondo.
   ========================================================= */
html, body{
  color-scheme: light !important;
  background: #B3D5C5 !important;
  color: #063b24 !important;
}

/* In molti temi il dark viene attivato con classi/dati: forziamo comunque chiaro */
html.dark, body.dark,
html[data-theme="dark"], body[data-theme="dark"],
html.theme-dark, body.theme-dark,
body.is-dark, body.night,
.dark-mode, .theme--dark, .is-theme-dark{
  background: #B3D5C5 !important;
  color: #063b24 !important;
}

/* Header/nav: copri i selettori più comuni */
header, nav,
.topbar, .top-bar, .navbar, .nav-bar, .site-header, .header, #header,
.main-header, .primary-header, .header-wrap, .header-container{
  background-color: #02733E !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}

/* Link nel menu */
header a, nav a,
.topbar a, .navbar a, .site-header a, #header a{
  color: rgba(255,255,255,.96) !important;
}

/* Elementi pill/chip/bottoni in header */
header a.btn, header .btn, header button,
nav a.btn, nav .btn, nav button,
.topbar .chip, .navbar .chip, .site-header .chip,
.topbar a, .navbar a, .site-header a{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.30) !important;
}

/* Hover */
header a:hover, header button:hover,
nav a:hover, nav button:hover{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Se qualche tema mette overlay scuri */
.overlay, .backdrop, .header-overlay{
  background: transparent !important;
}

/* Forza testo secondario chiaro leggibile in header */
header .muted, header small, header span,
nav .muted, nav small, nav span{
  color: rgba(255,255,255,.88) !important;
}

/* Focus visibile */
header a:focus-visible, header button:focus-visible,
nav a:focus-visible, nav button:focus-visible{
  outline: 3px solid #f6c177 !important;
  outline-offset: 3px !important;
}