/* Confartigianato Agrigento — le regole in comune ai pattern a sezioni (classe .cs): «Chi siamo», «Contatti», «Servizi per le imprese»,
   «Servizi per le persone», «Le categorie» e «Vantaggi e convenzioni». Stessi numeri dei modelli.
   Lo carica functions.php nelle pagine che usano uno di questi pattern (cag_usa_sezioni()), prima del foglio del pattern, e l'editor (add_editor_style).
   - Le regole di movimento (animation-timeline) cominciano con :where(.testo): .testo c'è solo nel sito, quindi nell'editor i pattern sono fermi.
   - Margini: i margini del browser si azzerano con «:where(.cs) :is(p,h2,h3,dl,dd)», che pesa quanto un nome di elemento: così valgono i margini
     scritti per ogni parte (decisione dell'utente del 4 novembre 2026). Tutti i margini dei pattern sono scritti con «.cs …» davanti, così valgono
     anche nell'editor (editor.css azzera i margini che WordPress dà ai blocchi con una regola più leggera).
   Colori e margini (--blu, --filo, --carta, --entra, --bordo): nel sito da style.css, nell'editor da editor.css. */

/* ---------- In comune ---------- */
.cs{--sez:var(--colore-sezione, var(--blu))}
/* margini del browser azzerati senza peso: valgono i margini scritti per ogni elemento */
:where(.cs) :is(p,h2,h3,dl,dd){margin:0}
.cs a{color:var(--blu)}
.cs a:focus-visible{outline:2px solid var(--blu);outline-offset:4px;border-radius:2px}
/* etichetta di sezione: parola piccola e un filo che corre fino al margine (è il titolo H2, con l'àncora per l'indice) */
.cs .etichetta{display:flex;align-items:center;gap:22px;margin:0 0 64px;font-size:14px;font-weight:600;line-height:1;letter-spacing:.28em;text-transform:uppercase;color:var(--blu)}
.cs .etichetta::after{content:'';flex:1;height:1px;background:var(--filo);transform-origin:left}

/* ---------- Il punto su Agrigento con le onde: nel cannocchiale di «Chi siamo» e nella Sicilia dei Contatti ---------- */
.cs .punto{fill:var(--sez)}
.cs .onda{fill:none;stroke:var(--sez);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:onda 2.8s ease-out infinite}
.cs .onda.dopo{animation-delay:1.4s}
@keyframes onda{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}

/* ---------- I dati della sede e «Indicazioni stradali»: nella Sede di «Chi siamo» e nel biglietto da visita dei Contatti ---------- */
/* dati: in ogni voce l'etichetta è il grassetto, il dato il resto */
.cs .dati{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--filo)}
.cs .dati li{display:grid;grid-template-columns:136px minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--filo);font-size:22px;line-height:1.4;color:var(--inchiostro);overflow-wrap:anywhere}
.cs .dati strong{font-size:12.5px;font-weight:600;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio);overflow-wrap:normal}
.cs .dati a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--filo);text-underline-offset:6px;transition:text-decoration-color .3s ease}
.cs .dati a:hover{text-decoration-color:var(--blu)}
/* «Indicazioni stradali»: il filo sotto si allunga, la freccia (disegnata qui) si sposta */
.cs .sede-link a{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:10px 0;font-size:14px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;transition:background-size .5s var(--entra)}
.cs .sede-link a::after{content:'';flex:none;width:20px;height:20px;background:currentColor;transition:transform .4s var(--entra);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat}
.cs .sede-link a:hover,.cs .sede-link a:focus-visible{background-size:100% 1px}
.cs .sede-link a:hover::after{transform:translateX(6px)}

/* ---------- La Sicilia del biglietto da visita dei Contatti (gruppo .sede-mappa; il disegno lo mette inc/chi-siamo.php) ---------- */
.sede-mappa{position:relative;padding:40px 0}
.sede-mappa svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.sede-mappa .isola-d{fill:#eef1f8;stroke:var(--blu);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1}
.sede-mappa .nome-luogo{font:600 9px 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.28em;fill:var(--blu)}

/* ---------- Effetti allo scorrimento, solo nel sito ---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
:where(.testo) .cs .etichetta::after{animation:avanza linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
:where(.testo) .cs .sede-link,:where(.testo) .cs .dati li{animation:sale linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
/* la Sicilia si disegna, poi compare il punto su Agrigento */
:where(.testo) .sede-mappa{view-timeline-name:--mappa}
:where(.testo) .sede-mappa .isola-d{animation:disegna linear both;animation-timeline:--mappa;animation-range:entry 10% cover 55%}
:where(.testo) .sede-mappa .segno{animation:compare-punto linear both;animation-timeline:--mappa;animation-range:cover 45% cover 55%}
}
}
@keyframes sale{from{opacity:0;transform:translateY(44px)}}
@keyframes disegna{0%{stroke-dashoffset:1;fill-opacity:0}80%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes compare-punto{from{opacity:0}to{opacity:1}}

/* ---------- Telefono ---------- */
@media (max-width:720px){
.cs .etichetta{margin-bottom:40px;gap:16px;font-size:13px}
.cs .dati li{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0;font-size:19px}
/* zone da toccare di 44 px, senza cambiare l'aspetto: il padding in più è compensato dai margini */
.cs .dati a{margin:-9px 0;padding:9px 0}
.cs .sede-link a{margin:35px 0 -1px;padding:11px 0}
.sede-mappa .nome-luogo{font-size:13.2px}
}

/* ---------- Animazioni spente sul dispositivo: anche le onde attorno al punto restano ferme ---------- */
@media (prefers-reduced-motion:reduce){
.cs .onda{animation:none}
}