/*
 * Mento Theme — mento-blog.css
 * Estilos adicionales para templates del blog real (archive.php, single.php).
 * Se carga solo en esas páginas, no en el SPA.
 */

/* ── BLOG NAV: full anchor links (no onclick) ── */
.nav-list a,
.nav-list button {
  /* En blog templates, la nav usa <a> con href para artículos */
  text-decoration: none;
}

/* ── NEWS CARD en archive: link semántico ── */
.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.news-card__link:hover  .news-card__img img { transform: scale(1.04); }
.news-card__link:focus  { outline: 2px solid var(--c-magenta); outline-offset: 2px; }

.mento-archive .news-card { cursor: default; }
.mento-archive .news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }

/* ── ARTICLE BODY — rich content from WordPress editor ── */
.mento-single .art-body h2 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 900; color: var(--c-ink); margin: 2.25rem 0 .875rem; letter-spacing: -.02em; }
.mento-single .art-body h3 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: var(--c-ink); margin: 1.75rem 0 .75rem; }
.mento-single .art-body h4 { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; color: var(--c-ink); margin: 1.5rem 0 .625rem; }
.mento-single .art-body p  { margin-bottom: 1.375rem; font-size: 1.0625rem; line-height: 1.82; }
.mento-single .art-body ul,
.mento-single .art-body ol { margin: 0 0 1.375rem 1.5rem; }
.mento-single .art-body li { font-size: 1rem; line-height: 1.8; margin-bottom: .375rem; }
.mento-single .art-body blockquote {
  border-left: 4px solid var(--c-magenta);
  padding: 1rem 1.375rem;
  background: var(--c-surface);
  margin: 1.75rem 0;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--c-ink);
}
.mento-single .art-body a { color: var(--c-magenta); text-decoration: underline; text-underline-offset: 3px; }
.mento-single .art-body a:hover { color: var(--c-magenta-d); }
.mento-single .art-body img { max-width: 100%; height: auto; border-radius: 3px; margin: 1.5rem auto; }
.mento-single .art-body figure { margin: 1.75rem 0; }
.mento-single .art-body figcaption { font-size: .875rem; color: var(--c-muted-l); text-align: center; margin-top: .5rem; font-style: italic; }
.mento-single .art-body hr { border: none; border-top: 1px solid var(--c-border); margin: 2.5rem 0; }
.mento-single .art-body code {
  background: var(--c-surface); padding: .15em .4em;
  border-radius: 3px; font-size: .875em;
  font-family: 'Courier New', Courier, monospace;
  color: var(--c-magenta);
}
.mento-single .art-body pre {
  background: var(--c-ink); color: #f0f0f0;
  padding: 1.25rem 1.5rem; border-radius: 4px;
  overflow-x: auto; margin: 1.75rem 0;
  font-size: .9375rem; line-height: 1.65;
  font-family: 'Courier New', Courier, monospace;
}

/* ── PAGINATION ── */
.pagination { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem;
  font-family: var(--f-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; border-radius: 3px;
  color: var(--c-muted); border: 1px solid var(--c-border);
  text-decoration: none; transition: all .2s;
}
.pagination .page-numbers:hover { border-color: var(--c-magenta); color: var(--c-magenta); }
.pagination .page-numbers.current { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); }
.pagination .prev, .pagination .next { font-size: .6875rem; }