/*
Theme Name: San Filippo Neri Nembro
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: Francesco Pozzoni e Michele Mariani
Description: Child theme di Twenty Twenty-One condiviso dai siti dell'Oratorio e del CineTeatro San Filippo Neri di Nembro. Nome nel footer e link social si impostano dal Customizer (sezione "San Filippo Neri"); la homepage si compone con il blocco "Slider a schede".
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.13.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanfilipponeri
*/

/* Font personalizzati */
@font-face {
	font-family: "Galano";
	font-style: normal;
	src: url("./fonts/GalanoGrotesque-Regular.otf");
}

@font-face {
	font-family: "Galano";
	font-style: italic;
	src: url("./fonts/GalanoGrotesque-Italic.otf");
}

@font-face {
	font-family: "GalanoB";
	font-style: normal;
	src: url("./fonts/GalanoGrotesque-SemiBold.otf");
}

/* Override delle variabili di Twenty Twenty-One */
:root {
	--global--font-primary: var(--font-headings, GalanoB);
	--global--font-secondary: var(--font-base, Galano);

	/*
	 * Testo e titoli: scala unica pensata per la leggibilità.
	 * Testo base 18px, interlinea ampia, titoli fluidi (clamp) tra mobile e desktop.
	 */
	--global--font-size-base: 1.125rem;
	--global--font-size-xs: 0.9375rem;
	--global--font-size-sm: 1rem;
	--global--font-size-md: 1.125rem;
	--global--font-size-lg: 1.375rem;
	--global--font-size-xl: 1.75rem;
	--global--font-size-xxl: 2rem;
	--global--font-size-page-title: clamp(2rem, 1.4rem + 2.5vw, 3rem);
	--global--line-height-body: 1.65;
	--global--line-height-heading: 1.25;
	--global--line-height-page-title: 1.15;

	--heading--font-size-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--heading--font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--heading--font-size-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--heading--font-size-h4: 1.25rem;
	--heading--font-size-h5: 1.125rem;
	--heading--font-size-h6: 1rem;
	--heading--font-weight-page-title: 100;

	/* Larghezza massima dei testi (circa 70 caratteri per riga) */
	--sfn-prose-width: 46rem;

	/*
	 * Larghezza massima delle parti da bordo a bordo (slider, fasce dei titoli,
	 * barra social del footer) sugli schermi molto larghi.
	 */
	--sfn-max-width: 90rem;

	/* Spazio sopra e sotto la fascia del titolo */
	--sfn-band-padding: clamp(2rem, 1rem + 4vw, 4rem);

	/* Bottoni e campi */
	--sfn-control-font-size: 1.0625rem;
	--sfn-control-padding: 0.75em 1.6em;

	/*
	 * Stesse misure anche per i pulsanti che Twenty Twenty-One stila con
	 * selettori più specifici (blocco File, blocco Ricerca, ecc.).
	 */
	--button--font-size: var(--sfn-control-font-size);
	--button--font-weight: bold;
	--button--line-height: 1.3;
	--button--padding-vertical: 0.75em;
	--button--padding-horizontal: 1.6em;
	--button--border-radius: 999px;

	--global--color-blue: #004077;
	--global--color-primary: var(--global--color-blue);
	--global--color-background: var(--global--color-white);

	/*
	 * Colori dei testi sullo sfondo della pagina (usati da assets/css/custom.css).
	 * In modalità scura li ridefinisce assets/css/dark-mode.css.
	 */
	--sfn-color-text: #004077;
	--sfn-color-link: #004077;
	--sfn-color-accent: #e42313;
	--sfn-color-border: #004077;
	--sfn-color-border-soft: rgba(0, 64, 119, 0.15);
	--sfn-surface: #fff;
	--sfn-shadow: 0 8px 24px rgba(0, 32, 64, 0.16);
	--sfn-chip-bg: rgba(0, 64, 119, 0.08);
	--sfn-card-bg: #f2f6fa;

	/* Bottoni (stile del pulsante "Cerca") */
	--sfn-button-bg: #004077;
	--sfn-button-text: #fff;
	--sfn-button-border: #004077;
	--sfn-button-bg-hover: #fff;
	--sfn-button-text-hover: #004077;
	--sfn-button-border-hover: #004077;

	--branding--logo--max-width: 230px;
	--branding--logo--max-height: 100px;
	--branding--logo--max-width-mobile: 150px;
	--branding--logo--max-height-mobile: 100px;
}

/*
 * Tablet e telefono: testo e controlli un po' più piccoli e compatti.
 */
@media only screen and (max-width: 1023.98px) {

	:root {
		--global--font-size-base: 1.0625rem;
		--global--font-size-md: 1.0625rem;
		--global--line-height-body: 1.6;
		--global--font-size-page-title: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
		--sfn-control-font-size: 1rem;
		--sfn-band-padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
	}
}

@media only screen and (max-width: 481.98px) {

	:root {
		--global--font-size-base: 1rem;
		--global--font-size-xs: 0.875rem;
		--global--font-size-sm: 0.9375rem;
		--global--font-size-md: 1rem;
		--heading--font-size-h1: 1.625rem;
		--heading--font-size-h2: 1.375rem;
		--heading--font-size-h3: 1.1875rem;
		--heading--font-size-h4: 1.0625rem;
		--sfn-control-font-size: 0.9375rem;
		--sfn-control-padding: 0.65em 1.4em;
	}
}

/*
 * Link: sottolineatura continua anche in hover e focus.
 * Twenty Twenty-One la rende puntinata; qui si ripetono i suoi selettori
 * così da sovrascriverli tutti a parità di specificità.
 */
a:hover,
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus,
.primary-navigation a:hover,
.primary-navigation .current-menu-item > a:first-child:hover,
.primary-navigation .current_page_item > a:first-child:hover,
.footer-navigation-wrapper li a:hover,
.navigation a:hover,
.pagination .nav-links > *:not(.dots):not(.current):hover,
.comments-pagination .nav-links > *:not(.dots):not(.current):hover,
.widget a:hover {
	text-decoration-style: solid;
}

/*
 * Ricerca nel menu principale (aggiunta da sanfilipponeri_menu_search()).
 * Da 482px in su è una lente compatta accanto all'ultima voce: cliccandola
 * il campo si apre verso sinistra sopra il menu, senza spostare le voci.
 * Sotto i 482px sta dentro il menu aperto, a tutta larghezza.
 */
.sfn-menu-search__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.primary-navigation .sfn-menu-search input.sfn-menu-search__field,
.primary-navigation .sfn-menu-search input.sfn-menu-search__field:focus {
	width: 100%;
	margin: 0;
	padding: 0.45em 2.75em 0.45em 1.1em;
	font-size: var(--global--font-size-sm);
	line-height: 1.3;
	color: var(--sfn-color-text);
	background: var(--sfn-surface);
	border: 1px solid var(--sfn-color-border-soft);
	border-radius: 999px;
}

.primary-navigation .sfn-menu-search input.sfn-menu-search__field:focus {
	border-color: var(--sfn-color-border);
}

.sfn-menu-search__field::placeholder {
	color: var(--sfn-color-text);
	opacity: 0.6;
}

.primary-navigation .sfn-menu-search .sfn-menu-search__button {
	position: absolute;
	right: 0.3em;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--sfn-button-bg) !important;
	color: var(--sfn-button-text) !important;
	cursor: pointer;
}

.primary-navigation .sfn-menu-search .sfn-menu-search__button:hover,
.primary-navigation .sfn-menu-search .sfn-menu-search__button:focus {
	background: var(--sfn-color-accent) !important;
	color: #fff !important;
}

@media only screen and (min-width: 482px) {

	.primary-navigation .sfn-menu-search {
		position: relative;
		display: flex;
		align-items: center;
		font-size: var(--global--font-size-sm);
	}

	.primary-navigation .sfn-menu-search .sfn-menu-search__form {
		position: static;
		width: auto;
	}

	/*
	 * Chiusa: solo la lente, senza cerchio, alta e distanziata come le altre
	 * voci del menu (il campo è nascosto ma raggiungibile da tastiera).
	 */
	.primary-navigation .sfn-menu-search .sfn-menu-search__button {
		position: static;
		transform: none;
		width: auto;
		height: auto;
		padding: var(--primary-nav--padding) !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--sfn-color-link) !important;
	}

	.primary-navigation .sfn-menu-search .sfn-menu-search__button svg {
		width: 1.2em;
		height: 1.2em;
	}

	.primary-navigation .sfn-menu-search .sfn-menu-search__button:hover,
	.primary-navigation .sfn-menu-search .sfn-menu-search__button:focus,
	.primary-navigation .sfn-menu-search:focus-within .sfn-menu-search__button {
		background: transparent !important;
		color: var(--sfn-color-accent) !important;
	}

	.primary-navigation .sfn-menu-search .sfn-menu-search__button:focus-visible {
		outline: 2px solid var(--sfn-color-accent);
		outline-offset: -2px;
	}

	.primary-navigation .sfn-menu-search:not(:focus-within) input.sfn-menu-search__field {
		position: absolute;
		width: 1px !important;
		height: 1px;
		padding: 0 !important;
		border: 0 !important;
		opacity: 0;
		pointer-events: none;
	}

	/*
	 * Aperta: il campo compare sotto la lente, come un sottomenu,
	 * così non copre le voci del menu.
	 */
	.primary-navigation .sfn-menu-search:focus-within input.sfn-menu-search__field {
		position: absolute;
		top: calc(100% - 0.25rem);
		right: 0;
		width: min(18rem, 80vw) !important;
		/* il tema padre limita i campi alla larghezza del contenitore (la lente) */
		max-width: none !important;
		padding: 0.6em 1.1em !important;
		background: var(--sfn-surface) !important;
		border: 1px solid var(--sfn-color-border) !important;
		box-shadow: var(--sfn-shadow);
		z-index: 88889;
	}
}

/* Mobile: dentro il menu aperto, a tutta larghezza */
@media only screen and (max-width: 481.98px) {

	.primary-navigation .sfn-menu-search {
		margin: var(--global--spacing-vertical) 0 0;
		padding: 0 var(--global--spacing-horizontal);
	}

	.primary-navigation .sfn-menu-search input.sfn-menu-search__field,
	.primary-navigation .sfn-menu-search input.sfn-menu-search__field:focus {
		font-size: var(--global--font-size-md);
		padding-top: 0.6em;
		padding-bottom: 0.6em;
	}
}

/*
 * Tablet e finestre strette (482–1023px): il campo di ricerca aperto si
 * posiziona rispetto all'intero menu, più largo e centrato sotto le voci.
 */
@media only screen and (min-width: 482px) and (max-width: 1023.98px) {

	.primary-navigation > div > .menu-wrapper > li.sfn-menu-search {
		position: static;
	}

	.primary-navigation .sfn-menu-search:focus-within input.sfn-menu-search__field {
		top: calc(100% - 0.25rem);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(32rem, calc(100vw - 2 * var(--global--spacing-horizontal))) !important;
	}
}

/*
 * Tablet e finestre strette (482–1023px): se logo e menu non stanno su una
 * riga, il logo va sopra e le voci del menu si centrano.
 */
@media only screen and (min-width: 482px) and (max-width: 1023.98px) {

	.site-header {
		justify-content: center;
	}

	.site-header .site-branding,
	.site-header .site-logo {
		flex-basis: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.primary-navigation {
		margin-left: auto;
		margin-right: auto;
	}

	.primary-navigation > div > .menu-wrapper {
		justify-content: center;
		align-items: center;
	}
}

/* Logo: niente contorno puntinato al clic, solo un anello visibile da tastiera */
.site .custom-logo-link:focus,
.site .custom-logo-link:focus img,
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link img {
	outline: none;
	background: none;
}

.site .custom-logo-link:focus-visible {
	outline: 2px solid var(--sfn-color-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

/*
 * Link cliccati: niente fondo bianco/nero e niente contorno puntinato attorno
 * alle immagini dentro i link (icone social, immagini cliccabili), che
 * Twenty Twenty-One mostra anche al clic del mouse. Da tastiera resta un
 * anello continuo.
 */
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	background: none;
}

.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	color: inherit;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button):not(:focus-visible) img {
	outline: none;
}

.site a:focus-visible:not(.wp-block-button__link):not(.wp-block-file__button) img {
	outline: 2px solid var(--sfn-color-accent);
	outline-offset: 3px;
}

#my-footer a:focus-visible img {
	outline-color: #fff;
	border-radius: 50%;
}

/* Widget del footer: tante colonne quanti sono i widget mostrati (max 3) */
@media only screen and (min-width: 652px) {

	.widget-area {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}
}

/*
 * Risultati di ricerca: elenco di schede compatte.
 */
.search .search-result-count {
	max-width: min(calc(var(--sfn-prose-width) + 3rem), var(--responsive--alignwide-width));
	margin: 0 auto 1.5rem;
	font-size: var(--global--font-size-sm);
	opacity: 0.85;
}

.search .site-main > article {
	max-width: min(calc(var(--sfn-prose-width) + 3rem), var(--responsive--alignwide-width));
	margin: 0 auto 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--sfn-card-bg);
	border-radius: 14px;
	display: flow-root;
}

.search .site-main > article > *,
.search .site-main > article .entry-title {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.search .site-main > article .entry-header {
	margin: 0;
	padding: 0;
	border: 0;
}

.search .site-main > article .entry-title {
	margin: 0;
	font-size: var(--heading--font-size-h3);
	line-height: var(--global--line-height-heading);
}

.search .site-main > article .entry-title a {
	text-decoration: none;
}

.search .site-main > article .entry-title a:hover,
.search .site-main > article .entry-title a:focus {
	text-decoration: underline;
}

.search .site-main > article .post-thumbnail {
	float: right;
	width: 6rem;
	margin: 0 0 0.5rem 1rem;
}

.search .site-main > article .post-thumbnail img {
	width: 6rem;
	height: 6rem;
	margin: 0;
	padding: 0;
	object-fit: cover;
	border-radius: 10px;
}

.search .site-main > article .post-thumbnail figcaption {
	display: none;
}

.search .site-main > article > .entry-content {
	margin-top: 0.5rem;
	font-size: var(--global--font-size-sm);
}

.search .site-main > article > .entry-content p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search .site-main > article > .entry-content:empty,
.search .site-main > article > .entry-content p:empty {
	display: none;
}

.search .site-main > article > .entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	font-size: var(--global--font-size-xs);
	opacity: 0.85;
}

.search .site-main > article > .entry-footer:empty {
	display: none;
}

.search .site-main > article > .entry-footer > * {
	margin: 0;
}

.search .pagination {
	max-width: min(calc(var(--sfn-prose-width) + 3rem), var(--responsive--alignwide-width));
	border-top: 1px solid var(--sfn-color-border-soft);
	margin-top: 2rem;
}

/*
 * Footer sempre in fondo: sulle pagine brevi l'area dei contenuti si allunga
 * fino a spingere il footer al bordo inferiore dello schermo.
 */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--global--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--global--admin-bar--height, 0px));
}

/* In una colonna flex i blocchi con margini automatici non si allargano da soli */
#page.site > :not(.skip-link) {
	width: 100%;
}

#page.site > .site-content {
	flex: 1 0 auto;
}

/*
 * Immagini ingrandibili (lightbox di WordPress): fondo e pulsanti con i
 * colori del tema, anche in modalità scura (WordPress usa bianco e nero fissi).
 */
.wp-lightbox-overlay .scrim {
	background-color: var(--global--color-background) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	fill: var(--sfn-color-text) !important;
	color: var(--sfn-color-text);
}

.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover {
	fill: var(--sfn-color-accent) !important;
}

/* Il pulsante "ingrandisci" sull'immagine: tondo, con i colori del tema */
.wp-lightbox-container button.lightbox-trigger {
	background-color: var(--sfn-button-bg) !important;
	color: var(--sfn-button-text) !important;
	border-radius: 50% !important;
}

/* l'icona di WordPress ha il bianco fisso: segue il colore del pulsante */
.wp-lightbox-container button.lightbox-trigger svg path {
	fill: currentColor;
}

/*
 * Telefono, tablet e schermi touch: niente apertura a schermo intero al tocco
 * (l'immagine non è cliccabile e il pulsante "ingrandisci" è nascosto).
 */
@media (max-width: 1023.98px), (hover: none) {

	.wp-lightbox-container img {
		pointer-events: none;
		cursor: auto;
	}

	.wp-lightbox-container button.lightbox-trigger {
		display: none !important;
	}
}

/* Footer */
.site-footer {
	max-width: 100%;
}

#my-footer {
	height: 100px;
	width: 100%;
	background-color: #004077;
	position: relative;
	display: block;
}

#my-footer-img {
	height: 100px;
	position: absolute;
	right: 0;
	display: inline;
}

#my-footer-img-mobile {
	height: 100px;
	position: absolute;
	right: 0;
	display: none;
}

#my-footer a {
	text-decoration: none;
}

.my-footer-links {
	cursor: pointer;
	position: relative;
	left: 30px;
	top: 25px;
	height: 50px;
	padding-left: 30px;
	display: inline;
}

/* scritta in grigio a fondo pagina */
#footer-info {
	width: 100%;
	text-align: center;
	font-size: 0.9rem;
	color: #aaa;
	position: relative;
	top: 0;
	margin: 0;
	display: block;
}

#footer-info a {
	color: #aaa;
}

#footer-info .easteregg-link {
	text-decoration: none;
}

/*
 * Schermi molto larghi: la barra prosegue fino ai bordi (blu a sinistra,
 * rossa a destra) ma icone e grafica restano entro --sfn-max-width.
 */
@media only screen and (min-width: 1024px) {

	#my-footer {
		--sfn-bleed: max(0px, calc((100% - var(--sfn-max-width)) / 2));
		padding-left: var(--sfn-bleed);
		padding-right: var(--sfn-bleed);
		box-sizing: border-box;
		background: linear-gradient(to right, #004077 calc(100% - var(--sfn-bleed) - 1px), #e42313 0);
	}

	#my-footer-img {
		right: var(--sfn-bleed);
	}
}

/*
 * Mobile e tablet: barra dei social più bassa (60px), icone centrate e più
 * vicina alla riga del copyright sottostante.
 */
@media only screen and (max-width: 1023.98px) {

	#footer-info {
		padding-top: 0.4rem;
	}

	#my-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.25rem;
		height: 60px;
	}

	#my-footer-img {
		display: none;
	}

	#my-footer-img-mobile {
		height: 60px;
		position: absolute;
		left: 0;
		top: 0;
		display: inline;
		z-index: 0;
	}

	#my-footer a {
		position: relative;
		z-index: 1;
		display: flex;
	}

	.my-footer-links {
		position: static;
		left: auto;
		top: auto;
		height: 32px;
		padding: 0;
		transform: none;
	}
}

@media only screen and (max-width: 660px) {

	#footer-info {
		font-size: 0.8rem;
	}
}