/* Header e menu mobile – personalizzazione ultimidellaclasse
 * Caricato con media="(max-width: 960px)" (inc/udc-menu-mobile.php): sopra 960px queste regole non
 * si applicano. Le regole che nascondono .udc-mm-apri, .udc-mm e .udc-meta-lettura a tutte le larghezze
 * sono stampate inline da udc_mm_risorse() (wp_add_inline_style). */
.udc-mm-apri,
.udc-mm,
.entry-meta .entry-meta-elements .udc-meta-lettura {
	display: none;
}

/* Sotto il breakpoint del menu del tema (960px). */
@media screen and (max-width: 960px) {

	/* Header su una riga, che resta in alto mentre si scorre (stessa misura sempre: niente salti).
	 * padding-bottom: spazio tra l'header e il contenuto. */
	.udc-mm-pronto #masthead {
		position: sticky;
		top: 0;
		z-index: 9990;
		padding-bottom: 14px;
	}

	/* !important: il CSS generato dal Customizer (uploads/bloglo/dynamic-styles.css) mette
	 * margin-top: 3rem !important su #bloglo-header sotto 768px. */
	.udc-mm-pronto.bloglo-header-layout-5 #masthead #bloglo-header {
		margin-top: 14px !important;
		padding: 0 16px;
	}

	.udc-mm-pronto #bloglo-header-inner {
		border-radius: 999px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
		transition: box-shadow .2s ease;
	}

	.udc-mm-pronto.bloglo-header-layout-5 #bloglo-header #bloglo-header-inner .bloglo-container.bloglo-header-container {
		flex-wrap: nowrap;
		align-items: center;
		min-height: 64px;
		padding: 0 9px 0 20px;
	}

	.udc-mm-pronto .bloglo-header-container .bloglo-logo {
		flex: 1 1 auto;
		min-width: 0;
		margin-right: 12px;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.udc-mm-pronto .bloglo-header-container .bloglo-logo .logo-inner {
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.udc-mm-pronto .bloglo-header-container .bloglo-logo .logo-inner > a {
		justify-content: flex-start;
	}

	.udc-mm-pronto .bloglo-header-container .bloglo-logo img {
		width: auto;
		max-width: 100%;
		max-height: 34px;
	}

	/* L'hamburger e il menu a tendina del tema lasciano il posto al nuovo menu. */
	.udc-mm-pronto .bloglo-header-container .bloglo-mobile-nav,
	.udc-mm-pronto #bloglo-header-inner .site-navigation {
		display: none !important;
	}

	.udc-mm-pronto .bloglo-header-container .bloglo-header-widgets {
		display: none;
	}

	.udc-mm-apri {
		position: relative;
		z-index: 2; /* sopra al bordo decorativo dell'header del tema */
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #1f1f26;
		color: #fff;
		cursor: pointer;
		transition: transform .15s ease;
	}

	.udc-mm-apri:active {
		transform: scale(.94);
	}

	.udc-mm-apri__linee,
	.udc-mm-apri__linee::before,
	.udc-mm-apri__linee::after {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}

	.udc-mm-apri__linee {
		position: relative;
	}

	.udc-mm-apri__linee::before,
	.udc-mm-apri__linee::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.udc-mm-apri__linee::before {
		top: -6px;
	}

	.udc-mm-apri__linee::after {
		top: 6px;
	}

	/* Mentre si scorre l'header resta della stessa misura: cambia solo l'ombra. */
	.udc-mm-scorre #bloglo-header-inner {
		box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	}

	/* Menu a schermo intero. */
	.udc-mm {
		--udc-mm-sfondo: #ffffff;
		--udc-mm-testo: #1f1f26;
		--udc-mm-tenue: #8a8a92;
		--udc-mm-chip: #f2f0ed;
		--udc-mm-bordo: #e6e2de;
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: block;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: var(--udc-mm-sfondo);
		color: var(--udc-mm-testo);
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .2s ease, transform .2s ease;
	}

	.udc-mm[hidden] {
		display: none;
	}

	.udc-mm.is-aperto {
		opacity: 1;
		transform: none;
	}

	[data-theme="dark"] .udc-mm {
		--udc-mm-sfondo: #1b1b22;
		--udc-mm-testo: #f2f2f5;
		--udc-mm-tenue: #a3a3ad;
		--udc-mm-chip: #2b2b35;
		--udc-mm-bordo: #34343f;
	}

	.admin-bar .udc-mm {
		top: 46px;
	}

	.udc-mm__dentro {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		max-width: 560px;
		margin: 0 auto;
		padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	}

	.udc-mm__testa {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 64px;
		padding: 0 8px 0 20px;
		border: 1px solid var(--udc-mm-bordo);
		border-radius: 999px;
		background: #fff;
	}

	.udc-mm__logo {
		min-width: 0;
		color: #1f1f26;
		font-weight: 800;
		text-decoration: none;
	}

	.udc-mm__logo img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 34px;
	}

	.udc-mm-chiudi {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #1f1f26;
		color: #fff;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.udc-mm__cerca {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 16px 0 4px;
		padding: 0 14px;
		border-radius: 14px;
		background: var(--udc-mm-chip);
		color: var(--udc-mm-tenue);
	}

	.udc-mm .udc-mm__cerca input {
		flex: 1 1 auto;
		min-width: 0;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: var(--udc-mm-testo);
		font-size: 16px; /* 16px evita lo zoom automatico di iOS */
	}

	.udc-mm .udc-mm__cerca input:focus {
		outline: none;
	}

	.udc-mm__cerca:focus-within {
		box-shadow: 0 0 0 2px var(--udc-mm-testo);
	}

	.udc-mm__sezione {
		margin-top: 18px;
	}

	.udc-mm .udc-mm__titolo {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 0 4px 10px;
		color: var(--udc-mm-tenue);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}

	.udc-mm .udc-mm__titolo a {
		color: var(--udc-mm-tenue);
		font-size: 13px;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
	}

	.udc-mm ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.udc-mm li {
		margin: 0;
		padding: 0;
	}

	/* Rubriche: riquadri colorati. */
	.udc-mm__riquadri {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.udc-mm .udc-mm__riquadri a {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 6px;
		height: 100%;
		min-height: 84px;
		padding: 12px 10px;
		border-radius: 14px;
		background: var(--udc-mm-colore, #2b2b33);
		color: var(--udc-mm-colore-testo, #fff);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		overflow-wrap: anywhere;
	}

	.udc-mm .udc-mm__riquadri a[aria-current="page"] {
		box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7);
	}

	.udc-mm__emoji {
		font-size: 22px;
		line-height: 1;
	}

	/* Altre sezioni: pulsanti già visibili, niente frecce da aprire. */
	.udc-mm__pulsanti {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.udc-mm .udc-mm__pulsanti a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 40px;
		padding: 8px 14px;
		border-radius: 999px;
		background: var(--udc-mm-chip);
		color: var(--udc-mm-testo);
		font-size: 15px;
		line-height: 1.2;
		text-decoration: none;
	}

	.udc-mm .udc-mm__pulsanti a[aria-current="page"] {
		background: var(--udc-mm-testo);
		color: var(--udc-mm-sfondo);
	}

	/* Voci senza sottomenu (Home, Chi siamo, Contatti): bottoni in fondo. */
	.udc-mm .udc-mm__fondo {
		display: flex;
		gap: 8px;
		margin-top: auto;
		padding-top: 24px;
	}

	.udc-mm__fondo li {
		flex: 1 1 0;
		min-width: 0;
	}

	.udc-mm .udc-mm__fondo a {
		display: block;
		padding: 14px 8px;
		border-radius: 14px;
		background: var(--udc-mm-chip);
		color: var(--udc-mm-testo);
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.udc-mm .udc-mm__fondo li:last-child a {
		background: #1f1f26;
		color: #ffd34d;
	}

	.udc-mm a:focus-visible,
	.udc-mm button:focus-visible,
	.udc-mm-apri:focus-visible {
		outline: 3px solid #ffd34d;
		outline-offset: 2px;
	}

	/* Pagina bloccata mentre il menu è aperto (su iOS < 16 overflow non basta: js/udc-menu-mobile.js
	 * mette anche il body in position: fixed e ripristina lo scroll alla chiusura). */
	html.udc-mm-bloccato,
	html.udc-mm-bloccato body {
		overflow: hidden;
	}
}

@media screen and (max-width: 600px) {
	/* Su telefono la barra admin scorre via con la pagina. */
	.admin-bar .udc-mm {
		top: 0;
	}
}

/* Smartphone: il tempo di lettura passa accanto alla data (il breadcrumb è nascosto). */
@media screen and (max-width: 768px) {
	/* body davanti: deve vincere sulla regola display:none stampata inline dopo il file. */
	body .entry-meta .entry-meta-elements .udc-meta-lettura {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 2px 10px;
		border-radius: 999px;
		background: #f2f0ed;
		color: #6b6b74;
		font-size: .9em;
		white-space: nowrap;
	}

	[data-theme="dark"] .udc-meta-lettura {
		background: #30303a;
		color: #a3a3ad;
	}
}

@media (prefers-reduced-motion: reduce) {
	.udc-mm,
	.udc-mm-apri,
	.udc-mm-pronto #bloglo-header,
	.udc-mm-pronto #bloglo-header-inner,
	.udc-mm-pronto .bloglo-header-container,
	.udc-mm-pronto .bloglo-logo img {
		transition: none !important;
	}
}