/* =========================================================================
 * EL DIRECTORIO DE PODCASTS, VESTIDO DE ZARZA
 *
 * `/podcasts/` no lo pinta este tema: lo pinta `custom-podcast-plugin`, con sus
 * propias reglas de reescritura y su contenido fuera de WordPress. Y es el
 * activo del sitio: unas 618.000 fichas indexadas. O sea que la parte mas
 * visitada del sitio se veria como OTRO sitio.
 *
 * Hasta hoy lo parcheaba `scripts-n-styles` con 794 caracteres de CSS apuntando
 * a clases de Sahifa. Eso no se copia --no serviria de nada-- pero el encargo
 * si: aqui esta hecho de verdad.
 *
 * 🔴 NO SE REESCRIBEN SUS 695 LINEAS. El plugin ya tiene un sistema decente: 15
 * variables CSS y 83 usos de var(). Basta con redefinir las quince. Reescribir
 * su hoja habria creado una segunda copia que se queda vieja en cuanto alguien
 * toque el plugin.
 *
 * (Los 35 atributos style="" de sus plantillas, que ganan a cualquier hoja sin
 * !important, se cambiaron para que usen esas mismas variables. Ver
 * _util/parchea-cpp-colores.py.)
 * ========================================================================= */

:root {
  /* El rojo de la casa donde estaba el azul de Apple. */
  --cpp-primary:       var(--zz-rojo);
  --cpp-primary-dark:  var(--zz-rojo-hondo);
  --cpp-primary-light: var(--zz-rojo-vivo);

  /* La tinta sobre crema del sistema, no el gris de Apple. */
  --cpp-secondary:     var(--zz-tinta);
  --cpp-text:          var(--zz-tinta);

  /* 🔴 El gris secundario va a --zz-rotulo-txt y NO a --zz-tinta-3, aunque
     tinta-3 sea el tono equivalente. tinta-3 sobre crema da 3,07:1 y no llega a
     AA; rotulo-txt esta medido en 4,53:1 y existe exactamente para esto. Aqui
     pesa: el gris del plugin lleva las fechas, las duraciones y el numero de
     episodios de todas las fichas. */
  --cpp-gray:          var(--zz-rotulo-txt);
  --cpp-gray-light:    var(--zz-tinta-3);

  --cpp-light:         var(--zz-crema-2);
  --cpp-white:         var(--zz-crema);
  --cpp-border:        var(--zz-linea);

  --cpp-radius:        var(--zz-radio);
  --cpp-radius-small:  var(--zz-radio-chico);

  /* Las sombras del plugin son de interfaz de sistema operativo: suaves y
     azuladas. Las de ZARZA son de papel sobre rojo. */
  --cpp-shadow:        0 1px 0 rgba(36,26,21,.06), 0 2px 10px rgba(36,26,21,.07);
  --cpp-shadow-hover:  0 2px 0 rgba(36,26,21,.08), 0 8px 22px rgba(36,26,21,.13);
}

/*
 * Lo que las variables no alcanzan: tipografia y rotulacion.
 *
 * El plugin no tiene variable de fuente, asi que aqui se le da la de la marca.
 * Sin esto el directorio se leeria en la fuente del sistema mientras el resto
 * del sitio va en IBM Plex Mono, y se notaria el salto al entrar.
 */
.cpp-container { font-family: var(--zz-mono); color: var(--zz-tinta); }

.cpp-podcast-title,
.cpp-episode-title,
.cpp-player-title {
  font-family: var(--zz-display);
  letter-spacing: var(--zz-tracking-titular);
  text-transform: lowercase;   /* regla de marca: los titulares van en minusculas */
}

/* Los datos --fecha, duracion, numero de episodio-- son ROTULACION TECNICA:
   versalita, espaciada, y nunca compitiendo con el titular. */
.cpp-episode-date,
.cpp-episode-meta,
.cpp-podcast-stats,
.cpp-time-current,
.cpp-time-total {
  font-family: var(--zz-mono);
  font-size: 10.5px;
  letter-spacing: var(--zz-tracking-rotulo);
  text-transform: uppercase;
  color: var(--zz-rotulo-txt);
}

/* Las fichas del directorio son fichas de casete, como las del catalogo: papel
   crema sobre el rojo, con su filo. */
.cpp-podcast-card,
.cpp-episode-item {
  background: var(--zz-crema);
  border: 1px solid var(--zz-linea);
  border-radius: var(--zz-radio);
}
.cpp-podcast-card:hover,
.cpp-episode-item:hover { border-color: var(--zz-linea-2); }

/* El boton primario del plugin es el boton rojo del sistema. */
.cpp-btn-primary,
.cpp-play-main,
.cpp-play-inline {
  background: var(--zz-rojo);
  color: var(--zz-sobre-rojo);
  border: 1px solid var(--zz-rojo-hondo);
}
.cpp-btn-primary:hover,
.cpp-play-main:hover,
.cpp-play-inline:hover { background: var(--zz-rojo-alto); }

.cpp-btn-secondary {
  background: var(--zz-crema-2);
  color: var(--zz-tinta);
  border: 1px solid var(--zz-linea);
}

/* El reproductor flotante del plugin y el del tema son DOS barras fijas abajo.
   Si un dia coincidieran en pantalla se taparian, asi que el del plugin se
   levanta por encima de la altura de la del tema. */
body.zz-sonando .cpp-floating-player { bottom: 92px; }

/* La barra de avance, en rojo. */
.cpp-progress-fill { background: var(--zz-rojo); }
.cpp-progress-buffered { background: var(--zz-linea-2); }
.cpp-progress-bar { background: var(--zz-crema-3); }

/* La paginacion, con la rotulacion del sistema. */
.cpp-page-link,
.cpp-page-current {
  font-family: var(--zz-mono);
  letter-spacing: .1em;
  border-radius: var(--zz-radio-chico);
}
.cpp-page-current { background: var(--zz-rojo); color: var(--zz-sobre-rojo); }