/*
 * Las tres texturas del manual de marca (§5), en CSS puro y sin imágenes.
 */

/* Trama de puntos sobre gris técnico — fondo de página.
 *
 * El manual del blog lo pide así: el gris con la trama hace de plano de
 * ingeniería, y encima descansan las tarjetas blancas con el contenido. Al
 * revés (blanco de fondo, puntos grises) el efecto se pierde: parece una hoja
 * en blanco y las tarjetas dejan de leerse como tarjetas.
 */
.brujula-dotgrid {
  background-color: var(--wp--preset--color--grey);
  background-image: radial-gradient(rgba(10, 17, 34, 0.14) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -12px -12px;
}

/* Las tarjetas que descansan sobre la trama. */
.brujula-card {
  background-color: var(--wp--preset--color--white);
  border-radius: 8px;
}

/* §5.3 Metal cepillado — hero de cabecera y piezas destacadas. */
.brujula-brushed {
  background-color: var(--wp--preset--color--navy);
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 5px
    ),
    linear-gradient(135deg, #0a1122 0%, #16203a 45%, #0a1122 100%);
  color: var(--wp--preset--color--white);
}

/* §5.1 Líneas diagonales — solo en el indicador de carga del stream. */
.brujula-loading {
  position: relative;
  overflow: hidden;
  min-height: 4px;
  background-color: var(--wp--preset--color--grey);
}

.brujula-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    var(--wp--preset--color--gold) 0 8px,
    transparent 8px 24px
  );
  animation: brujula-slide 1.1s linear infinite;
}

@keyframes brujula-slide {
  to { transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .brujula-loading::after { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Bloques de código
 *
 * El blog es un diario de desarrollo, así que el código es contenido de primera
 * clase. theme.json ya fija el fondo, la tipografía y el relleno; aquí van el
 * acento dorado del borde y el comportamiento del desbordamiento.
 * ------------------------------------------------------------------------ */

.wp-block-code,
.wp-block-preformatted {
  border-left: 3px solid var(--wp--preset--color--gold);
  overflow-x: auto;
}

/* Partir líneas en un bloque de código destruye la legibilidad: una sangría
 * rota cambia el significado aparente del programa. Mejor desplazar. */
.wp-block-code code,
.wp-block-preformatted {
  white-space: pre;
  tab-size: 2;
}

/* Código dentro de un párrafo: tratamiento más ligero, sin robarle peso al
 * texto que lo rodea. */
:not(pre) > code {
  font-family: var(--wp--preset--font-family--geist-mono);
  font-size: 0.9em;
  background-color: var(--wp--preset--color--grey);
  color: var(--wp--preset--color--navy);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Bloques tipográficos de marca
 *
 * El logotipo de cdiezgil es tipográfico, no una imagen: corchetes en oro,
 * nombre en Geist Bold. Se construye con el título del sitio, de modo que cada
 * instalación obtiene el suyo sin tocar código.
 * ------------------------------------------------------------------------ */

.brujula-wordmark {
  font-size: 1.125rem;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

/* El manual exige un espacio en blanco entre los corchetes y el nombre.
 *
 * La separación va por margen y no por `gap`: los estilos del bloque de logo
 * de WordPress se cargan después de esta hoja y fuerzan `display: inline-block`
 * sobre el enlace, con lo que `gap` deja de aplicarse y los corchetes quedan
 * pegados al nombre. El margen funciona sea cual sea el modo de disposición.
 */
.brujula-wordmark__name {
  margin: 0 0.35em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brujula-wordmark__bracket {
  font-weight: 400;
  color: var(--wp--preset--color--gold);
}

/* El sello de autoría del pie: `by { cdiezgil }`. */
.brujula-seal {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

/* Misma razón que en la marca de cabecera: la separación va por margen para
 * no depender del modo de disposición del contenedor. */
.brujula-seal__name {
  margin: 0 0.35em;
  font-weight: 700;
}

.brujula-seal__bracket {
  font-weight: 400;
  color: var(--wp--preset--color--gold);
}

.brujula-seal__by {
  margin-right: 0.35em;
  font-weight: 300;
  color: var(--wp--preset--color--grey);
}

/* ---------------------------------------------------------------------------
 * La cabecera fuera de la portada
 *
 * El eslogan del sitio es la entrada a la portada, no un rótulo permanente.
 * Repetido encima de cada artículo apila dos bloques de metal cepillado y
 * empuja el contenido por debajo del pliegue: el lector abre un artículo y lo
 * primero que lee es el eslogan del blog, no el título que ha venido a leer.
 * ------------------------------------------------------------------------ */

/* El `!important` no es pereza: el relleno de la cabecera va en un atributo
 * `style` del propio bloque, y un estilo en línea gana a cualquier hoja
 * externa. Es la única forma de reducirlo desde aquí. */
body:not(.home) header.brujula-brushed {
  padding-top: var(--wp--preset--spacing--30) !important;
  padding-bottom: var(--wp--preset--spacing--30) !important;
}

body:not(.home) header.brujula-brushed .wp-block-site-tagline,
body:not(.home) header.brujula-brushed .wp-block-spacer {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Enlaces sobre metal cepillado
 *
 * theme.json pinta todos los enlaces de azul marino. Sobre el metal cepillado
 * eso los vuelve invisibles: es lo que dejaba la categoría de la portada del
 * artículo en azul marino sobre azul marino, pese a que su bloque declaraba
 * el oro. Heredando el color, cada enlace toma el del bloque que lo contiene.
 * ------------------------------------------------------------------------ */

.brujula-brushed a,
.brujula-cover a {
  color: inherit;
}