/**
 * comuni.css
 *
 * Stili VERAMENTE trasversali, usati da più componenti diversi tra
 * loro (non specifici di una singola funzionalità) — quelli specifici
 * di una funzionalità vivono nel proprio foglio di stile dedicato
 * (es. griglia-esempi.css, font-cinese.css), stessa logica di
 * modularità già adottata per il JS (un file per componente).
 */

/* Toggle "a comparsa": dissolvenza morbida tramite transizione CSS su
   opacità e altezza massima — l'equivalente vanilla di
   $(...).toggle({duration:500}), senza bisogno di jQuery né di
   misurare l'altezza reale in JavaScript. Usato insieme a
   assets/js/toggle.js, da più pannelli diversi (Stroke Order, Sinonimi,
   Altri termini, griglia esempi): resta qui perché è davvero
   trasversale, non legato a una singola funzionalità. */
.collassabile {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .35s ease;
}
.collassabile.aperto {
    max-height: 3000px;
    opacity: 1;
}

/* Pulsanti che comandano un elemento collassabile (icone o testo):
   stato "attivo" quando il pannello collegato è aperto. */
[data-toggle-collassabile] {
    cursor: pointer;
}
[data-toggle-collassabile].attivo {
    color: #06c;
}

/* Griglia di scrittura calligrafica (米字格) dietro qualunque riquadro
   di animazione stroke-order (attributo selector, non un id fisso: la
   scheda termine completa — vedi termine_rendi_scheda_completa() in
   includes/funzioni-condivise.php — genera un id diverso per ogni
   istanza, "hanzi-target-{slug}", perché più istanze possono comparire
   sulla stessa pagina). Stesso sfondo usato nel progetto precedente
   (public/images/stuff/strokeorder.png), per il consueto riferimento
   visivo di centratura/proporzione del carattere. */
[id^="hanzi-target"] {
    background-image: url('../../images/stuff/strokeorder.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Carosello immagini (assets/js/carosello-immagini.js): mai stilato
   finora, funzionava solo con gli stili di default del browser (bottoni
   di sistema, immagine a piena dimensione naturale — probabilmente una
   delle cause per cui una colonna poteva risultare più larga del
   previsto). Valori di riserva su ogni var(...) — "var(--c-giada,
   #00a874)" — perché questo file è condiviso anche da
   prova-termine.php, che non carica tema.css (dove quelle variabili
   sono definite): senza il valore di riserva, su quella pagina
   sarebbero semplicemente vuote. */
.carosello-barra {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.carosello-slide {
    flex: 1;
    min-width: 0; /* stesso motivo del minmax(0,…) della griglia a tre colonne: senza, l'immagine può forzare il contenitore oltre lo spazio disponibile */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.carosello-prec,
.carosello-succ {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-bordo, #ddd);
    background: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color .2s ease;
}
.carosello-prec:hover,
.carosello-succ:hover {
    background: var(--c-nebbia, #eef4f0);
}
.carosello-punti {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .6rem;
}
.carosello-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #ccc;
    cursor: pointer;
}
.carosello-punto.attivo {
    background: var(--c-giada, #00a874);
}

/* Mappa del luogo (termine_rendi_mappa_se_presente()): stesso
   contenitore arrotondato del carosello, per restare visivamente negli
   "stessi spazi" richiesti — un iframe con rapporto 4:3, responsive
   (niente larghezza fissa in pixel). */
.mappa-luogo {
    margin-top: .75rem;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.mappa-luogo iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- Icona preferiti (stellina) nel pannellino della scheda termine ---
   Nero di default (icona_disabilitata-simile, ma cliccabile, non
   davvero disabilitata): il colore pieno arriva solo da .preferito-attivo,
   quando il termine è già salvato per l'utente corrente. */
.icona-preferito {
    color: var(--c-inchiostro, #1a1a1a);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.icona-preferito:hover {
    transform: scale(1.15);
}
.icona-preferito.preferito-attivo {
    color: #f5b301;
}

/* --- Avviso "servizio riservato agli iscritti" (preferiti) ---
   Costruito dinamicamente da scheda-termine.js quando serve, non
   markup statico in ogni pagina: vedi il commento in quel file. */
.preferito-avviso-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 36, 29, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 1.25rem;
}
.preferito-avviso-overlay.nascosto {
    display: none;
}
.preferito-avviso-riquadro {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--ombra-sollevata, 0 12px 30px rgba(0,0,0,.2));
    max-width: 360px;
    width: 100%;
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.preferito-avviso-icona {
    font-size: 2.2rem;
    color: #f5b301;
    margin-bottom: .75rem;
}
.preferito-avviso-riquadro p {
    font-size: .9rem;
    color: var(--c-inchiostro, #1a1a1a);
    margin: 0 0 .75rem;
}
.preferito-avviso-azioni {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}
.preferito-avviso-azioni .pulsante-auth {
    text-decoration: none;
    display: block;
}
.preferito-avviso-chiudi {
    background: none;
    border: none;
    color: var(--c-pietra, #666);
    font-size: .85rem;
    cursor: pointer;
    padding: .4rem;
}
.preferito-avviso-chiudi:hover {
    text-decoration: underline;
}

/* --- Vista di dettaglio completa di un termine
   (termine_rendi_dettaglio_completo()) --- */
.dettaglio-termine {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.dettaglio-tabella-info {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .9rem;
}
.dettaglio-tabella-info th,
.dettaglio-tabella-info td {
    padding: .5rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--c-bordo, #e0e0e0);
    vertical-align: top;
}
.dettaglio-tabella-info th {
    width: 180px;
    color: var(--c-pietra, #666);
    font-weight: 600;
}
.dettaglio-traduzioni {
    font-size: .95rem;
    margin: .75rem 0;
}
.dettaglio-nota {
    font-size: .92rem;
    line-height: 1.6;
    margin: 1rem 0;
}

/* Nota accanto al tradizionale quando coincide col semplificato —
   mostrata sempre (non più nascosta del tutto), per chiarire che è
   un'uguaglianza e non un dato mancante. */
.dettaglio-nota-uguale {
    font-size: .78rem;
    color: var(--c-pietra, #666);
    font-weight: 400;
}

/* Link automatici ai termini "enciclopedici" citati nel testo di una
   nota (termine_collega_riferimenti_in_nota()) — leggermente
   distinti da un link qualunque, per segnalare che portano a un'altra
   scheda del vocabolario, non a una fonte esterna. */
.nota-link-termine {
    color: var(--c-giada-scuro, #007a52);
    text-decoration: none;
    border-bottom: 1.5px dotted var(--c-giada, #00a874);
    font-weight: 600;
}
.nota-link-termine:hover {
    border-bottom-style: solid;
}

/* Stile di base per .badge — mancava del tutto nei fogli di stile
   caricati da search.php (esisteva solo come stile inline nella
   pagina diagnostica prova-termine.php, mai promosso a un file
   condiviso). Usata sia per singoli caratteri/parole cinesi sia per
   valori latini (livelli HSK, categorie) — vedi font-cinese.css per
   un bug reale legato proprio a questa doppia natura, corretto a
   parte. */
.badge {
    display: inline-block;
    background: var(--c-nebbia, #eef4f0);
    color: var(--c-giada-scuro, #007a52);
    border: 1px solid var(--c-bordo, #d7e4dd);
    border-radius: 999px;
    padding: .15rem .6rem;
    margin: .15rem .2rem .15rem 0;
    font-size: .82rem;
    font-weight: 600;
}

/* Badge "altri termini che contengono questo carattere", ora
   cliccabili (aprono il modal informazioni, vedi parola-popup.js) —
   stesso .badge di sempre, solo con un cursore che segnala che si può
   cliccare. */
.badge-parola {
    cursor: pointer;
    transition: transform .15s ease;
}
.badge-parola:hover {
    transform: scale(1.05);
    background: var(--c-giada, #00a874);
    color: #fff;
}

/* Titolo-link col termine dentro il modal informazioni
   (parola-info.php) — porta alla scheda completa in search.php. */
.parola-info-titolo-link {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-giada-scuro, #007a52);
    text-decoration: none;
    margin-bottom: .3rem;
}
.parola-info-titolo-link:hover {
    text-decoration: underline;
}

/* Stile per <figcaption> dentro il testo di una nota (note.note,
   HTML grezzo dal database) — usata quando chi scrive la nota vuole
   una didascalia sotto un'immagine incorporata nel testo stesso.
   Disponibile ovunque il testo di una nota venga mostrato
   (termine_rendi_dettaglio_completo() in search.php/vocabulary.php,
   termine_rendi_scheda_turistica() in culture.php). */
.figure-caption {
    display: block;
    font-size: .82rem;
    font-style: italic;
    color: var(--c-pietra, #666);
    border: 1px solid var(--c-pietra, #999);
    border-radius: 4px;
    padding: .3rem .6rem;
    margin-top: .3rem;
}

/* <figure> dentro il testo di una nota (note.note) — effetto zoom +
   luce al passaggio del mouse. Ripresa dal progetto precedente, con
   qualche rifinitura: il box-shadow era dichiarato nella transizione
   ma mai usato in nessuno stato (nessun cambiamento visibile),
   completato con un'ombra vera all'hover; margine di default aggiunto
   (il browser ne applica uno molto ampio a <figure> di suo, che
   stonerebbe nel testo di una nota); animazione disattivata per chi
   preferisce ridurle (prefers-reduced-motion). */
figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
    max-width: 100%;
    margin: .5rem 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

figure img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease, filter 0.6s ease;
}

figure:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

figure:hover img {
    transform: scale(1.08);
    filter: brightness(1.15) saturate(1.2);
}

figure::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

figure:hover::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    figure,
    figure img,
    figure::after {
        transition: none;
    }
    figure:hover img {
        transform: none;
        filter: none;
    }
}

/* --- Regole grammaticali (grammatica_rendi_regole): search.php, finestra
   informazioni, letture. L'HTML è dell'amministratore, riparato e
   filtrato da Src\Support\HtmlRegola; il riquadro lo contiene. --- */
.grammatica {
    margin: 1rem 0;
    border: 1px solid #f0c9c3;
    border-left: 4px solid var(--c-sigillo, #c0392b);
    border-radius: 8px;
    background: #fffaf9;
}
.grammatica > summary {
    cursor: pointer;
    padding: .55rem .9rem;
    font-weight: 700;
    color: #7a271a;
    list-style-position: inside;
}
.grammatica-segno {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--c-sigillo, #c0392b) transparent transparent;
    vertical-align: middle;
    margin-right: .2rem;
}
.grammatica-pinyin {
    font-weight: 400;
    font-style: italic;
    color: #8a4a3e;
    font-family: "Segoe UI", Arial, sans-serif;
}
.grammatica-testo {
    padding: .2rem 1rem .9rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.grammatica-testo + .grammatica-testo {
    border-top: 1px dashed #f0c9c3;
    padding-top: .8rem;
}
.grammatica-testo ul,
.grammatica-testo ol {
    padding-left: 1.3rem;
    margin: .4rem 0 .6rem;
}
.grammatica-testo li {
    margin-bottom: .35rem;
}
.grammatica-testo table {
    border-collapse: collapse;
    margin: .5rem 0;
}
.grammatica-testo th,
.grammatica-testo td {
    border: 1px solid #f0c9c3;
    padding: .25rem .5rem;
}
/* Evidenziazione usata dalle regole: class="highlight" */
.grammatica-testo .highlight,
.highlight {
    background: #fff1a8;
    padding: 0 .15em;
    border-radius: 3px;
}
/* Nella finestra informazioni le regole lunghe scorrono dentro il riquadro. */
#modalParolaCorpo .grammatica-testo {
    max-height: 45vh;
    overflow-y: auto;
}

/* --- Voci con spiegazione (voce_rendi(), voce-popup.js) --- */
.voce-spiegata {
    border: none;
    background: none;
    padding: 0;
    color: var(--c-giada-scuro, #007a52);
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    cursor: pointer;
}
.voce-spiegata.badge { text-decoration: none; background: var(--c-nebbia, #eef6f2); color: var(--c-giada-scuro, #007a52); border: 1px solid var(--c-giada, #00a36c); }
.voce-spiegata i { font-size: .75em; opacity: .75; }
.voce-dialogo {
    width: min(620px, calc(100vw - 2rem));
    max-height: 80vh;
    border: none;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.voce-dialogo::backdrop { background: rgba(16, 36, 29, .5); }
.voce-dialogo-testata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1.2rem;
    background: var(--c-giada, #00a36c);
    color: #fff;
    position: sticky;
    top: 0;
}
.voce-dialogo-testata h2 { font-size: 1.1rem; margin: 0; }
.voce-dialogo-chiudi { background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.voce-dialogo-corpo { padding: 1rem 1.2rem 1.3rem; }
.search-torna-lezione { margin: .5rem 0 1rem; }
.search-torna-lezione a { font-weight: 600; color: var(--c-giada-scuro, #007a52); }

/* Termine dei riquadri della pagina principale: apre la finestra della parola.
   Si azzera solo l'aspetto predefinito del pulsante; l'effetto al passaggio
   (sfondo verde e "rimbalzo") resta quello comune di .parola-cliccabile
   (griglia-esempi.css), come per le parole cliccabili delle altre pagine. */
.scheda-termine-parola {
    margin-left: .5rem;
    padding: 0 .1rem;
    border: 1px solid transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: .25em;
}
.scheda-termine-parola:not(:hover):not(:focus-visible) { background-color: transparent; }
.scheda-termine-parola:focus-visible { outline: 2px solid var(--c-giada, #00a36c); outline-offset: 2px; }

/* Avvisi per l'amministratore dentro le schede (foto mancanti, campo "other" da sistemare):
   valgono in ogni pagina, non solo nella sezione Turistico. */
.nota-avviso-admin {
    margin: .6rem 0;
    padding: .45rem .6rem;
    font-size: .78rem;
    line-height: 1.4;
    color: #6b4f00;
    background: #fff7e0;
    border-left: 3px solid #d9a400;
    border-radius: 4px;
}
.nota-avviso-admin code { font-size: .95em; }