/* ==========================================================================
   SFN2022 · aggiunte e correzioni 2026
   Si carica DOPO style.css e DOPO Bootstrap: non sostituisce niente, corregge.

   Nota sul perche' qui non ci sono piu' i livelli a cascata (@layer):
   Bootstrap arriva senza livello, e una regola dentro un livello perde
   SEMPRE contro una regola senza livello, a parita' di specificita'.
   Con @layer le correzioni ai bottoni e ai link non si applicavano.
   ========================================================================== */

:root {
  color-scheme: light;
  --sfn-oro: #b48046;
  --sfn-verde: rgb(58 81 53 / 0.47);
  --sfn-testo-2: #6e7a76;
  --sfn-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   1. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.wp-block-group > p,
.wp-block-column > p { max-inline-size: 66ch; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }

/* --------------------------------------------------------------------------
   2. BOTTONI
   -------------------------------------------------------------------------- */

/* Area di tocco da 44px, che Bootstrap da solo non garantisce */
.btn,
.wp-block-button__link {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  text-align: center;
}

/*
   Nei contenuti di alcune pagine le classi Bootstrap sono finite sul
   PARAGRAFO invece che sul link:
   <p class="btn btn-outline-primary"><a href="...">testo</a></p>
   Il risultato e' una pillola col bordo giusto e dentro un link
   sottolineato, perche' il "text-decoration: none" del .btn si applica al
   paragrafo e non all'anchor che sta dentro.

   La correzione giusta e' nell'editor: la classe va sul link, non sul
   paragrafo. Queste righe sono la rete di sicurezza, e rendono cliccabile
   tutta la pillola invece della sola riga di testo.
*/
.btn:has(> a) {
  padding: 0;
}

.btn > a {
  display: block;
  inline-size: 100%;
  padding-block: .55rem;
  padding-inline: 1.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.btn > a:hover,
.btn > a:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. FOOTER
   Il fondo del footer e' il verde al 47% sopra la crema della pagina, cioe'
   circa rgb(156 166 151). Su quel fondo il rosso #820000 dei link dava
   4,25:1, sotto la soglia di leggibilita', e il telefono, che ereditava
   l'oro del tema, stava a 1,36:1: praticamente invisibile.
   Ora tutti i link del footer usano lo stesso inchiostro del testo intorno,
   che su quel fondo sta a 6,1:1, distinti dalla sottolineatura.
   -------------------------------------------------------------------------- */
footer {
  --sfn-footer-link: #242424;
}

footer a,
footer a.link-footer,
a.link-footer {
  color: var(--sfn-footer-link, #242424);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(36 36 36 / 0.55);
}

footer a:hover,
footer a:focus-visible,
a.link-footer:hover,
a.link-footer:focus-visible {
  color: #000;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. LAYOUT E IMMAGINI
   -------------------------------------------------------------------------- */

/* Container query invece di media query: le colonne reggono anche dentro
   uno spazio stretto, non solo su uno schermo stretto */
.wp-block-columns { container: sfn-cols / inline-size; }
@container sfn-cols (inline-size < 44rem) {
  .wp-block-column { margin-block-end: var(--sfn-gutter); }
}

.wp-block-image img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.wp-block-columns .wp-block-image img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   5. EDITORIALE
   -------------------------------------------------------------------------- */

/* I segnaposto gialli dei pattern: se restano in pagina per sbaglio,
   si devono notare anche in produzione */
mark[style*="fbefd8"] {
  outline: 1px dashed #9a5b00;
  outline-offset: 2px;
  font-weight: 600;
}

.wp-block-group h3 + p { margin-block-start: 0.35rem; }

.wp-block-quote {
  border-inline-start: 2px solid var(--sfn-oro);
  padding-inline-start: 1.25rem;
  font-style: normal;
}
.wp-block-quote cite {
  display: block;
  margin-block-start: 0.4rem;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--sfn-testo-2);
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITA' E FORM
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn > a:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sfn-oro);
  outline-offset: 2px;
}

.wpcf7-form textarea { field-sizing: content; min-block-size: 4lh; }
.wpcf7-form :user-invalid { outline-color: #a8321f; }

/* --------------------------------------------------------------------------
   7. SOSTITUTO DI FONT AWESOME
   Slider Revolution caricava il set icone completo per una sola freccia,
   quella dello slider della home. Il foglio e' disattivato in functions.php
   e l'icona e' ridisegnata qui con un SVG usato come maschera, colorato con
   currentColor, cosi' resta del colore che gli da' il layer dello slider.
   -------------------------------------------------------------------------- */
.fa-chevron-right,
.fa-chevron-left,
.fa-angle-right,
.fa-angle-left {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.fa-chevron-right,
.fa-angle-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M96 480a32 32 0 0 1-23-55L242 256 73 87a32 32 0 0 1 45-45l192 192a32 32 0 0 1 0 45L119 471a32 32 0 0 1-23 9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M96 480a32 32 0 0 1-23-55L242 256 73 87a32 32 0 0 1 45-45l192 192a32 32 0 0 1 0 45L119 471a32 32 0 0 1-23 9z'/%3E%3C/svg%3E");
}

.fa-chevron-left,
.fa-angle-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M224 480a32 32 0 0 1-23-9L9 279a32 32 0 0 1 0-45L201 42a32 32 0 1 1 45 45L78 256l169 169a32 32 0 0 1-23 55z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M224 480a32 32 0 0 1-23-9L9 279a32 32 0 0 1 0-45L201 42a32 32 0 1 1 45 45L78 256l169 169a32 32 0 0 1-23 55z'/%3E%3C/svg%3E");
}

.fa-chevron-right::before,
.fa-chevron-left::before,
.fa-angle-right::before,
.fa-angle-left::before { content: none; }

/* --------------------------------------------------------------------------
   8. PREFERENZE UTENTE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* AOS parte con opacity: 0. Senza questa riga, con le animazioni
     disattivate il contenuto resterebbe invisibile */
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
  .btn, .wp-block-button__link { border-width: 2px; }
  footer a { text-decoration-thickness: 2px; }
}