/*
Theme Name: Valecchi
Theme URI: https://elisabettavalecchi.it
Author: Evo Sistemi di Cirone Simone
Author URI: https://www.evosistemi.com/
Description: Tema su misura per Elisabetta Valecchi - materiali e IA per la scuola primaria. Idee che fanno scuola.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: valecchi
*/

/* =========================================================
   Elisabetta Valecchi — Idee che fanno scuola
   Design system / foglio di stile principale (bozza)
   ========================================================= */

:root{
  /* Palette */
  --coral:#E86A5A;      --coral-d:#D2503F;   --coral-l:#FBEAE6;
  --teal:#2FA69A;       --teal-d:#227E75;    --teal-l:#E1F3F1;
  --amber:#F4B740;      --amber-d:#D99A1E;   --amber-l:#FDF1D6;
  --indigo:#3B4C8A;     --indigo-l:#E7EAF5;
  --ink:#22303A;        --ink-soft:#4A5A66;  --muted:#7C8B95;
  --paper:#FBF7F1;      --paper-2:#F4EDE3;   --white:#ffffff;
  --line:#E8E0D4;

  /* Tipografia */
  --font-head:'Poppins','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;

  /* Raggi / ombre / spazi */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --sh-1:0 2px 8px rgba(34,48,58,.06);
  --sh-2:0 10px 30px rgba(34,48,58,.10);
  --sh-3:0 20px 50px rgba(34,48,58,.14);
  --container:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.15; color:var(--ink); margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem); letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.01em}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
a{color:var(--coral-d); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{max-width:var(--container); margin-inline:auto; padding-inline:22px}
.section{padding:clamp(48px,7vw,92px) 0}
.section--tint{background:var(--paper-2)}
.center{text-align:center}
.eyebrow{font-family:var(--font-head); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:var(--teal-d); margin:0 0 .6rem}
.lead{font-size:1.18rem; color:var(--ink-soft); max-width:62ch}
.center .lead{margin-inline:auto}
.section-head{max-width:720px; margin:0 auto 2.6rem}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600;
  font-size:1rem; padding:.85em 1.5em; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; transition:.18s ease; text-decoration:none; white-space:nowrap}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn--primary{background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(232,106,90,.35)}
.btn--primary:hover{background:var(--coral-d)}
.btn--teal{background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(47,166,154,.30)}
.btn--teal:hover{background:var(--teal-d)}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--coral); color:var(--coral-d)}
.btn--lg{font-size:1.08rem; padding:1em 1.8em}
.btn--sm{font-size:.9rem; padding:.6em 1.1em}

/* ---------- Header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(251,247,241,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:1.4rem; padding:.6rem 0}
.nav__logo img{height:46px; width:auto}
.nav__links{display:flex; gap:1.35rem; margin-left:auto; align-items:center; list-style:none; padding:0; margin-block:0}
.nav__links a{color:var(--ink); font-family:var(--font-head); font-weight:500; font-size:.98rem}
.nav__links a:hover{color:var(--coral-d); text-decoration:none}
.nav__cta{display:flex; gap:.6rem; align-items:center}
.nav__toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem}
.nav__toggle span{display:block; width:26px; height:3px; background:var(--ink); border-radius:3px; margin:5px 0}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 480px at 82% -8%, var(--amber-l), transparent 60%),
  radial-gradient(900px 460px at 6% 108%, var(--teal-l), transparent 60%), var(--paper)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  padding:clamp(40px,6vw,84px) 0}
.hero h1 span{color:var(--coral)}
.hero__badges{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1.8rem}
.chip{display:inline-flex; align-items:center; gap:.45em; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.4em .9em; font-size:.86rem; font-weight:600; color:var(--ink-soft); box-shadow:var(--sh-1)}
.chip svg{width:16px; height:16px}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem}
.hero__art{position:relative}
.hero__card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:22px; border:1px solid var(--line)}
.hero__card h4{margin:0 0 .3rem}
.hero__float{position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:.7rem 1rem; font-weight:700; font-family:var(--font-head); display:flex; gap:.5rem; align-items:center}
.hero__float--a{top:-18px; right:8px; color:var(--teal-d)}
.hero__float--b{bottom:-16px; left:-10px; color:var(--coral-d)}

/* ---------- Griglie / card ---------- */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--sh-1); transition:.2s ease; height:100%}
.card:hover{box-shadow:var(--sh-2); transform:translateY(-4px)}
.card__ico{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px}
.card__ico svg{width:28px; height:28px}
.i-coral{background:var(--coral-l); color:var(--coral-d)}
.i-teal{background:var(--teal-l); color:var(--teal-d)}
.i-amber{background:var(--amber-l); color:var(--amber-d)}
.i-indigo{background:var(--indigo-l); color:var(--indigo)}
.card h3{margin-bottom:.35rem}
.card p{color:var(--ink-soft); margin-bottom:.6rem; font-size:.98rem}
.card__link{font-family:var(--font-head); font-weight:600; color:var(--coral-d); font-size:.95rem}

/* Card materiale */
.mat{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-1); transition:.2s}
.mat:hover{box-shadow:var(--sh-2); transform:translateY(-4px)}
.mat__thumb{aspect-ratio:4/3; display:grid; place-items:center; position:relative; color:#fff}
.mat__thumb .tag{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92); color:var(--ink);
  font-size:.72rem; font-weight:700; padding:.3em .7em; border-radius:var(--r-pill)}
.mat__thumb svg{width:52px; height:52px; opacity:.95}
.mat__body{padding:16px 18px 18px}
.mat__meta{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem}
.pill{font-size:.72rem; font-weight:700; padding:.28em .7em; border-radius:var(--r-pill)}
.pill--classe{background:var(--indigo-l); color:var(--indigo)}
.pill--materia{background:var(--teal-l); color:var(--teal-d)}
.mat h4{margin:0 0 .3rem; font-size:1.05rem}
.mat p{font-size:.88rem; color:var(--muted); margin:0 0 .9rem}
.mat__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.mat__dl{font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--coral-d); display:flex; gap:.35em; align-items:center}

/* ---------- Sezione IA ---------- */
.ai{background:linear-gradient(160deg,#2b3550,#3B4C8A); color:#fff; border-radius:var(--r-lg); padding:clamp(28px,4vw,52px);
  box-shadow:var(--sh-3); position:relative; overflow:hidden}
.ai h2,.ai h3{color:#fff}
.ai .eyebrow{color:var(--amber)}
.ai__panel{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:22px; backdrop-filter:blur(4px)}
.ai select,.ai input,.ai textarea{width:100%; padding:.7em .9em; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.95); color:var(--ink); font-family:var(--font-body); font-size:.95rem; margin-bottom:.8rem}
.ai label{display:block; font-family:var(--font-head); font-weight:600; font-size:.85rem; margin-bottom:.3rem; color:#dfe4f5}
.ai__out{background:#fff; color:var(--ink); border-radius:var(--r); padding:20px; min-height:150px; box-shadow:var(--sh-2)}
.ai__badge{display:inline-flex; align-items:center; gap:.4em; background:rgba(244,183,64,.18); color:var(--amber);
  border:1px solid rgba(244,183,64,.4); padding:.3em .8em; border-radius:var(--r-pill); font-size:.8rem; font-weight:700}

/* ---------- Steps / come funziona ---------- */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px 22px; box-shadow:var(--sh-1)}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-16px; left:22px;
  width:38px; height:38px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; box-shadow:0 6px 14px rgba(232,106,90,.4)}

/* ---------- Filtri catalogo ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem}
.filter{border:1px solid var(--line); background:#fff; border-radius:var(--r-pill); padding:.5em 1.1em;
  font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink-soft); cursor:pointer; transition:.15s}
.filter:hover{border-color:var(--teal)}
.filter.is-active{background:var(--teal); color:#fff; border-color:var(--teal)}

/* ---------- CTA banner ---------- */
.cta-band{background:linear-gradient(135deg,var(--coral),var(--amber)); color:#fff; border-radius:var(--r-lg);
  padding:clamp(30px,5vw,56px); text-align:center; box-shadow:var(--sh-2)}
.cta-band h2{color:#fff}
.cta-band .btn--ghost{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5)}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center}
.stat b{font-family:var(--font-head); font-size:2.2rem; color:var(--coral); display:block; line-height:1}
.stat span{color:var(--ink-soft); font-size:.95rem}

/* ---------- Testimonianze ---------- */
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1)}
.quote p{font-style:italic; color:var(--ink); font-size:1.02rem}
.quote__who{display:flex; align-items:center; gap:.7rem; margin-top:1rem}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--teal-l); color:var(--teal-d); display:grid;
  place-items:center; font-family:var(--font-head); font-weight:700}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:#cdd7de; padding:56px 0 26px; margin-top:40px}
.footer h4{color:#fff; font-size:1rem; margin-bottom:.9rem}
.footer a{color:#cdd7de}
.footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
.footer__logo img{height:44px; filter:brightness(0) invert(1)}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:.5rem; font-size:.95rem}
.footer__bar{border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#9fb0bb}

/* ---------- Cookie banner ---------- */
.cookie{position:fixed; z-index:80; left:16px; right:16px; bottom:16px; max-width:520px; margin-inline:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:22px}
.cookie h4{margin:0 0 .4rem}
.cookie p{font-size:.9rem; color:var(--ink-soft); margin:0 0 1rem}
.cookie__row{display:flex; gap:.6rem; flex-wrap:wrap}
.cookie.hidden{display:none}

/* ---------- Pagina interna ---------- */
.page-hero{background:
  radial-gradient(900px 360px at 90% -20%, var(--teal-l), transparent 60%), var(--paper-2);
  padding:clamp(40px,6vw,72px) 0; border-bottom:1px solid var(--line)}
.breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:.6rem}
.breadcrumb a{color:var(--muted)}
.prose{max-width:760px}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.4rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.note{background:var(--amber-l); border-left:4px solid var(--amber); border-radius:var(--r-sm); padding:14px 18px; margin:1.2rem 0}
.note--info{background:var(--teal-l); border-color:var(--teal)}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.hide{display:none !important}
.badge-free{background:var(--teal); color:#fff; font-size:.7rem; font-weight:800; padding:.25em .6em; border-radius:var(--r-pill); letter-spacing:.03em}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr; gap:30px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .ai .grid--2{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav__links{position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:flex-start;
    background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh-2); display:none}
  .nav__links.open{display:flex}
  .nav__toggle{display:block; margin-left:auto}
  .nav__cta .btn--ghost{display:none}
  .grid--4,.grid--3,.grid--2,.steps,.stats,.footer__grid{grid-template-columns:1fr}
  .hero__float{display:none}
}