/*
Theme Name: Ipergiux
Theme URI: https://www.ipergiux.it
Template: twentytwentyfive
Author: Giuliano Ciari
Author URI: https://www.ipergiux.it/chi-sono/
Description: Tema custom per ipergiux.it — progettazione museale, museologia, accessibilità culturale.
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: ipergiux
*/

/* Rimuove il bordo/outline di default del browser al click su qualunque
   link del sito (non solo header/logo, già gestiti a parte più sotto). */
a:focus,
a:focus-visible,
a:active {
	outline: none;
	box-shadow: none;
}

/* Header navigation: hover/focus/transition — CSS diretto perché a parità di
   specificità con la regola globale ":root a:hover" nel theme.json, l'ordine
   nel foglio di stile decide, e in pratica vinceva quella globale. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item a {
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item a:focus,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Logo: dimensione forzata esplicitamente perché il logo SVG non ha
   width/height sul tag radice (solo viewBox) — WordPress non riesce a
   determinarne le dimensioni intrinseche e il blocco site-logo non applica
   la larghezza impostata nell'editor, risultando in un'immagine 0x0. */
.wp-block-site-logo img,
.custom-logo {
	width: 180px;
	height: auto;
}

/* Logo: leggero ingrandimento al passaggio del mouse / click */
.wp-block-site-logo img {
	transition: transform 0.2s ease;
	transform-origin: center left;
}

.wp-block-site-logo:hover img,
.wp-block-site-logo a:active img {
	transform: scale(1.08);
}

.wp-block-site-logo a:focus,
.wp-block-site-logo a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Menu mobile: il blocco Navigazione riusa la stessa struttura/markup del
   menu desktop (stesso DOM, non un duplicato) anche nel pannello a schermo
   intero che si apre sotto i 600px — quindi ogni override va chiuso dentro
   lo stesso breakpoint di WordPress (600px), altrimenti "perde" anche sul
   desktop. Colore uniforme anche per la voce della pagina corrente, che
   altrimenti eredita l'accento teal da un'altra regola non individuata. */
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation-item a:visited {
	color: #F2F2EF !important;
}

/* Va DOPO la regola di colore base sopra: a parità di !important, in
   questo cascade vince l'ordine nel file (verificato empiricamente con
   hover reale + polling di getComputedStyle — per pura specificità questa
   regola dovrebbe già vincere da sola, ma in pratica no). */
.wp-block-navigation .wp-block-navigation-item a:where(:not(.wp-element-button)):hover,
.wp-block-navigation .wp-block-navigation-item a:where(:not(.wp-element-button)):focus {
	color: #00ACBF !important;
	text-decoration: none;
}

@media (max-width: 599px) {
	.wp-block-navigation__responsive-dialog {
		background-color: #080808;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wp-block-navigation__responsive-dialog .wp-block-navigation__container {
		align-items: center;
		justify-content: center;
		gap: 28px;
		width: 100%;
	}

	.wp-block-navigation__responsive-dialog .wp-block-navigation-item {
		text-align: center;
		width: 100%;
		border: none !important;
	}

	.wp-block-navigation__responsive-dialog .wp-block-navigation-item a,
	.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
		font-size: 24px !important;
		padding: 10px 0 !important;
		display: block;
		width: 100%;
		text-align: center;
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
	}
}

/* Hero: la foto (larghezza fissa 420px nel blocco) deve restare dentro lo
   schermo su viewport stretti, dove flex-wrap la porta comunque a capo. */
.home-hero-photo,
.home-hero-photo img {
	max-width: 100%;
	height: auto;
}

/* Hero: eyebrow e divider, ispirati alla sezione "About Monty" di
   marcomontemagno.com (font-size/letter-spacing/dimensioni ricalcati
   dagli stili calcolati reali del sito di riferimento). */
.home-hero-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3.3px;
	color: #00ACBF;
	margin: 0;
}

.home-hero-divider.wp-block-separator {
	width: 40px;
	height: 3px;
	border: none;
	background-color: #00ACBF;
	opacity: 1;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Mosaico ultimi post: griglia asimmetrica stile Local Projects, in CSS
   puro — un pattern fisso (nessun masonry JS). Tre tipi di tile speciale
   (grande, alta, larga) sparsi nella griglia per tenere l'irregolarità
   anche con più di 6 post. */
.home-post-mosaic .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 220px;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-post-mosaic .wp-block-post-template > li:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.home-post-mosaic .wp-block-post-template > li:nth-child(4) {
	grid-row: span 2;
}

.home-post-mosaic .wp-block-post-template > li:nth-child(7) {
	grid-column: span 2;
}

.home-post-mosaic .wp-block-post-template > li {
	position: relative;
	overflow: hidden;
}

.home-post-mosaic .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.home-post-mosaic .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* Hover tile: zoom leggero sulla foto + overlay teal sottile, coerente col
   colore d'accento usato per hover ovunque nel sito. */
.home-post-mosaic .wp-block-post-template > li::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 172, 191, 0.18);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.home-post-mosaic .wp-block-post-template > li:hover::after {
	opacity: 1;
}

.home-post-mosaic .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

.home-post-mosaic .wp-block-post-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 16px;
	background: linear-gradient(to top, rgba(8,8,8,0.85), transparent);
	z-index: 1;
}

.home-post-mosaic .wp-block-post-title a {
	color: #F2F2EF;
	text-decoration: none;
	transition: color 0.2s ease;
}

.home-post-mosaic .wp-block-post-template > li:hover .wp-block-post-title a {
	color: #00ACBF;
}

/* Sotto i 700px la griglia asimmetrica a 3 colonne non ha spazio per
   respirare: collassa a una colonna singola, tutti gli span resettati. */
@media (max-width: 700px) {
	.home-post-mosaic .wp-block-post-template {
		grid-template-columns: 1fr;
		grid-auto-rows: 260px;
	}

	.home-post-mosaic .wp-block-post-template > li:nth-child(1),
	.home-post-mosaic .wp-block-post-template > li:nth-child(4),
	.home-post-mosaic .wp-block-post-template > li:nth-child(7) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Filmstrip foto scorrevoli: marquee infinito in CSS puro, nessun JS.
   Il set di immagini è duplicato 2 volte nel markup; l'animazione trasla
   da 0 a -50% per un loop senza scatti visibili. */
.home-filmstrip {
	overflow: hidden;
	background-color: #1E1E1E;
}

.home-filmstrip-track {
	display: flex;
	width: max-content;
	animation: home-filmstrip-scroll 30s linear infinite;
}

.home-filmstrip-track img {
	height: 200px;
	width: auto;
	flex-shrink: 0;
	margin-right: 4px;
	object-fit: cover;
}

@keyframes home-filmstrip-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-filmstrip-track {
		animation: none;
	}
}