/*
Theme Name: Extendable Child
Theme URI: https://github.com/esenac/tn-child-theme
Description: Child theme di Extendable per il sito del teatro. Applica il font Barlow (self-hosted) come font principale e raccoglie le personalizzazioni di stile specifiche del teatro.
Author: esenac
Template: extendable
Version: 1.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extendable-child
*/

/*
 * Il tema padre applica `.has-text-color { color: ... !important; }` a livello
 * globale, che sovrascrive qualunque colore testo personalizzato impostato via
 * stile inline sui blocchi (es. titolo bianco su sfondo blu nel template
 * Cartellone / Page with Title). Qui vinciamo il conflitto solo per la fascia
 * titolo scura.
 *
 * Nota: il blocco post-title non riceve mai la classe `.has-text-color`
 * (a differenza di paragraph/heading), quindi il colore custom impostato nel
 * template non produce alcuno stile in output: il titolo resta col colore
 * ereditato di default (blu notte su sfondo blu notte = invisibile). Per
 * questo qui la selezione non richiede `.has-text-color` sull'h1, e bastano
 * due classi (niente !important necessario, vince per specificita').
 */
.has-primary-background-color .wp-block-post-title {
	color: #ffffff;
}

.has-primary-background-color p.has-text-color {
	color: rgba(255, 255, 255, 0.65) !important;
}

/*
 * Stesso conflitto di cui sopra, ma per i badge data su sfondo blu: il testo
 * eredita color:#ffffff dallo stile inline del blocco gruppo, ma viene
 * sovrascritto dalla stessa regola globale del tema padre. Copre il badge
 * della card a griglia "Scheda spettacolo" (e qualunque badge simile
 * annidato dentro una card, has-card-background-color).
 */
.has-card-background-color .has-primary-background-color.has-text-color,
.has-card-background-color .has-primary-background-color.has-text-color * {
	color: #ffffff !important;
}

/*
 * Il tema padre non ha una regola per far occupare a un blocco "a tutta
 * larghezza" (align full) l'intera riga quando si trova dentro un layout a
 * griglia CSS (post-content in "layout":{"type":"grid"} nel template
 * Cartellone) — di norma il blocco rimane confinato a una singola cella.
 * Qui gli facciamo occupare tutte le colonne della griglia, cosi' sezioni
 * come il titolo "Gia' andati in scena" restano a piena larghezza sopra le
 * card, che restano invece nella griglia.
 */
.wp-block-post-content.is-layout-grid > .alignfull {
	grid-column: 1 / -1;
}


/*
 * Home (template "Home" + pattern "Home Teatro Nuovo").
 *
 * Le due fasce blu (hero e "Quando si comprano") sono colorate da queste
 * classi e non dal colore di sfondo del blocco: cosi' non scatta la regola
 * globale del tema padre sui paragrafi con `.has-text-color` dentro
 * `.has-primary-background-color`, che schiarirebbe tutti i testi al 65%.
 * I blocchi dentro non hanno colore testo proprio: ereditano il bianco da qui.
 */
.home-hero,
.home-band {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.home-hero :is(h1, h2, h3),
.home-band :is(h2, h3) {
	color: #ffffff;
}

.home-hero .home-eyebrow,
.home-band .home-eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

.home-hero .home-kicker {
	color: var(--wp--preset--color--accent);
}

/* Identita' del sito in cima all'hero (h1 "Teatro Nuovo"), separata dallo spettacolo. */
.home-hero .home-identity {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 20px;
}

.home-hero .home-badge {
	color: var(--wp--preset--color--primary);
}

.home-hero .home-pill {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
}

/*
 * Pulsanti dell'hero. Lo stato hover globale dei pulsanti (theme.json) porta lo
 * sfondo a blu notte e il testo a link: sulla fascia blu il pulsante pieno
 * sparirebbe e quello outline avrebbe il testo blu su blu. Qui ridefiniamo
 * entrambi gli stati (hover e focus da tastiera) in modo che restino leggibili.
 */
.home-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.home-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
}

.home-hero .is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.home-hero .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	color: #ffffff;
}

/* Striscia "In evidenza": link sul giallo oro, il blu link non avrebbe contrasto. */
.home-highlight a {
	color: inherit;
}

/*
 * Card cliccabili (Cartellone): il titolo della card e' un normale link
 * modificabile dall'editor; qui lo estendiamo a tutta la card ("stretched
 * link"), cosi' si clicca ovunque ma resta un solo link per tastiera e
 * screen reader. Le regole scattano solo sulle card che contengono un titolo
 * con link (:has); nei browser senza :has resta cliccabile il solo titolo.
 */
.has-card-background-color:has(h3 a) {
	position: relative;
}

.has-card-background-color:has(h3 a) h3 a {
	color: inherit;
	text-decoration: none;
}

.has-card-background-color:has(h3 a) h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.has-card-background-color:has(h3 a):hover h3 a {
	text-decoration: underline;
}

.has-card-background-color:has(h3 a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.has-card-background-color h3 a:focus-visible {
	outline: none;
}


/*
 * Mobile e tablet.
 *
 * Il Cartellone usa un post-content a griglia con 3 colonne fisse (template
 * "Cartellone"): su uno smartphone le card restavano larghe ~100px con testo
 * tagliato e la pagina scorreva in orizzontale. Il numero di colonne generato
 * da WordPress ha specificita' di una sola classe, quindi basta questo
 * selettore piu' specifico (niente !important).
 */
@media (max-width: 959px) {
	.wp-block-post-content.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.wp-block-post-content.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Prezzi: le card stanno in un gruppo a tutta larghezza con padding 0 inline,
 * quindi sotto la larghezza massima del contenuto toccano i bordi dello
 * schermo. Restituiamo il margine laterale standard al gruppo interno.
 */
@media (max-width: 1099px) {
	.page-template-prezzi .wp-block-post-content > .alignfull > .alignwide {
		padding-left: var(--wp--style--root--padding-left, 20px);
		padding-right: var(--wp--style--root--padding-right, 20px);
	}
}

/*
 * Menu a schermo intero: la regola di WordPress calcola il padding da
 * `--wp--style--root--padding-*`, variabile non definita in questo contesto:
 * il padding diventa 0 e logo, voci e pulsante "chiudi" restano attaccati ai
 * bordi dello schermo. Stesso selettore di WordPress (stessa specificita'),
 * ma dichiarato dopo, cosi' vince senza !important.
 */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--30, 20px);
}

/*
 * Aree toccabili: hamburger (24px) e icone social (16px) sono troppo piccoli
 * da toccare con un dito. Ingrandiamo l'area cliccabile senza cambiare
 * l'aspetto delle icone.
 */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container-open {
		padding: 10px;
		margin: -10px;
	}

	.wp-block-social-links {
		gap: 0;
	}

	.wp-block-social-links .wp-social-link a {
		padding: 8px;
	}
}

/*
 * Icone social di header e footer: piu' grandi (26px invece di 16px); quelle
 * dell'header anche nel blu scuro del tema (`primary`). Il core imposta la dimensione con
 * `.wp-block-social-links.has-small-icon-size` e il colore del link con
 * `.wp-block-social-links .wp-block-social-link.wp-social-link
 * .wp-block-social-link-anchor` (che ignora il colore inline del <li>): qui
 * ripetiamo i selettori con specificita' maggiore, senza !important.
 */
header .wp-block-social-links.wp-block-social-links,
footer .wp-block-social-links.wp-block-social-links {
	font-size: 26px;
}

header .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	color: var(--wp--preset--color--primary);
}

/* Su mobile l'area toccabile resta di almeno 44px (26px + 2 x 9px). */
@media (max-width: 781px) {
	header .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
	footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
		padding: 9px;
	}
}

/*
 * Spacer dentro le colonne: servono ad allineare i contenuti affiancati su
 * desktop, ma quando le colonne si impilano lasciano buchi enormi (es. 380px
 * di vuoto a fine pagina negli spettacoli).
 */
@media (max-width: 781px) {
	.wp-block-columns .wp-block-spacer {
		max-height: 24px;
	}
}

/*
 * Slider immagini: blocco Galleria con classe "home-slider" (sezione "Il teatro"
 * della Home). Le regole scattano solo con `.is-slider-ready`, classe aggiunta
 * da assets/js/home-slider.js: senza JavaScript, e nell'editor (che non carica
 * lo script), la Galleria resta una normale galleria a griglia, comoda da
 * modificare. Il selettore ripete `:not(#individual-image)` di WordPress per
 * battere la sua regola sulla larghezza delle immagini senza !important.
 */
.wp-block-gallery.has-nested-images.home-slider.is-slider-ready {
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-gallery.has-nested-images.home-slider.is-slider-ready::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.has-nested-images.home-slider.is-slider-ready figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-gallery.has-nested-images.home-slider.is-slider-ready figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Foto verticali (classe `is-portrait` messa dallo script): scalate per starci
 * per intero nella stessa cornice 4:3 (l'altezza dello slider non cambia da una
 * foto all'altra), con uno sfondo neutro ai lati invece del ritaglio.
 */
.wp-block-gallery.has-nested-images.home-slider.is-slider-ready figure.wp-block-image.is-portrait:not(#individual-image) img {
	object-fit: contain;
	background-color: var(--wp--preset--color--line);
}

.home-slider.is-slider-ready:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.home-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.home-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.home-slider__btn:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.home-slider__btn svg {
	width: 20px;
	height: 20px;
}

.home-slider__count {
	min-width: 4.5em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/*
 * Menu di navigazione: la voce della pagina corrente e' nel rosso del tema
 * (come l'hover, gestito in theme.json). Il selettore `.current-menu-item`
 * non e' esprimibile in theme.json.
 */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--highlight);
}

/*
 * Prezzi (pattern "Prezzi"). Le card sono gruppi con bordo e sfondo impostati
 * dall'editor; qui solo il filetto oro in cima (un ::before, perche' il colore
 * del bordo del blocco e' forzato da una classe con !important), le righe
 * prezzo delle card evento e i link sulla banda blu.
 */
.price-card {
	position: relative;
}

.price-card::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 4px;
	background-color: var(--wp--preset--color--accent);
}

/*
 * Importi in blu notte. Non usiamo il colore testo del blocco: il tema padre
 * ha `.has-text-color { color: ... !important }` che annulla `has-primary-color`.
 */
.price-amount {
	color: var(--wp--preset--color--primary);
}

.price-card .price-row {
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.prezzi-band li + li {
	margin-top: 10px;
}

.prezzi-band a {
	color: var(--wp--preset--color--accent);
}

.prezzi-band a:is(:hover, :focus-visible) {
	color: #ffffff;
}

/*
 * Chi siamo (pattern "Chi siamo"). Le card riusano `.price-card` (filetto oro);
 * qui solo i numeri in blu notte (via classe, non via colore testo del blocco:
 * vedi la regola `.has-text-color` del tema padre), le foto storiche con bordo
 * e ombra oro, l'elenco degli ospiti a "pillole" e i pulsanti della fascia blu
 * finale (gli stessi stati leggibili dell'hero della Home).
 */
/*
 * Gruppi verticali della pagina: WordPress imposta `flex-wrap: wrap` anche sui
 * gruppi a colonna e Chrome ne calcola male l'altezza quando dentro c'e' una
 * griglia (la sezione diventava di migliaia di pixel). Una colonna non deve
 * andare a capo: `nowrap`.
 */
.storia-stack.is-vertical {
	flex-wrap: nowrap;
}

.storia-stat {
	color: var(--wp--preset--color--primary);
}

.wp-block-image.storia-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 8px 8px 0 var(--wp--preset--color--accent);
}

.wp-block-list.storia-names {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.storia-names li {
	padding: 4px 14px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--tertiary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.storia-band .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.storia-band .wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
}

.storia-band .is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.storia-band .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	color: #ffffff;
}