/* ==========================================================================
   Pages — page.php, single.php, search.php, 404.php y pasarelas WooCommerce
   (carrito/pedido/mi-cuenta) que usan la plantilla `page`. Patrón:
     - banner marrón full-bleed con el título de la página (consistente con el
       hero del Home y la Tienda, pero más compacto)
     - cuerpo centrado con max-width del contenedor del tema

   El banner sólo se inyecta cuando el template marca el <main> con la clase
   `site-main--bannered`, así Elementor/Theme Builder pueden seguir
   tomando control completo del layout cuando aplique.
   ========================================================================== */

/* Doble selector para batir la specificity de `.site-main` en 07-layout.css. */
.site-main.site-main--bannered {
  padding-block: 0;
  padding-inline: 0;
  max-width: none;
}

/* ==========================================================================
   Banner — banda marrón compacta con el título de la página
   ========================================================================== */
.page-banner {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding-block: calc(var(--spacing-unit) * 2);
  margin: 0;
}

.page-banner__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

.page-banner__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-hero-size);
  line-height: var(--line-height-display);
  color: var(--color-text-on-dark);
  margin: 0;
}

.page-banner__lead {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text-on-dark);
  margin: 0.75rem 0 0;
  max-width: 720px;
}

@media (min-width: 1024px) {
  .page-banner {
    padding-block: calc(var(--spacing-unit) * 3);
  }
}

/* ==========================================================================
   Cuerpo — contenedor centrado con padding-block para separar del banner
   ========================================================================== */
.page-body {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
  padding-block: var(--section-padding-y);
}

/* Variante "narrow" para artículos largos (single.php) — limita la línea de
   medida para legibilidad sin tener que redefinir el container global. */
.page-body--narrow {
  max-width: 820px;
}

/* Cuando el contenido lo gestiona Elementor, no metemos `page-body` para no
   recortar las secciones full-bleed que el usuario diseñe; sólo añadimos un
   padding-block para que no quede pegado al banner. */
.entry-content--elementor {
  padding-block: var(--section-padding-y);
}

/* ==========================================================================
   Tipografía del contenido — refuerza el look Obrador en bloques de Gutenberg
   ========================================================================== */
.page-body .entry-content {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.page-body .entry-content > * + * {
  margin-top: 1.25em;
}

.page-body .entry-content h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.7);
  line-height: var(--line-height-display);
  color: var(--color-primary);
  margin-top: 1.5em;
}

.page-body .entry-content h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: var(--font-card-title-size);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin-top: 1.25em;
}

.page-body .entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.page-body .entry-content a:hover,
.page-body .entry-content a:focus {
  text-decoration: none;
}

.page-body .entry-content ul,
.page-body .entry-content ol {
  padding-left: 1.25rem;
}

.page-body .entry-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  margin-inline: 0;
  font-style: italic;
  color: var(--color-text);
}

.page-body .post-thumbnail {
  margin-bottom: 2rem;
  border-radius: var(--border-radius-image);
  overflow: hidden;
}

.page-body .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Single post — meta info bajo el título dentro del banner
   ========================================================================== */
.page-banner .entry-meta {
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.75rem;
}

.page-banner .entry-meta a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   Listados (blog/search) — centra título y caption, alinea con cards historia
   ========================================================================== */
.posts-list {
  display: grid;
  gap: 2.5rem;
}

.posts-list .entry-header .entry-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.5);
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.posts-list .entry-header .entry-title a {
  color: inherit;
  text-decoration: none;
}

.posts-list .entry-header .entry-title a:hover,
.posts-list .entry-header .entry-title a:focus {
  text-decoration: underline;
}

.posts-list .entry-meta {
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.posts-list .post-thumbnail {
  margin-bottom: 1rem;
  border-radius: var(--border-radius-image);
  overflow: hidden;
}

.posts-list .read-more {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.posts-list .read-more:hover,
.posts-list .read-more:focus {
  text-decoration: underline;
}

/* ==========================================================================
   No-results / 404 — caja centrada con CTA primario
   ========================================================================== */
.page-body .no-results,
.page-body .not-found {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  padding-block: 2rem;
}

.page-body .no-results .page-title,
.page-body .not-found .page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--font-display-size);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Paginación — `the_posts_pagination()` y `wp_link_pages()`
   ========================================================================== */
.pagination,
.posts-list + .pagination,
.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;            /* muchos números de página envuelven en vez de desbordar en móvil */
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  font-family: var(--font-ui);
}

.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.pagination .page-numbers.current,
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
  border-color: transparent;
}

.pagination .page-numbers.dots:hover,
.nav-links .page-numbers.dots:hover {
  background-color: transparent;
  color: var(--color-primary);
}

/* ==========================================================================
   Post navigation (prev/next bajo single)
   ========================================================================== */
.post-navigation {
  margin-top: 3rem;
  padding-block: 2rem;
  border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
  display: grid;
  gap: 1.5rem;
}

.post-navigation a {
  display: block;
  color: var(--color-primary);
  text-decoration: none;
}

.post-navigation .nav-subtitle {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--font-body-size-small);
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--font-display-size) * 0.4);
}

@media (min-width: 768px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
  }
  .post-navigation .nav-next {
    text-align: right;
  }
}

/* ==========================================================================
   Formulario de búsqueda — `searchform.php` y `get_search_form()`
   ========================================================================== */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-block: 1rem;
}

.search-form .search-field {
  flex: 1;
}

.search-form .search-submit {
  flex-shrink: 0;
}