/*
Theme Name: Wandau Child - Mediateca dei Popoli
Theme URI: https://www.mediatecadeipopoli.it
Description: Child theme di Wandau per la Mediateca dei Popoli. Contiene la sola personalizzazione necessaria: i link legali (Termini e condizioni / Cookie policy / Privacy policy) nella barra inferiore del footer, gestiti come menu WordPress modificabile da Aspetto > Menu. Tutto il resto e' ereditato dal tema genitore.
Author: Mediateca dei Popoli
Template: wandau
Version: 1.0.0
Text Domain: wandau-child
*/

/* Link legali nella barra inferiore del footer.
   Solo rifinitura: senza questo CSS i link restano comunque leggibili come elenco. */
.footer .footer-bottom .footer-legal .footer-legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.footer .footer-bottom .footer-legal .footer-legal-menu li {
  position: relative;
}

.footer .footer-bottom .footer-legal .footer-legal-menu li + li::before {
  content: "|";
  position: absolute;
  left: -11px;
  opacity: .4;
}

.footer .footer-bottom .footer-legal a {
  display: inline-block;
  text-decoration: underline;
}

.footer .footer-bottom .footer-legal a:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  .footer .footer-bottom .footer-legal {
    width: 100%;
    margin-top: 10px;
  }
}
/* Header Slider: dalla seconda slide in poi il titolo e' un <h2> (vedi il filtro
   in functions.php). Queste regole gli danno la stessa resa dell'<h1> del tema.
   Rifinitura: senza questo CSS i titoli restano leggibili, solo piu' piccoli. */
.slider .kinetic-texts .swiper-slide h2,
.slider .slider-texts .swiper-slide h2 {
  font-size: 126px;
  font-weight: 400;
  font-family: "Cinzel", serif;
  line-height: 1;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) {
  .slider .slider-texts .swiper-slide h2 {
    font-size: 92px;
  }
}

@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  .slider .slider-texts .swiper-slide h2 {
    font-size: 72px;
  }
}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .slider .slider-texts .swiper-slide h2 {
    font-size: 42px;
  }

  .slider .slider-texts .swiper-slide h2 br {
    display: none;
  }
}

/* ===========================================================================
   COLORE DEI BOTTONI - verde bosco
   ---------------------------------------------------------------------------
   Il tema usa un'unica variabile --color-main (#94ffc4, verde menta) per 69
   regole: bottoni, ma anche blob dell'hero, note box, blockquote, badge,
   testimonial, sottomenu e hover del menu. Qui si cambia SOLO la parte
   bottoni, introducendo una variabile dedicata: il verde menta resta il
   colore decorativo, il verde scuro diventa il colore dell'azione.

   Il testo passa a bianco perche' il nero del tema (--color-dark) su verde
   scuro sarebbe illeggibile. Contrasto #fff su #1F6F4A = 6,1:1 (WCAG AA).

   Per cambiare tonalita' in futuro basta modificare --color-button qui sotto.
   =========================================================================== */
:root {
  --color-button: #1F6F4A;
  --color-button-text: #ffffff;
}

/* --- stato normale --- */
.custom-button,
.navbar .navbar-button a,
.slider .slider-nav .button-prev,
.slider .slider-nav .button-next,
input[type=submit],
button[type=submit],
.newsletter-box .form input[type=submit],
.sidebar .widget form button[type=submit],
.blog-post .post-content .wp-block-search .wp-block-search__button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--color-button);
  color: var(--color-button-text);
}

/* Il bottone di checkout del carrello e' l'unico che il tema marca !important. */
.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button,
.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--color-button) !important;
  color: var(--color-button-text) !important;
}

/* --- stati hover --- */

/* Nei box CTA su fondo scuro il tema riporta il bottone al colore accento:
   deve seguire il nuovo verde, con il testo bianco. */
.cta-box.dark .custom-button:hover {
  background: var(--color-button);
  color: var(--color-button-text);
}

/* Frecce dello slideshow: in hover il tema porta lo sfondo a nero e l'icona al
   colore accento. Con un verde scuro su nero il contrasto scenderebbe sotto la
   soglia, quindi in hover l'icona resta bianca. */
.slider .slider-nav .button-prev:hover,
.slider .slider-nav .button-prev:focus,
.slider .slider-nav .button-next:hover,
.slider .slider-nav .button-next:focus {
  color: var(--color-button-text) !important;
}

/* Variante chiara della barra di navigazione: in hover il bottone diventa solo
   un bordo, che deve essere del nuovo verde. */
.navbar.light .navbar-button a:hover {
  border-color: var(--color-button);
}

/* WooCommerce, varianti .alt in hover. */
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--color-button);
}


/* ============================================================
   ANIMAZIONI DI NAVIGAZIONE — aggiunte il 27/08/2026
   ------------------------------------------------------------
   Solo rifinitura estetica. Rimuovendo questo blocco il sito resta
   identico e pienamente utilizzabile: gli elementi compaiono di colpo
   invece che in dissolvenza. Nessun contenuto dipende da qui per
   essere visibile.

   Il reveal allo scroll NON sta qui: e' impostato con le Entrance
   Animation native di Elementor, container per container, cosi' resta
   modificabile dall'editor senza toccare il codice.
   ============================================================ */


/* --- 1. CAMBIO PAGINA -------------------------------------------------
   Dissolvenza incrociata fra la pagina che si lascia e quella che si
   apre, gestita direttamente dal browser (View Transitions API):
   nessun JavaScript e nessun ritardo aggiunto al click. Dove non e'
   supportata la navigazione resta esattamente quella di oggi.

   Il tema ha un suo sistema equivalente (.page-transition, in
   js/scripts.js) che qui NON viene acceso di proposito: e' legato al
   preloader a schermo intero e blocca ogni click per 1 secondo pieno. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- 2. ARRIVO SULLA PAGINA -------------------------------------------
   Il tema prevede gia' questa entrata (css/style.css, blocco "BEFORE
   PAGE LOADED"): la navbar scende dall'alto, l'hero entra in dissolvenza.
   Non parte mai, perche' e' scritta come `transition` fra due stati che,
   con il preloader disattivato, sono entrambi gia' applicati al primo
   rendering — e sul sito il preloader e' disattivato (il body ha la
   classe .disable-preloader). Qui la stessa entrata e' riscritta come
   @keyframes, che invece partono da soli al caricamento.

   Due scostamenti voluti rispetto ai valori del tema:
   - l'hero non usa lo scale(1.4) originale, che su un elemento a piena
     larghezza sborda in orizzontale durante l'animazione (su mobile
     farebbe comparire la barra di scorrimento laterale). Sostituito con
     una salita di 16px, che non puo' sbordare;
   - la curva del tema, cubic-bezier(.86,0,.09,1), e' una frustata:
     resta ferma 150ms e poi scatta. Aveva senso dopo un preloader, come
     rivelazione. Su ogni caricamento di pagina risulta brusca, quindi
     navbar e hero usano la stessa curva morbida in uscita. */
.disable-preloader .navbar {
  animation: mdp-navbar-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.disable-preloader .slider,
.disable-preloader .page-header {
  animation: mdp-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

@keyframes mdp-navbar-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes mdp-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- 3. MICRO-INTERAZIONI ---------------------------------------------
   Volutamente poche: il movimento in hover sta solo dove c'e' qualcosa
   da cliccare. Le schede informative (.note-box, .contact-box) e i box
   icona di "Mangia e Dormi" non si sollevano, perche' non sono
   cliccabili: muoverle direbbe al visitatore che lo sono.

   Il ritaglio dell'immagine non serve impostarlo: il tema mette gia'
   overflow:hidden su .side-image e sulle figure delle schede
   (verificato sulle pagine pubblicate). */

/* Foto che si avvicinano lentamente al passaggio del mouse.
   .image-box e .recent-news oggi non sono usati da nessuna pagina, ma
   sono nella dotazione di widget del tema (vedi CLAUDE.md): elencarli
   qui fa si' che una sezione futura nasca gia' coerente. */
.side-image img,
.image-content-box figure img,
.image-box figure img,
.recent-news figure img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.side-image:hover img,
.image-content-box:hover figure img,
.image-box:hover figure img,
.recent-news:hover figure img {
  transform: scale(1.045);
}

/* Bottoni: un sollevamento appena percettibile. Il colore continua a
   essere governato da --color-button (vedi blocco sopra), qui si
   aggiunge solo il movimento. */
a.custom-button {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

a.custom-button:hover,
a.custom-button:focus-visible {
  transform: translateY(-2px);
}


/* --- 4. RIDUZIONE DEL MOVIMENTO ---------------------------------------
   Requisito di accessibilita' (WCAG 2.3.3): chi ha attivato "riduci
   animazioni" nelle impostazioni del proprio sistema operativo non deve
   subire movimento.

   La prima riga e' la piu' importante dell'intero blocco. Le Entrance
   Animation di Elementor nascondono l'elemento con visibility:hidden in
   attesa che entri in campo, e lo mostrano solo quando parte
   l'animazione. Azzerando le animazioni senza questa riga, il contenuto
   resterebbe invisibile per sempre proprio a chi ha chiesto meno
   movimento. Non e' un dettaglio estetico: e' cio' che impedisce che
   mezza pagina sparisca. */
@media (prefers-reduced-motion: reduce) {

  .elementor-invisible {
    visibility: visible !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}


/* ============================================================
   NOTE BOX (riquadro informativo) - fondo verde bosco
   ------------------------------------------------------------
   Aggiunto il 31/08/2026. Riguarda il widget "Note Box" del tema,
   usato in 6 pagine: L'Esperienza VR e le sue tre schede (Garibaldi,
   San Giovanni, Bezzecca), Chi Siamo, Bonta' e Mestieri.

   Il problema. Il riquadro si vedeva verde menta con il testo bianco:
   contrasto 1,2:1, praticamente illeggibile. Non era una scelta di
   nessuno. Il tema lo disegna verde menta con il testo nero, ma il suo
   JavaScript (wandau/js/scripts.js, blocco "CONTRAST TEXT COLOR") legge
   lo sfondo del PRIMO elemento di un elenco che mette insieme bottoni,
   frecce dello slideshow e note box, e poi impone a TUTTI il colore di
   testo calcolato su quell'unico sfondo. Da quando i bottoni sono verde
   bosco quel calcolo restituisce bianco, e il bianco finisce anche sulla
   note box, che invece era rimasta chiara.

   La correzione. Il riquadro passa al verde bosco, cosi' il bianco che
   il JavaScript impone diventa il colore giusto. Il testo e' fissato qui
   con !important perche' quel JavaScript scrive direttamente
   sull'elemento: senza !important il riquadro tornerebbe illeggibile il
   giorno in cui il calcolo cambiasse risultato.

   Perche' in CSS e non dall'editor: il widget Note Box
   (themezinho_core/inc/elementor/widgets/note-box.php) espone due soli
   campi, Titolo e Contenuto. Nessun controllo di colore nella UI.

   Contrasto ottenuto: titolo 6,1:1 e testo 5,3:1 (WCAG AA).
   Per cambiare tonalita' in futuro basta modificare --color-note.
   ============================================================ */
:root {
  --color-note: #1F6F4A;
  --color-note-text: #ffffff;
}

.note-box {
  background: var(--color-note);
  color: var(--color-note-text) !important;
}

/* Il tema porta il paragrafo a opacita' 0.7. Su fondo scuro quel velo
   fa scendere il contrasto a 3,9:1, sotto la soglia AA per un testo di
   19px: il velo resta, ma piu' leggero. */
.note-box p {
  opacity: 0.9;
}

/* I link dentro il riquadro. Il tema li colora di nero (regola globale
   `a { color: var(--color-dark) }`) e non li sottolinea: sul verde bosco
   sarebbero neri su scuro, 3,1:1. Qui diventano bianchi come il resto del
   testo, con la sottolineatura che li distingue dalle parole intorno anche
   senza affidarsi al solo colore (WCAG 1.4.1). Riguarda i recapiti in
   Chi Siamo e il rimando a "Custodi del Sapere" in Bonta' e Mestieri.

   La sottolineatura ha !important perche' Elementor azzera le
   sottolineature con `.elementor a { text-decoration: none }`: stessa
   specificita' di `.note-box a`, ma il suo foglio di stile viene
   caricato dopo quello del child theme, quindi vincerebbe. E' lo stesso
   accorgimento che il tema usa gia' per `.contact-box a`. */
.note-box a {
  color: var(--color-note-text) !important;
  text-decoration: underline !important;
}

.note-box a:hover,
.note-box a:focus-visible {
  text-decoration: none !important;
}


/* ============================================================
   SOPRATITOLO DELLE SEZIONI - leggibilita'
   ------------------------------------------------------------
   Aggiunto il 31/08/2026. Riguarda la riga piccola sopra al titolo nel
   widget "Section Title" del tema (campo Tagline). Oggi si vede in due
   punti: Home ("Sapori antichi, mani sapienti, storie da gustare") e
   Mangia e Dormi ("20 indirizzi in Valle del Chiese e Giudicarie").

   Il tema la stampa a 14px con opacita' 0.5: contrasto 3,1:1, sotto la
   soglia AA di 4,5:1 richiesta per un testo di quella misura. A 0.65 il
   sopratitolo resta visibilmente piu' tenue del titolo, ma leggibile:
   4,9:1 su fondo bianco e 4,7:1 sul beige #F7F5F0.

   Perche' in CSS e non dall'editor: il widget Section Title
   (themezinho_core/inc/elementor/widgets/section-title.php) espone solo
   Posizione, Icona, Titolo e Tagline. Nessun controllo di colore.
   ============================================================ */
.section-title h6 {
  opacity: 0.65;
}