/* ============================================================================
   blog-extra.css — ÚNICO CSS propio del blog sobre el paquete de Claudio
   (F2 Task 4). Regla del plan F2: todo estilo que makroplaza.css/blog.css no
   cubren vive ACÁ, chico y documentado. No duplicar nada que ya exista en el
   paquete; no introducir paleta propia (solo variables Bootstrap del tema).
   ========================================================================== */

/* Skip-link de accesibilidad (el mockup no lo trae; mejora aria permitida por
   el plan si no cambia lo visual): oculto hasta recibir foco por teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--bs-dark);
  color: var(--bs-white);
}
.skip-link:focus {
  left: 0;
}

/* Cuerpo del CMS (columna .article-body del layout de artículo): los h2 que el
   redactor escribe en markdown salen sin clases; en blog-article.html los
   títulos de sección van con `text-primary mb-3` — se replica por CSS para no
   transformar el HTML del Markdoc. */
.article-body h2 {
  color: var(--bs-primary);
  margin-bottom: 1rem;
}

/* Cuerpo rich de los bloques del CMS (.block-body dentro de cards/listas):
   sin margen fantasma al final de la tarjeta. */
.block-body > :last-child {
  margin-bottom: 0;
}

/* Lista numerada del CMS: cada bloque stepItem/processItem emite su PROPIO
   <ol class="list-group numbered-circle"> con un solo <li> (los tags Markdoc
   son hermanos sueltos, sin wrapper común). Estas reglas fusionan los <ol>
   consecutivos en UNA lista visual idéntica a la de blog-article.html:
   - margin-bottom:1rem propio → Bootstrap pone `.list-group` en margin-bottom:0
     (makroplaza.css pisa el 1rem del Reboot), así que sin esta regla los <ol>
     no tienen margen que el margin-top negativo pueda colapsar (se solapaban
     16px y se perdían los separadores — fix review ciclo 1) y la corrida
     quedaba pegada al contenido siguiente;
   - margen negativo → colapsa ese 1rem entre <ol> consecutivos (gap 0, borde
     de .list-group-item visible como separador, igual al <ol> único del mockup);
   - counter-reset:none → el contador `item` (blog.css) continúa del ol anterior
     (stepItem lo pisa con su counter-reset inline: el número del autor manda);
   - radios/borde → sin costura entre ítems, como un list-group único. */
.numbered-circle {
  margin-bottom: 1rem;
}
.numbered-circle + .numbered-circle {
  counter-reset: none;
  margin-top: -1rem;
}
.numbered-circle + .numbered-circle > .list-group-item:first-child {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.numbered-circle:has(+ .numbered-circle) > .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Imágenes del cuerpo del artículo (nodo image de Markdoc): centradas con aire
   vertical; el responsive/redondeo lo ponen img-fluid + rounded-4 (Bootstrap). */
.article-img {
  display: block;
  margin: 1.75rem auto;
}