/* Casa sull'albero ODV — palette presa dal logo e dai volantini dell'associazione. */
:root {
  /* dal logo: sole, cielo, prato, tetto, tronco */
  --sole:      #F2B705;
  --sole-tint: #FDF3D6;
  --cielo:     #6FB6D9;
  --cielo-tint:#E4F1F8;
  --prato:     #2E7D4F;
  --prato-scuro:#1C5233;
  --prato-tint:#E6F2EA;
  --tetto:     #D64B3F;
  --tetto-tint:#FBE9E7;
  --tronco:    #6B4A2F;
  /* dai volantini: il rosa-lilla dello sportello */
  --rosa:      #D9789A;
  --rosa-tint: #FBEAF0;
  --lilla:     #8E7CC3;

  --crema:     #FDFAF4;
  --carta:     #FFFFFF;
  --testo:     #2A2622;
  --grigio:    #6A625A;
  --bordo:     #E8DFD2;

  /* accento della pagina: sovrascritto dal tema */
  --acc:       var(--prato);
  --acc-scuro: var(--prato-scuro);
  --acc-tint:  var(--prato-tint);
  --max: 1080px;
}

/* un colore per servizio, come nei volantini */
body.t-sportello { --acc: var(--rosa);  --acc-scuro:#B25578; --acc-tint: var(--rosa-tint); }
body.t-centro    { --acc: var(--cielo); --acc-scuro:#3C7E9E; --acc-tint: var(--cielo-tint); }
body.t-club      { --acc: var(--prato); --acc-scuro: var(--prato-scuro); --acc-tint: var(--prato-tint); }
body.t-sostieni  { --acc: var(--sole);  --acc-scuro:#B98A04; --acc-tint: var(--sole-tint); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--crema);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

a { color: var(--acc); }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  color: var(--acc-scuro);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.2;
}
.brand small { display: block; font-weight: 400; font-size: .72rem; color: var(--grigio); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--testo); text-decoration: none; font-size: .93rem; }
.nav a:hover, .nav a:focus { color: var(--acc); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { background: var(--acc-tint); padding: 56px 0 48px; }
.hero h1 { margin: 0 0 14px; font-size: clamp(1.8rem, 4.4vw, 2.7rem); line-height: 1.18; color: var(--acc-scuro); }
.hero .lead { font-size: 1.13rem; max-width: 62ch; margin: 0 0 26px; }

/* ---------- CTA ---------- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--acc);
  transition: background .15s, color .15s;
}
.btn-primary { background: var(--acc); color: var(--carta); }
.btn-primary:hover, .btn-primary:focus { background: var(--acc-scuro); border-color: var(--acc-scuro); }
.btn-ghost { background: transparent; color: var(--acc); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--acc); color: var(--carta); }

/* ---------- contenuto ---------- */
main section { padding: 44px 0; border-bottom: 1px solid var(--bordo); }
main section:last-of-type { border-bottom: 0; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--acc-scuro); margin: 0 0 16px; }
h3 { font-size: 1.12rem; margin: 26px 0 8px; }
p { margin: 0 0 16px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 22px;
  background: var(--carta);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.callout {
  background: var(--acc-tint);
  border-left: 5px solid var(--acc);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

.cf-box {
  background: var(--acc-scuro);
  color: var(--carta);
  border-radius: 10px;
  padding: 26px;
  text-align: center;
  margin: 26px 0;
}
.cf-box .cf {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  display: block;
  margin: 10px 0;
  color: var(--sole);
}
.cf-box p { margin: 0; }

dl.faq dt { font-weight: 600; margin-top: 18px; color: var(--acc-scuro); }
dl.faq dd { margin: 6px 0 0; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--acc-scuro);
  color: #cfe0d6;
  padding: 40px 0 28px;
  font-size: .9rem;
  margin-top: 40px;
}
.site-footer a { color: var(--carta); }
.site-footer .cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h4 { color: var(--carta); margin: 0 0 10px; font-size: .95rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .82rem; }

/* ---------- accessibilita' ---------- */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--acc-scuro);
  color: #fff;
  padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; z-index: 100; }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 2px; }

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

/* tabelle (privacy / cookie policy) */
table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
table th,table td{border:1px solid var(--line,#dcdcd4);padding:.6rem .7rem;text-align:left;vertical-align:top}
table th{background:rgba(0,0,0,.04);font-weight:600}
.table-scroll,main section table{display:block;overflow-x:auto}
@media(max-width:600px){table th,table td{padding:.5rem .55rem;font-size:.9rem}}

/* ============ vestito: colore, morbidezza, immagini ============ */

/* logo nell'intestazione */
.brand{display:flex;align-items:center;gap:.7rem}
.brand::before{content:"";flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:url("/assets/logo.png") center/cover no-repeat;
  box-shadow:0 0 0 2px var(--carta),0 2px 8px rgba(0,0,0,.14)}
.site-header{background:rgba(253,250,244,.96);border-bottom:1px solid var(--bordo)}

/* apertura: fondo caldo, alone di colore, filigrana del logo */
.hero{position:relative;overflow:hidden;background:var(--acc-tint);
  border-bottom:1px solid var(--bordo)}
.hero::before{content:"";position:absolute;right:-8%;top:-40%;width:46rem;height:46rem;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,
    color-mix(in srgb,var(--acc) 26%,transparent),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;right:3%;bottom:-18%;width:20rem;height:20rem;
  background:url("/assets/logo.png") center/contain no-repeat;opacity:.10;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-top:3.4rem;padding-bottom:3.4rem}
.hero h1{color:var(--acc-scuro)}
.hero .lead{max-width:34rem}

/* sezioni a fasce alterne, così la pagina respira */
main section:nth-of-type(even){background:var(--carta);
  border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}

h2{color:var(--acc-scuro);border-bottom:0;position:relative;padding-bottom:.5rem}
h2::after{content:"";position:absolute;left:0;bottom:0;width:2.6rem;height:4px;
  border-radius:2px;background:var(--acc)}
h3{color:var(--tronco)}

/* schede: angoli tondi, filo di colore in alto */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.4rem 0}
.card{background:var(--carta);border:1px solid var(--bordo);border-top:4px solid var(--acc);
  border-radius:14px;padding:1.15rem 1.2rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card h3{margin-top:0;color:var(--acc-scuro)}
.card:nth-child(4n+2){border-top-color:var(--sole)}
.card:nth-child(4n+3){border-top-color:var(--cielo)}
.card:nth-child(4n+4){border-top-color:var(--tetto)}

/* bottoni a pillola */
.btn{border-radius:999px;padding:.75rem 1.5rem;font-weight:600}
.btn-primary{background:var(--acc-scuro);border-color:var(--acc-scuro);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--acc);border-color:var(--acc)}
.btn-ghost{border-color:var(--acc-scuro);color:var(--acc-scuro);background:transparent}
.btn-ghost:hover,.btn-ghost:focus{background:var(--acc-tint)}

/* riquadri e tabelle in tinta */
.callout{background:var(--acc-tint);border-left:4px solid var(--acc);border-radius:0 12px 12px 0;
  padding:1rem 1.15rem}
.cf-box{background:var(--sole-tint);border:1px dashed var(--sole);border-radius:14px;text-align:center}
table th{background:var(--acc-tint);color:var(--acc-scuro)}
dl.faq dt{color:var(--acc-scuro)}
a{color:var(--acc-scuro)}

/* piede in tinta calda */
.site-footer{background:var(--prato-scuro);color:#EAF0EA}
.site-footer a{color:#CFE3D4}
.site-footer h4{color:var(--sole)}

@media (max-width:640px){
  .hero .wrap{padding-top:2.4rem;padding-bottom:2.4rem}
  .hero::after{width:12rem;height:12rem;opacity:.08}
  .brand::before{width:38px;height:38px}
}

/* il marchio resta sempre verde, anche sulle pagine a tema */
.brand,.brand:hover{color:var(--prato-scuro)}
.brand small{color:var(--grigio)}

/* schede persona con foto */
.persone{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.4rem 0}
.persona{background:var(--carta);border:1px solid var(--bordo);border-radius:16px;
  padding:1.3rem 1.2rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.persona img{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block;margin:0 auto .8rem;
  box-shadow:0 0 0 4px var(--acc-tint),0 2px 10px rgba(0,0,0,.12)}
.persona h3{margin:0 0 .2rem;font-size:1.05rem;color:var(--acc-scuro)}
.persona .ruolo{margin:0 0 .45rem;font-size:.95rem}
.persona .albo{margin:0;font-size:.82rem;color:var(--grigio)}

/* form di contatto */
.csa-form{max-width:38rem;margin:1.5rem 0}
.csa-form p{margin:0 0 1.1rem}
.csa-form label{display:block;font-weight:600;margin-bottom:.35rem}
.csa-form input[type=text],.csa-form input[type=email],.csa-form input[type=tel],.csa-form textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line,#dcdcd4);border-radius:8px;
  font:inherit;background:#fff;color:inherit}
.csa-form textarea{resize:vertical;min-height:8rem}
.csa-form input:focus-visible,.csa-form textarea:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.csa-form small{display:block;margin-top:.4rem;opacity:.75;font-weight:400}
.csa-form .csa-check{font-weight:400;display:flex;gap:.6rem;align-items:flex-start;line-height:1.45}
.csa-form .csa-check input{margin-top:.25rem;flex:0 0 auto}
.csa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* banner consenso cookie */
.csa-cc{position:fixed;inset:auto 0 0 0;z-index:9999;background:#fff;color:#1b1b1b;
  border-top:2px solid #1b1b1b;padding:1rem 1.2rem;box-shadow:0 -4px 20px rgba(0,0,0,.12)}
.csa-cc-in{max-width:60rem;margin:0 auto;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.csa-cc p{margin:0;font-size:.95rem;flex:1 1 22rem}
.csa-cc .csa-cc-btn{display:flex;gap:.6rem;flex-wrap:wrap}
.csa-cc button{font:inherit;padding:.55rem 1rem;border-radius:8px;border:1px solid #1b1b1b;cursor:pointer}
.csa-cc button.si{background:#1b1b1b;color:#fff}
.csa-cc button.no{background:#fff;color:#1b1b1b}
@media(max-width:560px){.csa-cc-in{flex-direction:column;align-items:stretch}.csa-cc .csa-cc-btn{justify-content:stretch}.csa-cc button{flex:1}}

/* responsabile in evidenza + équipe in piccolo */
.responsabile{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:1.6rem;align-items:center;
  background:var(--carta);border:1px solid var(--bordo);border-radius:18px;padding:1.4rem;margin:1.4rem 0;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.responsabile img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.responsabile h3{margin:0 0 .3rem;font-size:1.35rem;color:var(--acc-scuro)}
.responsabile .ruolo{margin:0 0 .6rem;font-size:1.05rem}
.responsabile .albo{margin:0;color:var(--grigio);font-size:.9rem}
@media(max-width:600px){.responsabile{grid-template-columns:1fr}.responsabile img{max-width:260px;margin:0 auto}}
.equipe-mini{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin:1rem 0 1.6rem}
.equipe-mini figure{margin:0;display:flex;align-items:center;gap:.8rem}
.equipe-mini img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--acc-tint),0 2px 8px rgba(0,0,0,.12)}
.equipe-mini figcaption{font-size:.95rem;line-height:1.35}
.equipe-mini figcaption strong{display:block;color:var(--acc-scuro)}
.equipe-mini figcaption small{color:var(--grigio)}

/* articoli /notizie/ */
.occhiello{font-size:.9rem;color:var(--grigio);margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.04em}
.occhiello a{color:var(--acc-scuro);text-decoration:none}
.articolo{max-width:44rem}
.articolo .byline{border-left:4px solid var(--acc);padding:.5rem .9rem;background:var(--acc-tint);border-radius:0 10px 10px 0;margin:0 0 1.6rem}
.articolo h2{margin-top:2rem}
.articolo img{border-radius:12px}
.card .occhiello{margin-bottom:.3rem}