/*!
Theme Name: Biblioteca Ernesto Ragionieri — Child
Theme URI: https://biblioteca.test/
Description: Child theme del tema Biblioteca Ernesto Ragionieri. Contiene le sole modifiche grafiche: presentazione accessibile (WCAG 2.2 AA) della sidebar "Documenti" scaricabili.
Author: Comune di Sesto Fiorentino — Biblioteca Ernesto Ragionieri
Template: biblioteca-ernesto-ragionieri
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: biblioteca-ernesto-ragionieri-child
*/

/* -------------------------------------------------------------------------
 * Sidebar "Documenti" scaricabili — accessibile (WCAG 2.2 AA)
 * - target ≥ 24×24px (SC 2.5.8): link con altezza minima ampia e padding;
 * - focus visibile ad alto contrasto (SC 2.4.7 / 2.4.11);
 * - informazione non affidata al solo colore: testo descrittivo + icona;
 * - contrasto testo ≥ 4.5:1 su sfondo bianco.
 * ---------------------------------------------------------------------- */

.doc-list--accessibile {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.doc-list--accessibile .doc-list__item {
	margin: 0;
}

.doc-list--accessibile .doc-list__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px; /* ampiamente ≥ 24px (SC 2.5.8) */
	padding: 12px 14px;
	border: 1px solid var(--border-default, #c5c9d0);
	border-radius: var(--radius-md, 8px);
	background: var(--white, #fff);
	color: var(--text-strong, #1b1b1b); /* contrasto ≥ 4.5:1 su bianco */
	text-decoration: none;
	line-height: 1.35;
}

.doc-list--accessibile .doc-list__link:hover {
	border-color: var(--color-primary, #06c);
	background: var(--blue-50, #eef4ff);
	text-decoration: underline; /* non solo colore al hover */
}

.doc-list--accessibile .doc-list__link:focus-visible {
	outline: 3px solid var(--focus-ring, #06c);
	outline-offset: 2px;
}

.doc-list--accessibile .doc-list__icon {
	color: var(--danger, #b8261c); /* icona PDF, decorativa (aria-hidden) */
	flex: none;
	display: inline-flex;
}

.doc-list--accessibile .doc-list__text {
	font-weight: var(--weight-medium, 600);
}

/* Regione documenti: landmark etichettato per gli screen reader. */
.doc-region {
	margin: 0;
}

/* Orari sede secondaria (page-orari override) */
.bib-sede-orari { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bib-sede-orari li { font-size: var(--text-sm, 0.9rem); color: var(--text-body, #1b1b1b); }

/* ---------------------------------------------------------------------------
 * Epica 3 — Switch Bibliosesto/Ragazzi più evidente (govbar)
 * Più grande, contrasto e stato attivo chiari; accessibile e responsive.
 * ------------------------------------------------------------------------- */
.area-switch--prominente { gap: 6px; }
.area-switch--prominente .area-switch__link {
	min-height: 44px;               /* target ampio (WCAG 2.5.8) */
	padding: 0 22px;
	font-size: var(--text-sm, 0.95rem);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: .02em;
	border: 1px solid rgba(255, 255, 255, .25);
	border-bottom: 0;
	color: #fff;                    /* contrasto pieno su govbar scura */
}
.area-switch--prominente .area-switch__link:not([aria-current="true"]) {
	background: rgba(255, 255, 255, .06);
}
.area-switch--prominente .area-switch__link[aria-current="true"] {
	background: var(--skin-accent, #06c);
	color: #fff;
	font-weight: var(--weight-bold, 700);
	box-shadow: 0 -3px 0 rgba(255, 255, 255, .55) inset; /* stato attivo evidente */
}
.area-switch--prominente .area-switch__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
 * Epica 2 — Layout pagina Notizie (/notizie/): spaziature e allineamenti
 * ------------------------------------------------------------------------- */
.blog .site-main .section { padding-block: clamp(24px, 4vw, 48px); }
.blog .chips { margin-bottom: 28px; }
.blog .hero-feature { margin-bottom: clamp(28px, 4vw, 44px); }
.blog .grid--3 { gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.blog .news-card,
.blog .grid--3 > * { height: 100%; }
@media (max-width: 640px) {
	.blog .grid--3 { grid-template-columns: 1fr; }
	.blog .hero-feature__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Epica 3 — Carosello eventi (manuale) + Vetrina libri
 * ------------------------------------------------------------------------- */
.bib-carousel { position: relative; }
.bib-carousel__viewport {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}
.bib-carousel__track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.bib-carousel__slide {
	flex: 0 0 clamp(240px, 80vw, 300px);
	scroll-snap-align: start;
}
.bib-carousel__slide .event-card { height: 100%; }
.bib-carousel__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.bib-carousel__btn {
	width: 44px; height: 44px;      /* target ampio (WCAG 2.5.8) */
	border: 1px solid var(--neutral-400, #9aa2ae);
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary, #06c);
	font-size: 1.4rem; line-height: 1;
	cursor: pointer;
}
.bib-carousel__btn:hover { background: var(--blue-50, #eef4ff); }
.bib-carousel__btn:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }

.book-card__media { aspect-ratio: 3 / 4; overflow: hidden; }
.book-card__title { font-size: var(--text-md, 1rem); margin: 0 0 4px; }
.book-card__desc { font-size: var(--text-sm, 0.9rem); }

.bib-cultura-territorio { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
	.bib-carousel__viewport { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
 * Correzioni post-review — skin Area riservata, filtri proposte, placeholder
 * ------------------------------------------------------------------------- */

/* Honeypot anti-spam: il campo `.field[hidden]` del form Contatti resta visibile
 * perché `.field{display:flex}` vince sull'attributo `hidden`. Lo nascondiamo. */
.field[hidden] { display: none !important; }

/* Slot "Cultura e territorio": placeholder discreto quando non configurato. */
.bib-cultura-territorio--placeholder .callout { border: 1px dashed var(--neutral-400, #9aa2ae); background: var(--neutral-50, #f7f8fa); }

/* Voce "Area riservata": tab colorata quando attiva, come Bibliosesto/Ragazzi.
 * Nell'area riservata --skin-accent è verde, quindi la tab attiva è verde. */
.area-switch--prominente .area-switch__login.is-active {
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-bottom: 0;
	background: var(--skin-accent, #0e864d);
	color: #fff;
	font-weight: var(--weight-bold, 700);
	box-shadow: 0 -3px 0 rgba(255, 255, 255, .55) inset; /* stato attivo evidente, "a tab" */
}

/* --- Skin AREA RISERVATA (verde #0e864d) -----------------------------------
 * L'area riservata usa il verde al posto del blu. Rimappiamo l'intera scala blu
 * (e le superfici brand) sui toni verdi entro lo scope `body.area-riservata`:
 * così ogni elemento che usa il blu — direttamente o via --color-primary /
 * --surface-brand — diventa verde, in modo uniforme. Contrasti conformi AA.
 * -------------------------------------------------------------------------- */
body.area-riservata {
	--blue-900: #063a22;
	--blue-800: #095e36;
	--blue-700: #0b6e3f;
	--blue-600: #0e864d; /* PRIMARY — verde area riservata */
	--blue-500: #17a05f;
	--blue-400: #46b982;
	--blue-300: #86d3ac;
	--blue-200: #bce6d1;
	--blue-100: #e3f3ea;
	--blue-50:  #f2faf5;
	--color-primary: #0e864d;
	--color-primary-hover: #0b6e3f;
	--color-primary-active: #095e36;
	--color-primary-contrast: #fff;
	--surface-brand: #0e864d;
	--surface-brand-subtle: #e3f3ea;
	--border-interactive: #0e864d;
	--info: #0e864d;
	--info-bg: #e3f3ea;
	--text-link: #0b6e3f;
	--text-link-hover: #095e36;
	--skin-accent: #0e864d;
	--skin-accent-deep: #095e36;
	--skin-brand: #0e864d;
	--skin-brand-2: #095e36;
	--skin-tint: #e3f3ea;
}
/* Header (brandband) coerente col verde, come per la skin ragazzi. */
body.area-riservata .brandband { background: linear-gradient(135deg, var(--skin-brand), var(--skin-brand-2)); }
body.area-riservata .site-search__submit { background: var(--skin-accent); }

/* --- Filtri "Proposte di lettura" (stile "chips" come il filtro eventi) ----- */
.bib-proposte__filters { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.bib-proposte__filter-group { display: flex; flex-direction: column; gap: 8px; }
.bib-proposte__filter-label { font-weight: 700; font-size: var(--text-sm, .9rem); margin: 0; }
.bib-proposte__filter select { min-height: 44px; }

/* Riga recapiti sopra la tabella oraria di ogni sede (pagina Orari e sedi). */
.bib-sede-blocco__recapiti { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; color: var(--text-muted, #55606e); }
.bib-sede-blocco__recapiti span { display: inline-flex; align-items: center; gap: 6px; }

/* Chip attive coerenti con la skin arancione dei Ragazzi (pagina proposte). */
body.area-ragazzi .chip:hover { border-color: var(--skin-accent); color: var(--skin-accent); }
body.area-ragazzi .chip.is-active { background: var(--skin-accent); border-color: var(--skin-accent); color: #fff; }

/* --- Eventi per categoria: adulti = blu, ragazzi = arancione -----------------
 * Nella lista eventi (shortcode [biblioteca_eventi], anche dentro l'area
 * riservata verde) ogni categoria mantiene il proprio colore. Rimappiamo i
 * token colore nello scope della tab e del pannello: gli id (specificità alta)
 * vincono sullo scope verde `body.area-riservata`. Contrasti conformi AA.
 * -------------------------------------------------------------------------- */
#bib-tab-adulti,
#bib-panel-adulti {
	--color-primary: #0C6DB1;
	--color-primary-hover: #0A5A92;
	--color-primary-active: #084A79;
	--color-primary-contrast: #fff;
	--blue-600: #0C6DB1;
	--blue-700: #0A5A92;
	--blue-800: #084A79;
	--blue-100: #E5F0F9;
	--blue-50:  #F2F8FC;
	--surface-brand: #0C6DB1;
	--skin-accent: #0C6DB1;
	--skin-accent-deep: #084A79;
	--skin-tint: #E5F0F9;
}
#bib-tab-ragazzi,
#bib-panel-ragazzi {
	--color-primary: #B5471A;
	--color-primary-hover: #9A3412;
	--color-primary-active: #8F3411;
	--color-primary-contrast: #fff;
	--blue-600: #B5471A;
	--blue-700: #9A3412;
	--blue-800: #8F3411;
	--blue-100: #FBEBE3;
	--blue-50:  #FDF5F1;
	--surface-brand: #B5471A;
	--skin-accent: #B5471A;
	--skin-accent-deep: #8F3411;
	--skin-tint: #FBEBE3;
}
/* Accento a sinistra della card evento, colorato per categoria. */
#bib-panel-adulti .event-card,
#bib-panel-ragazzi .event-card { border-left: 4px solid var(--color-primary); }

/* ---------------------------------------------------------------------------
 * §1 Mappa OpenStreetMap + Leaflet (Contatti, Orari e sedi)
 * ------------------------------------------------------------------------- */
.bib-map { display: flex; flex-direction: column; gap: 12px; }
.bib-map__canvas {
	width: 100%;
	height: clamp(260px, 40vh, 380px);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid var(--border-default, #c5c9d0);
	background: #E8EEF3; /* segnaposto finché le tile non caricano */
	z-index: 0;
}
.bib-map__canvas:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
/* Focus visibile sui controlli zoom di Leaflet (WCAG 2.4.7). */
.bib-map .leaflet-control a:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 1px; }
.bib-map__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--text-sm, .9rem); color: var(--text-body, #1b1b1b); }
.bib-map__fallback a { font-weight: 600; }

/* Nota fissa sotto la tabella orari (shortcode [bib_orari]). */
.bib-orari__nota { margin: 10px 0 0; font-size: var(--text-sm, .9rem); }