/*
Theme Name: PodKiss
Theme URI: https://github.com/GalaxyPictures/podkiss
Author: Galaxy Pictures
Description: Tema a blocchi della rete PodKiss, direzione "Pop": fondo petrolio scuro, tre accenti acidi, titoli grassi in maiuscolo. Non conosce nessuno show per nome e non contiene un solo colore di show: l'identità di ogni show arriva dai suoi campi, attraverso le custom property che il plugin core stampa nell'head.
Version: 0.11.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: podkiss
*/

/*
 * Quasi tutto sta in theme.json. Qui restano le poche regole che l'editor a
 * blocchi non sa esprimere.
 *
 * I caratteri sono dichiarati in theme.json e ospitati in assets/fonts/: mai da
 * Google Fonts. Un sito italiano che chiama fonts.googleapis.com a ogni visita
 * manda l'IP di chi legge a Google senza averlo chiesto, ed è un problema
 * evitabile con due file da 40 KB. Le licenze SIL OFL stanno accanto ai file.
 */

/* Le trascrizioni si leggono meglio con una misura, qualunque sia la larghezza
   del blocco. */
.podkiss-transcript p {
	max-width: 68ch;
}

/* La testata di uno show sta sul colore dello show, con sopra il testo che il
   plugin ha calcolato per contrasto — mai un colore scelto a mano. Il fallback
   è il Corallo di Nudi e Crudi solo perché una testata senza colore sarebbe
   invisibile: il valore vero arriva sempre dal campo dello show. */
.podkiss-show-header {
	background-color: var( --podkiss-color-primary, var( --wp--preset--color--podkiss-corallo ) );
	color: var( --podkiss-color-on-primary, var( --wp--preset--color--podkiss-bg ) );
}

/* Etichette: maiuscolo piccolo, spaziato. */
.podkiss-label {
	color: var( --podkiss-color-primary, var( --wp--preset--color--podkiss-lime ) );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Schede: fondo petrolio, angoli larghi, nessuna ombra. */
.podkiss-card {
	background-color: var( --wp--preset--color--podkiss-surface );
	border-radius: 22px;
	padding: var( --wp--preset--spacing--50 );
}

/*
 * Il marchio.
 *
 * Sta come immagine di sfondo con un percorso relativo a questo foglio: un URL
 * assoluto congelerebbe il dominio del sottodominio dev dentro il CSS, e alla
 * migrazione su podkiss.it il logo sparirebbe senza che niente lo segnali.
 *
 * Il titolo del sito resta nel markup come testo vero — serve agli screen
 * reader e ai motori — ma viene nascosto alla vista: un logo che sostituisce
 * il nome del sito non deve portarselo via anche da chi non lo vede.
 */
.podkiss-logo {
	background-image: url( "assets/podkiss-logo.svg" );
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	/* Il rapporto viene dalla viewBox del file, non da due misure scritte a
	   mano che prima o poi divergono: 461,8 × 328,1. */
	aspect-ratio: 461.8 / 328.1;
	height: 3.5rem;
	width: auto;
}

/* Il marchio riporta alla home. Il titolo del sito resta nel markup — serve a
   chi naviga con la voce — ma esce dallo schermo con un rientro invece che con
   un ritaglio da un pixel: così l'ancora ha la dimensione del logo ed è tutta
   cliccabile. Prima il link c'era e non lo si poteva prendere. */
.podkiss-logo .wp-block-site-title {
	height: 100%;
	margin: 0;
}

.podkiss-logo .wp-block-site-title a {
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: -200vw;
	white-space: nowrap;
	width: 100%;
}

.podkiss-visually-hidden {
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Su fondo chiaro il marchio è a un colore solo, e il colore lo decide il CSS:
   il file eredita currentColor. */
.podkiss-logo--mono {
	background-image: none;
	color: var( --wp--preset--color--podkiss-bg );
	mask-image: url( "assets/podkiss-logo-mono.svg" );
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: currentColor;
}

/* Fino a 48 px compresi resta la sola K: sotto quella misura i vuoti fra le
   barre dell'equalizzatore valgono meno di due pixel e le tre barre diventano
   una macchia. Sopra, ci va il marchio intero.
   mask-image e non background-image: un SVG referenziato come immagine è un
   documento a sé e non eredita currentColor — con background-image la K
   uscirebbe nera su qualunque fondo. Stessa tecnica di .podkiss-logo--mono. */
.podkiss-logo--small {
	background-color: currentColor;
	background-image: none;
	/* Rapporto della sola K, dal suo bounding box esatto: 82,2635 × 100. */
	aspect-ratio: 82.2635 / 100;
	height: 2.25rem;
	-webkit-mask-image: url( "assets/podkiss-marchio-k.svg" );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url( "assets/podkiss-marchio-k.svg" );
	mask-repeat: no-repeat;
	mask-size: contain;
	width: auto;
}

/* Chi preferisce meno movimento non deve subire le transizioni dei blocchi. */
@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Quello che i blocchi del plugin mettono in pagina ------------------- */

/* Il numero grosso: il conto di Cedimento, il numero da indovinare di Nudi e
   Crudi. Stessa vetrina, due meccaniche diverse dietro. */
.podkiss-counter {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.podkiss-counter b {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.5rem, 7vw, 4rem );
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.podkiss-counter span {
	font-size: 0.9rem;
	max-width: 24ch;
	opacity: 0.85;
}

/* Coppie etichetta/valore: la scheda della scena, i fatti di una bugia. */
.podkiss-facts {
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: auto 1fr;
	margin: 1rem 0 0;
}

.podkiss-facts dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.7;
	text-transform: uppercase;
}

.podkiss-facts dd {
	margin: 0;
}

/* Elenchi di puntate e di sezioni: la stessa forma per tutti e due. */
.podkiss-episodes,
.podkiss-extra,
.podkiss-shows {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.podkiss-episodes > li,
.podkiss-extra > li {
	background-color: var( --wp--preset--color--podkiss-surface );
	border-radius: 20px;
	padding: 1.25rem 1.5rem;
}

.podkiss-episodes a,
.podkiss-extra a,
.podkiss-shows a {
	color: inherit;
	text-decoration: none;
}

/* Il titolo della scheda sta sul colore dello show: deve prendere il colore
   calcolato per quel fondo, non quello dei link della pagina. */
.podkiss-show-card a,
.podkiss-show-card h3 {
	color: inherit;
}

.podkiss-show-card a:hover h3,
.podkiss-show-card a:focus-visible h3 {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.podkiss-episode-title {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.15;
}

.podkiss-episode-facts {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	margin-top: 0.35rem;
	opacity: 0.7;
	text-transform: uppercase;
}

.podkiss-episodes p,
.podkiss-extra p {
	margin: 0.5rem 0 0;
	max-width: 62ch;
}

/* Le tre schede degli show sulla home: ognuna nel colore del suo show. */
.podkiss-shows {
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.podkiss-show-card {
	border-radius: 24px;
	padding: 1.75rem;
}

.podkiss-show-card h3 {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	margin: 0;
}

.podkiss-show-card p {
	margin: 0.75rem 0 0;
}

.podkiss-show-card .podkiss-when {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Il player: largo quanto la colonna, niente fronzoli. */
.podkiss-player {
	display: block;
	margin: 1.25rem 0;
	width: 100%;
}

.podkiss-episode-meta {
	margin-bottom: 1.5rem;
}

/* Il verdetto di una bugia: è la cosa che si legge per prima. */
.podkiss-verdict {
	background-color: var( --wp--preset--color--podkiss-surface );
	border-radius: 20px;
	margin: 1.5rem 0;
	padding: 1.5rem;
}

.podkiss-verdict__word {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2rem, 5vw, 3rem );
	font-weight: 800;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.podkiss-verdict__fact {
	margin: 0.75rem 0 0;
	max-width: 62ch;
}

/* La scheda della scena e le fonti: stessa scatola, ruoli diversi. */
.podkiss-scene,
.podkiss-sources {
	border-top: 1px solid var( --wp--preset--color--podkiss-surface );
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

.podkiss-sources ul {
	margin: 1rem 0 0;
	padding-left: 1.2rem;
}

.podkiss-sources li {
	margin-bottom: 0.4rem;
	max-width: 70ch;
}

.podkiss-steal {
	margin-top: 1.25rem;
	max-width: 62ch;
}

.podkiss-steal .podkiss-label {
	display: block;
	margin-bottom: 0.25rem;
}

.podkiss-vuoto {
	opacity: 0.7;
}

/* La home: il titolo grande e una riga sola di spiegazione. */
.podkiss-hero {
	padding: clamp( 2rem, 6vw, 4rem ) 0 1rem;
}

.podkiss-hero__testo {
	font-size: clamp( 1.05rem, 2vw, 1.25rem );
	max-width: 58ch;
}

/* --- Il form della newsletter ------------------------------------------- */

.podkiss-newsletter {
	background-color: var( --wp--preset--color--podkiss-surface );
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 2rem 0;
	max-width: 34rem;
	padding: 1.75rem;
}

.podkiss-newsletter__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.podkiss-newsletter__campo label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.podkiss-newsletter__campo input {
	background-color: var( --wp--preset--color--podkiss-bg );
	border: 1px solid var( --wp--preset--color--podkiss-muted );
	border-radius: 12px;
	color: inherit;
	font: inherit;
	padding: 0.7rem 0.9rem;
}

.podkiss-newsletter__nota {
	font-size: 0.85rem;
	margin: 0;
	opacity: 0.8;
}

.podkiss-newsletter__azioni {
	margin: 0;
}

.podkiss-newsletter__esito {
	background-color: var( --podkiss-color-action, var( --wp--preset--color--podkiss-lime ) );
	border-radius: 12px;
	color: var( --podkiss-color-on-action, var( --wp--preset--color--podkiss-bg ) );
	margin: 0;
	padding: 0.75rem 1rem;
}

/* La trappola: fuori dallo schermo, non display:none — un compilatore
   automatico riempie anche i campi nascosti, una persona non la vede. */
.podkiss-newsletter__trappola {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* L'avviso delle puntate di esempio: si legge, non urla. */
.podkiss-avviso {
	border-left: 3px solid var( --podkiss-color-primary, var( --wp--preset--color--podkiss-lime ) );
	font-size: 0.9rem;
	opacity: 0.85;
	padding-left: 1rem;
}

/* --- Il menu ------------------------------------------------------------ */

/* Prima erano sette voci uguali in fila, che andavano a capo e non si
   capiva che fossero un menu. Ora sono due gruppi con due ruoli diversi:
   gli show sono pastiglie nel loro colore — il colore è già il nome — e il
   resto sono voci piccole, che si vedono ma non gridano. */
.wp-block-navigation .wp-block-navigation__container {
	align-items: center;
	gap: 0.5rem 0.75rem;
}

/* Il colore del testo va messo con la stessa forza con cui WordPress mette il
   suo, altrimenti vince lui: le pastiglie uscivano con il testo Ghiaccio sui
   colori accesi — 2,2:1 su corallo, illeggibile, e contro la regola scritta
   dell'identità («sui colori accesi il testo è sempre Petrolio scuro, mai
   bianco»). Petrolio su corallo fa 5,8:1, su cielo 9,3, su lime 11,2. */
.wp-block-navigation .podkiss-nav-show > a.wp-block-navigation-item__content,
.wp-block-navigation .podkiss-nav-show > a.wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var( --wp--preset--color--podkiss-bg );
}

.wp-block-navigation .podkiss-nav-show > a {
	border-radius: 999px;
	display: inline-block;
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.55rem 0.9rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-navigation .podkiss-nav-show--nudi-e-crudi > a {
	background-color: var( --wp--preset--color--podkiss-corallo );
}

.wp-block-navigation .podkiss-nav-show--campo-lungo > a {
	background-color: var( --wp--preset--color--podkiss-cielo );
}

.wp-block-navigation .podkiss-nav-show--cedimento > a {
	background-color: var( --wp--preset--color--podkiss-lime );
}

/* Un filo di stacco fra i due gruppi. Non :first-of-type — quello guarda il
   tipo dell'elemento, non la classe, e su una lista di <li> non seleziona
   niente: la riga la porta la voce piccola che segue l'ultima pastiglia. */
.wp-block-navigation .podkiss-nav-show + .podkiss-nav-util {
	border-left: 1px solid var( --wp--preset--color--podkiss-surface );
	margin-left: 0.35rem;
	padding-left: 0.85rem;
}

.wp-block-navigation .podkiss-nav-util > a {
	color: var( --wp--preset--color--podkiss-muted );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-navigation .podkiss-nav-util > a:hover,
.wp-block-navigation .podkiss-nav-util > a:focus-visible {
	color: var( --wp--preset--color--podkiss-fg );
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-navigation .podkiss-nav-show > a,
	.wp-block-navigation .podkiss-nav-util > a {
		transition: opacity 120ms ease, color 120ms ease;
	}

	.wp-block-navigation .podkiss-nav-show > a:hover {
		opacity: 0.85;
	}
}

/* Sotto i 900 px il menu passa al bottone: sette voci su due righe sono la
   cosa che non si capiva. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--podkiss-fg );
}

/* --- Le schede degli show, come nel documento di identità ---------------- */

/* Il marchio piccolo in alto, nel colore del testo della scheda: è quello che
   fa la copertina della rete — fondo pieno, marchio piccolo in alto, titolo
   enorme — e le schede sono la stessa cosa in piccolo.

   Qui ci va il marchio intero, K più equalizzatore, non la variante con la
   sola K: staccata dalla parola «PodKiss», una K da sola non dice niente, e
   quello che rende riconoscibile il marchio sono le barre. La variante corta
   resta per la favicon e per il logo di testata quando si rimpicciolisce,
   dove il marchio sta dentro un quadrato e la parola è lì accanto.

   Il rapporto viene dalla viewBox del file (220 × 120), così l'altezza è
   l'unica misura scritta a mano. */
.podkiss-show-card::before {
	aspect-ratio: 220 / 120;
	background-color: currentColor;
	content: "";
	display: block;
	height: 0.95rem;
	margin-bottom: 1.1rem;
	mask-image: url( "assets/podkiss-marchio.svg" );
	mask-position: left center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url( "assets/podkiss-marchio.svg" );
	-webkit-mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	width: auto;
}

/* Titoli come nel documento: Bricolage 800, maiuscolo, stretto. */
.podkiss-show-card h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 3.2vw, 2.1rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Radio e caselle: grandi, e nostre ---------------------------------- */

/* Quelle di sistema sono 13 px e grigie: su un fondo petrolio si vedono
   appena, e non somigliano a niente di questo sito. Queste sono grandi come
   una cosa che si tocca col dito, hanno il bordo del testo e si riempiono del
   colore d'azione dello show. */
.podkiss-posta-form input[type="radio"],
.podkiss-posta-form input[type="checkbox"],
.podkiss-newsletter input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	/* color: inherit prima del bordo, e non è pedanteria: un input non eredita
	   il colore del testo, quindi `currentColor` qui vale nero — su fondo
	   petrolio il bordo spariva. */
	color: inherit;
	border: 2px solid currentColor;
	cursor: pointer;
	display: inline-block;
	flex: 0 0 auto;
	height: 1.5rem;
	margin: 0;
	position: relative;
	transition: background-color 120ms ease, border-color 120ms ease;
	vertical-align: middle;
	width: 1.5rem;
}

.podkiss-posta-form input[type="radio"] {
	border-radius: 50%;
}

.podkiss-posta-form input[type="checkbox"],
.podkiss-newsletter input[type="checkbox"] {
	border-radius: 7px;
}

/* Il segno: un tondo pieno per la radio, una spunta disegnata per la casella.
   Il colore è quello d'azione, che su Cedimento non è il lime — lì il lime è
   il colore dello show. */
.podkiss-posta-form input[type="radio"]::after {
	background-color: var( --podkiss-color-action, var( --wp--preset--color--podkiss-lime ) );
	border-radius: 50%;
	content: "";
	inset: 4px;
	opacity: 0;
	position: absolute;
	transition: opacity 120ms ease;
}

.podkiss-posta-form input[type="radio"]:checked::after {
	opacity: 1;
}

.podkiss-posta-form input[type="checkbox"]::after,
.podkiss-newsletter input[type="checkbox"]::after {
	border: 3px solid var( --wp--preset--color--podkiss-bg );
	border-left: 0;
	border-top: 0;
	content: "";
	height: 0.72rem;
	left: 0.42rem;
	opacity: 0;
	position: absolute;
	top: 0.14rem;
	transform: rotate( 42deg );
	transition: opacity 120ms ease;
	width: 0.36rem;
}

.podkiss-posta-form input[type="checkbox"]:checked,
.podkiss-newsletter input[type="checkbox"]:checked {
	background-color: var( --podkiss-color-action, var( --wp--preset--color--podkiss-lime ) );
	border-color: var( --podkiss-color-action, var( --wp--preset--color--podkiss-lime ) );
}

.podkiss-posta-form input[type="checkbox"]:checked::after,
.podkiss-newsletter input[type="checkbox"]:checked::after {
	opacity: 1;
}

.podkiss-posta-form input[type="radio"]:focus-visible,
.podkiss-posta-form input[type="checkbox"]:focus-visible,
.podkiss-newsletter input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--podkiss-cielo );
	outline-offset: 3px;
}

/* L'etichetta accanto: allineata al centro del segno, e cliccabile tutta. */
.podkiss-posta-form fieldset label,
.podkiss-posta-form__consenso label,
.podkiss-newsletter label:has( input[type="checkbox"] ) {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.7rem;
	line-height: 1.3;
	padding: 0.35rem 0;
}

.podkiss-posta-form fieldset legend {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.podkiss-posta-form fieldset {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
}

/* --- I riquadri che uno show si è acceso ------------------------------- */

/* Un modulo che non ha un disegno suo — la scheda della scena ce l'ha, il
   conto no — si rende da solo dalla dichiarazione dei campi: etichetta sopra,
   valore sotto, come tutto il resto delle schede del sito. */
.podkiss-modulo {
	border-top: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	margin-block: 2.5rem;
	padding-top: 1.5rem;
}

.podkiss-modulo h2 {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.podkiss-modulo__campi {
	display: grid;
	gap: 1rem 2rem;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
}

.podkiss-modulo__campi p {
	margin: 0.15rem 0 0;
}