/****************************************************/
/* COLOR A NIVEL DE BLOQUE                          */
/****************************************************/

/*
 * Aquí no se pinta casi nada: se decide el VALOR que van a usar las reglas de
 * color de utilities.css, que desde el commit anterior leen
 * `var(--cdc-text, <lo de siempre>)`.
 *
 * El problema que resuelve. El color de la página y el del bloque usaban el mismo
 * mecanismo —clases bg-* / text-* — y las de texto llevan `!important` y arrastran
 * un selector descendiente ` a`. Con la misma especificidad y el mismo `!important`
 * a los dos lados, quien ganaba no era el más cercano en el DOM sino el que
 * estuviera más abajo en el fichero: un bloque podía quedarse con el titular de su
 * color y los enlaces del color de la página.
 *
 * Cómo se resuelve. Una custom property redefinida en un ancestro gana para todo su
 * subárbol, sin importar el orden de los ficheros, la especificidad ni los
 * `!important`. Así que la regla del <body> sigue ganando la cascada —y sigue
 * ganándole al brand.css del concesionario, que es para lo que estaba el
 * `!important`— pero el valor que aplica ya es el del bloque.
 *
 * Por qué .cdc-tint y no .acf-block: el hero no lleva la clase acf-block (usa
 * <section class="hero-landing">), y el flexible content de las páginas heredadas
 * monta su wrapper en sections/blocks-section.php, que nunca pasa por el helper.
 * Con una clase que solo emite cdc_block_wrapper(), el contenido antiguo queda
 * fuera de esta capa por construcción y no por convenio.
 *
 * Se encola DESPUÉS de brand.css (inc/scripts.php), el único fichero del tema que
 * lo hace. Puede permitírselo porque aquí no se le pisa nada a la marca: solo se
 * definen variables, y un brand.css siempre puede redefinirlas.
 */

/* Quien lleva una clase de color fija la tinta de su rama: el wrapper del bloque
   (`.cdc-tint.text-x`) o cualquier cosa dentro de él (`.cdc-tint .text-x`).
   Lo segundo no es un extra, es imprescindible: el markup de los bloques trae
   `text-white` sobre `bg-primary` escrito a mano —concesionarios, banners,
   rotación—, y sin esta mitad heredarían la tinta del bloque y saldrían del color
   equivocado. */
.cdc-tint.text-primary,
.cdc-tint .text-primary   { --cdc-text: var(--color-primary); }

.cdc-tint.text-secondary,
.cdc-tint .text-secondary { --cdc-text: var(--color-secondary); }

.cdc-tint.text-alt,
.cdc-tint .text-alt       { --cdc-text: var(--color-alt); }

.cdc-tint.text-gray,
.cdc-tint .text-gray      { --cdc-text: var(--gray); }

.cdc-tint.text-lightgray,
.cdc-tint .text-lightgray { --cdc-text: var(--lightgray); }

.cdc-tint.text-white,
.cdc-tint .text-white,
.cdc-tint.white,
.cdc-tint .white          { --cdc-text: var(--white); }

.cdc-tint.black,
.cdc-tint .black          { --cdc-text: var(--black); }

/* Fronteras: lo que tiene color propio se sale del sistema.
 *
 * `initial` en una custom property es el «valor inválido garantizado», así que
 * `var(--cdc-text, X)` cae al respaldo X y el elemento recupera su color de
 * siempre. Cero !important: no hay pelea, hay ausencia de valor.
 *
 * - Los botones los gobierna la marca, no la sección. Sin esta línea, el color de
 *   texto del bloque se colaría en ellos, que es justo el síntoma que ya daba el
 *   color de la página.
 * - .bg-white y .white-content traen su propio color de texto desde siempre.
 * - .text-color es el «Por defecto» del selector: significa heredar de la página.
 *
 * Va al final a propósito: con la misma especificidad que las reglas de arriba,
 * gana la última, de modo que un botón con `text-white` sigue siendo un botón. */
.cdc-tint .bg-white,
.cdc-tint .white-content,
.cdc-tint.text-color,
.cdc-tint .text-color,
.cdc-tint :is(button, .button, [type="submit"], a.button, .has-buttons a) {
	--cdc-text: initial;
}
