/* ============================================================
   carnevalilucani.it — livello di restyling e accessibilità
   Accessibilità: WCAG 2.1 AA
   Caricato dopo i fogli di stile di base: ne corregge e integra il comportamento.
   ============================================================ */

/* ---------- 1. Variabili di progetto ---------- */
:root {
  --cl-rosso: #8b0426;          /* colore istituzionale — contrasto 9,8:1 su bianco */
  --cl-rosso-scuro: #6b0320;
  --cl-inchiostro: #1c1917;     /* testo — contrasto 15,8:1 su carta */
  --cl-inchiostro-tenue: #55504c;
  --cl-carta: #ffffff;
  --cl-carta-calda: #faf7f4;
  --cl-bordo: #e4ddd6;
  --cl-focus: #0b5fff;

  --cl-titolo: Georgia, 'Times New Roman', serif;
  --cl-testo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --cl-raggio: 6px;
  --cl-ombra: 0 1px 2px rgba(28,25,23,.06), 0 8px 24px rgba(28,25,23,.08);
  --cl-transizione: 180ms ease;
}

/* ---------- 2. Indicatore di focus — WCAG 2.4.7 (AA) ----------
   Il tema di partenza non forniva alcun indicatore di focus visibile:
   senza questa regola la navigazione da tastiera è cieca.                       */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cl-focus) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
/* Nessun outline al clic del mouse, ma sempre presente da tastiera */
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ---------- 3. Salto al contenuto — WCAG 2.4.1 (A) ---------- */
.genesis-skip-link a,
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--cl-rosso); color: #fff;
  padding: .75rem 1.25rem; z-index: 9999;
  font: 600 1rem/1.2 var(--cl-testo); text-decoration: none;
}
.genesis-skip-link a:focus,
.skip-link:focus { left: 1rem; top: 1rem; outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- 4. Testo per sole tecnologie assistive ---------- */
.screen-reader-text:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 5. Leggibilità del testo — WCAG 1.4.8 / 1.4.12 ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* ATTENZIONE — nessuna dichiarazione di `color` qui.
   I blocchi con sfondo fotografico impostano il testo in bianco tramite regole
   avvolte in `:where(...)`, che hanno peso ZERO: qualunque regola con una
   classe le batte. Dichiarare qui un colore scuro rendeva illeggibile il testo
   di tutte le sezioni con fondo scuro. Stesso motivo per `max-width`, che
   sfigurava i blocchi centrati a piena larghezza. */
.entry-content p,
.entry-content li {
  line-height: 1.7;           /* minimo raccomandato 1.5 */
  letter-spacing: .01em;
}
/* La misura di riga si applica solo dove il testo scorre su fondo semplice */
.entry-content > p,
.entry-content > ul li,
.entry-content > ol li,
.gb-container-content > p {
  max-width: 68ch;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-title, .widget-title {
  font-family: var(--cl-titolo);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.entry-content h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem); margin-top: 2.2em; }
.entry-content h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-top: 1.8em; }

/* I collegamenti nel testo non si distinguono per il solo colore — WCAG 1.4.1 (A).
   La regola è limitata a paragrafi ed elenchi: è lì che stanno i collegamenti
   testuali. Titoli di scheda e pulsanti conservano così il proprio aspetto,
   senza bisogno di eccezioni che finirebbero per perdere sulla specificità. */
.entry-content p a:not(.button),
.entry-content li a:not(.button) {
  color: var(--cl-rosso);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}
.entry-content p a:not(.button):hover,
.entry-content li a:not(.button):hover { text-decoration-thickness: .16em; }

/* ---------- 6. Aree cliccabili — WCAG 2.5.8 (AA, 2.2) ---------- */
.genesis-nav-menu a,
.entry-content .button,
.simple-social-icons a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 7. Immagini ---------- */
.entry-content img,
.wp-block-image img { height: auto; max-width: 100%; border-radius: var(--cl-raggio); }

/* ============================================================
   8. HERO — carosello accessibile
   Sostituisce il carosello WebGL: nessuna libreria grafica,
   comandi di pausa e navigazione da tastiera (WCAG 2.2.2, 2.1.1).
   ============================================================ */
.cl-hero { position: relative; background: var(--cl-carta-calda); border-radius: var(--cl-raggio); overflow: hidden; }
/* Nota: `max-height` combinato ad `aspect-ratio` riduce anche la larghezza del
   riquadro. L'altezza si governa quindi con il solo rapporto di forma. */
.cl-hero__vetrina { position: relative; aspect-ratio: 16 / 9; width: 100%; }
@media (min-width: 68em) { .cl-hero__vetrina { aspect-ratio: 21 / 9; } }
@media (max-width: 40em) { .cl-hero__vetrina { aspect-ratio: 4 / 5; } }

.cl-hero__slide { position: absolute; inset: 0; }
.cl-hero__slide[hidden] { display: none; }
.cl-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

.cl-hero__testo {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  /* Sfondo scuro pieno: garantisce il contrasto del testo a prescindere dalla foto */
  /* Velo scuro sufficiente a garantire il contrasto del testo su qualunque fotografia:
     il testo bianco poggia sempre su un fondo con opacità >= .88 */
  background: linear-gradient(to top,
    rgba(20,12,10,.97) 0%, rgba(20,12,10,.94) 55%,
    rgba(20,12,10,.86) 75%, rgba(20,12,10,.5) 90%, rgba(20,12,10,0) 100%);
  padding-top: clamp(3rem, 9vw, 7rem);
  color: #fff;
}
/* Specificità: le regole tipografiche del tema (.entry-content p) hanno peso 0-1-1
   e prevarrebbero sul singolo nome di classe. Le regole dell'hero sono quindi
   scritte in forma discendente (peso 0-2-0). */
.cl-hero__testo .cl-hero__occhiello {
  font: 700 .8rem/1 var(--cl-testo); letter-spacing: .14em; text-transform: uppercase;
  color: #f7e3d6; margin: 0 0 .5rem; max-width: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.cl-hero__testo .cl-hero__frase {
  font: 400 clamp(1.3rem, 1rem + 1.6vw, 2.1rem)/1.25 var(--cl-titolo);
  margin: 0 0 1rem; color: #fff; max-width: 30ch;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
}
.cl-hero__testo .cl-hero__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .6rem 1.15rem; background: #fff; color: var(--cl-rosso);
  font: 600 .95rem/1 var(--cl-testo); text-decoration: none; border-radius: 999px;
  transition: background var(--cl-transizione), color var(--cl-transizione);
}
.cl-hero__testo .cl-hero__link::after { content: '→'; }
.cl-hero__testo .cl-hero__link { text-decoration: none; }
.cl-hero__testo .cl-hero__link:hover,
.cl-hero__testo .cl-hero__link:focus-visible { background: var(--cl-rosso); color: #fff; }

.cl-hero__comandi {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .65rem clamp(1rem, 3vw, 2rem); background: var(--cl-inchiostro);
}
.cl-hero__btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 0 .8rem; border: 1px solid rgba(255,255,255,.28); border-radius: var(--cl-raggio);
  background: transparent; color: #fff; font: 600 .88rem/1 var(--cl-testo); cursor: pointer;
  transition: background var(--cl-transizione);
}
.cl-hero__btn:hover { background: rgba(255,255,255,.14); }
.cl-hero__btn span[aria-hidden] { font-size: 1.35rem; line-height: 1; }
.cl-hero__punti { display: flex; gap: .4rem; margin-left: auto; }
.cl-hero__punto {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-hero__punto::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.42); transition: background var(--cl-transizione), transform var(--cl-transizione);
}
.cl-hero__punto.is-attivo::before { background: #fff; transform: scale(1.35); }
.cl-hero__stato { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Rispetto della preferenza di sistema — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   9. Banner di consenso
   ============================================================ */
.cl-consenso {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 1000;
  max-width: 34rem; margin-inline: auto;
  background: var(--cl-carta); color: var(--cl-inchiostro);
  border: 1px solid var(--cl-bordo); border-radius: var(--cl-raggio);
  box-shadow: var(--cl-ombra); padding: 1.25rem 1.35rem;
  font: 400 .95rem/1.6 var(--cl-testo);
}
.cl-consenso[hidden] { display: none; }
.cl-consenso__titolo { font: 700 1.05rem/1.3 var(--cl-testo); margin: 0 0 .5rem; color: var(--cl-inchiostro); }
.cl-consenso__testo { margin: 0 0 1rem; color: var(--cl-inchiostro-tenue); }
.cl-consenso__azioni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cl-consenso__btn {
  min-height: 44px; padding: .6rem 1.1rem; border-radius: var(--cl-raggio);
  font: 600 .92rem/1 var(--cl-testo); cursor: pointer; border: 1px solid transparent;
}
.cl-consenso__btn--si { background: var(--cl-rosso); color: #fff; }
.cl-consenso__btn--si:hover { background: var(--cl-rosso-scuro); }
.cl-consenso__btn--no { background: transparent; color: var(--cl-inchiostro); border-color: var(--cl-bordo); }
.cl-consenso__btn--no:hover { background: var(--cl-carta-calda); }
.cl-consenso__link { color: var(--cl-rosso); font-size: .9rem; margin-left: auto; }

/* ============================================================
   10. Modulo contatti
   ============================================================ */
.cl-modulo { max-width: 38rem; }
.cl-campo { margin-bottom: 1.15rem; }
.cl-campo > label {
  display: block; margin-bottom: .35rem;
  font: 600 .95rem/1.4 var(--cl-testo); color: var(--cl-inchiostro);
}
.cl-campo .cl-obbligatorio { color: var(--cl-rosso); }
.cl-campo .cl-aiuto { display: block; font: 400 .85rem/1.5 var(--cl-testo); color: var(--cl-inchiostro-tenue); margin-top: .2rem; }
.cl-campo input, .cl-campo select, .cl-campo textarea {
  width: 100%; min-height: 44px; padding: .6rem .75rem;
  border: 1px solid #b9b0a8; border-radius: var(--cl-raggio);
  font: 400 1rem/1.5 var(--cl-testo); color: var(--cl-inchiostro); background: var(--cl-carta);
}
.cl-campo textarea { min-height: 8rem; resize: vertical; }
/* Nessuno stile di errore prima dell'invio: i campi vuoti non sono un errore
   finché l'utente non prova a inviare (WCAG 3.3.1 — l'errore va segnalato,
   non anticipato). Lo stato di errore è dato dalla classe .ha-errore. */
/* L'errore non è affidato al solo colore — WCAG 1.4.1 */
.cl-errore { display: none; margin-top: .35rem; color: var(--cl-rosso); font: 600 .88rem/1.5 var(--cl-testo); }
.cl-errore::before { content: '⚠ '; }
.cl-campo.ha-errore .cl-errore { display: block; }
.cl-campo.ha-errore input, .cl-campo.ha-errore textarea, .cl-campo.ha-errore select { border-color: var(--cl-rosso); border-width: 2px; }
.cl-invia {
  min-height: 48px; padding: .75rem 1.6rem; border: 0; border-radius: var(--cl-raggio);
  background: var(--cl-rosso); color: #fff; font: 600 1rem/1 var(--cl-testo); cursor: pointer;
}
.cl-invia:hover { background: var(--cl-rosso-scuro); }
.cl-invia[disabled] { opacity: .6; cursor: progress; }
.cl-esito { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--cl-raggio); font: 500 .95rem/1.6 var(--cl-testo); }
.cl-esito:empty { display: none; }
.cl-esito.ok { background: #eef7ee; border: 1px solid #b7dcb7; color: #1c5c26; }
.cl-esito.ko { background: #fdeeee; border: 1px solid #f0bcbc; color: #8b0426; }
.cl-trappola { position: absolute; left: -9999px; }

/* ============================================================
   11. Correzioni al tema di base
   ============================================================ */
/* Contrasto insufficiente dei metadati nel tema originale */
.entry-meta, .entry-meta a, .post-info, .archive-description p { color: var(--cl-inchiostro-tenue); }

/* Schede dei carnevali: gerarchia e superficie cliccabile più chiare */
.gb-block-post-grid article, .ugb-image-box__item {
  border-radius: var(--cl-raggio); overflow: hidden;
  transition: transform var(--cl-transizione), box-shadow var(--cl-transizione);
}
.gb-block-post-grid article:hover, .gb-block-post-grid article:focus-within { box-shadow: var(--cl-ombra); transform: translateY(-2px); }
.gb-block-post-grid-title a { text-decoration: none; color: var(--cl-inchiostro); }
.gb-block-post-grid-title a:hover { color: var(--cl-rosso); text-decoration: underline; }

/* Menu di navigazione */
.genesis-nav-menu .current-menu-item > a { box-shadow: inset 0 -3px 0 var(--cl-rosso); }

/* Piè di pagina */
.site-footer { font: 400 .92rem/1.7 var(--cl-testo); }
/* Niente colore imposto: il piè di pagina del tema è scuro e il rosso
   istituzionale su quel fondo scende a 1,7:1. I collegamenti ereditano il
   colore della sezione e restano riconoscibili per la sottolineatura. */
/* Nessun colore imposto: il tema dichiara già `.site-footer a { color: #fff }`,
   che sul fondo scuro del piè di pagina dà 15:1. Una regola nostra con lo
   stesso peso, arrivando dopo, lo sovrascriverebbe peggiorandolo. */
.site-footer .cl-piede-legale a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.cl-piede-legale a:hover { text-decoration-thickness: .14em; }

/* Stampa: via gli elementi inutili */
@media print {
  .cl-hero__comandi, .cl-consenso, .nav-primary, .site-footer nav { display: none !important; }
  .entry-content a::after { content: ' (' attr(href) ')'; font-size: .85em; }
}

/* Preferenza di contrasto elevato */
@media (prefers-contrast: more) {
  :root { --cl-inchiostro-tenue: #33302d; --cl-bordo: #8a8078; }
  .cl-hero__testo { background: rgba(15,10,8,.94); }
}

/* ============================================================
   12. Menu responsive — regole di visibilita
   Il tema affidava l'apertura/chiusura a jQuery (display inline).
   Qui lo stato e dichiarato nel markup e governato dal CSS.
   ============================================================ */
@media only screen and (max-width: 1023px) {
  .js .nav-primary[data-cl-menu="chiuso"] { display: none; }
  /* A menu aperto il marchio flottante coprirebbe la prima voce: è decorativo
     e duplica l'intestazione, quindi si nasconde per non ostruire la navigazione. */
  .cl-menu-aperto .custom-logo-widget { display: none; }
  .js .nav-primary[data-cl-menu="aperto"] { display: block; }
  .js .nav-primary .sub-menu { display: none; }
  .js .nav-primary .sub-menu[data-cl-sottomenu="aperto"] { display: block; }
  .menu-toggle, .sub-menu-toggle { display: block; }
  .menu-toggle { min-height: 44px; background: transparent; border: 0; cursor: pointer; }
  .sub-menu-toggle { min-width: 44px; min-height: 44px; background: transparent; border: 0; cursor: pointer; }
}
@media only screen and (min-width: 1024px) {
  .menu-toggle, .sub-menu-toggle { display: none !important; }
  .js .nav-primary[data-cl-menu] { display: block; }
}