@charset "utf-8";

/**
 * Quello che Bootstrap 4 dava e la 5 non da' piu', ma che il tema o le
 * pagine danno ancora per scontato.
 *
 * Non e' un foglio di ripiego per non aggiornare il markup: il markup e'
 * stato aggiornato. Qui restano solo le tre cose che non conviene
 * riscrivere in centinaia di punti, ognuna con scritto perche'.
 *
 * Si carica per ultimo, dopo bootstrap.min.css e dopo main.css del tema,
 * quindi puo' correggere entrambi.
 */

/**
 * La sottolineatura dei collegamenti.
 *
 * La 4 dichiarava "a{text-decoration:none}", la 5 dichiara underline: e'
 * una scelta di accessibilita' condivisibile in generale, ma applicata a
 * questa interfaccia sottolinea di colpo tutto - le voci di menu, le
 * briciole di pane, le schede - perche' qui sono quasi tutti <a>.
 *
 * Invece di rimettere "none" fisso si usano le due variabili che il tema
 * ha gia' e che finora valevano solo per tre elenchi vecchi (#playlist,
 * #calendar, #keyring): sono quelle che si impostano in "aspetto e
 * lingua". Cosi' quella impostazione, che prima non si vedeva quasi da
 * nessuna parte, vale su tutta la piattaforma, e chi vuole i collegamenti
 * sottolineati puo' chiederlo.
 */
a {
    text-decoration: var(--sf-link-decorazione, none);
}

a:hover,
a:focus {
    text-decoration: var(--sf-link-decorazione-hover, underline);
}

/**
 * La spaziatura fra le colonne.
 *
 * Nella 4 valeva 30px (15 per lato), nella 5 vale 1.5rem, cioe' 24. Non e'
 * un errore della 5, e' una scelta diversa: ma applicata a un impianto
 * grafico disegnato sui 30px sposta di due pixel per lato ogni colonna di
 * ogni pagina, e il risultato e' che tutto sembra leggermente storto senza
 * che si capisca dove. Si tiene la misura di prima, che e' quella su cui
 * il tema e' stato costruito.
 *
 * Va messa anche sui contenitori, non solo sulle righe: nella 5 il
 * contenitore dichiara la sua e ci calcola il proprio riempimento, la
 * riga dichiara la sua e ci calcola il proprio margine negativo. Se si
 * cambia solo quella della riga, il margine negativo diventa 15px mentre
 * il riempimento resta 12, e i tre pixel di differenza per lato fanno
 * scorrere la pagina in orizzontale. Si e' visto sulle pagine
 * dell'hosting e del trasferimento file.
 *
 * Il giorno in cui si rifa' la grafica queste righe si tolgono per prime.
 */
.row,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 30px;
}

/**
 * Il componente "media": un'immagine a sinistra e il testo a destra.
 *
 * La 5 lo ha tolto dicendo che si fa con le utility (d-flex), ed e' vero,
 * ma il tema ne stila ancora la parte interna (dodici regole su
 * .media-body) e le pagine lo usano. Qui si rimettono solo le due
 * dichiarazioni che facevano da impalcatura: senza, immagine e testo si
 * impilano uno sotto l'altro.
 */
.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

/**
 * La freccia dei menu a tendina.
 *
 * Nella 5 .form-control dichiara appearance:none, che sui <select> toglie
 * la freccia disegnata dal sistema operativo: restava una casella vuota
 * senza nessun segno che si potesse aprire. Nella 4 non succedeva, perche'
 * appearance:none stava solo su .custom-select.
 *
 * Si potrebbe passare i cinquanta <select> a .form-select, che e' la
 * classe giusta della 5, ma quella classe il tema non la conosce: i menu
 * verrebbero bianchi in mezzo a un'interfaccia scura. Meglio ridare la
 * freccia a .form-control, cosi' i menu restano vestiti come il resto.
 *
 * La freccia e' disegnata qui dentro come dato, non caricata da fuori.
 */
select.form-control {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

/* Con piu' righe visibili non e' una tendina: la freccia non ci va. */
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    padding-right: .75rem;
    background-image: none;
}