/*
Theme Name:   PB-TheAnarchives
Theme URI:    https://archive.petitbardo.xyz
Description:  Tema hijo de commonplace-theme para Petit Bardo — The Anarchives. Recoge el CSS que antes vivía en el Customizer (Personalizar → CSS adicional) y el del snippet WPCode 7669 (D6, índice por ejes).
Author:       Petit Bardo
Template:     commonplace-theme
Version:      1.1.2
License:      GPL-2.0-or-later
Text Domain:  pb-theanarchives
*/

/* ==========================================================================
   Notas de la migración (23/09/2026)
   - Mismo orden de cascada que el Customizer; reglas duplicadas fusionadas
     en su valor efectivo final.
   - Retirado lo que no tenía efecto: la regla del grupo numérico del índice
     (el índice por ejes ya no lo genera), "text-decoration-thickness: none"
     (valor inválido), y ".post-tags" para móvil (14px), que ya quedaba
     anulada por una regla posterior sin media query.
   - 1.0.1: se recupera .post-tags a 14px en móvil (decisión de Mikel,
     23/09/2026); en escritorio sigue al 30 %.
   - 1.0.2 (24/09/2026): artistas de la ficha alineados con el título en
     todos los anchos; imágenes de listados sin desbordar en móvil.
   - 1.0.3 (24/09/2026): solo functions.php (widgets clásicos y [pblist]).
   - 1.0.9 (24/09/2026): limpieza. Fuera reglas muertas (anuladas por reglas
     posteriores o sin elementos a los que aplicar) y duplicadas. Comprobado
     con un diff de estilos calculados en 13 páginas x 3 anchos: sin cambios
     visibles (cajas idénticas; 247 valores inertes: grid-column en hijos de un
     inline-block y row-gap en un bloque).
   - 1.1.2 (25/09/2026): Instagram rojo al pasar el ratón o con foco; más aire
     antes del embed en las fichas; más separación entre obras en los listados;
     tablas de /cookie-policy dentro de la columna; en móvil, menú fijo sin fondo
     blanco y pie con margen para que lo fijo no tape el crédito ni lo legal.
   ========================================================================== */

/* ROOT */

:root {
  --grid-col: auto;
  --gutter: 1rem;
  --justify: start;
  --text-align: left;
  --vertical-space: 0rem;
}

@media (min-width: 43.75em) {
  :root {
    --grid-col: auto;
    --gutter: 1.4rem;
    --justify: start;
    --text-align: left;
    --vertical-space: 5rem;
  }
}

html {
  height: auto;
}

body {
  font-kerning: none;
  scrollbar-width: none;
}

/* HEADER */

*, ::after, ::before {
  transition: .1s ease-in-out;
}

.menu li:after {
  content: " ";
  color: red;
}

.header {
  position: sticky;
  top: 1rem;
  z-index: 500;
  height: 5rem;
}

.current-menu-item a,
.current_page_item a {
  color: red;
}

.menu a:hover {
  color: red;
}

.menu, .page_item a, .menu-item a, .wp-block-navigation, .wp-block-navigation-item__content {
  font-family: "Alegreya Sans";
  font-size: 1.4rem;
}

/* GENERAL FONT */

hr {
  width: 50%;
  border: 0.1px solid red;
}

h1 {
  margin: 3.5rem auto 2rem;
  font-size: 1.4rem;
}

a:hover {
  color: red;
}

.post-title {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

.post-title a:hover {
  color: red;
}

.prose p a {
  color: red;
}

.prose p a:hover {
  color: white;
}

.cp-widget--header-1 .widget {
  font-size: 1.4rem;
}

.prose {
  margin-bottom: 0rem;
}

.article.page {
  margin-top: 0rem;
}

.term--post_tag {
  color: red;
}

@media (min-width: 43.75em) {
  .termindex ol {
    margin-right: -1rem;
  }
}

.meta {
  color: grey;
}

ol li, ul li {
  margin-bottom: 0rem;
}

.post-index {
  margin: 0;
  padding: 0;
}

.post-item {
  text-shadow: #fff 0 0 0px;
  display: inline-block;
  border-top: 0px;
  position: relative;
  z-index: 1;
}

.cp-widget--header-1 .widget a {
  margin: 1rem;
}

.post-item__text {
  font-size: 1.3rem;
  font-family: "Sansita";
}

.post-index__post-item:last-child .post-item {
  border-bottom: 0px;
}

article {
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 5rem;
}

ul {
  font-family: inherit;
}

ul a {
  color: black;
}

ul a:hover {
  color: red;
}

/* DISPLAY NONE */

.post-item__time,
.pagination__label,
.rpbt_shortcode,
.term__count,
.breadcrumb {
  display: none;
}

/* INDEX */

.termindex .term--category,
.termindex .term--post_format {
  font-size: 1.3rem;
  font-family: "Sansita";
}

.termindex {
  display: grid;
}

/* AUDIO PLAYER (1.0.9: fusionado; mismos valores finales) */

.mejs-time-rail,
.mejs-time,
.mejs-volume-button,
.mejs-horizontal-volume-total {
  display: none;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-time-rail .mejs-time-total {
  background: red;
}

.mejs-offscreen {
  background: white;
}

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
  background: white;
}

.mejs-container, .mejs-container div.mejs-controls, .mejs-embed, .mejs-embed body {
  background-color: black;
  padding-left: var(--gutter);
}

.mejs-controls {
  z-index: 1;
}

.mejs-container * {
  background: black;
}

/* TAG AUTHOR NAME */

/* 1.0.2: los artistas de la ficha usan la misma columna que el título
   (39rem centrada + gutter), así quedan alineados en móvil y escritorio. */
.post-tags {
  box-sizing: border-box;
  max-width: 39rem;
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: 0.1rem;
  font-family: "Alegreya Sans";
  font-size: 1rem;
}

@media (min-width: 43.75em) {
  .post-tags {
    padding-bottom: 1rem;
  }
}

.post-tags .term {
  margin: 0;
  padding: 0;
}

/* SCROLLBAR */

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  color: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* SELECTION */

::-moz-selection {
  color: red;
  background: white;
}

::selection {
  color: red;
  background: white;
}

.post-time {
  color: #616161;
}

/* BLOCKQUOTE — línea superior roja, sin línea lateral */

blockquote {
  border-left: 1px solid red;
  color: #616161;
}

.prose blockquote,
.prose .wp-block-quote {
  border-left: 0 !important;
  border-top: 1px solid red !important;
  color: #616161;
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-top: 1.2rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.prose blockquote p,
.prose .wp-block-quote p {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* IMÁGENES */

figure {
  margin-bottom: 0;
}

/* 1.0.2: antes 39rem fijos; en móvil desbordaba la pantalla (569px en un
   móvil de 390px) en los listados. Ahora nunca más ancho que su columna. */
figure img {
  min-width: min(39rem, 100%);
}

.pb-featured-image img {
  min-width: 100%;
}

/* AUTORES EN LISTADOS (Petit Bardo Tools) */

.pb-archive-authors {
  margin: -1rem auto 2.25rem auto;
  font-size: 1rem;
  line-height: 1.3;
  color: red;
  font-family: "Alegreya Sans";
  max-width: 39rem;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.pb-archive-authors a {
  color: red;
}

/* FICHA — separador rojo antes del pie */

body.single-post .post-meta {
  border-top: 0 !important;
  margin-top: 0;
  padding-top: 0;
}

body.single-post .post-meta::before {
  content: "";
  display: block;
  max-width: 37rem;
  width: 100%;
  border-top: 1px solid red;
  margin: 3rem auto 1.5rem auto;
}

/* GALERÍA — mismo ancho exacto que la columna de texto */

html body .gallery.pbgv-ready,
html body .wp-block-gallery.pbgv-ready {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 2.25rem auto !important;
    padding: 0 !important;
}

/* El borde y la imagen se ajustan a la mancha real del texto */

html body .gallery.pbgv-ready .pbgv-viewer,
html body .wp-block-gallery.pbgv-ready .pbgv-viewer {
    width: calc(100% - var(--gutter) - var(--gutter)) !important;
    max-width: calc(39rem - var(--gutter) - var(--gutter)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* PETIT BARDO — nombre del sitio */

#menu-menu > li > a {
  font-family: "Sansita", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ARCHIVES + INFO — menú normal, sin negrita */

#menu-menu-nav > li > a {
  font-family: "Alegreya Sans", sans-serif !important;
}

/* D6 — índice por ejes [pbindex] (/index) — antes snippet WPCode 7669 */

.termindex--axes .termgroup--axis > h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.termindex--axes .termgroup--axis > h2 .term__count { display: inline; color: grey; font-size: .75em; margin-left: .25em; }

/* 1.0.6 — /index ([pbindex] por ejes): columna del texto; cada eje es un párrafo
   con sus términos separados por comas. /artists no cambia. */
.termindex.termindex--axes {
  display: block; columns: auto; -moz-columns: auto;
  box-sizing: border-box; max-width: 39rem; margin: 0 auto 3rem; padding: 0 var(--gutter);
}
.termindex--axes .termgroup--axis { margin: 0 0 2rem; break-inside: auto; }
.termindex--axes .termgroup--axis > ol { display: block; margin: 0; }
.termindex--axes .termgroup--axis > ol > li { display: inline; margin: 0; text-indent: 0; }
.termindex--axes .termgroup--axis > ol > li > a { font-size: 0; } /* quita el espacio antes de la coma */
.termindex--axes .termgroup--axis > ol > li .term { font-size: 1.3rem; }
.termindex--axes .termgroup--axis > ol > li .term__count { display: none; }
.termindex--axes .termgroup--axis > ol > li:not(:last-child)::after { content: ", "; font-family: "Sansita", sans-serif; font-size: 1.3rem; }

/* 1.0.7 — Ningún enlace lleva subrayado (tampoco al pasar el ratón ni en el menú activo).
   El foco de teclado sigue visible con un contorno. */
a, a:hover, a:focus, a:active, a:visited,
.current-menu-item a, .current_page_item a, .page-numbers[aria-current=page] {
  text-decoration: none !important;
}
a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* 1.0.8 — CSS que Mikel añadió en Personalizar → CSS adicional (copiado tal cual el 24/09),
   con un único cambio: .footer-widgets conserva el margen lateral del tema (--gutter).
   Con «padding: 0» el buscador y los widgets del pie quedaban pegados al borde en el móvil. */
.widget-title { display: none; }
.footer-widgets {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-bottom: 0;
}
/* …y los «related posts» no suman un segundo margen: quedan en la misma línea que el texto. */
.footer-widgets .post-item { padding-left: 0; padding-right: 0; }
.site-footer { margin: 0; }
.widget h3, .widget ol, .widget p {
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: 1px solid black;
}
.widget { margin-bottom: 5rem; }
.searchform { padding: 0; margin: 0; }
h2 { color: black; margin-top: 0; margin-bottom: 0; }
.cp-widget--small .widget a { color: red; }
.cp-widget--small .widget a:hover { color: transparent; }

/* 1.0.8 — Nunca scroll horizontal (las imágenes giradas de «related posts» sobresalían en móvil). */
html, body { max-width: 100%; overflow-x: clip; }

/* 1.1.0 — article sin margen superior (decisión de Mikel, 25/09/2026). */
article { margin-top: 0; }

/* 1.1.0 — Cabecera igual que petitbardo.xyz (mismas medidas y posiciones, colores propios).
   La cabecera ya no tapa los clics: solo los enlaces reciben el ratón. */
.header { top: 1.5rem; } /* misma altura parada que al cargar: el logo no se mueve al hacer scroll */
.header, .header .nav, .header .container, .header .cp-widget, .header .widget { pointer-events: none; }
.header a { pointer-events: auto; }
.header .menu li { margin-top: -7px; }
.header #menu-menu > li,
.header #menu-menu > li > a { font-family: "Sansita", sans-serif !important; font-size: 1.8rem; line-height: 1.5; }
.cp-widget--header-1, .cp-widget--header-1 .widget { position: static !important; margin: 0 !important; padding: 0 !important; }
.cp-widget--header-1 .menu {
  position: fixed !important; top: 2rem !important; right: 3.2rem !important; bottom: auto !important; left: auto !important;
  z-index: 9999 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  justify-content: flex-end !important; align-items: baseline !important; gap: 1.4rem !important;
  width: auto !important; max-width: calc(100vw - 6rem) !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.cp-widget--header-1 .menu > li { margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
.cp-widget--header-1 .menu > li > a { margin: 0 !important; padding: 0 !important; line-height: 1 !important; white-space: nowrap !important; font-size: 1.4rem; }
.cp-widget--header-1 .menu li:after { content: none !important; }
@media (max-width: 700px) {
  .cp-widget--header-1 .menu {
    top: auto !important; right: 1.4rem !important; bottom: 1.4rem !important;
    flex-direction: column !important; align-items: flex-end !important; gap: .7rem !important; max-width: calc(100vw - 2.8rem) !important;
  }
  .cp-widget--header-1 .menu > li > a { font-size: 1.9rem !important; }
  /* 1.1.2 — sin el fondo blanco que añadió 1.1.1 (decisión de Mikel, 25/09/2026). */
}
@media (max-width: 480px) {
  .cp-widget--header-1 .menu { right: 1.2rem !important; bottom: 1.2rem !important; gap: .6rem !important; }
  .cp-widget--header-1 .menu > li > a { font-size: 1.7rem !important; }
}

/* 1.1.0 — Símbolo de Instagram abajo a la izquierda: mismo tamaño y sitio que el de Bandcamp en petitbardo.xyz. */
.pbta-social { position: fixed; left: calc(var(--gutter) * 2 - 1.4rem); bottom: 1.35rem; z-index: 404; display: block; width: 34px; height: 35.5px; line-height: 0; }
@media (min-width: 43.75em) { .pbta-social { bottom: 2.1rem; } }
.pbta-social svg { width: 34px; height: 35.5px; display: block; }
.pbta-social:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* 1.1.0 — Enlaces legales del pie, discretos. */
.pbta-legal { position: relative; z-index: 2; clear: both; max-width: 39rem; margin: 0 auto; padding: 1rem var(--gutter) 5rem; font-family: "Alegreya Sans", sans-serif; font-size: .85rem; color: grey; }
.pbta-legal a { color: grey; }
.pbta-legal a:hover { color: red; }
.pbta-legal span + span::before { content: " · "; }

/* 1.1.2 — Instagram: al pasar el ratón o con foco de teclado, el círculo se pone rojo
   (el rojo de los enlaces) y el glifo sigue en blanco. El 2.º <circle> del SVG es el disco. */
.pbta-social svg > circle:nth-of-type(2) { transition: fill .25s ease-in-out; }
.pbta-social:hover svg > circle:nth-of-type(2),
.pbta-social:focus-visible svg > circle:nth-of-type(2) { fill: red; }

/* 1.1.2 — Fichas: más aire entre el último enlace de referencia y el embed (YouTube, Bandcamp…).
   Dos formas en las fichas: el embed en su propio párrafo tras el de enlaces (ya tenía el margen
   del párrafo, 1.5rem, y se le suma otro tanto) o en el mismo párrafo tras un <br> (no tenía
   ninguno: 3rem para quedar igual). El margen va en el iframe (inline): se suma, no se colapsa. */
.prose p:has(> a) + p > iframe:first-child { margin-top: 1.5rem; }
.prose p > a + br + iframe { margin-top: 3rem; }

/* 1.1.2 — Listados: más separación entre una obra y la siguiente, para que los términos de
   una no queden pegados al año de la siguiente (/topic/…, /artist/…, búsqueda) ni al título
   siguiente (/list). */
.articles > article + article { margin-top: 3rem; }
.prose .post-index > .post-index__post-item + .post-index__post-item { margin-top: 1rem; }

/* 1.1.2 — Tablas (p. ej. /cookie-policy): dentro de la columna de texto (39rem con su gutter),
   letra menor, texto y <code> que se parten, filetes finos como el resto del tema. */
.prose table {
  box-sizing: border-box;
  width: calc(100% - var(--gutter) - var(--gutter));
  max-width: calc(39rem - var(--gutter) - var(--gutter));
  margin: 0 auto 1.5rem;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid red;
  font-size: .85rem;
  line-height: 1.4;
}
.prose th, .prose td {
  padding: .45em .5em .45em 0;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.prose th { font-weight: normal; color: grey; }
.prose td code, .prose th code {
  font-size: .95em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* 1.1.2 — Móvil: al final de cada página, ni el menú fijo (Archives / Info) ni el símbolo de
   Instagram tapan el crédito ni los enlaces legales. El menú ocupa hasta ~6rem desde abajo. */
@media (max-width: 700px) {
  .pbta-legal { padding-bottom: 8rem; }
}