/* HBS 2026 — site-wide typography per il PDF di riferimento:
   rosso = Michroma 12px, nero = Montserrat 10px. */

/* Margine di default del browser su body: la sidebar (position:fixed,
   left:0) è misurata dal vero bordo del viewport, mentre l'header è
   annidato dentro #page/body — senza azzerare questo margine i due
   finiscono disallineati anche con lo stesso padding dichiarato. */
body {
	margin: 0;
	padding: 0;
}

/* Rete di sicurezza globale: Kirki genera un enorme blocco CSS che
   impone "Nunito"/"Sofia Pro" (percorso file rotto, non un URL) su
   decine di selettori in tutto il sito (footer, widget, titoli...).
   Il selettore universale ha la specificità più bassa possibile, quindi
   qualunque regola più specifica (logo, titoli in Michroma) vince
   comunque su questa — è solo la base di default ovunque altro. */
/* :where() azzera la specificità: senza, i due :not() pesavano (0,2,2) e
   battevano le regole Michroma (.site-header .logo-text, h1, ecc.),
   facendo uscire in Montserrat logo, titoli ed elenco works. */
:where(*:not(.socials-menu a):not(.socials-menu a *)) {
	font-family: 'Montserrat', sans-serif !important;
}

/* Logo, menu e titoli: stesso font e stesso colore, come da PDF
   ("rosso = Michroma") — logo, titoli (h1-h6) e menu condividono
   identico trattamento, il corpo del testo resta Montserrat nero. */
.site-header .logo-text,
.site-header .site-title,
.site-header .site-title a,
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a {
	font-family: 'Michroma', sans-serif !important;
	color: #f63015 !important;
	letter-spacing: 0.02em;
}

.site-header .logo-text,
.site-header .site-title,
.site-header .site-title a {
	font-size: 24px !important;
	line-height: 1.15 !important;
	text-transform: lowercase;
	white-space: nowrap !important;
}

.site-header .logo,
.site-header .site-branding {
	flex-shrink: 0 !important;
}

.site-header .main-navigation,
.site-header .nav-menu {
	font-family: 'Michroma', sans-serif !important;
	color: #f63015 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em;
	text-transform: lowercase;
}

/* Selettore basato su ID (massima specificità, batte qualunque regola
   generica su "a") — Safari trattava la regola sopra come "ereditata" e
   la faceva perdere contro la regola generica del corpo testo. */
.site-header #menu-main a,
.site-header #menu-main li a,
#mobile-nav a,
#mobile-nav li a {
	font-family: 'Michroma', sans-serif !important;
	color: #f63015 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em;
	text-transform: lowercase;
}

/* Nome grande a sinistra, il menu occupa tutto lo spazio rimanente sulla
   stessa riga, dividendolo tra le voci. Bootstrap continua a imporre la
   sua griglia su .container/.row nonostante gli override — invece di
   combatterla, la "spengo" (display:contents) così logo e menu diventano
   figli diretti dell'header e il flex funziona senza interferenze. */
.site-header .container,
.site-header .sober-container,
.site-header .row {
	display: contents !important;
}

.site-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	padding: 16px 4% 16px 24px !important;
	box-sizing: border-box !important;
	border: none !important;
}

/* Footer allineato allo stesso margine sinistro di 24px del logo/sidebar
   (di default segue la griglia Bootstrap, che usa un gutter diverso). */
.site-footer .sober-container {
	max-width: none !important;
	padding-left: 24px !important;
	padding-right: 4% !important;
	box-sizing: border-box !important;
	border: none !important;
}

.site-footer,
.site-footer .footer-info {
	border: none !important;
}

/* La linea non era un border sull'elemento ma su uno pseudo-elemento
   ::before di .footer-info (verificato via CDP) — un border sull'elemento
   stesso non lo tocca, va colpito direttamente. */
.site-footer .footer-info::before,
.site-footer .footer-info::after {
	content: none !important;
	border: none !important;
	display: none !important;
}

.site-footer .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.site-footer .site-info,
.site-footer .footer-social {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.site-header .header-icon {
	display: none !important;
}

/* "Home" non compare nel menu del PDF di riferimento */
.site-header .menu-item-home {
	display: none !important;
}

.site-header .site-branding {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
	display: flex !important;
	align-items: center !important;
}

/* Il logo non è figlio diretto di .site-branding: c'è un div Bootstrap
   (col-xs-12 col-sm-12 col-md-6 col-lg-8) in mezzo che lo contiene — il
   flex/align-items sopra si fermava un livello troppo presto e il logo
   restava appiccicato in alto invece di centrarsi. */
.site-header .site-branding > div {
	display: flex !important;
	align-items: center !important;
}

.site-header .main-navigation {
	position: static !important;
	transform: none !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin-top: 0;
	flex: 1 1 auto;
}

.site-header .nav-menu {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	width: 100%;
	padding: 20px 0 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* Trovato negli Strumenti di Sviluppo: un JS del tema scrive
   "padding-top: 94px" inline su #page DOPO il primo render — è questo,
   non l'header, a causare il salto visibile. Blocco la transizione
   sull'elemento giusto, così il cambio di padding scatta senza animarsi. */
#page,
body {
	transition: none !important;
}

.site-header {
	transition: none !important;
}

/* Responsive: keep the small type comfortable on phones, no oversized
   headings at narrow widths. */
@media screen and (max-width: 600px) {
	.site-header .logo-text,
	.site-header .site-title,
	.site-header .site-title a {
		font-size: 18px !important;
		white-space: normal !important;
		line-height: 1.1 !important;
		max-width: 60vw;
	}
	.site-header .nav-menu {
		gap: 12px;
		flex-wrap: wrap;
	}
}

/* Icona hamburger del menu mobile: di default il tema usa righe da 2px,
   troppo pesanti per lo stile sottile del resto del sito. */
.icon-nav,
.icon-nav:before,
.icon-nav:after {
	border-bottom-width: 1px !important;
}

/* Unico rosso del sito: #f63015. Il vecchio tema (Kirki) impone un
   bordeaux #730034 su tutti i link e sulla sottolineatura del menu.
   "body a" invece di "a": la regola Kirki è stampata dopo questo file,
   serve un filo di specificità in più (le regole con classi vincono ancora). */
body a {
	color: #f63015;
}

.site-navigation a:hover::after,
.site-navigation li:hover > a::after,
.site-navigation li.current-menu-item a::after {
	background-color: #f63015 !important;
}

/* Link nel testo delle pagine (es. "this link" in Contact): rossi =
   Michroma, come da PDF. */
body.page .entry-content a {
	font-family: 'Michroma', sans-serif !important;
	color: #f63015 !important;
}

/* ===== 2026-10-07 — aria ai lati su desktop medi/piccoli =====
   Il contenitore Bootstrap restava fisso a 1170px fino a 1200px di
   schermo: su un 1920 lasciava ~375px d'aria per lato (impaginato
   "godibile"), su un 1280/1440 quasi niente. Ora la colonna centrale
   è una percentuale della finestra (72%, 80% sotto i 1200px), con lo
   stesso tetto di 1170px di prima: sui monitor grandi non cambia nulla,
   sui più piccoli resta sempre aria intorno. Home esclusa (slider a
   tutto schermo); sotto i 992px resta il comportamento mobile. */
@media screen and (min-width: 992px) {
	body:not(.home) #content .container {
		width: 80vw !important;
		max-width: 1170px !important;
	}
}

@media screen and (min-width: 1200px) {
	body:not(.home) #content .container {
		width: 72vw !important;
	}
}

/* Pagine interne: nome un po' più grande (24 → 28px), testi correnti un
   po' più piccoli (16 → 15px; nelle opere 14 → 13px, in works-2026.css). */
@media screen and (min-width: 601px) {
	body:not(.home) .site-header .logo-text,
	body:not(.home) .site-header .site-title,
	body:not(.home) .site-header .site-title a {
		font-size: 28px !important;
	}
}

body.page:not(.home) .entry-content,
body.page:not(.home) .entry-content p,
body.single-post:not(.hbs-work-page) .entry-content,
body.single-post:not(.hbs-work-page) .entry-content p {
	font-size: 15px;
}

/* Tendina opere sotto "works" (solo nella pagina di un'opera — vedi
   functions.php). Hover/fade la gestisce lo script del tema padre su
   .sub-menu; qui solo aspetto e posizione. */
.site-header #menu-main > li.hbs-works-menu-item {
	position: relative !important;
}

/* Ponte invisibile tra "works" e la tendina: senza, il mouse che scende
   attraversa uno spazio vuoto, esce dalla voce e la tendina si chiude. */
.site-header #menu-main .hbs-works-dropdown::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.site-header #menu-main .hbs-works-dropdown {
	display: none;
	position: absolute !important;
	top: calc(100% + 14px) !important;
	left: -16px !important;
	transform: none !important;
	z-index: 100;
	min-width: 0;
	width: max-content;
	margin: 0;
	padding: 12px 16px 14px;
	list-style: none;
	background: #fff;
	border: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	text-align: left;
}

/* Tastiera: la tendina si apre anche col focus, non solo col mouse. */
.site-header #menu-main > li.hbs-works-menu-item:focus-within > .hbs-works-dropdown {
	display: block;
}

.site-header #menu-main .hbs-works-dropdown li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

.site-header #menu-main .hbs-works-dropdown li a {
	display: block;
	padding: 4px 0;
	font-size: 12px !important;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
}

.site-header #menu-main .hbs-works-dropdown li a::after {
	display: none !important;
}

.site-header #menu-main .hbs-works-dropdown li a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-header #menu-main .hbs-works-dropdown li.current-menu-item a {
	color: #000 !important;
}

/* Menu mobile: stessa lista, annidata sotto "works". */
#mobile-nav .hbs-works-dropdown {
	display: none;
	list-style: none;
	margin: 0;
	padding: 4px 0 8px 16px;
}

#mobile-nav .hbs-works-dropdown li a {
	font-size: 12px !important;
}

#mobile-nav .hbs-works-dropdown li.current-menu-item a {
	color: #000 !important;
}

/* Ombra del nome anche nell'header delle pagine interne — stessa
   ricetta della home (PDF: due copie nere sfalsate in basso a destra,
   nette, ~1pt al 50% e ~2pt al 30%), scalata sul corpo del logo qui
   (28px; 18px su mobile). Solo sul nome, non sul menu. */
body:not(.home) .site-header .logo-text,
body:not(.home) .site-header .site-title,
body:not(.home) .site-header .site-title a {
	text-shadow: 1.4px 1.05px 0 rgba(0, 0, 0, 0.5), 2.45px 1.95px 0 rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 600px) {
	body:not(.home) .site-header .logo-text,
	body:not(.home) .site-header .site-title,
	body:not(.home) .site-header .site-title a {
		text-shadow: 0.9px 0.7px 0 rgba(0, 0, 0, 0.5), 1.6px 1.25px 0 rgba(0, 0, 0, 0.3);
	}
}

/* ===== 2026-10-07 — header sotto i 1200px (menu a hamburger) =====
   Le colonne Bootstrap del tema mettevano l'hamburger su una riga a sé
   e il nome sotto, spostato a destra dai padding delle colonne. Ora:
   nome a sinistra e hamburger a destra sulla stessa riga, allineati al
   margine di 24px. */
@media screen and (max-width: 1199px) {
	.site-header {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		padding: 16px 24px !important;
	}
	.site-header .mobile-nav-toggle {
		order: 2;
		flex: 0 0 auto;
		width: auto !important;
		float: none !important;
		padding: 0 !important;
		margin: 0 0 0 16px !important;
	}
	.site-header .mobile-nav-toggle .toggle-nav {
		margin: 0 !important;
	}
	.site-header .site-branding {
		order: 1;
		flex: 1 1 auto;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.site-header .site-branding > div {
		width: auto !important;
		float: none !important;
		padding: 0 !important;
	}
	.site-header .site-branding > div:empty {
		display: none !important;
	}
	.site-header .site-branding .logo {
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Telefono: titoli in proporzione allo schermo (prima 26-40px, su due o
   tre righe). */
@media screen and (max-width: 600px) {
	body.category .entry-title,
	body.archive .entry-title,
	body.archive .entry-title a {
		font-size: 16px !important;
		line-height: 1.35 !important;
	}
	body.single-post:not(.hbs-work-page) h1.entry-title {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
}

/* ===== 2026-10-12 — ritocchi responsive header/menu/footer ===== */

/* Menu desktop: sugli schermi ampi (≥1600px) resta distribuito su tutta
   la riga come da PDF (regole originali, nessun override). Tra 1599 e
   1200px le voci si avvicinano man mano che la finestra si stringe:
   gap da ~225px (= la distribuzione larga) a 40px, sempre raggruppate a
   destra così si allontanano dal nome. */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
	.site-header .main-navigation {
		margin-left: 48px !important;
	}
	.site-header .nav-menu {
		justify-content: flex-end !important;
		gap: calc(46vw - 512px);
	}
	.site-header #menu-main > li {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Hamburger: il tema gli dà "flex: 1 1 0%" (colonna Bootstrap da 25%)
   e l'icona finiva a sinistra di quella colonna, cioè verso il centro.
   Ora occupa solo la sua larghezza ed è attaccato al margine destro. */
@media screen and (max-width: 1199px) {
	.site-header .mobile-nav-toggle {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		margin-left: auto !important;
		text-align: right;
	}
	.site-header .site-branding {
		flex: 0 1 auto !important;
	}
}

/* Pannello del menu mobile: le voci sono corte, niente tendina da 425px
   di bianco. Le voci lunghe del menu works vanno a capo. */
#mobile-menu.side-menu {
	width: 240px !important;
	max-width: 80vw !important;
	box-sizing: border-box !important;
}
#mobile-menu .mobile-menu-inner,
#mobile-menu #mobile-nav {
	width: auto !important;
}
#mobile-nav .hbs-works-dropdown li a {
	white-space: normal !important;
	line-height: 1.4 !important;
}

/* Footer sempre in fondo alla finestra anche sulle pagine corte. */
#page.site {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100vh !important;
	box-sizing: border-box !important;
}
#page.site > #content {
	flex: 1 0 auto !important;
}
#page.site > #colophon {
	flex-shrink: 0 !important;
}

/* Hamburger tra 601 e 1199px: nome e icona restano dove stavano nel
   layout desktop — nome a 54px da sinistra, stessa altezza, icona
   allineata al margine destro su cui finiva il menu (4% + 15px), così
   al cambio di layout niente salta. Sul telefono restano i 24px. */
@media screen and (min-width: 601px) and (max-width: 1199px) {
	.site-header {
		padding: 29px calc(4% + 15px) 29px 54px !important;
	}
}
@media screen and (max-width: 1199px) {
	/* l'icona (18px, absolute a sinistra) stava in un box da 30px: box
	   largo quanto l'icona, così il bordo destro è davvero il margine. */
	.site-header .mobile-nav-toggle .toggle-nav {
		width: 18px !important;
	}
}