/*
 * COFASER – Funzioni del sito: stili del front-end.
 * Caricato solo dove serve (inc/stili.php), dopo i fogli del tema; versione da filemtime.
 * Misure in px (il tema può avere una base rem diversa). Colori, bordi e ombre dai token di
 * Bootstrap Italia 3 / scfpa quando ci sono, altrimenti valori di ripiego, così la resa è
 * decente anche con un tema diverso. Mobile first; breakpoint di Bootstrap Italia 768 e 992 px.
 */

/* =============================================================================================
 * 1. Regole generiche dei contenuti
 * =========================================================================================== */

/*
 * Testo solo per gli screen reader. «u-hiddenVisually» è la classe del vecchio tema (ITA Web
 * Toolkit), rimasta nei contenuti già scritti (es. avvisi «si apre in una nuova scheda»);
 * Bootstrap Italia 3 ha solo «visually-hidden». Stesse dichiarazioni della classe di Bootstrap,
 * !important compreso: è una classe di utilità per l'accessibilità e deve prevalere su qualunque
 * regola del tema, come l'originale.
 */
.u-hiddenVisually,
.cofaser-sito-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Elenchi di documenti (es. Archivio storico 2013–2017): un nome lungo senza spazi va a capo
   invece di allargare la pagina sul telefono. */
.elenco-documenti a {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

/* =============================================================================================
 * 2. Scheda farmacia (template «Scheda farmacia», inc/scheda-farmacia.php)
 * =========================================================================================== */

.cofaser-farmacia {
	margin: 0 0 32px;
}

/* Scheda e mappa: una sotto l'altra; affiancate da 992 px se c'è la mappa. */
.cofaser-farmacia__corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Riquadro: bordo e ombra dei riquadri di scfpa (card, box dei servizi). */
.cofaser-farmacia__scheda {
	max-width: 720px;
	min-width: 0;
	margin: 0;
	background-color: #fff;
	border: 1px solid var(--scfpa-riquadro-bordo, #dfe3e6);
	border-radius: var(--bsi-radius-smooth, 4px);
	box-shadow: var(--scfpa-riquadro-ombra, 0 8px 16px 0 rgba(0, 0, 0, 0.1));
}

.cofaser-farmacia__scheda .cofaser-farmacia__scheda-corpo {
	padding: 8px 16px;
}

/* Foto (immagine in evidenza): solo con i temi che non la mostrano già in cima alla pagina. */
.cofaser-farmacia__foto {
	margin: 0;
	overflow: hidden;
	border-top-left-radius: var(--bsi-radius-smooth, 4px);
	border-top-right-radius: var(--bsi-radius-smooth, 4px);
}

.cofaser-farmacia__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Dati: etichetta sopra, valore sotto; righe separate da un filo. */
.cofaser-farmacia__dati {
	margin: 0;
	padding: 0;
}

.cofaser-farmacia__riga {
	position: relative;
	padding: 12px 0;
}

.cofaser-farmacia__riga + .cofaser-farmacia__riga {
	border-top: 1px solid var(--scfpa-riquadro-bordo, #dfe3e6);
}

/* Con le icone dello sprite (scfpa): icona a sinistra, testi allineati dopo. */
.cofaser-farmacia--icone .cofaser-farmacia__riga {
	padding-left: 36px;
}

.cofaser-farmacia__icona {
	position: absolute;
	top: 12px;
	left: 0;
	width: 24px;
	height: 24px;
	fill: var(--bsi-icon-primary, currentColor);
}

.cofaser-farmacia__etichetta {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bsi-color-text-primary, #1c6681);
}

.cofaser-farmacia__valore {
	margin: 0;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* Mappa: larga quanto la colonna (al massimo come la scheda), proporzioni 4:3. Con Bootstrap
   Italia lo fanno anche le classi «ratio ratio-4x3»; qui le stesse regole per gli altri temi. */
.cofaser-farmacia__mappa {
	position: relative;
	width: 100%;
	max-width: 720px;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background-color: #eee;
	border-radius: var(--bsi-radius-smooth, 4px);
}

.cofaser-farmacia__mappa::before {
	content: "";
	display: block;
	padding-top: 75%;
}

.cofaser-farmacia__mappa iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 768px) {
	.cofaser-farmacia__scheda .cofaser-farmacia__scheda-corpo {
		padding: 8px 24px;
	}
}

@media (min-width: 992px) {
	.cofaser-farmacia__corpo--mappa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}