/*
Theme Name: Descolonització
Theme URI: https://descolonitzacio.cat
Author: descolonitzacio.cat
Description: Tema del comunicat i les comunicacions. El disseny surt del cartell
             de la manifestació del 3 d'octubre: caixa alta condensada burdeus
             sobre blanc, salts de mida grans i filets com a única separació.
Version: 0.3.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: descolonitzacio
*/

/* On viu cada cosa:

     theme.json              colors, famílies, mides. La font de tot.
     assets/css/tipografia.css   les declaracions @font-face.        ← i a l'editor
     assets/css/contingut.css    ritme vertical, selectors d'element. ← i a l'editor
     assets/css/blocs.css        blocs concrets (la convocatòria).    ← i a l'editor
     style.css (AQUEST)          el chrome.

   Els tres marcats es carreguen TAMBÉ dins de l'editor de wp-admin: és tot allò
   que l'editora ha de veure igual mentre escriu.

   AQUEST fitxer és el chrome: l'estructura que envolta el contingut i que
   l'editora no veu mai mentre escriu — capçalera, peu, llistats, descàrregues.
   Si t'adones que estàs escrivint aquí l'estil d'una cosa que s'insereix des de
   l'editor, va a blocs.css, no aquí.

   Sempre amb classes, mai amb elements: així guanya per especificitat a
   contingut.css i l'ordre de càrrega és igual.

   ── El disseny, en una línia ──────────────────────────────────────────────
   El cartell no té ni ombres, ni cantonades rodones, ni degradats, ni una
   segona tipografia. Té tres coses: caixa alta condensada, burdeus sobre
   blanc, i filets horitzontals. Tot el que hi ha aquí sota és això.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	/* Gruix del filet gros, el que separa els blocs grans. El dels llistats és
	   d'1px i va escrit a pèl allà on toca: són coses diferents i barrejar-les
	   en una sola variable obliga a recordar quina és quina. */
	--filet: var(--wp--custom--filet, 4px);
	--burdeus: var(--wp--preset--color--burdeus, #9e303e);
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: #fff;
	color: #000;
}

/* Focus visible a tot arreu. Sense això, qui navega amb teclat perd el fil:
   el navegador en dibuixa un per defecte, però el burdeus sobre blanc té prou
   contrast per fer-ne un de més clar i que no desentoni. */
.site a:focus-visible,
.site button:focus-visible {
	outline: 3px solid var(--burdeus);
	outline-offset: 3px;
}

/* ── Amplades ───────────────────────────────────────────────────────────────
   El contenidor arriba fins a wideSize; el que hi ha a dins es constreny a
   contentSize. Així un bloc marcat com a «amplada ampla» té on eixamplar-se.
   Abans .site estava clavat a 42rem i el wideSize de theme.json no servia
   de res: cap bloc podia passar de l'amplada de lectura.
   Les variables les genera theme.json; la reserva és per si es carrega el CSS
   sense els estils globals. */

.site {
	max-width: var(--wp--style--global--wide-size, 60rem);
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* Tot el que penja de <main> es constreny a l'amplada de lectura. Regla
   genèrica a propòsit: si demà s'afegeix una plantilla nova, ja hi entra sense
   haver de tocar aquesta llista.

   La capçalera i el peu no hi són: emmarquen a l'amplada ampla (vegeu més
   avall). */
.site > main > * {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin-inline: auto;
}

/* Excepció: l'article de contingut arriba fins a wideSize, perquè els blocs
   que l'editora marqui com a amples hi tinguin on eixamplar-se. */
.site > main > .comunicat {
	max-width: var(--wp--style--global--wide-size, 60rem);
}

.comunicat > * {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin-inline: auto;
}

.comunicat > .titol-document {
	max-width: var(--wp--style--global--wide-size, 60rem);
}

.comunicat > .alignwide {
	max-width: var(--wp--style--global--wide-size, 60rem);
}

/* «Amplada completa» vol dir fins a la vora del contenidor (es menja el padding
   lateral del .site), no fins a la vora de la finestra. Un desbordament a 100vw
   provoca scroll horitzontal per l'amplada de la barra de desplaçament, i aquí
   no compensa: el disseny és una columna de text. */
.comunicat > .alignfull {
	max-width: none;
	margin-inline: -1.25rem;
}

.comunicat > :first-child {
	margin-top: 0;
}

.comunicat > :last-child {
	margin-bottom: 0;
}

/* ── Capçalera ──────────────────────────────────────────────────────────────
   El «logo» del cartell. En Pep ho va dir així: no hi ha logo, si cas
   «llibertat i descolonització» amb la tipo del cartell. Doncs això: el títol
   del lloc, tan gros com hi càpiga, i un filet a sota.

   El títol surt de bloginfo('name'), o sigui de la base de dades: si un dia es
   canvia el nom del lloc, la capçalera el segueix sense tocar el git. */

/* La capçalera i el peu emmarquen la pàgina a l'amplada AMPLA, no a la de
   lectura. El títol és una condensada enorme i a 38rem no hi cap: se'n sortia
   per la dreta i al mòbil arrossegava scroll horitzontal. Emmarcar amb els
   filets més amples que la columna de text també és el que fa el cartell,
   on el text no arriba mai a tocar les vores. */
.site-header,
.site-footer {
	max-width: var(--wp--style--global--wide-size, 60rem);
	margin-inline: auto;
}

/* Centrat, com el cartell: allà tot va a l'eix i cap línia no s'alinea a
   l'esquerra. El text del manifest, en canvi, es queda alineat a l'esquerra:
   centrar dos mil nou-centes paraules és il·legible. */
.site-header {
	margin-bottom: 3.5rem;
	text-align: center;
}

.site-header .site-title {
	margin: 0;
	font-family: var(--wp--custom--familia--titol);
	/* Clamp propi i no `mida--enorme`: aquesta mida no la mana l'escala
	   tipogràfica sinó la paraula més llarga que hi ha («DESCOLONITZACIÓ», unes
	   7,5 em en condensada). El 8vw garanteix que hi càpiga a qualsevol
	   amplada, i el sostre de 6rem que no es mengi la pantalla en un monitor
	   gran. */
	/* L'11vw (i no 8) fa el títol força més gros al mòbil, que és on es veu
	   petit i on més importa: és l'única marca que té el web. El número surt de
	   la paraula més llarga, «DESCOLONITZACIÓ», que en condensada fa unes 7,5
	   em: a 390 px de pantalla són 43 px de cos i 322 px d'amplada, amb els 350
	   que hi ha lliures. Amb 12vw ja no hi cabria. */
	font-size: clamp(2.5rem, 11vw, 6rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	/* Reparteix les dues línies en comptes de deixar-ne una d'òrfena, que amb
	   una condensada tan grossa canta molt. */
	text-wrap: balance;
}

.site-header .site-title a {
	color: var(--burdeus);
	text-decoration: none;
}

.menu-principal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Fila i columna per separat: la separació ENTRE LES DUES LÍNIES del menú
	   surt d'aquí, i amb un sol valor de 1,5 rem quedaven tan lluny que
	   semblaven dos menús. */
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: var(--filet) solid var(--burdeus);
	font-family: var(--wp--custom--familia--titol);
	/* 1,3 rem i no 1,125: partint el menú en dos grups hi va sobrar amplada a
	   cada línia, i amb la mida antiga les entrades quedaven petites per a
	   l'espai que ocupen. Set entrades a 1,3 rem segueixen cabent de llarg a
	   la línia més plena, la de baix, que en té quatre. */
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.menu-principal li {
	margin: 0;
}

/* ── El menú va en DUES LÍNIES, i el tall és una decisió ────────────────────
   A dalt el manifest i el cartell, que són el projecte; a baix tot el que se'n
   deriva o s'hi acumula: encartellar, vídeos, actes i textos, enllaços.
   Abans el menú es partia sol per on cabia, que canviava amb l'amplada de la
   finestra i amb la llargada dels títols.

   COM ES FORÇA: el `::before` del contenidor també és un element flexible.
   Amb `flex-basis: 100%` ocupa una línia sencera, i amb `order` se situa entre
   els dos grups i els empeny a línies diferents. No cal tocar el marcatge, que
   el genera wp_nav_menu().

   L'`order` NO desordena res per a qui navega amb teclat o lector de pantalla:
   les entrades conserven l'ordre relatiu del document (0 les tres primeres, 2
   la resta) i l'únic que es mou és el pseudoelement, que és buit.

   EL 3 ÉS A MÀ, i ha de canviar amb el menú: si un dia s'hi afegeix o se'n treu
   una entrada, aquest número i el `n + 4` de sota s'han de moure amb ella. El
   menú viu a la base de dades i el CSS no se n'assabenta. */

.menu-principal::before {
	content: "";
	order: 1;
	flex-basis: 100%;
	height: 0;
}

.menu-principal > li:nth-child(-n + 3) {
	order: 0;
}

.menu-principal > li:nth-child(n + 4) {
	order: 2;
}

.menu-principal a {
	color: var(--burdeus);
	text-decoration: none;
}

.menu-principal a:hover,
.menu-principal a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.menu-principal .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* Si no hi ha menú, el filet de sota el títol es perdria. El posem al títol
   mateix quan va sol, perquè la capçalera no quedi mai penjant sense tancar. */
.site-header .site-title:last-child {
	padding-bottom: 0.75rem;
	border-bottom: var(--filet) solid var(--burdeus);
}

/* ── Mòbil ─────────────────────────────────────────────────────────────────
   El menú ja va partit en dos grups a totes les amplades (vegeu el `::before`
   de més amunt), però aquí encara pot partir-se MÉS: amb set entrades, el segon
   grup no cap en una línia de telèfon i se'n va a dues. Total, tres línies.

   Abans anava forçat a una de sola: amb quatre entrades hi cabien estrenyent la
   lletra. Amb set, aquella compressió el portaria molt per sota de 0,7 rem, que
   no es llegeix. Val més partir-lo.

   `flex-wrap` torna a heretar el `wrap` de la regla general. El que sí que es
   manté és el `white-space: nowrap` de cada enllaç: el que no ha de passar mai
   és que «Vídeos Abel Cutillas» es parteixi pel mig.

   El `gap` s'estreny respecte de la regla general —que ja el porta dissociat en
   fila i columna—, perquè en un telèfon hi ha menys espai a repartir i les
   entrades han d'anar més juntes sense arribar a tocar-se.

   `clamp` i no una mida fixa: entre 320 i 640 px de pantalla hi ha molta
   diferència, i una sola mida o no hi cabria als petits o quedaria ridícula
   als grans. El mínim és 1 rem —el que permet deixar-lo partir sense que deixi
   de llegir-se— i el màxim segueix el de l'escriptori. */

@media (max-width: 40rem) {
	.menu-principal {
		gap: 0.35rem 1rem;
		font-size: clamp(1rem, 3.8vw, 1.3rem);
		letter-spacing: 0.02em;
	}

	.menu-principal a {
		white-space: nowrap;
	}

	/* ── Els espais verticals ───────────────────────────────────────────────
	   Tot el que hi ha a sobre està pensat per a una pantalla ampla, on 3,5 rem
	   entre seccions és una respiració. En un telèfon de 375 px la mateixa
	   xifra és un forat: entre secció i secció hi havia 3,5 rem de marge MÉS
	   2,5 de coixí, sis rem seguits, prop d'una setena part de tot el que es
	   veu d'un cop. I n'hi ha vuit, de separacions d'aquesta mida.

	   Aquí es redueixen a poc més de la meitat. Els filets es queden com són:
	   el que separava les seccions era la ratlla, no el blanc. */

	.site {
		padding: 1.25rem 1.25rem 2.5rem;
	}

	.site-header {
		margin-bottom: 2rem;
	}

	.home .site-header {
		margin-bottom: 1.5rem;
	}

	.convocatoria-portada + .descarregues {
		margin-top: 1.5rem;
	}

	.home .seccio {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}

	.portada-document {
		margin-bottom: 1.5rem;
	}

	.descarregues {
		margin: 1.75rem auto;
	}

	.cartell {
		margin: 2rem auto;
	}

	.crida-signatura {
		margin: 2rem auto;
	}

	.seccio .targetes-comunicacions {
		margin-top: 1.5rem;
	}

	.site-footer {
		margin-top: 2.5rem;
	}
}

/* ── La convocatòria ────────────────────────────────────────────────────────
   NO és aquí: viu a assets/css/blocs.css, perquè és un bloc de CONTINGUT i
   l'editora l'ha de veure igual mentre escriu. Aquest fitxer és només chrome. */

/* ── Descàrregues ───────────────────────────────────────────────────────────
   Aquestes SÍ que són codi: els PDF viatgen dins del tema (assets/documents/),
   o sigui que qui sap que existeixen és el tema. */

.descarregues {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 3.5rem auto;
}

.descarrega {
	flex: 1 1 14rem;
	padding: 0.85rem 1.1rem;
	border: 2px solid var(--burdeus);
	color: var(--burdeus);
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	/* Ni radi, ni ombra, ni transició: el cartell no en té cap. */
}

.descarrega:hover,
.descarrega:focus {
	background: var(--burdeus);
	color: #fff;
}

.descarrega span {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

.descarrega:hover span,
.descarrega:focus span {
	opacity: 0.9;
}

/* ── Compartir ──────────────────────────────────────────────────────────────
   Mateixa forma que els botons de descàrrega —majúscules, ni radi ni ombra ni
   transició— però MASSISSOS i no de perfil: fons burdeus i lletra blanca.

   La diferència no és decorativa. Els de descàrrega són de perfil i n'hi pot
   haver dos o tres seguits; aquests dos són el que volem que es premi, just al
   lloc de la pàgina on qui ha llegit ja està convençut. Amb la mateixa forma
   que els altres s'hi perdrien enmig.

   ELS DOS IGUAL DE FORTS, i no un de principal i l'altre secundari: pels
   registres del servidor, X és la primera procedència de la gent que arriba al
   web, i el WhatsApp és per on corre la difusió que els registres no veuen
   —la missatgeria no envia adreça de procedència—. No hi ha cap raó per
   donar-ne més pes a un.

   En passar-hi per sobre s'inverteixen i es queden de perfil: respondre sense
   afegir cap color nou ni cap transició.

   EN BURDEUS I NO EN ELS COLORS DE CADA XARXA. El verd de WhatsApp i el negre
   de X serien els únics colors d'aquest web fora de la paleta que ve del
   cartell, i dos botons de dos colors diferents de fila semblarien de dos
   llocs. Les icones ja fan la feina de reconèixer-los. */

.comparteix {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	max-width: var(--wp--style--global--content-size, 38rem);
	margin: 0 auto 3rem;
}

.comparteix-boto {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.4rem;
	border: 2px solid var(--burdeus);
	background: var(--burdeus);
	color: #fff;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.comparteix-boto:hover,
.comparteix-boto:focus {
	background: #fff;
	color: var(--burdeus);
}

/* `currentColor` al `fill`: la icona s'inverteix amb el text sense cap regla
   més quan el botó es buida. */
.comparteix-icona {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

/* ── L'aire al voltant de la convocatòria ───────────────────────────────────
   A la portada, la crida a la manifestació anava ofegada en blanc: 3,5 rem de
   marge sota la capçalera i 3,5 més abans dels botons de descàrrega. En una
   pàgina que ha de dir DIA, HORA I LLOC d'un cop d'ull, aquell aire allunyava
   justament el que s'ha de veure primer.

   Es retalla NOMÉS a la portada. A la resta del web els 3,5 rem separen
   seccions llargues de text i allà sí que són una respiració; aquí el que hi
   ha a sobre és una capçalera de tres línies i a sota dos botons.

   `.convocatoria-portada + .descarregues` i no `.descarregues` a seques: la
   mateixa fila de botons surt a /manifest/ i a /cartell/, on no s'ha de tocar. */

.home .site-header {
	margin-bottom: 2rem;
}

.convocatoria-portada + .descarregues {
	margin-top: 2rem;
}

/* ── L'aire entre les descàrregues i el botó de compartir ───────────────────
   Els 3,5 rem de sota la fila de botons separen SECCIONS, i entre la fila i el
   botó de WhatsApp no hi ha cap secció: són dues peces de la mateixa família
   —fes alguna cosa amb això— i llegir-les juntes és el que toca.

   Dues regles i no una perquè el botó no sempre té la fila de germana: a la
   portada hi va enganxat, i a /manifest/ i /cartell/ la fila és l'últim fill
   de la secció i el marge se n'escapa per sota.

   La segona regla NO estreny la portada per sorpresa: allà les files de dins
   de les seccions també en són l'últim fill, però les segueix una secció nova
   amb 3,5 rem de marge propi, i entre dos marges mana el més gran. */

.convocatoria-portada + .descarregues {
	margin-bottom: 1.25rem;
}

.seccio > .descarregues:last-child {
	margin-bottom: 1.25rem;
}

/* ── Empaperar ──────────────────────────────────────────────────────────────
   Les tres versions per fotocopiar, cadascuna amb la seva previsualització i el
   seu botó. Tres columnes dites i no deduïdes, com a `.targetes-comunicacions`:
   els documents són tres i seran tres.

   Les tres previsualitzacions NO tenen la mateixa forma —el full de dos
   fulletons va apaïsat— i això és informació, no un descuit: qui ho mira ha de
   veure d'un cop d'ull que aquell full es gira. Per això els botons s'alineen a
   baix amb `margin-top: auto` en comptes de retallar les imatges a una alçada
   comuna. */

.empaperem {
	max-width: var(--wp--style--global--wide-size, 60rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 2.5rem auto 3.5rem;
	padding: 0;
}

.empaperem-peca {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.empaperem-prova {
	display: block;
	margin-bottom: 0.75rem;
	border: var(--filet) solid var(--burdeus);
	background: #fff;
}

.empaperem-prova img {
	display: block;
	width: 100%;
	height: auto;
}

/* A la fila de sempre el botó s'estira (`flex: 1 1 14rem`); dins d'una targeta
   l'amplada la mana la columna, i estirar-se el desquadraria. */
.empaperem .descarrega {
	flex: 0 0 auto;
	margin-top: auto;
	text-align: center;
}

@media (max-width: 40rem) {
	.empaperem {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		margin: 1.75rem auto 2.5rem;
	}
}

/* L'avís d'imprimir al 100 %. Va sota les targetes i no dins de cap: parla dels
   tres fitxers alhora. Marge de dalt curt a posta —el de sota de `.empaperem` ja
   hi ha obert espai— i mida petita, perquè és una instrucció d'ús i no ha de
   competir amb els botons. */
.empaperem-nota {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin: -2rem auto 3.5rem;
	color: var(--wp--preset--color--subtil, #5e5e5e);
	font-size: var(--wp--custom--mida--petita, 0.875rem);
	text-align: center;
	text-wrap: pretty;
}

/* ── Text centrat ───────────────────────────────────────────────────────────
   Només a /empaperem/, que no és una lectura sinó un rètol amb tres botons. La
   resta del web va alineat a l'esquerra: és el que es llegeix bé en una columna
   llarga, i centrar el manifest sencer seria il·legible. */

.comunicat-centrat {
	text-align: center;
}

/* ── L'enllaç entre /cartell/ i /empaperem/ ─────────────────────────────────
   Va al final de les dues pàgines, i les dues l'han de portar igual: és el
   mateix camí en els dos sentits. Filet a sobre per separar-lo del que hi ha
   just abans —els botons de descàrrega— sense obrir-hi una secció nova. */

.enllac-germa {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin: 0 auto 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--subtil, #5e5e5e);
	color: var(--wp--preset--color--subtil, #5e5e5e);
	font-size: var(--wp--custom--mida--petita, 0.875rem);
	text-align: center;
	text-wrap: pretty;
}

.enllac-germa-text {
	display: block;
}

/* El nom de la pàgina germana: sol, en gran i en burdeus.

   `display: block` i no un enllaç dins de la frase: al final d'una pàgina
   llarga, un enllaç enmig d'una línia de text petit no el veu ningú.

   Porta subratllat des del principi i no només en passar-hi per sobre. Un
   enllaç que només es distingeix pel color deixa de ser un enllaç per a qui no
   distingeix el burdeus del negre, i aquí no hi ha cap altra pista: no és dins
   d'una frase ni té forma de botó. */

.enllac-germa-nom {
	display: block;
	margin-top: 0.5rem;
	color: var(--burdeus);
	font-family: var(--wp--custom--familia--titol, sans-serif);
	font-size: var(--wp--custom--mida--gran, clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.12em;
	/* Si algun dia hi cau un títol de dues paraules llargues, que es reparteixi
	   equilibrat en comptes de deixar-ne una de sola a la segona línia. */
	text-wrap: balance;
}

.enllac-germa-nom:hover,
.enllac-germa-nom:focus {
	text-decoration-thickness: 5px;
}

@media (max-width: 40rem) {
	.empaperem-nota {
		margin: -0.75rem auto 2.5rem;
	}
}

/* ── Seccions ───────────────────────────────────────────────────────────────
   La portada és una pila de blocs —convocatòria, manifest, cartell,
   comunicacions— i cada bloc és una `.seccio`. Els mateixos blocs, sencers i
   sense cap diferència, són també el contingut de /manifest/ i /cartell/.

   El filet de separació NOMÉS surt a la portada (`.home`): a la pàgina pròpia
   d'un bloc, una ratlla just sota la capçalera seria una segona ratlla a mig
   pam de la que ja porta el menú. */

.site > main > .seccio {
	max-width: var(--wp--style--global--wide-size, 60rem);
	margin-inline: auto;
}

/* Dins d'una secció, el text es constreny a l'amplada de lectura. */
.seccio > * {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin-inline: auto;
}

/* Excepció: el contenidor del contingut arriba fins a l'amplada ampla, perquè
   un bloc marcat com a «amplada ampla» —la imatge del cartell, el quadre de
   Casas— hi tingui on créixer. Els fills se segueixen constrenyent a l'amplada
   de lectura per `.comunicat > *`, més amunt. */
.seccio > .comunicat {
	max-width: var(--wp--style--global--wide-size, 60rem);
}

.home .seccio {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: var(--filet) solid var(--burdeus);
}

/* El títol d'una secció i el d'una pàgina pròpia són el mateix element amb un
   nivell diferent (h2 a la portada, h1 a la seva pàgina). Han de tenir la
   mateixa pinta: el nivell és per als lectors de pantalla i els cercadors, no
   per a la mida. Per això la mida es fixa aquí i no s'hereta de theme.json.

   Per sota del títol del lloc (6rem) perquè la jerarquia es llegeixi d'una
   ullada: el nom del web mana, i els blocs vénen després. */
.titol-document {
	/* `auto` als laterals, no `0`. Amb `margin: 0 0 1rem` aquesta regla anul·lava
	   el `margin-inline: auto` de `.comunicat > *` —mateixa especificitat i
	   aquesta va després, o sigui que guanya—, i la caixa del títol quedava
	   enganxada a l'esquerra de la columna. El `text-align: center` de sota
	   funcionava, però centrava DINS d'una caixa que ja estava desplaçada: el
	   títol sortia centrat sobre el seu propi requadre i descentrat a la pàgina.

	   Manifest i cartell se'n salvaven perquè allà el títol va dins de
	   `.portada-document`, que és qui porta la caixa centrada. Per això el
	   símptoma era «uns títols sí i els altres no». */
	margin: 0 auto 1rem;

	/* Centrats com el títol de la capçalera i com el cartell, que no té ni una
	   línia alineada a l'esquerra. El text del cos sí que va a l'esquerra: un
	   manifest de dues mil nou-centes paraules centrat no es pot llegir. */
	text-align: center;
	font-family: var(--wp--custom--familia--titol);
	font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--burdeus);
}

/* ── Portada d'un document ──────────────────────────────────────────────────
   El títol i el subtítol del manifest, com la portada d'un document imprès: el
   nom del document a dalt i el del conjunt a sota. */

.portada-document {
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: var(--filet) solid var(--burdeus);
	text-align: center;
}

.portada-document .titol-document {
	margin: 0;
}

.subtitol {
	margin: 0.5rem 0 0;
	font-family: var(--wp--custom--familia--titol);
	font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--burdeus);
}

/* ── El cartell ─────────────────────────────────────────────────────────── */

.cartell {
	margin: 3.5rem auto;
	text-align: center;
	/* El menú hi apunta amb una àncora (#cartell): sense això la imatge queda
	   enganxada a la vora de dalt en arribar-hi. */
	scroll-margin-top: 2rem;
}

.cartell img {
	/* És un A4 vertical: sense sostre s'empassa la pantalla sencera i
	   descol·loca la lectura de tot el que ve després. */
	max-width: min(100%, 24rem);
	height: auto;
}

.cartell figcaption {
	margin-top: 0.75rem;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--burdeus);
}

/* ── Llistat de comunicacions ───────────────────────────────────────────────
   El títol de cada comunicació es queda en Helvetica i en caixa baixa: són
   frases, i en caixa alta condensada una frase llarga passa de titular a crit.
   La data sí que va amb la lletra del cartell, que és on fa de marca. */

.llistat-comunicacions {
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
	/* Centrada, com el títol que l'encapçala. Anava a l'esquerra quan cada
	   línia tenia data a sobre i títol a sota: dos elements arrenglerats per
	   l'esquerra tenien sentit. Tretes les dates, cada línia és un sol títol
	   entre dos filets, i alineat a l'esquerra quedava despenjat de tot. */
	text-align: center;
}

.llistat-comunicacions li {
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--burdeus);
}

.llistat-comunicacions li:first-child {
	border-top: 0;
	padding-top: 0;
}


.llistat-comunicacions a {
	color: inherit;
	text-decoration: none;
}

.llistat-comunicacions a:hover,
.llistat-comunicacions a:focus {
	text-decoration: underline;
	text-decoration-color: var(--burdeus);
	text-underline-offset: 0.15em;
}

/* ── Requadres de comunicacions ─────────────────────────────────────────────
   Només a /comunicacions/. A la portada les comunicacions són l'últim bloc
   d'una pàgina llarga i van en llistat, que ocupa poc; aquí són l'únic
   contingut i el que es busca és triar-ne una, o sigui que val la pena
   ensenyar-ne un tros.

   S'eixamplen fins a l'amplada ampla: en dues columnes, a 38rem cada requadre
   quedaria en una franja massa estreta per llegir-hi res. */

/* Dins d'una secció, `.seccio > *` estreny tot el que hi penja a l'amplada de
   lectura, i la graella de tres targetes hi quedaria a 38 rem. Aquesta regla ve
   després i la torna a deixar ampla, igual que es fa amb els requadres dels
   vídeos aquí sota. */
.seccio > .empaperem {
	max-width: var(--wp--style--global--wide-size, 60rem);
}

.seccio .targetes-comunicacions {
	max-width: var(--wp--style--global--wide-size, 60rem);
	display: grid;
	/* TRES columnes, dites i no deduïdes. Abans hi havia un `auto-fill` amb
	   `minmax(16rem, 1fr)`: a 60rem de contenidor en sortien tres, però per
	   casualitat aritmètica —tres càpiguen, quatre no—, i el comentari que hi
	   havia deia que en sortien dues. Amb la graella fixada a 3×3 i nou vídeos
	   per pàgina (vegeu functions.php), el nombre de columnes ha de ser una
	   decisió i no un resultat. */
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	list-style: none;
	margin: 2rem auto 0;
	padding: 0;
}

.targeta {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.25rem;
	border: 2px solid var(--burdeus);
	/* Ni radi ni ombra: el cartell no en té. */
}

/* La imatge s'enganxa a les vores del requadre: menja el `padding` amb marges
   negatius en comptes de treure'l, perquè el text de sota el conservi. */
.targeta-imatge {
	display: block;
	margin: -1.25rem -1.25rem 1rem;
}

.targeta-imatge img {
	display: block;
	width: 100%;
	/* Totes iguals encara que les imatges tinguin proporcions diferents: si no,
	   la graella queda desmuntada. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	height: auto;
}


.targeta-titol {
	margin: 0.35rem 0 0.75rem;
	text-align: center;
	font-family: var(--wp--custom--familia--text);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.targeta-titol a {
	color: inherit;
	text-decoration: none;
}

.targeta-titol a:hover,
.targeta-titol a:focus {
	text-decoration: underline;
	text-decoration-color: var(--burdeus);
	text-underline-offset: 0.15em;
}

.targeta-extracte {
	margin: 0;
	font-size: var(--wp--custom--mida--petita, 0.875rem);
	line-height: 1.55;
	color: var(--wp--preset--color--subtil, #5e5e5e);
}

/* `margin-top: auto` amb el requadre en columna: l'enllaç queda arran de baix
   encara que els extractes tinguin llargades diferents, i la fila de requadres
   no sembla desmuntada. */
.targeta-mes {
	margin: auto 0 0;
	padding-top: 1rem;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.targeta-mes a {
	color: var(--burdeus);
	text-decoration: none;
}

.targeta-mes a:hover,
.targeta-mes a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.enllac-arxiu {
	margin-top: 1.5rem;
	text-align: center;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* La data d'una comunicació oberta, sota el títol. */

/* ── Crida a signar ─────────────────────────────────────────────────────────
   Maquetada però desactivada fins que existeixi l'endpoint (CLAUDE.md 3.8).
   No l'esborris: està aquí per no haver de retrofitar-la. */

.crida-signatura {
	margin: 3.5rem auto;
	padding: 1.5rem;
	border-top: var(--filet) solid var(--burdeus);
	border-bottom: var(--filet) solid var(--burdeus);
}

.crida-signatura[hidden] {
	display: none;
}

/* La graella només és de 3×3 quan hi caben tres columnes. Per sota, es
   redueixen: amb 16rem per requadre, tres en necessiten 52 i dues, 34. Les
   files deixen de ser tres, i tant li fa: el que importa és que en cada pàgina
   hi hagi els mateixos nou vídeos, no la forma que dibuixin. */

@media (max-width: 52rem) {
	.seccio .targetes-comunicacions {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 34rem) {
	.seccio .targetes-comunicacions {
		grid-template-columns: 1fr;
	}
}

/* ── Paginació de l'arxiu ───────────────────────────────────────────────────
   `the_posts_pagination()` de WordPress. Sortia sense estil: enllaços blaus
   subratllats enmig d'una pàgina que no en té cap més. */

.pagination {
	margin-top: 2.5rem;
	text-align: center;
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pagination .page-numbers {
	min-width: 2.5rem;
	padding: 0.35rem 0.6rem;
	border: 2px solid var(--burdeus);
	color: var(--burdeus);
	text-decoration: none;
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	background: var(--burdeus);
	color: var(--base, #fff);
}
/* La pàgina on ets: plena, i no un enllaç. */
.pagination .page-numbers.current {
	background: var(--burdeus);
	color: var(--base, #fff);
}
/* Els punts suspensius no són cap botó: ni vora ni caixa. */
.pagination .page-numbers.dots {
	min-width: 0;
	padding: 0;
	border: 0;
}
.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Peu ────────────────────────────────────────────────────────────────── */

.site-footer {
	margin-top: 4.5rem;
	padding-top: 1.25rem;
	border-top: var(--filet) solid var(--burdeus);
	font-size: var(--wp--custom--mida--petita, 0.875rem);
	text-align: center;
}

.site-footer p {
	margin: 0;
}

/* El menú del peu: avís legal, privacitat. Mateixa lletra que el de la
   capçalera però més petit — han de ser trobables, no cridaners. */
.menu-peu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.menu-peu li {
	margin: 0;
}

.menu-peu a {
	color: var(--burdeus);
	text-decoration: none;
}

.menu-peu a:hover,
.menu-peu a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}