/*
 * TWC Work in Progress — la fascia sul sito.
 *
 * I colori arrivano dal tema e si possono cambiare da fuori senza toccare
 * questo file: basta definire --twc-wip-sfondo e --twc-wip-testo. La catena
 * dei ripieghi è: variabile del plugin, poi i colori del tema, poi un verde
 * sobrio che funziona da solo.
 *
 * Nessun !important e nessuna regola fuori dai nostri elementi: la fascia
 * non deve poter spostare la testata di nessun tema.
 */

.twc-wip {
	--twc-wip-fondo: var( --twc-wip-sfondo, var( --wp--preset--color--accent-2, #3f5d4a ) );
	--twc-wip-inchiostro: var( --twc-wip-testo, var( --wp--preset--color--on-accent, #fbfaf8 ) );

	box-sizing: border-box;
	width: 100%;
	background: var( --twc-wip-fondo );
	color: var( --twc-wip-inchiostro );
	font-family: var( --wp--preset--font-family--body, inherit );
	font-size: 0.875rem;
	line-height: 1.5;
	/* Sopra le testate appiccicate dei temi, sotto le finestre di dialogo. */
	z-index: 100;
}

.twc-wip * {
	box-sizing: inherit;
}

.twc-wip__dentro {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem 1rem;
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding: 0.6rem 1rem;
}

.twc-wip__testo {
	margin: 0;
	max-width: 80ch;
	text-align: center;
	text-wrap: pretty;
}

.twc-wip__titolo {
	font-weight: 700;
}

.twc-wip__email {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.twc-wip__email:hover,
.twc-wip__email:focus-visible {
	text-decoration-thickness: 2px;
}

.twc-wip__chiudi {
	flex: none;
	/* Area toccabile piena anche se il segno è piccolo. */
	min-width: var( --twc-tap, 44px );
	min-height: var( --twc-tap, 44px );
	margin: -0.35rem -0.5rem -0.35rem 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

.twc-wip__chiudi:hover {
	opacity: 1;
}

.twc-wip__chiudi:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	opacity: 1;
}

/* In cima e sempre in vista: sticky, non fixed, così continua a occupare
 * il suo spazio e non copre la testata. */
.twc-wip--appiccicata {
	position: sticky;
	top: 0;
}

/* In fondo allo schermo. Lo spazio sotto il contenuto lo mette la riga
 * successiva: senza, la fascia coprirebbe la fine della pagina. */
.twc-wip--bassa {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	padding-bottom: env( safe-area-inset-bottom, 0px );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.18 );
}

body:has( > .twc-wip--bassa ),
body:has( .twc-wip--bassa ) {
	padding-bottom: 4.5rem;
}

/* --- Avviso sopra i moduli ------------------------------------------- */

.twc-wip-modulo {
	margin-block: 0 1.25rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var( --twc-wip-sfondo, var( --wp--preset--color--accent-2, #3f5d4a ) );
	background: var( --twc-surface-alt, #f2efe9 );
	color: var( --twc-ink, #1d1b19 );
	font-size: 0.9375em;
	line-height: 1.5;
	border-radius: var( --twc-radius-sm, 8px );
	text-wrap: pretty;
}

/* --- Telefono -------------------------------------------------------- */

@media ( max-width: 600px ) {
	.twc-wip__dentro {
		padding: 0.5rem 0.75rem;
		gap: 0.25rem;
	}

	.twc-wip__testo {
		text-align: start;
		font-size: 0.8125rem;
	}
}

@media print {
	.twc-wip {
		display: none;
	}
}