/*
 * Forma de cada formato dentro del stream.
 *
 * La clase brujula-format-<slug> la añade brujula_post_class() en
 * inc/formats.php, de modo que la variación es puramente declarativa.
 */

/* Las piezas del stream son tarjetas blancas sobre la trama de puntos gris.
 *
 * El color base va aquí y no como atributo de paleta del bloque a propósito.
 * WordPress genera las clases `has-*-background-color` con `!important`, de
 * modo que si la tarjeta llevara `backgroundColor: "white"` ningún formato
 * podría cambiarle el fondo después: el Dato saldría en blanco con el título
 * en oro, un contraste de 1,4:1 que el manual prohíbe.
 */
.brujula-item {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--grey);
  transition: border-color 0.15s ease;
}
.brujula-item:hover { border-color: var(--wp--preset--color--gold); }

/* El rótulo de formato va apagado *dentro de la tarjeta*, para no competir con
 * el título. Fuera del stream —en la portada del artículo— manda el color que
 * declare el bloque, que allí es el oro. */
.brujula-item .brujula-tag a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

/* Dato: fondo azul marino, cifra en oro. */
.brujula-format-dato .brujula-item,
.brujula-item.brujula-format-dato {
  background-color: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

.brujula-format-dato .wp-block-post-title,
.brujula-format-dato .wp-block-post-title a {
  color: var(--wp--preset--color--gold);
  font-size: 3rem;
  line-height: 1;
}

.brujula-format-dato .wp-block-post-excerpt,
.brujula-format-dato .wp-block-post-date {
  color: var(--wp--preset--color--grey);
}

.brujula-format-dato .brujula-tag a { color: var(--wp--preset--color--gold); }

/* Enlace: flecha de salida junto al título. */
.brujula-format-enlace .wp-block-post-title a::after {
  content: " ↗";
  color: var(--wp--preset--color--gold);
}

/* Artículo: el enlace de continuar lectura, subrayado en oro. */
.brujula-format-articulo .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--20);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  border-bottom: 2px solid var(--wp--preset--color--gold);
  padding-bottom: 2px;
}

/* Nota: sin extracto truncado, se lee entera. */
.brujula-format-nota .wp-block-post-excerpt__more-link { display: none; }

/* Los formatos que se leen enteros en el stream: su contenido hereda el ritmo
 * de lectura del cuerpo, sin el recorte ni el enlace de continuación. */
.brujula-inline-content > *:first-child { margin-top: 0; }
.brujula-inline-content > *:last-child { margin-bottom: 0; }

/* Un Dato es una cifra con su contexto: el texto va en gris técnico sobre el
 * azul marino de la tarjeta. */
.brujula-format-dato .brujula-inline-content {
  color: var(--wp--preset--color--grey);
}

/* El carril se queda fijo al bajar. */
@media (min-width: 782px) {
  .brujula-rail {
    position: sticky;
    top: var(--wp--preset--spacing--40);
  }
}

/* Las clases del tema van en el propio <ul> que genera WordPress, no en un
 * contenedor: por eso se seleccionan directamente y no como descendientes. */
.brujula-filters,
.brujula-archive {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ghost buttons: contorno fino y fondo transparente, para no competir con el
 * oro de las llamadas a la acción. Lo pide el manual del blog para etiquetas y
 * categorías, y el de la marca madre para toda acción secundaria.
 *
 * El botón es el <li> y no el <a> porque WordPress escribe el contador de
 * entradas como texto suelto detrás del enlace. Si el recuadro fuera el
 * enlace, el número quedaría fuera y caería a la línea siguiente.
 */
.brujula-filters li,
.brujula-archive li {
  margin-bottom: var(--wp--preset--spacing--10);
  padding: 6px 12px;
  border: 1px solid rgba(10, 17, 34, 0.25);
  border-radius: 4px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  transition: border-color 0.15s ease;
}

.brujula-filters li:hover,
.brujula-archive li:hover {
  border-color: var(--wp--preset--color--navy);
}

.brujula-filters a,
.brujula-archive a {
  text-decoration: none;
  color: var(--wp--preset--color--navy);
}

/* El filtro activo se marca con el oro en el contorno, no rellenando el
 * recuadro: el relleno sólido en oro está reservado a las llamadas a la
 * acción.
 *
 * WordPress marca la categoría actual con la clase `current-cat` en el <li>,
 * no con `aria-current` en el enlace. */
.brujula-filters .current-cat,
.brujula-filters li[aria-current="page"] {
  border-color: var(--wp--preset--color--gold);
  border-width: 2px;
  padding: 5px 11px;
}

.brujula-filters .current-cat > a { font-weight: 700; }

/* Texto visible solo para lectores de pantalla. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco de teclado siempre visible, en oro sobre cualquier fondo. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace para saltar al contenido.
 *
 * WordPress ya inserta uno propio en los temas de bloques, así que el tema no
 * añade otro: dos enlaces seguidos harían que quien navega con teclado oyera
 * "Saltar al contenido" dos veces. Aquí solo se le da el aspecto de la marca,
 * porque el de fábrica llega en gris `#eee` sobre `#444`.
 *
 * La especificidad incluye el `a` a propósito: WordPress imprime sus estilos
 * en línea en la cabecera y hay que ganarles.
 */
a.skip-link.screen-reader-text:focus {
  background-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--geist);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-radius: 6px;
  outline: 3px solid var(--wp--preset--color--navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Página «Sobre»
 *
 * Componentes del patrón brujula/pagina-sobre: retrato, tarjetas de proyecto,
 * cronología de trayectoria y enlaces de contacto.
 * ------------------------------------------------------------------------ */

.brujula-retrato {
  width: 120px;
  margin: 0;
}

.brujula-retrato img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  /* El aro dorado hace de área de respeto: separa el retrato de la textura de
   * metal cepillado, que sin él se come el contorno de la fotografía. */
  border: 2px solid var(--wp--preset--color--gold);
}

.brujula-proyecto:hover { border-color: var(--wp--preset--color--gold); }

/* El enlace del proyecto reutiliza el subrayado dorado del stream, para que
 * "ir a un sitio" se lea igual en todo el tema. */
.brujula-proyecto-enlace a {
  text-decoration: none;
  border-bottom: 2px solid var(--wp--preset--color--gold);
  padding-bottom: 2px;
}

/* La cronología: una línea vertical con el hito colgando de ella. La línea va
 * en gris técnico y solo el punto se marca en oro, para que la sección no
 * compita con las llamadas a la acción. */
.brujula-trayectoria {
  border-left: 1px solid rgba(10, 17, 34, 0.2);
  padding-left: var(--wp--preset--spacing--40);
}

.brujula-hito {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--40);
}

.brujula-hito:last-child { padding-bottom: 0; }

.brujula-hito::before {
  content: "";
  position: absolute;
  left: calc(var(--wp--preset--spacing--40) * -1 - 5px);
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--gold);
}

.brujula-hito-fecha { font-variant-numeric: tabular-nums; }

/* Contacto: los mismos botones fantasma que el carril. */
.brujula-contacto a {
  display: inline-block;
  margin: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) 0;
  padding: 6px 12px;
  border: 1px solid rgba(10, 17, 34, 0.25);
  border-radius: 4px;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.brujula-contacto a:hover { border-color: var(--wp--preset--color--navy); }