/* ================================
   Language switcher – dropdown
   Emoji-safe (Chrome desktop)
   ================================ */

.language-dropdown-wrapper {
    position: relative;
    display: inline-block;
    font-size: 11px;
}

/* Testo visibile (quello che vedi) */
.language-current {
    display: inline-block;
    padding: 4px 26px 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    white-space: nowrap;
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI Emoji",
        "Apple Color Emoji",
        "Noto Color Emoji",
        sans-serif;
}

/* Tendina "testuale" (switcher_lingue) usata da sola, senza wrapper: deve restare
   visibile e cliccabile normalmente — prima la regola sotto la rendeva invisibile
   e posizionata a piena pagina anche in questo caso, perché non era limitata al
   solo switcher con le bandiere. */
select.language-dropdown {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}

/* Select invisibile ma cliccabile: SOLO quando è dentro il wrapper delle bandiere
   (dove sopra c'è già il testo/bandiera visibile e questo select serve solo a
   intercettare il click e aprire le opzioni). */
.language-dropdown-wrapper .language-dropdown {
    position: absolute;
    inset: 0;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

/* Allineamento widget/blocco: sinistra (default), centro, destra — con un piccolo
   spazio di rispetto dal bordo. Usiamo "width:100% + float:none + margin:0" con
   !important perché nei temi a blocchi (FSE), i Gruppi con layout "Flusso" centrano
   automaticamente ogni blocco figlio non allineato (margin auto sinistra/destra):
   senza queste regole, sinistra/centro/destra finivano tutte per sembrare uguali
   (sempre centrate). Usiamo padding, non margin, per lo spazio dal bordo, perché il
   margin può essere sovrascritto/azzerato dalla stessa regola del tema. */
.mlm-widget-align-left,
.mlm-widget-align-center,
.mlm-widget-align-right {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.mlm-widget-align-left {
    justify-content: flex-start;
    padding-left: 16px;
}
.mlm-widget-align-center {
    justify-content: center;
}
.mlm-widget-align-right {
    justify-content: flex-end;
    padding-right: 16px;
}

/* Riquadro di anteprima dei blocchi NELL'EDITOR (edit(), non l'output reale sul sito).
   Forziamo "block" a piena larghezza: se il blocco viene inserito dentro un Gruppo con
   layout "Riga" (flex orizzontale), senza questa regola l'anteprima può apparire
   affiancata ad altri blocchi invece che sopra/sotto, anche se nell'elenco blocchi
   (List View) risultano correttamente impilati uno sopra l'altro — è solo un effetto
   visivo dell'anteprima nell'editor, non riguarda il sito pubblicato. */
.mlm-block-editor-preview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 480px) {
    .language-current {
        font-size: 14px;
    }
}