/* ==========================================================================
   EMDURB Modern — Typography
   Hierarquia tipográfica profissional e legível
   ========================================================================== */

/* ---- Reset tipográfico global ---- */
body {
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--color-gray-800) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'kern' 1;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight) !important;
  color: var(--color-gray-900) !important;
  margin-top: 0;
}

h1, .h1 { font-size: var(--font-size-4xl) !important; font-weight: 800 !important; }
h2, .h2 { font-size: var(--font-size-3xl) !important; }
h3, .h3 { font-size: var(--font-size-2xl) !important; }
h4, .h4 { font-size: var(--font-size-xl) !important; }
h5, .h5 { font-size: var(--font-size-lg) !important; font-weight: 600 !important; }
h6, .h6 { font-size: var(--font-size-base) !important; font-weight: 600 !important; }

/* ---- Parágrafos ---- */
p {
  margin-bottom: 1.25rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
}

/* ---- Links ---- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ---- Conteúdo de página / entry-content ---- */
.body-text p,
.entry-content p,
.page-content p,
.template-page p {
  margin-bottom: 1.35rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
  font-size: var(--font-size-base) !important;
}

.body-text h2,
.entry-content h2,
.page-content h2 {
  color: var(--color-blue) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-2xl) !important;
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-5);
  padding-bottom: var(--spacing-3);
  border-bottom: 3px solid var(--color-primary);
}

.body-text h3,
.entry-content h3,
.page-content h3 {
  color: var(--color-primary-dark) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-xl) !important;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
}

.body-text h4,
.entry-content h4,
.page-content h4 {
  color: var(--color-blue-dark) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-lg) !important;
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-3);
}

/* ---- Título de post (single) ---- */
.entry-title,
article .entry-title {
  font-size: var(--font-size-3xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  color: var(--color-blue-dark) !important;
  line-height: var(--line-height-tight) !important;
  margin-bottom: var(--spacing-5) !important;
}

/* ---- Post info / meta ---- */
.post-info,
.blog-item-date,
.post-meta {
  font-size: var(--font-size-sm) !important;
  color: var(--color-gray-500) !important;
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
}

/* ---- Focus visible (acessibilidade) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Listas dentro do conteúdo ---- */
.body-text ul,
.body-text ol,
.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol {
  padding-left: var(--spacing-8);
  margin-bottom: var(--spacing-5);
}

.body-text li,
.entry-content li,
.page-content li {
  margin-bottom: var(--spacing-3);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-base);
}

.entry-content ul li::marker {
  color: var(--color-primary);
}

.entry-content ol li::marker {
  color: var(--color-blue);
  font-weight: 700;
}

/* ---- Tabelas ---- */
.body-text table,
.entry-content table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-8);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.body-text table th,
.entry-content table th,
.page-content table th {
  background: var(--color-blue) !important;
  color: var(--color-white) !important;
  font-weight: 600;
  text-align: left;
  padding: var(--spacing-4) var(--spacing-5);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
}

.body-text table td,
.entry-content table td,
.page-content table td {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
}

.body-text table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td {
  background: var(--color-gray-50);
}

.body-text table tr:hover td,
.entry-content table tr:hover td {
  background: var(--color-blue-lighter);
}

/* ---- Blockquotes ---- */
.entry-content blockquote,
.page-content blockquote,
blockquote {
  border-left: 4px solid var(--color-primary) !important;
  background: var(--color-gray-50) !important;
  padding: var(--spacing-5) var(--spacing-6) !important;
  margin: var(--spacing-6) 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  font-style: italic;
}

blockquote p {
  color: var(--color-gray-700) !important;
  font-size: var(--font-size-lg) !important;
  margin-bottom: 0 !important;
}

/* ---- Strong / Bold dentro de conteúdo ---- */
.entry-content strong,
.page-content strong {
  color: var(--color-gray-900);
  font-weight: 700;
}

/* ---- Selection ---- */
::selection {
  background: rgba(226, 95, 51, 0.20);
  color: var(--color-gray-900);
}

/* ---- Responsividade ---- */
@media (max-width: 768px) {
  body {
    font-size: var(--font-size-sm) !important;
  }

  h1, .h1 { font-size: var(--font-size-2xl) !important; }
  h2, .h2 { font-size: var(--font-size-xl) !important; }
  h3, .h3 { font-size: var(--font-size-lg) !important; }

  .entry-title,
  article .entry-title {
    font-size: var(--font-size-2xl) !important;
  }
}