/*
 * Sostituto misurato di Bootstrap 5.1.3 (V4.3).
 * ---------------------------------------------------------------------------
 * PERCHE' ESISTE
 *
 * Il tema padre carica Bootstrap intero: 160,0 KB di CSS e 76,3 KB di JS,
 * su ogni pagina, bloccanti. Ho contato quali classi di Bootstrap compaiono
 * davvero nell'HTML reso, con i plugin di produzione attivi, su cinque
 * pagine del sito vero (home, vetrina, categoria, carrello, mio-account):
 *
 *     navbar-toggle 25   container 20   row 16   col-md-4 15   collapse 11
 *     col-md-2 10   col-md-6 10   col-md-8 5   container-fluid 5
 *     col-md-3 4   col-1 1   col-2 1
 *
 * Dodici classi. Undici se si toglie `navbar-toggle`, che e' markup di
 * Bootstrap 3 e in Bootstrap 5 non corrisponde a nessuna regola: il padre
 * mescola le due versioni e quella classe non fa niente da anni.
 *
 * Con il child theme attivo il conto scende ancora: sulle stesse pagine in
 * locale restano solo `container` (3-7 volte per pagina) e zero attributi
 * `data-bs-*`, perche' header e footer sono nostri. Il JS di Bootstrap non
 * ha piu' niente da pilotare.
 *
 * Questo file copre TUTTE le dodici classi misurate, non solo quelle che
 * servono al child theme: se un plugin di produzione stampa una `col-md-6`
 * in un punto che non ho visitato, la trova. Pesa circa 2 KB contro 160.
 *
 * SE QUALCOSA SI SPOSTA IN PRODUZIONE
 * Una riga in un mu-plugin rimette Bootstrap intero:
 *     add_filter( 'alc_bootstrap_minimo', '__return_false' );
 * Vedi `inc/prestazioni.php`.
 */

/* Contenitori. Le soglie sono quelle di Bootstrap 5, per non spostare di un
   pixel quello che il padre disegna gia' cosi'. */
.container,
.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Riga e colonne: la dodicesima parte, come nell'originale. */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
	margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
	padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.col    { flex: 1 0 0%; }
.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Sotto i 768px `col-md-*` non vale: le colonne stanno una sotto l'altra,
   ed e' esattamente cio' che serve sul telefono. */
@media (min-width: 768px) {
	.col-md    { flex: 1 0 0%; }
	.col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
	.col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
	.col-md-3  { flex: 0 0 auto; width: 25%; }
	.col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6  { flex: 0 0 auto; width: 50%; }
	.col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
	.col-md-9  { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
}

/*
 * `collapse` senza il JS di Bootstrap.
 *
 * In Bootstrap `.collapse` nasconde e `.collapse.show` mostra: e' il JS che
 * aggiunge `show`. Toglierlo e basta lascerebbe un pannello chiuso per
 * sempre - ed e' successo davvero: il tema padre stampa su ogni archivio di
 * categoria un bottone "Vuoi aiuto nella ricerca?" che apre un `#helps`, e in
 * produzione quel `#helps` contiene un modulo di ricerca vero (1.047
 * caratteri). Il rimpiazzo e' `assets/js/collapse.js`.
 *
 * Due condizioni per nascondere, e servono entrambe:
 *
 *   `.alc-js`               - lo mette uno script in <head>. Senza
 *                             JavaScript il pannello resta VISIBILE: un
 *                             pannello aperto e' brutto, un pannello che non
 *                             si apre e' contenuto perduto.
 *   `.alc-collapse-pilotato` - lo mette collapse.js su ogni bersaglio che ha
 *                             trovato un innesco funzionante. Cosi' un
 *                             `.collapse` orfano non sparisce mai.
 */
.alc-js .collapse:not(.show).alc-collapse-pilotato {
	display: none;
}

.collapse.show {
	display: block;
}