/*
Theme Name: Farmacia Cairoli
Theme URI: https://www.farmaciacairoli.eu/
Author: Progetto Farmacia Cairoli
Description: Tema a blocchi su misura per la Farmacia Cairoli di Misterbianco (CT). Nessuna risorsa esterna: font self-hostati, nessun tracciamento, nessun iframe.
Version: 0.5.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: farmacia-cairoli
Tags: full-site-editing, block-patterns, accessibility-ready, one-column
*/

/*
 * Quasi tutto lo stile vive in theme.json, che è il posto giusto:
 * genera le variabili CSS, alimenta l'editor e tiene design system
 * e sito allineati per costruzione.
 *
 * Qui restano solo le poche cose che theme.json non sa esprimere.
 */

/* Salto al contenuto.
   NON ne aggiungiamo uno nostro: nei temi a blocchi WordPress inserisce
   già da sé il link "Salta al contenuto". Aggiungerne un secondo
   significa far annunciare due volte la stessa cosa a chi usa un lettore
   di schermo — cioè peggiorare l'accessibilità credendo di migliorarla.
   Qui si stila soltanto quello del core. */
.skip-link:focus {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	padding: .75rem 1.25rem;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

/* Il numero di telefono è l'elemento più usato del sito da un pubblico
   anziano: deve restare grande e cliccabile anche sul telefono. */
header .fc-telefono {
	font-size: var(--wp--preset--font-size--large);
}
.fc-telefono a {
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 2px;
	white-space: nowrap;
}

/* Il nome del sito resta nel codice per lettori di schermo e per i motori
   di ricerca, ma non a schermo: il logo lo contiene gia come immagine,
   e ripeterlo lo farebbe leggere due volte ad alta voce. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Il logo non deve superare l'altezza utile della testata sul telefono. */
.wp-block-site-logo img {
	max-width: min(260px, 62vw);
	height: auto;
}

/* Indirizzo e link mappa emessi dallo shortcode [fc_indirizzo]. */
.fc-indirizzo {
	display: inline-block;
	line-height: 1.5;
}
.fc-mappa {
	display: inline-block;
	margin-top: .6rem;
	font-weight: 600;
}

/* Bersaglio di tocco minimo. WCAG 2.2 (criterio 2.5.8) chiede 24x24 px;
   qui si sta larghi perché il pubblico è mediamente anziano e la
   precisione del tocco cala con l'età. */
.wp-block-navigation a,
.wp-block-post-title a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Il fuoco da tastiera deve essere sempre visibile: la rimozione
   dell'outline è uno degli errori di accessibilità più diffusi. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Rispetta chi ha chiesto al sistema operativo di ridurre le animazioni. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* In stampa: via testata, menu e piè di pagina. Chi stampa una pagina
   di questo sito vuole indirizzo e orari su carta, non la navigazione. */
@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation,
	.skip-link {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
}


/* ============================================================
 * v0.3.0 — COMPONENTI DELLA VETRINA
 * ============================================================
 * Le classi qui sotto sono applicate ai blocchi dall'editor
 * (campo "Classi CSS aggiuntive") oppure dai pattern del tema.
 * Nessuna di esse contiene un dato della farmacia: solo forma.
 * ============================================================ */

/* --- la firma nascosta -------------------------------------
 * Il corallo di Claude. Non è nella palette del marchio: vive
 * nella selezione del testo e nel puntino del piè di pagina.
 * Chi lo trova, ha capito chi ha dato una mano. */
::selection      { background: var(--wp--preset--color--firma); color: #1B0C05; }
::-moz-selection { background: var(--wp--preset--color--firma); color: #1B0C05; }
.fc-punto-firma  { color: var(--wp--preset--color--firma); font-weight: 700; }

/* --- occhiello: etichetta con trattino ambra --- */
.fc-occhiello {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	display: flex;
	align-items: center;
	gap: .6rem;
}
.fc-occhiello::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	flex: none;
}

/* --- titolo dell'eroe ---
 * theme.json fissa l'h1 a 2,25rem: giusto per le pagine interne,
 * troppo poco per la prima schermata. Qui la misura è una sola,
 * fluida, e non tocca gli altri h1 del sito. */
.fc-titolo-eroe {
	font-size: clamp(2.35rem, 5.6vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -.03em;
	text-wrap: balance;
}
/* Il <strong> nel titolo NON è un rinforzo semantico ma il segno
   ambra: peso invariato, evidenziatore sotto. Si usa <strong> e non
   uno <span> perché è un tag che l'editor a blocchi conserva. */
.fc-titolo-eroe strong { font-weight: inherit; }

/* --- evidenziatore ambra sotto una parola --- */
.fc-segno,
.fc-titolo-eroe strong {
	position: relative;
	display: inline-block;
	z-index: 0;
	padding: 0 .12em;
	margin: 0 -.12em;
}
.fc-segno::before,
.fc-titolo-eroe strong::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0; right: 0; bottom: .08em;
	height: .42em;
	background: linear-gradient(90deg, rgba(240,160,60,.55), rgba(240,160,60,.28));
	border-radius: 3px;
	transform: rotate(-.6deg);
}

/* --- barra alta --- */
.fc-topbar {
	font-size: .84rem;
}
.fc-topbar p { margin: 0; }
.fc-topbar a { color: inherit; }

/* --- testata ---
 * position: sticky si ferma al bordo del PROPRIO genitore. Il
 * contenitore della parte di template è alto quanto la testata:
 * la testata quindi si sganciava dopo pochi pixel di scorrimento.
 * display: contents toglie quel riquadro senza toglierne il contenuto,
 * così l'aggancio è relativo alla pagina intera. La semantica non si
 * perde: l'elemento <header> vero è quello interno, .fc-testata. */
header.wp-block-template-part { display: contents; }

.fc-testata {
	position: sticky;
	top: 0;
	z-index: 50;
	isolation: isolate;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Il vetro smerigliato sta su uno pseudo-elemento, non sulla testata.
 * Motivo: un antenato con backdrop-filter diventa il blocco contenitore
 * dei discendenti position: fixed — e il menu a scomparsa del telefono
 * è fixed a tutto schermo. Con il filtro sulla testata il menu si
 * apriva rinchiuso dentro la barra, alto un centimetro. */
.fc-testata::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.fc-testata::before { background: var(--wp--preset--color--background); }
}
.admin-bar .fc-testata { top: 32px; }
@media (max-width: 782px) { .admin-bar .fc-testata { top: 46px; } }

/* menu a pillole */
.fc-testata .wp-block-navigation .wp-block-navigation-item__content {
	padding: .5rem .95rem;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fc-testata .wp-block-navigation .wp-block-navigation-item__content:hover,
.fc-testata .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--primary-dark);
}

/* --- il pulsante del menu: tre linee, non due ---
 * L'icona del blocco Navigazione di WordPress ha DUE barre. Non è un
 * errore del tema, è il core: <rect> a y=7.5 e y=15, e basta.
 * Ma il segno che tutti riconoscono come «menu» ne ha tre, e su un
 * pubblico anziano non è il posto giusto per essere originali.
 * Si nasconde l'SVG del core e si disegnano tre barre con il CSS:
 * la barra centrale è lo pseudo-elemento, le altre due sono le sue
 * ombre. Nessuno script, nessun file in più. */
.fc-testata .wp-block-navigation__responsive-container-open svg { display: none; }
.fc-testata .wp-block-navigation__responsive-container-open {
	position: relative;
	color: var(--wp--preset--color--primary-dark);
}
.fc-testata .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Il menu a scomparsa eredita l'allineamento a destra della barra: a
 * schermo pieno le voci finiscono incollate al bordo, con il testo che
 * tocca il vetro. Dentro l'overlay si centra e le voci diventano
 * grandi da toccare. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	gap: .35rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	padding: .7rem 1.4rem;
}

/* --- la lente nella testata ---
 * Blocco Cerca del core in versione «solo pulsante»: a riposo è una
 * lente, al clic si apre il campo. Lo script che lo apre è di
 * WordPress, servito da questo dominio: nessuna risorsa esterna, in
 * linea con il resto del tema. (Anche il menu a scomparsa del
 * telefono usa uno script del core: il tema non ne aggiunge di suoi.)
 */
.fc-testata .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	border: 1px solid transparent;
	border-radius: 999px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fc-testata .wp-block-search__button:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--primary-dark);
}
.fc-testata .wp-block-search__button svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	padding: .55rem .95rem;
	font-size: .95rem;
	font-family: inherit;
}
.fc-testata .wp-block-search__inside-wrapper { gap: .35rem; }

/* La ricerca in cima alla pagina dei risultati: campo + pulsante. */
.fc-cerca-pagina .wp-block-search__button {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border-radius: 999px;
	min-width: 48px;
	min-height: 48px;
}
.fc-cerca-pagina .wp-block-search__button svg { fill: currentColor; }
.fc-risultato + .fc-risultato { border-top: 1px solid var(--wp--preset--color--line); }

/* Fra i 782 e i 1200 px il menu ha sei voci, la lente e il telefono
   sulla stessa riga: si stringono le pillole invece di far andare a
   capo la testata. */
@media (min-width: 782px) and (max-width: 1200px) {
	.fc-testata .wp-block-navigation { font-size: .92rem; }
	.fc-testata .wp-block-navigation .wp-block-navigation-item__content {
		padding: .45rem .6rem;
	}
}

/* pulsante telefono — è lo shortcode [fc_telefono], non un blocco Pulsante:
   il numero deve continuare a vivere in un posto solo. */
.fc-chiama .fc-telefono a {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #2B1900;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	padding: .6rem 1.15rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fc-chiama .fc-telefono a:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 2px rgba(15,42,30,.05), 0 12px 32px -18px rgba(15,42,30,.35);
	color: #2B1900;
}
.fc-chiama p { margin: 0; }
.fc-chiama .fc-telefono strong { font-weight: 700; }

.fc-chiama .wp-block-button__link,
.wp-block-button.fc-chiama .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: #2B1900;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titoli, inherit);
	font-weight: 700;
	padding: .62rem 1.15rem;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fc-chiama .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 2px rgba(15,42,30,.05), 0 12px 32px -18px rgba(15,42,30,.35);
}

/* Il menu a scomparsa deve essere un bersaglio pieno: l'icona da sola
   è più piccola dei 24x24 px chiesti dalla WCAG 2.2, e qui il pubblico
   è mediamente anziano. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Il salto a un'ancora deve fermarsi SOTTO la testata appiccicata,
   altrimenti il titolo della sezione finisce nascosto sotto il menu.
   Niente scroll-behavior: smooth — con le immagini che si caricano
   sotto la piega lo scorrimento animato arriva sul bersaglio sbagliato,
   perché il browser calcola la destinazione all'inizio dell'animazione. */
main [id] { scroll-margin-top: 7rem; }

/* --- filigrana: la grafia dell'istanza del 1839 --- */
.fc-carta { position: relative; isolation: isolate; }
.fc-carta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("assets/carta-1839.jpg");
	background-size: min(120vw, 1500px) auto;
	background-position: center top;
	background-repeat: repeat;
	opacity: .05;
	pointer-events: none;
}

/* --- eroe --- */
.fc-eroe .wp-block-column { min-width: 0; }
.fc-eroe h1 { max-width: 18ch; }

.fc-arco img {
	border-radius: 999px 999px 18px 18px;
	box-shadow: 0 2px 4px rgba(15,42,30,.07), 0 28px 60px -28px rgba(15,42,30,.45);
	border: 1px solid rgba(15,42,30,.08);
	width: 100%;
	height: clamp(340px, 48vw, 520px);
	object-fit: cover;
}
.fc-arco { position: relative; }
.fc-arco::before {
	content: "1839";
	position: absolute;
	left: -.28em; top: -.40em;
	z-index: -1;
	font-family: var(--wp--preset--font-family--titoli, inherit);
	font-weight: 800;
	font-size: clamp(5rem, 12vw, 9.5rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
	opacity: .11;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.wp-block-group.fc-bollo {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: .8rem 1rem;
	box-shadow: 0 1px 2px rgba(15,42,30,.05), 0 12px 32px -18px rgba(15,42,30,.35);
	max-width: 15rem;
	margin-top: -3.5rem;
	margin-left: auto;
	position: relative;
	z-index: 2;
}
.fc-bollo p { margin: 0; }
.fc-oggetto .fc-did { margin-top: 0; }

/* --- fascia scura dei servizi --- */
.fc-fascia p {
	margin: 0;
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.fc-fascia .fc-piu { color: var(--wp--preset--color--accent); font-weight: 700; }
/* Ogni voce resta intera: si va a capo FRA i servizi, mai dentro.
   Prima «Consegna a domicilio» si spezzava e «domicilio» finiva da
   solo sulla riga sotto, che sembrava un errore di impaginazione. */
.fc-fascia .fc-voce { white-space: nowrap; }
.fc-fascia p { text-wrap: balance; }

/* --- schede --- */
.fc-scheda {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	padding: 1.6rem 1.5rem 1.4rem;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.fc-scheda:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(15,42,30,.07), 0 28px 60px -28px rgba(15,42,30,.45);
}
.fc-etichetta {
	font-family: var(--wp--preset--font-family--titoli, inherit);
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ambra-scura);
}
.fc-scheda h3 { color: var(--wp--preset--color--primary-dark); }
.fc-vai a { text-decoration: none; font-weight: 600; }
.fc-vai a::after { content: "\00a0→"; display: inline-block; transition: transform .18s ease; }
.fc-scheda:hover .fc-vai a::after { transform: translateX(4px); }

/* --- intestazione di sezione ---
 * Il titolo parte dal bordo sinistro del contenuto largo (schede,
 * spina degli anni), non dalla misura del testo: altrimenti titolo e
 * contenuto sotto sembrano appartenere a due griglie diverse.
 * Il testo però resta leggibile, non si allarga a 70rem. */
.fc-intro > * { max-width: 46rem; }

/* --- riga larga scura --- */
.fc-riga-larga { border-radius: 18px; }
/* Sul verde notte il verde dei link della palette è illeggibile
   (1,3:1). Dentro le fasce scure il link prende il colore del testo
   che lo circonda: resta sottolineato, ed è la sottolineatura a dire
   che è un link, non il colore. */
.fc-riga-larga a { color: inherit; }
.fc-riga-larga a:hover { color: var(--wp--preset--color--accent); }

/* --- la spina degli anni --- */
.fc-spina { overflow-x: auto; padding-bottom: .6rem; }
.fc-spina > .wp-block-columns {
	min-width: 60rem;
	gap: 0 !important;
	flex-wrap: nowrap !important;
}
.fc-spina .wp-block-column {
	position: relative;
	padding: 2.4rem .9rem 0 0;
	min-width: 0;
}
.fc-spina .wp-block-column::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 1.05rem;
	height: 2px;
	background: var(--wp--preset--color--line);
}
.fc-spina .wp-block-column::after {
	content: "";
	position: absolute;
	left: 0; top: .6rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--warn-soft);
	border: 2.5px solid var(--wp--preset--color--primary);
}
.fc-spina .wp-block-column:last-child::after {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--ambra-scura);
}
.fc-spina p { margin: 0; }
.fc-spina .fc-anno {
	font-family: var(--wp--preset--font-family--titoli, inherit);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--wp--preset--color--primary-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/* Sul telefono il fantasma "1839" finirebbe sopra i pulsanti, dove non
   ha più il ruolo di sfondo dell'arco ma quello di macchia. Si toglie. */
@media (max-width: 781px) {
	.fc-arco::before { display: none; }
}

/* --- schede oggetto --- */
.fc-oggetto {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 2px rgba(15,42,30,.05), 0 12px 32px -18px rgba(15,42,30,.35);
}
.fc-oggetto figure { margin: 0; }
.fc-oggetto img { width: 100%; height: 250px; object-fit: cover; display: block; }
.fc-oggetto .fc-did { padding: 1rem 1.1rem 1.2rem; }
.fc-oggetto .fc-did p { margin: 0; }

/* --- foto ad arco rovesciato (dove siamo) --- */
.fc-arco-giu img {
	border-radius: 18px 18px 999px 999px;
	box-shadow: 0 2px 4px rgba(15,42,30,.07), 0 28px 60px -28px rgba(15,42,30,.45);
	width: 100%;
	height: clamp(320px, 44vw, 460px);
	object-fit: cover;
}

/* --- piè di pagina --- */
.fc-piede a { color: inherit; text-decoration: none; }
.fc-piede a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* --- rispetto delle preferenze di movimento --- */
@media (prefers-reduced-motion: reduce) {
	.fc-scheda, .fc-chiama .wp-block-button__link, .fc-vai a::after { transition: none; }
	.fc-scheda:hover { transform: none; }
}