@charset "utf-8";
/* === Mobile e accessibilità (27/10/2026) ===
   Collegato in ogni pagina DOPO style.css. Misure in rem (1rem = 16 px).
   Sopra i 60rem (960 px) cambiano solo focus visibile e skip link. */

/* 2.4.1 Salto di blocchi: link «Salta al contenuto», fuori schermo finché non riceve il focus */
.skip-link{position:absolute;left:0.5rem;top:-10rem;z-index:100;padding:0.75rem 1rem;background:#1b5e20;color:#fff;font-weight:700;border-radius:0.375rem}
.skip-link:focus{top:0.5rem;text-decoration:none}
/* il contenuto raggiunto dallo skip link non finisce sotto l'intestazione fissa */
#contenuto{scroll-margin-top:6rem}

/* 2.4.7 Focus visibile: contorno verde scuro (7,9:1 sul bianco) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:0.1875rem solid #1b5e20;outline-offset:0.125rem}
/* su fondo scuro (riquadro verde in home, piè di pagina) il contorno è bianco */
.hero a:focus-visible,.site-footer a:focus-visible{outline-color:#fff}

/* pulsante Menu: nascosto su desktop e quando il JavaScript non parte */
.menu-toggle{display:none}

/* ---------- Telefono e tablet: fino a 959 px ---------- */
@media (max-width: 59.99rem){
  /* intestazione: marchio a sinistra, pulsante Menu a destra, voci sotto */
  .bar{flex-wrap:wrap;gap:0.5rem}
  .brand{flex:1 1 0;min-width:0}
  .menu-js .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;margin-left:auto;padding:0.5rem 0.875rem;font:inherit;font-size:1rem;font-weight:700;line-height:1.2;color:#1b5e20;background:#fff;border:0.125rem solid #1b5e20;border-radius:0.375rem;cursor:pointer}
  .menu-js .menu-toggle:hover{background:#e8f3e6}
  .menu-js .menu-toggle[aria-expanded="true"]{background:#1b5e20;color:#fff}
  /* 4.1.2: il menu si chiude solo se il JS è partito (classe menu-js su <html>) */
  .mainnav{flex-basis:100%;flex-direction:column;gap:0.25rem;padding-bottom:0.5rem}
  .menu-js .mainnav:not(.aperto){display:none}
  .mainnav a{display:flex;align-items:center;min-height:2.75rem;padding:0.5rem 0.875rem;font-size:1rem}
  /* senza JavaScript il menu resta sempre aperto: l'intestazione non resta fissa in alto */
  html:not(.menu-js) .site-header{position:static}

  /* caratteri sotto i 14 px portati ad almeno 14 px; testo corrente a 16 px */
  .brand-txt small,.hero .kicker,.copy,.contact-info .lbl,.member a{font-size:0.875rem}
  .foot-grid,.svc ul,.refs{font-size:1rem}

  /* 2.5.5 bersagli di almeno 44×44 px */
  .faq summary{padding:0.5625rem 0}
  .site-footer a,.contact-info .val a,.refs a,.member a{display:inline-flex;align-items:center;min-height:2.75rem}
  .prose .griglia-foto a{display:inline-block}
  .prose .griglia-schede a{display:inline-flex;align-items:center;min-height:2.75rem}

  /* 1.4.10 Riflusso: tabelle di impaginazione (non tabelle di dati) */
  /* .tabella-impilata: le celle vanno una sotto l'altra */
  .prose .tabella-impilata,.prose .tabella-impilata > tbody,.prose .tabella-impilata > tbody > tr,.prose .tabella-impilata > tbody > tr > td{display:block;width:auto;overflow:visible}
  .prose .tabella-impilata > tbody > tr > td{border:0;padding:0}
  /* le tabelle interne (titolo + icona PDF) restano tabelle, a tutta larghezza */
  .prose .tabella-impilata table{display:table;width:100%;margin:0 0 0.75rem}
  .prose .tabella-impilata table td{width:auto}
  .prose .tabella-impilata img{max-width:100%;height:auto}
  /* righe e celle vuote (solo spazi): non occupano posto */
  .prose .tabella-impilata tr:not(:has(a,img,p,h2,strong,em)),.prose .tabella-impilata > tbody > tr > td:not(:has(a,img,p,h2,strong,em)){display:none}
  .prose .tabella-impilata a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem}
}

/* ---------- Telefono: fino a 767 px ---------- */
@media (max-width: 47.99rem){
  /* margini laterali di 16 px */
  .wrap,.band .prose{padding-left:1rem;padding-right:1rem}
  .hero{padding:3rem 0}
  .pagehead{padding:2.5rem 0}
  .hero h1{font-size:2rem}
  .pagehead h1{font-size:1.75rem}
  h1,h2,h3{overflow-wrap:break-word}
  main img{max-width:100%;height:auto}

  /* .griglia-foto (verdura, frutta): 6 colonne con riga foto + riga nome -> 2 colonne,
     ogni foto resta sopra il suo nome (ordine = coppia di righe + blocco di colonne) */
  .prose .griglia-foto > tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .griglia-foto tr{display:contents;--riga:0}
  .prose .griglia-foto tr:nth-child(2){--riga:1}
  .prose .griglia-foto tr:nth-child(3){--riga:6}
  .prose .griglia-foto tr:nth-child(4){--riga:7}
  .prose .griglia-foto tr:nth-child(5){--riga:12}
  .prose .griglia-foto tr:nth-child(6){--riga:13}
  .prose .griglia-foto tr:nth-child(7){--riga:18}
  .prose .griglia-foto tr:nth-child(8){--riga:19}
  .prose .griglia-foto td{display:block;width:auto;--blocco:0;order:calc(var(--riga) + var(--blocco));text-align:center}
  .prose .griglia-foto td:nth-child(n+3){--blocco:2}
  .prose .griglia-foto td:nth-child(n+5){--blocco:4}
  .prose .griglia-foto td:not(:has(*)){height:0;padding:0;border:0;overflow:hidden}

  /* .griglia-schede (informazioni tecniche): 3 colonne titolo + scheda -> 1 colonna */
  .prose .griglia-schede > tbody{display:grid;grid-template-columns:minmax(0,1fr)}
  .prose .griglia-schede tr{display:contents;--riga:0}
  .prose .griglia-schede tr:nth-child(2){--riga:1}
  .prose .griglia-schede td{display:block;width:auto;--blocco:0;order:calc(var(--riga) + var(--blocco))}
  .prose .griglia-schede td:nth-child(2){--blocco:2}
  .prose .griglia-schede td:nth-child(3){--blocco:4}
}