/*
 * Colectivo Musica Sudamericana — stili specifici del sito.
 *
 * Regola: qui sta solo l'identità di questo cliente.
 * Colori di base, tipografia, larghezze e spaziature sono configurati nel
 * Customizer del tema padre, non riscritti qui.
 */

:root {
	--sc-color-ocra: #e8c248;
	--colectivo-color-pena-yellow: #f9e802;
	--colectivo-color-workshop: #0b6a92;
	--colectivo-color-evento: #0060b6;
	--colectivo-color-success: #1e6b4f;
	--colectivo-color-success-bg: #e8f1ec;
	--colectivo-color-success-ink: #1f4a34;
	--colectivo-color-warning-bg: #fff3c4;
	--colectivo-color-warning-ink: #5c4400;
	--colectivo-color-warning-border: #b58a00;
	--colectivo-color-error: #a52a20;
	--colectivo-entra-bg: #2f5d45;
	--colectivo-entra-ink: #ffffff;
}

.site-header {
	padding: 0.5rem 0;
}

/* Titoli come nel sistema visivo: il Customizer assegna Jost alla variabile
   heading del tema padre, qui definiamo il trattamento specifico del sito. */
h1,
h2,
h3 {
	font-family: var(--sc-font-heading);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

/* Le misure arrivano dalla scala del Customizer: qui resta solo il
   trattamento — maiuscoletto, peso, spaziatura — che e' identita' del sito. */
h3 {
	letter-spacing: 0.02em;
}

h4 {
	font-weight: 700;
	line-height: 1.15;
}

/*
 * Le pagine legali: il gruppo che le racchiude deve stare esattamente sotto il
 * titolo della pagina. Il contenitore del titolo toglie i margini laterali, il
 * gruppo dei blocchi no — sullo schermo stretto il testo arrivava sedici pixel
 * piu' vicino al bordo del titolo che gli sta sopra.
 */
.colectivo-legale > :not(.alignwide):not(.alignfull) {
	max-width: min(100% - (var(--sc-gutter, 1rem) * 2), 46rem);
}

/*
 * Qui i titoli scendono di un gradino, e solo qui.
 *
 * Sono pagine di testo corrente: il titolo di pagina sta fuori, in una fascia
 * sua, e il primo livello che si incontra leggendo e' un sottotitolo di
 * paragrafo, non il richiamo di un blocco disegnato. Nella colonna di lettura
 * un h2 pieno arrivava a 42 px e andava su due righe.
 *
 * Vale solo dentro le legali: nei pattern della home un h2 e' un titolo di
 * richiamo ed e' grande apposta.
 */
.colectivo-legale h2 {
	font-size: var(--sc-h3);
}

.colectivo-legale h3 {
	font-size: var(--sc-h4);
}

/*
 * Il segno dopo un collegamento che porta fuori dal sito.
 *
 * Prende il colore del collegamento e una misura legata al testo, non fissa:
 * cosi' regge sia in una riga di prosa sia dentro un pulsante. Lo spazio prima
 * e' unificatore, o andrebbe a capo da solo lasciando il segno orfano su una
 * riga sua.
 */
.sc-esterno {
	/* Il tema mette `display: block` su ogni svg: senza questo il segno
	   andrebbe a capo da solo, sotto il testo del collegamento. */
	display: inline-block;
	/* Legata al corpo del testo, ma non nella stessa proporzione ovunque: in un
	   pulsante il testo e' piu' piccolo e il segno spariva. */
	width: var(--sc-esterno-misura, 0.8em);
	height: var(--sc-esterno-misura, 0.8em);
	margin-left: 0.28em;
	vertical-align: -0.08em;
	/* Il colore e' quello del testo che lo precede, senza velo: un segno che
	   si legge a fatica non avverte nessuno. */
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Due pesi nello stesso segno: il riquadro fa da contenitore e sta indietro,
 * la freccia e' quello che si legge per primo. Con un tratto solo, a dodici
 * pixel le due forme si impastano.
 *
 * Il tratto segue anche il peso del testo accanto: fisso, vicino al tondo
 * pesava piu' delle lettere e vicino al grassetto le pareggiava.
 */
.sc-esterno__riquadro {
	stroke-width: var(--sc-esterno-tratto, 1.1);
}

.sc-esterno__freccia {
	stroke-width: calc(var(--sc-esterno-tratto, 1.1) * 2);
}

/* Dove il testo e' in grassetto il segno lo segue, o sparisce accanto. */
.wp-block-button__link,
.wp-element-button,
strong,
b,
th {
	--sc-esterno-tratto: 1.4;
	--sc-esterno-misura: 1em;
}

/* L'identita del Colectivo usa campiture piene, mai sfumature. */
.entry__content .sc-pattern-intro,
.sc-palette-mode-dark .entry__content .sc-pattern-intro {
	background: none;
}

.entry__content .sc-pattern-intro__lead,
.editor-styles-wrapper .sc-pattern-intro__lead {
	max-width: 48rem;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.4;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * Integrazione con Light Event Posts
 *
 * Il plugin tiene il proprio aspetto dentro `:where()`, quindi bastano queste
 * righe senza `!important`. Stanno qui e non nel tema perché TP Scenico non
 * sa nulla di questo plugin: è integrazione di progetto.
 * ----------------------------------------------------------------------- */
.lep-event-card,
.lep-event-info,
.lep-event-booking,
.lep-event-date,
.lep-event-card img {
	border-radius: 0;
}

.lep-event-card,
.lep-event-info,
.lep-event-booking {
	background: var(--sc-color-surface);
	border: 1px solid var(--sc-color-border);
}

/* Una scheda evento è blu dovunque compaia: in home, dove l'accento è
   bordeaux, e in qualunque altra sezione. Prendere l'accento della pagina
   le faceva cambiare colore col contorno, e un oggetto che cambia colore
   secondo dove sta smette di essere riconoscibile. Vale per il luogo, per
   il titolo al passaggio del mouse e per il riquadro della data. */
.lep-event-card,
.single-post article {
	--lep-accent-color: var(--colectivo-color-evento);
}

/* Il titolo al passaggio del mouse ereditava l'hover generico del tema, che
   usa l'accento della pagina: in home diventava bordeaux dentro una scheda
   blu. Dentro una scheda evento comanda l'accento della scheda. */
.lep-event-card a:hover,
.lep-event-card a:focus {
	color: var(--lep-accent-color);
}

.lep-event-card a:focus-visible {
	outline-color: var(--lep-accent-color);
}

/* Stati del modulo: il colore accompagna sempre il testo già emesso dal
   plugin e non è quindi l'unico segnale. */
.entry__content .colectivo-modulo__errore {
	border-color: var(--colectivo-color-error);
	background: var(--colectivo-color-error);
	color: #fff;
}

/* La conferma e' un avviso, non una fascia: piena e verde scura si
   confondeva con la testata del registro Repertorio, che il verde selva ce
   l'ha per sezione. */
.entry__content .colectivo-modulo--fatto {
	border: 0;
	border-left: 4px solid var(--colectivo-color-success);
	background: var(--colectivo-color-success-bg);
	color: var(--colectivo-color-success-ink);
}

/* Registro workshop/residenza: una classe editoriale esplicita, applicabile
   solo alle fasce che appartengono davvero a questo contenuto. */
.entry__content .cms-register-workshop {
	background: var(--colectivo-color-workshop) !important;
	color: #fff !important;
}

.entry__content .cms-register-workshop :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.wp-block-button__link)) {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
 * Bozza
 *
 * Le informazioni ancora mancanti restano evidenti finché non arrivano.
 * Da togliere prima della pubblicazione.
 * ----------------------------------------------------------------------- */
.cms-buco {
	background: var(--colectivo-color-warning-bg);
	border-bottom: 2px dotted var(--colectivo-color-warning-border);
	color: var(--colectivo-color-warning-ink);
	font-style: normal;
	padding: 0 0.25em;
}

/* --------------------------------------------------------------------------
 * Occhiello giallo sulla fascia peña
 *
 * Il mockup vuole l'occhiello in giallo sul blu. Il tema padre usa ormai lo
 * slug `ink`, quindi basta questa regola specifica senza forzature.
 * ----------------------------------------------------------------------- */
.entry__content #pena .sc-pattern-eyebrow {
	color: var(--colectivo-color-pena-yellow);
}

/* --------------------------------------------------------------------------
 * La data dell'evento come un calendarietto da tavolo
 *
 * Marcatura già pronta: giorno, mese e anno sono tre elementi. Il mese
 * diventa la fascia in cima, il giorno il numero grande sotto.
 *
 * Il blu è scritto qui e non preso dall'accento: un evento è un evento
 * anche quando la sua scheda finisce in una pagina di un'altra sezione, e
 * un riquadro che cambia colore col contorno smetterebbe di essere
 * riconoscibile.
 *
 * Angoli tondi e ombra sono un'eccezione voluta alla regola delle
 * locandine — angoli vivi, nessuna ombra: qui servono a far leggere
 * l'oggetto come un calendario e non come un riquadro qualsiasi.
 * ----------------------------------------------------------------------- */
.lep-event-date {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Il plugin impone width e min-width a 100px: senza scavalcare anche il
	   minimo la larghezza non si muove. */
	width: 5rem;
	min-width: 0;
	/* E mette un padding che tratterrebbe la fascia dai bordi. */
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: var(--sc-color-surface, #fff);
	box-shadow: 0 1px 2px rgba(36, 19, 24, 0.16), 0 3px 10px rgba(36, 19, 24, 0.11);
	line-height: 1;
	text-align: center;
	overflow: hidden;
}

/* Nel documento il mese viene dopo il giorno: qui va sopra. */
.lep-event-date .lep-event-month {
	order: -1;
	padding: 0.3rem 0;
	background: var(--colectivo-color-evento);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lep-event-date .lep-event-day {
	padding: 0.45rem 0 0.1rem;
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--sc-color-text);
}

.lep-event-date .lep-event-year {
	padding-bottom: 0.45rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
 * L'area riservata è verde
 *
 * Il pulsante per entrare tiene il verde selva dovunque compaia, anche fuori
 * dal Repertorio: entrare è la stessa azione in tutto il sito, e cambiare
 * colore col contorno la renderebbe un'altra cosa ogni volta.
 * ----------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 * Il pulsante in testata quando si è entrati
 *
 * Contorno e non tinta piena: la testata cambia colore con la sezione —
 * bordeaux, blu, petrolio, verde — e nessun colore pieno regge su tutte. Sul
 * Repertorio, che è verde, un pulsante verde sparirebbe.
 *
 * Il tema calcola già un contorno leggibile per ogni registro, per le sue
 * chip in testata: quello, così il pulsante segue anche i registri futuri.
 *
 * E dice anche la cosa giusta: entrare nella propria area è un servizio,
 * l'invito principale resta ISCRIVITI in tinta piena.
 * ----------------------------------------------------------------------- */
.site-navigation .menu-item.menu-button--socio > a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: transparent;
	border-color: var(--sc-header-chip-border, currentColor);
	color: var(--sc-header-ink, currentColor);
}

.site-navigation .menu-item.menu-button--socio > a:hover,
.site-navigation .menu-item.menu-button--socio > a:focus-visible {
	border-color: var(--sc-header-chip-hover-bg, currentColor);
	background: var(--sc-header-chip-hover-bg, transparent);
	color: var(--sc-header-chip-hover-ink, inherit);
	filter: none;
}

.menu-socio__icona {
	display: inline-flex;
	flex: none;
}

/* Un nome proprio non è un'etichetta: niente maiuscoletto. */
.menu-socio__nome {
	text-transform: none;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * L'ultima riga del piè di pagina
 *
 * Privacy, cookie e termini: in fila, piccoli, sotto il credito. Non sono
 * contenuto — sono l'obbligo che deve essere raggiungibile da ovunque — e
 * quindi non devono prendersi l'attenzione che spetta a quello che c'è sopra.
 * ----------------------------------------------------------------------- */
.site-footer__legale {
	margin-top: 0.9rem;
	text-align: center;
}

.site-footer__legale-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
}

.site-footer__legale-menu a {
	/* Venti pixel d'altezza non bastano a un dito: si allarga la zona
	   premibile senza allontanare le voci fra loro. */
	display: inline-block;
	padding: 0.5rem 0;
	color: inherit;
	opacity: 0.7;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.site-footer__legale-menu a:hover,
.site-footer__legale-menu a:focus-visible {
	opacity: 1;
	border-bottom-color: currentColor;
}

/* Sul fondo scuro il giallo delle peña è il richiamo interattivo comune:
   menu, titolo, social e collegamenti legali rispondono nello stesso modo. */
.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer .site-footer__menu a:hover,
.site-footer .site-footer__menu a:focus-visible {
	color: var(--colectivo-color-pena-yellow);
}