/* Design system Sanctorum — vedi DESIGN.md per il razionale di ogni token.
   "L'album di famiglia": rosso porpora come firma puntuale, oro antico come
   richiamo ai bordi dei santini veri, sfondo carta calda. */

:root {
	--rosso-porpora: oklch(0.387 0.073 21);
	--rosso-porpora-profondo: oklch(0.321 0.059 21);
	--oro-antico: oklch(0.68 0.14 85);
	--oro-antico-profondo: oklch(0.58 0.13 82);

	--carta: oklch(0.97 0.012 60);
	--carta-profonda: oklch(0.93 0.015 55);
	--bordo-carta: oklch(0.88 0.015 55);
	--inchiostro: oklch(0.22 0.02 30);
	--inchiostro-tenue: oklch(0.50 0.018 30);

	--ombra-riposo: 0 1px 2px oklch(0.22 0.02 30 / 0.06);
	--ombra-sollevata: 0 8px 24px oklch(0.22 0.02 30 / 0.12);
	--ombra-galleria: 0 2px 8px oklch(0.22 0.02 30 / 0.08), 0 0 0 1px var(--bordo-carta);

	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--durata-rapida: 150ms;
	--durata-comparsa: 600ms;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;

	--z-dropdown: 1000;
}

body {
	font-family: 'Lora', Georgia, serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inchiostro);
	background-color: var(--carta);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Spinge il footer a fondo pagina sulle pagine con poco contenuto: tutto ciò
   che sta fra il menu e il footer (vedi template-menu.php/template-bottom.php)
   occupa lo spazio restante invece di lasciarlo vuoto sotto al footer. */
.corpo-pagina { flex: 1 0 auto; }

.font1, h1, h2, h3, h4, h5, h6, .display, .headline, .navbar-brand, .nav-sanctorum .nav-link {
	font-family: 'Fraunces', Georgia, serif;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.font2 { font-family: 'Lora', Georgia, serif; }

p, .bio { max-width: 70ch; text-wrap: pretty; }

/* Il footer non è prosa lunga: il limite di riga sopra lascia parole orfane
   su una riga propria alla larghezza del blocco centrato. Qui niente cap per
   paragrafo, solo un contenitore dedicato più stretto della pagina intera. */
footer p { max-width: none; }
footer .footer-testo { margin-left: auto; margin-right: auto; }

a { color: var(--rosso-porpora); }
a:hover { color: var(--rosso-porpora-profondo); }

/* Il grigio di default di Bootstrap (.text-secondary) scende sotto 4.5:1 su
   --carta/--carta-profonda: qui usiamo sempre il token di brand, che passa AA. */
.text-secondary { color: var(--inchiostro-tenue) !important; }

::selection { background: var(--oro-antico); color: var(--inchiostro); }

/* Focus visibile ovunque, mai il blu di default del browser. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--oro-antico-profondo);
	outline-offset: 2px;
}


/* ---- Colori di brand (sostituiscono bordò/crema del vecchio sito) -------- */

.bg-bordo, .bg-porpora { background-color: var(--rosso-porpora) !important; }
.text-bordo, .text-porpora { color: var(--rosso-porpora) !important; }
.border-bordo, .border-porpora { border-color: var(--rosso-porpora) !important; }

.btn-bordo, .btn-porpora {
	background-color: var(--rosso-porpora);
	border-color: var(--rosso-porpora);
	color: var(--carta) !important;
	border-radius: var(--radius-sm);
	transition: background-color var(--durata-rapida) var(--ease-out-quart);
}
.btn-bordo:hover, .btn-porpora:hover {
	background-color: var(--rosso-porpora-profondo);
	border-color: var(--rosso-porpora-profondo);
	color: var(--carta) !important;
}

.btn-outline-bordo, .btn-outline-porpora {
	background-color: transparent;
	border-color: var(--rosso-porpora) !important;
	color: var(--rosso-porpora) !important;
	border-radius: var(--radius-sm);
	transition: background-color var(--durata-rapida) var(--ease-out-quart), color var(--durata-rapida) var(--ease-out-quart);
}
.btn-outline-bordo:hover, .btn-outline-porpora:hover {
	background-color: var(--rosso-porpora) !important;
	color: var(--carta) !important;
}

.btn-oro {
	background-color: var(--oro-antico);
	border-color: var(--oro-antico);
	color: var(--inchiostro) !important;
	border-radius: var(--radius-sm);
}
.btn-oro:hover { background-color: var(--oro-antico-profondo); border-color: var(--oro-antico-profondo); }

.bg-col2, .bg-carta { background-color: var(--carta-profonda) !important; }
.text-oro { color: var(--oro-antico) !important; }
.badge-bordo, .bg-porpora.badge { background-color: var(--rosso-porpora) !important; }

.background1 { background-image: url("../media/background1.png"); background-color: var(--rosso-porpora-profondo); }


/* ---- Card santino (componente firma) ------------------------------------- */

.card-santino {
	background-color: var(--carta-profonda);
	border-radius: var(--radius-md);
	padding: 1rem;
	box-shadow: var(--ombra-riposo);
	transition: box-shadow var(--durata-rapida) var(--ease-out-quart), transform var(--durata-rapida) var(--ease-out-quart);
}
.card-santino:hover { box-shadow: var(--ombra-sollevata); transform: translateY(-2px); }

.img-santino {
	border-radius: var(--radius-sm);
	box-shadow: var(--ombra-galleria);
}


/* ---- Preghiera (scheda santo) --------------------------------------------
   Testo devozionale, staccato dalla biografia: riquadro leggermente chiaro,
   riga sul bordo sinistro, corsivo. */

.box-preghiera-titolo {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oro-antico-profondo);
	margin-bottom: 0.5rem;
}

.box-preghiera {
	background-color: var(--carta-profonda);
	border-left: 3px solid var(--oro-antico);
	border-radius: var(--radius-sm);
	padding: 1rem 1.25rem;
	font-style: italic;
	color: var(--inchiostro-tenue);
}


/* ---- Guida notifiche (pagina passo-passo) --------------------------------
   Pensata per chi non ha dimestichezza con lo smartphone: numeri grandi,
   un passo alla volta, niente tab o interazioni nascoste. */

.piattaforma-titolo {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}
.piattaforma-titolo svg { flex: 0 0 auto; color: var(--rosso-porpora); }

.passo {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.passo + .passo { margin-top: 1.1rem; }
.passo-numero {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--rosso-porpora);
	color: var(--carta);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 1.05rem;
}
.passo-testo { padding-top: 0.3rem; }

.riquadro-guida {
	background-color: var(--carta-profonda);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
}



/* ---- Comparsa dei santini al caricamento ---------------------------------
   La classe .loaded viene aggiunta da JS (template-bottom.php) al load
   dell'immagine, anche da cache. --reveal-delay per un lieve scaglionamento. */

.img-fade {
	opacity: 0;
	scale: .97;
	filter: blur(6px);
	transition-property: opacity, scale, filter, translate;
	transition-duration: var(--durata-comparsa), var(--durata-comparsa), var(--durata-comparsa), var(--durata-rapida);
	transition-timing-function: var(--ease-out-quart);
	transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
}
.img-fade:not(.loaded) { will-change: opacity, scale, filter; }
.img-fade.loaded { opacity: 1; scale: 1; filter: none; }

@media (hover: hover) and (pointer: fine) {
	.img-fade.loaded:hover { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
	.img-fade { scale: 1; filter: none; transition: opacity .2s linear; transition-delay: 0ms; }
	.img-fade.loaded:hover { translate: none; }
}


/* ---- Indice per lettera/ordine (catalogo) --------------------------------- */

.indice-lettera {
	width: 2.8rem;
	height: 3.2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}
.indice-lettera .lettera { font-size: 1.1rem; font-weight: bold; }
.indice-lettera .tot { font-size: 0.7rem; }

.table-porpora { background-color: var(--rosso-porpora); color: var(--carta); }
.table-porpora th { border-color: var(--rosso-porpora-profondo); }


/* ---- Selettore mese (calendario) — testo piccolo, mira di tocco >=44px --- */

.nav-mesi .btn {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .4rem;
}


/* ---- Navigazione pubblica -------------------------------------------------- */

.nav-sanctorum {
	background-color: var(--rosso-porpora-profondo);
}
.nav-sanctorum .navbar-brand {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	color: var(--carta);
}
.nav-sanctorum .nav-link {
	color: oklch(0.97 0.012 60 / 0.85);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	white-space: nowrap;   /* "Il progetto" non deve andare a capo quando la barra è stretta */
	transition: color var(--durata-rapida) var(--ease-out-quart), border-color var(--durata-rapida) var(--ease-out-quart);
}
.nav-sanctorum .nav-link:hover { color: var(--carta); }
.nav-sanctorum .nav-link.active { color: var(--carta); border-bottom-color: var(--oro-antico); }


/* ---- Ricerca dinamica ------------------------------------------------------ */

.js-ricerca-input {
	border-radius: var(--radius-sm);
	border-color: var(--bordo-carta);
}
.js-ricerca-input:focus {
	border-color: var(--rosso-porpora);
	box-shadow: 0 0 0 3px oklch(0.387 0.073 21 / 0.15);
}
.js-ricerca-risultati {
	border-radius: var(--radius-sm);
	overflow: hidden;
	z-index: var(--z-dropdown);
	max-height: 320px;
	overflow-y: auto;
	display: none;
}
.js-ricerca-risultati .list-group-item:hover { background-color: var(--carta-profonda); }


/* ---- Carosello "santo del giorno" (home) ---------------------------------- */

.carosello-slide[hidden] {
	/* .row di Bootstrap imposta display:flex: una regola autore batte sempre
	   la [hidden] di default del browser, va forzata esplicitamente. */
	display: none;
}

.carosello-bio { margin: 0 0 0.25rem; }

.carosello-slide.entra {
	animation: carosello-entra var(--durata-comparsa) var(--ease-out-quart);
}
@keyframes carosello-entra {
	from { opacity: 0; transform: translateX(var(--entra-x, 14px)); }
}
@media (prefers-reduced-motion: reduce) {
	.carosello-slide.entra { animation: none; }
}

.carosello-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.carosello-freccia {
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	border-radius: 50%;
	border: 1px solid var(--rosso-porpora);
	background: transparent;
	color: var(--rosso-porpora);
	transition: background-color var(--durata-rapida) var(--ease-out-quart), color var(--durata-rapida) var(--ease-out-quart);
}
.carosello-freccia:hover { background-color: var(--rosso-porpora); color: var(--carta); }

.carosello-indice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 100%;
}

.carosello-pillola {
	max-width: 10rem;
	padding: 0.35rem 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Lora', Georgia, serif;
	font-size: 0.85rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--bordo-carta);
	background: var(--carta-profonda);
	color: var(--inchiostro-tenue);
	transition: background-color var(--durata-rapida) var(--ease-out-quart), color var(--durata-rapida) var(--ease-out-quart), border-color var(--durata-rapida) var(--ease-out-quart);
}
.carosello-pillola:hover { border-color: var(--rosso-porpora); color: var(--rosso-porpora); }
.carosello-pillola.attiva {
	background: var(--rosso-porpora);
	border-color: var(--rosso-porpora);
	color: var(--carta);
}


/* ---- Galleria santini nella scheda del santo ------------------------------ */

.galleria-santini {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	justify-items: center;
}
.galleria-santini img { width: 100%; max-width: 255px; aspect-ratio: 250 / 450; object-fit: cover; }

@media (min-width: 992px) {
	.galleria-santini { grid-template-columns: repeat(2, 1fr); }
}