/*
Theme Name:        Marina Serpagli
Theme URI:         https://marinaserpagli.it
Description:       Child theme di Twenty Twenty-Five per il sito di Marina Serpagli.
Author:            Luca Maggio
Author URI:        https://lucamaggio.it
Template:          twentytwentyfive
Version:           1.0.0
Requires at least: 6.7
Tested up to:      7.0
Requires PHP:      8.3
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       marinaserpagli
Tags:              block-patterns, full-site-editing, blog, portfolio
*/

/*
 * Colori, tipografia, spaziature e stili dei blocchi stanno in theme.json.
 * Qui c'è solo ciò che theme.json non sa esprimere: gli stati del focus e della
 * navigazione (che dipendono da .current-menu-item) e le tre varianti di blocco
 * registrate in functions.php.
 */

/* --------------------------------------------------------------------------
   Focus
   Twenty Twenty-Five disegna il contorno su `:focus` e non su `:focus-visible`
   (`:where(.wp-site-blocks *:focus)` nel suo style.css): il riquadro compare
   anche a un semplice click del mouse. Qui si spegne solo in quel caso — con
   `:focus-visible`, cioè da tastiera, resta e serve a orientarsi.
   Il selettore non ha bisogno di `!important`: `:where()` azzera la specificità
   della regola del padre.
   -------------------------------------------------------------------------- */

.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Header bianco, sticky, che si riduce allo scroll
   Il padding e la dimensione del logo stanno qui e non fra gli attributi del
   blocco: uno stile inline vincerebbe sulla classe .is-scrolled aggiunta da
   assets/js/header.js.
   -------------------------------------------------------------------------- */

/* WordPress avvolge la parte di template in un <header class="wp-block-template-part">
   alto quanto il suo contenuto: dentro quel contenitore `position: sticky` non ha
   spazio in cui scorrere e l'header se ne andrebbe via con la pagina. Con
   `display: contents` il contenitore sparisce dal layout e l'header diventa figlio
   diretto di .wp-site-blocks, che è alto quanto la pagina. */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}

:root {
	/* Altezza dell'header a riposo (logo da 64px più il padding e il bordo).
	   Serve all'hero della home, che si sottrae questa fascia dalla viewport. */
	--ms-header-height: 94px;
}

.ms-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Diventando figlio di .wp-site-blocks eredita il margine che il core mette
	   fra i blocchi di primo livello: va tolto, o stacca dal bordo alto. */
	margin-block-start: 0;
	padding: 1rem var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* Da 783px in su la barra di amministrazione è fissa in cima e va scavalcata. */
@media (min-width: 783px) {
	.admin-bar .ms-header {
		top: 32px;
	}
}

.ms-header .wp-block-site-logo img {
	display: block;
	width: 64px;
	height: auto;
	transition: width 0.25s ease;
}

.ms-header.is-scrolled {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.09);
}

.ms-header.is-scrolled .wp-block-site-logo img {
	width: 42px;
}

/* Chi ha chiesto meno animazioni non deve subire la transizione. */
@media (prefers-reduced-motion: reduce) {
	.ms-header,
	.ms-header .wp-block-site-logo img,
	.ms-nav .wp-block-navigation-item__content,
	.ms-nav .wp-block-navigation-item__content::after,
	.ms-nav .wp-block-pages-list__item__link,
	.ms-nav .wp-block-pages-list__item__link::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Navigazione
   Voci a destra nell'header bianco: nessun fondo colorato in nessuno stato, la
   voce corrente si riconosce dall'oro scuro e da una linea sottile sotto il
   testo. Lo stato attivo passa da .current-menu-item, fuori dalla portata di
   theme.json.
   -------------------------------------------------------------------------- */

.ms-nav .wp-block-navigation-item__content,
.ms-nav .wp-block-pages-list__item__link {
	display: block;
	/* `relative` fa da riferimento alla linea in ::after qui sotto. */
	position: relative;
	padding: 0.5rem 0.7rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.15s ease;
}

/* La sottolineatura è un ::after in `absolute` invece che un border: fuori dal
   flusso non cambia la larghezza della voce, così hover e cambio pagina non
   fanno mai ballare il menu. A riposo è schiacciata a zero. */
.ms-nav .wp-block-navigation-item__content::after,
.ms-nav .wp-block-pages-list__item__link::after {
	content: "";
	position: absolute;
	/* Allineata al testo, non al padding. */
	right: 0.7rem;
	bottom: 0.15rem;
	left: 0.7rem;
	height: 2px;
	background-color: var(--wp--preset--color--accent-3);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.18s ease;
}

.ms-nav .wp-block-navigation-item__content:hover,
.ms-nav .wp-block-navigation-item__content:focus-visible,
.ms-nav .wp-block-pages-list__item__link:hover,
.ms-nav .wp-block-pages-list__item__link:focus-visible {
	color: var(--wp--preset--color--accent-3);
}

.ms-nav .wp-block-navigation-item__content:hover::after,
.ms-nav .wp-block-navigation-item__content:focus-visible::after,
.ms-nav .wp-block-pages-list__item__link:hover::after,
.ms-nav .wp-block-pages-list__item__link:focus-visible::after {
	transform: scaleX(1);
}

/* Senza più il fondo colorato, il focus da tastiera resterebbe invisibile. */
.ms-nav .wp-block-navigation-item__content:focus-visible,
.ms-nav .wp-block-pages-list__item__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/* Voce corrente: solo colore e linea già aperta. Niente `font-weight` più alto,
   che allargherebbe la voce a ogni cambio pagina. */
.ms-nav .current-menu-item > .wp-block-navigation-item__content,
.ms-nav .current_page_item > .wp-block-navigation-item__content,
.ms-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.ms-nav .current-menu-item > .wp-block-pages-list__item__link,
.ms-nav .current_page_item > .wp-block-pages-list__item__link {
	color: var(--wp--preset--color--accent-3);
}

.ms-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ms-nav .current_page_item > .wp-block-navigation-item__content::after,
.ms-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.ms-nav .current-menu-item > .wp-block-pages-list__item__link::after,
.ms-nav .current_page_item > .wp-block-pages-list__item__link::after {
	transform: scaleX(1);
}

/* L'overlay mobile ha fondo proprio: le voci tornano testo semplice. In una
   lista verticale la linea sotto la voce si leggerebbe come un separatore, così
   lì resta solo il colore a marcare la pagina corrente. */
.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.ms-nav .wp-block-navigation__responsive-container.is-menu-open .current_page_item > .wp-block-navigation-item__content,
.ms-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-3);
}

.ms-nav .wp-block-navigation__responsive-container-open,
.ms-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   Social nell'header e nel footer
   -------------------------------------------------------------------------- */

/* Logo e icone stanno in un gruppo loro: senza, il `space-between` dell'header
   li manderebbe ai due lati opposti invece di tenerli vicini. */
.ms-header__brand {
	align-items: center;
}

/* Il logo non si lascia stringere: in un header affollato il flex lo
   comprimerebbe per far posto alle icone, e la firma diventa illeggibile. */
.ms-header__brand .wp-block-site-logo {
	flex-shrink: 0;
}

/* Le tre icone restano su una riga sola: il core mette `flex-wrap: wrap` su
   ogni `.is-layout-flex`, e in un header stretto si spezzavano su due righe
   alzando la barra.
   `font-size` è la misura delle icone: il core dimensiona il glifo in `em`
   (1.25em con `is-style-logos-only`), quindi 22px qui danno un segno da 27,5px.
   Il `margin-left` scavalca lo `0` che il core mette su .wp-block-social-links:
   il selettore a due classi basta, senza `!important`. */
.ms-header .ms-header-social {
	flex-wrap: nowrap;
	font-size: 22px;
	margin-left: 22px;
}

/* Sotto i 600px le icone spariscono. La soglia non è scelta a occhio: è quella
   a cui il blocco Navigazione passa all'overlay (`overlayMenu: "mobile"`), così
   l'header torna a logo più hamburger senza affollarsi.
   Il selettore parte da `.ms-header` di proposito: il core stampa
   `body .is-layout-flex { display: flex }`, che a classe singola vincerebbe. */
@media (max-width: 599px) {
	.ms-header .ms-header-social {
		display: none;
	}
}

/* Le icone si comportano come le voci del menu: grigio a riposo, oro sotto il
   puntatore o il focus da tastiera.
   L'hover va messo sul `fill` dell'SVG e non sul `color`: il blocco social
   scrive il colore come stile inline sul <li>, e nessuna regola di foglio lo
   scavalcherebbe senza `!important`. Il `fill` sta su un altro elemento e su
   un'altra proprietà, quindi passa pulito. */
.ms-header .ms-header-social .wp-social-link svg {
	transition: fill 0.15s ease;
}

.ms-header .ms-header-social .wp-social-link:hover svg,
.ms-header .ms-header-social .wp-social-link:focus-within svg {
	fill: var(--wp--preset--color--accent-3);
}

@media (prefers-reduced-motion: reduce) {
	.ms-header .ms-header-social .wp-social-link svg {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Selettore della lingua (WP Multilang, in parts/header.html)
   Solo bandiere, subito a destra del menu. La lingua corrente è piena, l'altra
   attenuata: si capisce dove si è e dove si può andare senza scritte.
   -------------------------------------------------------------------------- */

.ms-header__nav {
	align-items: center;
}

/* Il blocco Shortcode avvolge l'uscita in un paragrafo vuoto e in un <br>. */
.ms-header__nav > p:empty,
.ms-header__nav > br {
	display: none;
}

.ms-header .wpm-language-switcher {
	display: flex;
	flex-shrink: 0;
	gap: 0.6rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-header .wpm-language-switcher li {
	margin: 0;
	line-height: 0;
}

.ms-header .wpm-language-switcher a,
.ms-header .wpm-language-switcher li > span {
	display: block;
	padding: 2px;
}

.ms-header .wpm-language-switcher img {
	display: block;
	width: 22px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-6);
}

.ms-header .wpm-language-switcher a img {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.ms-header .wpm-language-switcher a:hover img,
.ms-header .wpm-language-switcher a:focus-visible img {
	opacity: 1;
}

.ms-header .wpm-language-switcher a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ms-header .wpm-language-switcher a img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Varianti di blocco (registrate in functions.php)
   -------------------------------------------------------------------------- */

/* Scheda: il contenitore bianco squadrato su cui poggia il contenuto */
.wp-block-group.is-style-scheda {
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Separatore tratteggiato.
   Il selettore parte da `hr` di proposito: gli stili globali generati da
   theme.json prendono il colore del bordo da `currentColor` con un `border-style`
   solido, e a parità di specificità vincerebbero. L'elemento dà il punto in più.
   Nota: al blocco va dato solo il colore del testo, mai un colore di sfondo —
   le classi `has-*-background-color` di WordPress sono `!important` e
   dipingerebbero una banda continua sotto il tratteggio. */
hr.wp-block-separator.is-style-tratteggiato {
	height: 0;
	border: none;
	border-top: 1px dashed currentColor;
	border-bottom: none;
	background: none;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Rassegna stampa
   L'elenco dei rimandi in fondo alla Biografia. Ogni voce sta su due righe: il
   titolo linkato e, sotto, testata e data. Queste ultime vanno in sordina, così
   l'occhio scorre i titoli e ci torna sopra solo se la fonte gli interessa.
   Niente puntini: le voci sono lunghe e vanno a capo, e il puntino a sinistra
   di un blocchetto di due righe sbilancia la colonna.
   -------------------------------------------------------------------------- */

.wp-block-list.ms-rassegna {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-inline-start: 0;
	list-style: none;
}

.wp-block-list.ms-rassegna li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-list.ms-rassegna em {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Segnaposto dei contenuti
   Riquadri tratteggiati che marcano ciò che la cliente deve ancora fornire.
   Vanno via man mano che i contenuti reali entrano: quando non c'è più nessun
   `.ms-placeholder` nel sito, questo blocco di regole si può eliminare.
   -------------------------------------------------------------------------- */

.ms-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--accent-1);
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent-2);
	text-align: center;
}

.ms-placeholder p {
	margin: 0;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

/* L'hero deve attaccarsi all'header. Il vuoto lo mette il core con
   `.wp-site-blocks > * { margin-block-start: … }`: qui si annulla solo in home,
   perché le altre pagine quel respiro sopra la scheda lo vogliono. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

.ms-hero {
	margin-block-start: 0;
}

/* Il testo degli hero poggia direttamente sulla fotografia, senza più il velo
   scuro che prima ne garantiva il contrasto: l'ombra è quel che lo tiene
   leggibile anche dove l'immagine si schiarisce. Vale per la home e per gli
   hero delle pagine interne, che condividono questa classe. */
.ms-hero :is(h1, h2, h3, p) {
	text-shadow: 1px 1px #666;
}

/* L'hero della home occupa la finestra meno l'header, così si vede subito che
   sotto continua. `dvh` e non `vh`: sui telefoni la barra del browser entra e
   esce, e con `vh` l'hero resterebbe più alto dello schermo utile. La riga in
   `vh` sopra è il ripiego per i browser che non conoscono `dvh`.
   Il selettore comprende `.wp-block-cover` per superare il `min-height: 430px`
   che il core dà a ogni copertina; `.home` lo tiene lontano dagli hero delle
   pagine interne, che hanno la loro altezza.

   Gli `!important` non sono un vezzo: il blocco Copertina scrive la propria
   altezza come stile inline, che batte qualunque regola del foglio di stile, e
   un salvataggio dall'editor la rimette anche quando è stata tolta. Sono
   l'unico modo perché `calc(100dvh - …)` — che il campo «Altezza minima»
   dell'editor non sa esprimere — resista nel tempo. Conseguenza da conoscere:
   per l'hero della home quel campo non ha più effetto, l'altezza si cambia qui. */
.home .wp-block-cover.ms-hero {
	min-height: calc(100vh - var(--ms-header-height)) !important;
	min-height: calc(100dvh - var(--ms-header-height)) !important;
}

/* Stessa storia per l'inquadratura: il punto focale del blocco diventa un
   `object-position` inline, e si azzera ogni volta che si sostituisce la
   fotografia dall'editor. Qui l'immagine resta ancorata in alto a destra
   comunque, anche dopo un cambio di foto. */
.home .ms-hero > img.wp-block-cover__image-background {
	object-position: 100% 0% !important;
}

/* Freccia in fondo all'hero: dice che la pagina continua sotto. È un
   pseudo-elemento e non un blocco perché è un elemento di design, non un
   contenuto: così non compare nell'editor e non si può cancellare per sbaglio.
   Niente testo, quindi gli screen reader la ignorano; `pointer-events: none`
   perché non deve intercettare i click. */
.home .ms-hero::after {
	content: "";
	position: absolute;
	bottom: var(--wp--preset--spacing--40);
	left: 50%;
	width: 16px;
	height: 16px;
	border-right: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: 2px solid rgba(255, 255, 255, 0.85);
	margin-left: -8px;
	transform: rotate(45deg);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

/* Il rimbalzo si aggiunge solo a chi non ha chiesto meno animazioni: la freccia
   resta comunque visibile e leggibile anche da ferma. */
@media (prefers-reduced-motion: no-preference) {
	.home .ms-hero::after {
		animation: ms-scroll-hint 2.4s ease-in-out infinite;
	}

	@keyframes ms-scroll-hint {
		0%, 100% {
			transform: translateY(0) rotate(45deg);
		}

		50% {
			transform: translateY(8px) rotate(45deg);
		}
	}
}

/* Le due call to action dentro l'hero. La prima usa il bottone del tema; la
   seconda porta la classe `ms-cta-ghost` e diventa «fantasma» — trasparente con
   bordo e testo bianchi — così sopra la fotografia non compete con la prima.
   I colori stanno qui e non fra gli attributi del blocco per due motivi: come
   stile del blocco finirebbero inline e vincerebbero anche sull'`:hover`,
   lasciando il bottone immobile al passaggio del mouse; e la variante
   `is-style-outline` del tema padre porterebbe con sé il suo padding, più
   generoso di quello del nostro theme.json, spaiando i due bottoni.
   Misure, forma squadrata e tipografia restano quindi ereditate dal tema. */
.ms-hero .wp-block-button.ms-cta-ghost .wp-block-button__link {
	border-color: #ffffff;
	background-color: transparent;
	color: #ffffff;
}

.ms-hero .wp-block-button.ms-cta-ghost .wp-block-button__link:hover,
.ms-hero .wp-block-button.ms-cta-ghost .wp-block-button__link:focus-visible {
	background-color: #ffffff;
	color: var(--wp--preset--color--accent-3);
}

/* Hero delle pagine interne (la home ha il suo, a tutto schermo): 45vh sui
   telefoni, dove 550px occuperebbero quasi l'intero schermo, e 550px fissi da
   tablet in su. Il selettore include `.wp-block-cover` per superare il
   `min-height: 430px` che il core dà a ogni copertina. */
.wp-block-cover.ms-hero-pagina {
	min-height: 45vh;
}

@media (min-width: 782px) {
	.wp-block-cover.ms-hero-pagina {
		min-height: 550px;
	}
}

/* Le card di "In evidenza" si allineano in altezza e spingono in fondo il link.
   `min-height` e non `height`: con l'altezza fissata al 100% della riga della
   griglia, una card più alta delle altre si vedeva il fondo bianco finire prima
   del suo contenuto. */
.ms-evidenza .wp-block-post-template > li > .wp-block-group {
	display: flex;
	min-height: 100%;
	flex-direction: column;
}

/* Le immagini degli eventi sono locandine: verticali, di formati diversi e in
   bassa risoluzione. Il riquadro 4/3 della card, con lo `scale: cover` di
   default del blocco, ne mostrerebbe solo una fascia centrale. Il blocco è
   quindi impostato su `scale: contain` — la locandina si vede intera — e qui il
   riquadro riceve un fondo grigio che fa da passe-partout alle bande laterali,
   così le card restano tutte della stessa larghezza e altezza. */
.ms-evidenza .wp-block-post-featured-image {
	/* La larghezza esplicita è indispensabile: la card è un contenitore flex in
	   colonna e il riquadro ha un `aspect-ratio`. In quella combinazione il
	   browser non lo allarga fino ai bordi ma ne ricava la larghezza
	   dall'altezza del contenuto, e la locandina sbordava dalla card. */
	width: 100%;
	background-color: var(--wp--preset--color--accent-5);
}

.ms-evidenza .wp-block-post-featured-image img {
	display: block;
}

.ms-evidenza .wp-block-read-more {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* Titolo "firma": script centrato seguito da una linea tratteggiata sottile */
.is-style-firma {
	text-align: center;
}

.is-style-firma::after {
	content: "";
	display: block;
	width: min(220px, 40%);
	margin: 0.6em auto 0;
	border-top: 1px dashed var(--wp--preset--color--accent-1);
}

/* --------------------------------------------------------------------------
   Modulo di contatto (Contact Form 7)
   Il plugin non porta stili propri: senza queste regole i campi restano quelli
   di default del browser e stonano con il resto del sito.
   -------------------------------------------------------------------------- */

.wpcf7 label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	/* Senza box-sizing padding e bordo si sommano al 100% e i campi sfondano la scheda. */
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	border-color: var(--wp--preset--color--accent-3);
	outline: 1px solid var(--wp--preset--color--accent-3);
}

/* Il submit non passa da theme.json: questi valori ricalcano a mano quelli
   dell'elemento `button`, così i due bottoni restano identici. */
.wpcf7 input[type="submit"] {
	padding: 0.6rem 1.6rem;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-3);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0.6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ms-footer {
	color: #c9c9c9;
}

.ms-footer a {
	color: #c9c9c9;
	text-decoration: none;
}

.ms-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* La firma script nel footer è in oro chiaro, che si legge anche sul fondo nero. */
.ms-footer .wp-block-site-title,
.ms-footer .wp-block-site-title a {
	color: var(--wp--preset--color--accent-1);
}

/* --------------------------------------------------------------------------
   Gallerie fotografiche
   Servono a «Il cammino artistico», dove le fotografie arrivano dagli archivi
   della cliente con proporzioni molto diverse fra loro: dal 525x350 quasi
   quadrato al ritratto verticale. Senza un riquadro comune la griglia del core
   verrebbe a scalini, con le righe di altezza diversa. Il ritaglio 4:3 è una
   scelta di regolarità, non di gusto: la fotografia intera si vede aprendola
   nel lightbox.

   I selettori ripetono per intero quelli del blocco Galleria del core
   (`wp-includes/blocks/gallery/style.css`), `figure.wp-block-image` compreso:
   con una scrittura più corta il core vincerebbe per specificità e queste
   regole non si vedrebbero.
   -------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: 4 / 3;
	width: 100%;
	/* `height: 100%` e `flex: 1 0 0%` sono del core e legano l'altezza alla riga
	   di flex: basta una didascalia su due righe per sfalsare le tessere. Con
	   `aspect-ratio` a comandare devono tornare automatici. */
	height: auto;
	flex: 0 0 auto;
	object-fit: cover;
	/* Il baricentro sta sopra la metà: nelle foto di scena il viso è in alto e
	   un ritaglio centrato lo decapiterebbe. */
	object-position: 50% 35%;
}

/* Il core dà `flex-grow: 1` a ogni tessera, così l'ultima riga incompleta si
   allarga a riempire lo spazio: due fotografie rimaste sole diventano grandi il
   doppio delle altre. Con `columns-3` la larghezza deve restare un terzo anche
   lì, e la riga finisce a sinistra come ci si aspetta. */
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

/* Le didascalie del core stanno DENTRO l'immagine: bianche, con ombra, su un
   gradiente scuro disegnato da un `::before` sfocato. Su questo sito — fondo
   bianco, nessuna ombra — sono illeggibili sulle foto chiare e vengono anche
   tagliate quando superano le due righe. Qui tornano sotto la fotografia, come
   la riga di un catalogo: portano ruolo e teatro, vanno lette. */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0 0;
	background: none;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-align: center;
	text-shadow: none;
}

/* Sotto i 600px il core scende a una colonna: con quattordici fotografie la
   sezione diventerebbe un rotolo. Due colonne restano leggibili sul telefono. */
@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
	}
}

/* --------------------------------------------------------------------------
   Finestra «Novità»
   Il markup lo stampa mu-plugins/marinaserpagli-novita.php, l'apertura la
   decide assets/js/novita.js. Il dialog non ha padding di proposito: lo
   script riconosce il clic sul fondo perché cade sul dialog stesso e non su
   un suo figlio.
   -------------------------------------------------------------------------- */

.ms-novita {
	box-sizing: border-box;
	width: min(32rem, calc(100% - 2rem));
	max-height: calc(100% - 2rem);
	overflow-y: auto;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1rem 3rem rgb(20 20 20 / 0.25);
}

.ms-novita::backdrop {
	background-color: rgb(20 20 20 / 0.6);
}

/* Entrata: la finestra sale di poco mentre compare, il fondo si scurisce. */
.ms-novita[open] {
	animation: ms-novita-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ms-novita[open]::backdrop {
	animation: ms-novita-fade 0.6s ease-out;
}

@keyframes ms-novita-in {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ms-novita-fade {
	from {
		opacity: 0;
	}
}

/* Chi ha chiesto meno animazioni vede solo la dissolvenza, senza movimento. */
@media (prefers-reduced-motion: reduce) {
	.ms-novita[open] {
		animation-name: ms-novita-fade;
		animation-duration: 0.2s;
	}
}

.ms-novita__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.85);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
}

.ms-novita__close:hover {
	color: var(--wp--preset--color--accent-3);
}

.ms-novita__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/* Spesso sarà una locandina, verticale: si vede intera, mai ritagliata. */
.ms-novita__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 50vh;
	object-fit: contain;
	background-color: var(--wp--preset--color--accent-2);
}

.ms-novita__body {
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

/* Senza immagine il titolo finirebbe sotto la X. */
.ms-novita__body:first-child {
	padding-top: calc(var(--wp--preset--spacing--50) + 1.5rem);
}

.ms-novita__title {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ms-novita__text > :first-child {
	margin-top: 0;
}

.ms-novita__text > :last-child {
	margin-bottom: 0;
}

.ms-novita__cta {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.ms-novita__cta .wp-element-button {
	display: inline-block;
	text-decoration: none;
}

@media (max-width: 599px) {
	.ms-novita__body {
		padding: var(--wp--preset--spacing--40);
	}

	.ms-novita__body:first-child {
		padding-top: calc(var(--wp--preset--spacing--40) + 1.5rem);
	}
}