/*
Theme Name: AFA Escola El Cim v4
Theme URI: https://afaelcim.cat
Author: AFA Escola El Cim
Description: Tema propio de la AFA de l'Escola El Cim. Block theme, sin page builders y sin plugins de maquetación. Implementa la marca v4 (logotipo y paleta aprobados por la junta) con las CUATRO paletas candidatas cargadas como variaciones de estilo: la junta elige desde Editor del sitio → Estilos sin tocar código.
Version: 4.0.0
Requires at least: 6.7
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: afaelcim
Tags: block-theme, education, one-column, custom-colors, custom-menu, full-site-editing
*/

/* ═══════════════════════════════════════════════════════════════════════════
 * EL PUENTE: los colores de WordPress → los nombres de rol del diseño
 *
 * ESTO ES LO QUE HACE QUE LAS CUATRO PALETAS FUNCIONEN CON UNA SOLA HOJA.
 *
 * WordPress publica cada color de `theme.json` como `--wp--preset--color--<slug>`.
 * Una variación de estilo cambia esos valores y nada más. Así que si todo el
 * CSS del tema se escribe contra los nombres de ROL —`--fons`, `--accio`,
 * `--banda`— y el rol se define aquí una sola vez apuntando al preset, cambiar
 * de paleta es cambiar catorce valores y la página entera sigue.
 *
 * Escribir `var(--wp--preset--color--fons)` por el CSS habría funcionado igual
 * y sería ilegible; y escribir el hex, dos paletas divergiendo el primer día.
 *
 * La otra mitad —lo que NO es color: si hay tarjetas, el radio del botón, el
 * montaje de 5C— vive en el bloque `css` de cada variación, redefiniendo los
 * tokens de `assets/css/tokens-base.css`. Es el único sitio donde las cuatro
 * divergen de verdad, y son entre 10 y 16 líneas cada una.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fons:         var(--wp--preset--color--fons);
  --fons-alt:     var(--wp--preset--color--fons-alt);
  --superficie:   var(--wp--preset--color--superficie);
  --banda:        var(--wp--preset--color--banda);
  --banda-tinta:  var(--wp--preset--color--banda-tinta);
  --banda-accent: var(--wp--preset--color--banda-accent);
  --tinta:        var(--wp--preset--color--tinta);
  --tinta-2:      var(--wp--preset--color--tinta-2);
  --accio:        var(--wp--preset--color--accio);
  --accio-tinta:  var(--wp--preset--color--accio-tinta);
  --enllac:       var(--wp--preset--color--enllac);
  --vora:         var(--wp--preset--color--vora);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BASE
 * ═══════════════════════════════════════════════════════════════════════════ */

body {
  background: var(--fons);
  color: var(--tinta);
  font-family: var(--afa-font);
  font-size: var(--afa-t-cos);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--enllac); }

/*
 * El foco SIEMPRE visible, y nunca `outline: none`.
 *
 * Va en `--accio` con 2px y separación: sobre los cuatro fondos claros el
 * naranja y el negro pasan de sobra, y sobre la banda verde de 5C el propio
 * token cambia con la paleta. Es la única forma de navegar para quien no usa
 * ratón, y quitarlo por estética es dejar fuera a esa persona.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accio);
  outline-offset: 2px;
  border-radius: var(--afa-r-petit);
}

/*
 * NADA OCUPA TODO EL ANCHO PORQUE SÍ. El ancho del contenedor se hereda, así
 * que no decidirlo ES decidir que ocupe todo — señalado dos veces el mismo día
 * en la PWA y anotado como regla.
 */
.afa-ample {
  max-width: var(--afa-ample);
  margin-inline: auto;
  padding-inline: var(--afa-marge);
}

/* La etiqueta de sección: el tamaño y el espaciado son del diseño; el color lo
   pone cada paleta, porque en 5E es naranja y en las otras tres oliva oscuro.
   NUNCA `--afa-oliva` a este tamaño: da 3,62 sobre crema y pide 4,5. */
/*
 * `.afa-kicker` és el MATEIX que `.afa-etiqueta`, amb un altre nom.
 *
 * El primer el porten les plantilles portades del v3 i el segon és el del
 * contracte. S'agrupen aquí en comptes de declarar-los dues vegades: dos noms
 * per a una cosa és el defecte que aquest projecte té anotat com «la cara B»,
 * i mentre les dues grafies convisquin val més que comparteixin la declaració
 * que no que divergeixin el dia que algú toqui només una.
 */
.afa-etiqueta,
.afa-kicker {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--afa-etiqueta);
}

/* El botón. El radio lo decide la paleta: 999px en tres de las cuatro y 4px en
   5E, donde las esquinas casi rectas son parte del carácter. */
/*
 * EL MISMO BOTÓN, ESCRITO EN EL TEMA O PUESTO POR LA JUNTA.
 *
 * `.afa-boto` es el enlace que compone el tema. `.afa-boto-bloc` va sobre el
 * envoltorio de un `core/button` de verdad —el que la Junta inserta y edita
 * desde /wp-admin/— y por eso la regla baja al `<a>` de dentro: WordPress pone
 * la clase en el `<div class="wp-block-button">` y lo que se pinta es el enlace.
 *
 * Son DOS SELECTORES DE UNA MISMA DECLARACIÓN, no dos copias. Escribir los
 * valores otra vez habría hecho que el botón de la portada dejara de parecerse
 * al del tema el día que alguien tocara uno de los dos — y el que se quedaría
 * atrás sería el que nadie mira.
 */
.afa-boto,
.afa-boto-bloc > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* suelo de WCAG 2.5.5 y de Apple, no una medida elegida */
  padding: 0 24px;
  border-radius: var(--afa-r-boto);
  font-weight: 700;
  text-decoration: none;
}
.afa-boto--primari,
.afa-boto-bloc--primari > .wp-block-button__link {
  background: var(--accio); color: var(--accio-tinta); border: 0;
}
.afa-boto--secundari,
.afa-boto-bloc--secundari > .wp-block-button__link {
  background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta);
}

/* La tarjeta. Las cuatro comparten esta declaración y cambian sus tokens: en 5B
   y 5E se queda sin fondo, sin vora y sin coixí, que es como se convierte en
   una fila. */
.afa-targeta {
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LA MARCA DE LA CABECERA
 *
 * Va aquí y no en `components.css` porque la pieza la emite `parts/header.html`,
 * que es de este mismo lado. Y está escrito después de que se me olvidara:
 * inventé estas tres clases en la cabecera y NO las puse en el contrato, así que
 * quien escribió los componentes no podía saber que existían. El resultado fue
 * un logotipo a su tamaño natural —1953 px— cruzando la pantalla.
 *
 * UNA SOLA PIEZA A TODOS LOS ANCHOS, y esto CORRIGE una decisión anterior.
 *
 * Había dos: el lockup en escritorio y, por debajo de 780px, la montaña sola
 * más «AFA El Cim» escrito al lado. La marca se comportaba de dos maneras
 * distintas y David lo vio en su iPhone: *«AFA EL CIM es DIFERENTE a la versión
 * escritorio, iguálala; toda la parte del branding debe comportarse igual»*.
 *
 * El motivo de las dos piezas era una medida REAL pero mal acotada: el lockup
 * mide 7,21:1, así que **a 30px de alto** ocupa 216px y a 375px eso se come la
 * fila. Lo que el manual de marca fija, sin embargo, no es una altura: es que
 * por debajo de **110px de ancho** «AFA EL CIM» deja de leerse. O sea que la
 * pieza no había que cambiarla, había que dejarla encoger.
 *
 * Medido en la cabecera del marco: a 375px le quedan 172px libres —24px de
 * alto— y a 320px, 117px. Los dos por encima del suelo de 110.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}

/*
 * 216px son los 30px de alto de la referencia, en ancho. Se declara el ANCHO y
 * no el alto porque es lo que permite que `max-width` la encoja cuando la fila
 * aprieta: con el alto fijo, `max-width` recortaría la imagen en vez de
 * escalarla. `height: auto` conserva la proporción exacta.
 *
 * Los atributos `width`/`height` del `<img>` siguen en el marcado para que el
 * navegador reserve el hueco antes de descargarla y la cabecera no dé un salto.
 */
.afa-marca__lockup { width: 100%; max-width: 216px; height: auto; display: block; }

/* Lo que hace que el logotipo CEDA cuando la fila aprieta vive con el resto de
   `.afa-marca`, en `components.css` — que se encola después de esta hoja, así
   que escribirlo aquí no habría ganado. Es la misma clase: un solo bloque. */

/* ═══════════════════════════════════════════════════════════════════════════
 * EL AVISO, UNA SOLA VEZ
 *
 * La cabecera imprime el cintillo SIEMPRE, y tiene que seguir haciéndolo: en
 * las páginas interiores es el único sitio donde aparece un aviso vigente.
 *
 * Pero tres de los cinco formatos lo llevan DENTRO de la portada, porque así
 * está diseñado: en Tauler es una baldosa del mosaico, en Índex una fila y en
 * Carpeta una ficha. Con los dos, esas tres portadas lo enseñarían dos veces.
 *
 * Se apaga el de la cabecera, no el de dentro: el de dentro es el que el
 * formato dibujó. Y se hace con la clase que WordPress ya pone en el `body`
 * por la plantilla elegida —no hace falta inventar nada ni tocar PHP—, así que
 * el día que se añada un sexto formato basta con decidir de qué lado está.
 *
 * `display: none` y no `visibility`: así tampoco lo lee dos veces un lector de
 * pantalla, que es la mitad del problema que no se ve en una captura.
 * ═══════════════════════════════════════════════════════════════════════════ */

.page-template-portada-tauler  .afa-ticker,
.page-template-portada-index   .afa-ticker,
.page-template-portada-carpeta .afa-ticker { display: none; }

/*
 * El botón de la cabecera NO se parte.
 *
 * A 375px «Fes-te soci» caía en tres líneas dentro de una píldora alta: cabe de
 * sobra —quedan unos 130px y el texto ocupa 75— pero sin `nowrap` el navegador
 * parte por donde puede en cuanto el contenedor aprieta.
 *
 * Los 44px de alto se quedan: son el suelo de WCAG 2.5.5 y de Apple para un
 * objetivo tocable, y es justo en el móvil donde ese suelo existe. Lo que se
 * recorta es el relleno, que es lo que no se toca con el dedo.
 */
.afa-boto--petit {
  white-space: nowrap;
  padding: 0 16px;
  font-size: var(--afa-t-petit);
}

@media (max-width: 420px) {
  .afa-boto--petit { padding: 0 12px; }
}

/*
 * La separación de la cabecera se encoge en el móvil.
 *
 * A 375px la fila deja 335 útiles: la marca ocupa 180 y quedan 155 para la
 * hamburguesa (44) y el botón (95). Con los 24px de separación por defecto eso
 * son 163, y el botón se salía 12px de la pantalla.
 *
 * Y es un fallo QUE YO MISMO INTRODUJE hace un rato: al ponerle `nowrap` al
 * botón para que «Fes-te soci» no cayera en tres líneas, dejó de partirse y
 * empezó a empujar. Arreglar un síntoma sin mirar de dónde sale el espacio
 * mueve el problema, no lo quita.
 *
 * Con 8px de separación son 147 de 155, y caben los dos sin tocar ni el objetivo
 * tocable de 44px ni el cuerpo del texto.
 */
@media (max-width: 480px) {
  .afa-nav { gap: 8px; }
}