/* ─────────────────────────────────────────────────────────────────────────────
   .ugel-post-content — estilos para el cuerpo del post en single-post de
   Contrataciones, Documentos e Integridad.

   Se aplica al contenido editado por el usuario en el editor de WP, garantizando
   que links, listas, párrafos y headings se vean uniformes y los enlaces sean
   reconocibles como clicables (azul + subrayado), independientemente del tema.

   Heredamos `.ugel-scope` para box-sizing/tipografía base, y override links a
   underline porque en cuerpo-de-post las convenciones web esperan que un link
   se vea como link (a diferencia de los listings, donde el azul/permalink ya
   es señal suficiente).
   ────────────────────────────────────────────────────────────────────────── */

/* Tipografía body del post — sigue estándares de UX para long-form reading:
   - 18px (1.125rem): tamaño base recomendado por Medium, Substack, Apple HIG
     y Material Design para texto extenso. Más cómodo que el mínimo legal de
     16px de WCAG.
   - line-height 1.7: rango óptimo (1.6-1.75) para lectura fluida en pantalla.
   - max-width 70ch: ~70 caracteres por línea, el rango ideal de legibilidad
     según Bringhurst y Baymard. En el single (feature 016, T1) esa medida
     ya la impone `.ugel-single__inner` (theme.css), centrada, envolviendo
     cabecera + ficha + este cuerpo por igual — este componente solo llena
     el 100% de ese contenedor en vez de imponer un segundo cap propio (que
     antes quedaba pegado a la izquierda dentro de un `.wrap` sin centrar).
   - hyphens auto: corta palabras largas (URLs, nombres) sin desbordar. */
.ugel-post-content {
  font-family: var(--ugel-font-sans);
  color: var(--ugel-text);
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: -0.003em;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Links del cuerpo del post — estilo "obvio" con subrayado y color azul.
   Doble clase + `!important` para ganar especificidad sobre el tema/Bricks
   (que típicamente tiene reglas como `.entry-content a { color: inherit; }`
   con misma especificidad que la nuestra de una sola clase). */
.ugel-scope.ugel-post-content a,
.ugel-scope.ugel-post-content a:link {
  color: var(--ugel-blue) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
  word-break: break-word;
  pointer-events: auto !important;
  cursor: pointer;
}

.ugel-scope.ugel-post-content a:hover {
  color: var(--ugel-ink) !important;
  text-decoration-thickness: 2.5px;
}

.ugel-scope.ugel-post-content a:visited {
  color: #6b3fa0 !important;
}

/* Mantener el link claramente visible aun dentro de strong/em (caso UGEL muy común:
   el editor escribe "Ver aquí:" en negrita y dentro un <a>) */
.ugel-scope.ugel-post-content strong a,
.ugel-scope.ugel-post-content em a,
.ugel-scope.ugel-post-content b a,
.ugel-scope.ugel-post-content i a {
  color: var(--ugel-blue) !important;
  text-decoration: underline !important;
}

/* Párrafos — gap 1.4em (≈ line-height del párrafo) para respiración natural */
.ugel-post-content p {
  margin: 0 0 1.4em;
}

.ugel-post-content p:last-child {
  margin-bottom: 0;
}

/* Listas — espaciado proporcional al body */
.ugel-post-content ul,
.ugel-post-content ol {
  margin: 0 0 1.4em 1.6em;
  padding: 0;
}

.ugel-post-content li {
  margin-bottom: 0.65em;
  line-height: 1.65;
}

.ugel-post-content li > p:last-child {
  margin-bottom: 0;
}

.ugel-post-content li ul,
.ugel-post-content li ol {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Headings — escala tipográfica modular (ratio 1.25 "Major Third") basada en
   el body de 18px. Da jerarquía clara sin saltos abruptos.
   h2 ≈ 28px / h3 ≈ 23px / h4 ≈ 20px / h5 ≈ 18px. */
.ugel-post-content h2,
.ugel-post-content h3,
.ugel-post-content h4,
.ugel-post-content h5 {
  font-family: var(--ugel-font-display);
  font-weight: var(--ugel-fw-heading);
  color: var(--ugel-ink);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 2.4em 0 0.8em;
}

.ugel-post-content h2 { font-size: 1.75rem; }
.ugel-post-content h3 { font-size: 1.4rem;  }
.ugel-post-content h4 { font-size: 1.15rem; }
/* h5 NO es un título de display: es una etiqueta chica en mayúsculas. Por eso
   sale de la familia de display EXPLÍCITAMENTE, en vez de heredarla del bloque
   de arriba. Si se quedara en Archivo Black, su font-weight: 700 literal le
   ganaría por cascada al var(--ugel-fw-heading) del bloque compartido (misma
   especificidad, declarado después) y el navegador sintetizaría un bold falso
   sobre una cara que ya es negra — Archivo Black tiene un solo peso. En la
   familia de cuerpo el 700 es un peso real (019). */
.ugel-post-content h5 {
  font-family: var(--ugel-font-sans);
  font-size: 1rem;
  font-weight: var(--ugel-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ugel-post-content h2:first-child,
.ugel-post-content h3:first-child,
.ugel-post-content h4:first-child {
  margin-top: 0;
}

/* Imágenes */
.ugel-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem 0;
  border-radius: var(--ugel-r8);
}

/* Blockquote */
.ugel-post-content blockquote {
  border-left: 3px solid var(--ugel-gold);
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--ugel-muted);
  font-style: italic;
}

/* Code inline */
.ugel-post-content code {
  background: var(--ugel-sand-soft);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* Pre / bloques de código */
.ugel-post-content pre {
  background: var(--ugel-sand-soft);
  padding: 1rem 1.15rem;
  border-radius: var(--ugel-r8);
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 0.9rem;
}

.ugel-post-content pre code {
  background: transparent;
  padding: 0;
}

/* Tablas */
.ugel-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}

.ugel-post-content th,
.ugel-post-content td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--ugel-border);
  text-align: left;
}

.ugel-post-content th {
  font-weight: 700;
  color: var(--ugel-ink);
  background: var(--ugel-sand-soft);
}

/* Hr */
.ugel-post-content hr {
  border: 0;
  border-top: 1px solid var(--ugel-border);
  margin: 2rem 0;
}

/* Móvil: 16px (mínimo accesibilidad WCAG) + line-height ligeramente menor
   por el ancho reducido de la columna. Headings escalados pero manteniendo
   la jerarquía. */
@media (max-width: 600px) {
  .ugel-post-content {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 100%;
  }
  .ugel-post-content h2 { font-size: 1.5rem;  }
  .ugel-post-content h3 { font-size: 1.25rem; }
  .ugel-post-content h4 { font-size: 1.05rem; }
  .ugel-post-content ul,
  .ugel-post-content ol {
    margin-left: 1.3em;
  }
}