/*
  Meu Precatório · Blog — tabelas dentro dos posts (páginas singulares).

  O Blocksy desenha toda tabela como grade: borda de 1 px em cada célula, cabeçalho igual ao corpo.
  Aqui ela vira uma ficha: moldura única com raio e sombra em camadas, cabeçalho em Montserrat
  caixa-alta sobre um tom do papel, só divisórias horizontais e a primeira coluna como rótulo da
  linha. O JS (mp-blog-content.js) envolve cada tabela em `.mpb-table`, que rola na horizontal
  quando ela não cabe e mostra uma sombra no lado que ainda tem conteúdo. No celular, tabelas de três
  colunas ou mais com cabeçalho viram uma ficha por linha (`.mpb-table--stack`), cada valor com o
  nome da coluna em cima.

  Sem JS a tabela recebe o mesmo desenho, só sem a moldura e sem a rolagem.
  As tabelas antigas do editor clássico trazem width/border/cellpadding no HTML: tudo neutralizado.
*/

.entry-content {
  --mpt-line: #e3e8ee;
  --mpt-head-bg: #f4f6fb;
  --mpt-head-fg: #282b7e;
  --mpt-label: #1b1d58;
  --mpt-text: #3a4f66;
  --mpt-hover: #f8f9fd;
  --mpt-radius: 16px;
}

/* Moldura ------------------------------------------------------------ */

.entry-content .mpb-table {
  position: relative;
  margin-block: 2em;
  border: 1px solid var(--mpt-line);
  border-radius: var(--mpt-radius);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(27, 29, 88, 0.04),
    0 4px 12px -2px rgba(27, 29, 88, 0.05),
    0 16px 32px -12px rgba(27, 29, 88, 0.08);
  overflow: hidden;
}

.entry-content .mpb-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c9cde3 transparent;
}

/* Sombras de rolagem: aparecem só do lado em que ainda há colunas escondidas. */
.entry-content .mpb-table::before,
.entry-content .mpb-table::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.entry-content .mpb-table::before {
  left: 0;
  background: linear-gradient(to right, rgba(27, 29, 88, 0.1), rgba(27, 29, 88, 0));
}
.entry-content .mpb-table::after {
  right: 0;
  background: linear-gradient(to left, rgba(27, 29, 88, 0.1), rgba(27, 29, 88, 0));
}
.entry-content .mpb-table[data-more-left]::before,
.entry-content .mpb-table[data-more-right]::after {
  opacity: 1;
}

/* O <figure> do editor de blocos já é uma caixa: só zera a margem para a moldura mandar. */
.entry-content figure.wp-block-table:has(> .mpb-table) {
  margin-block: 0;
}
.entry-content figure.wp-block-table figcaption {
  margin-top: -1.25em;
  margin-bottom: 2em;
  font-size: 13px;
  color: #77756e;
}

/* Tabela ------------------------------------------------------------- */

.entry-content table {
  width: 100% !important;
  height: auto !important;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mpt-text);
  text-align: left !important;
  font-variant-numeric: tabular-nums lining-nums;
}
.entry-content > table {
  margin-block: 2em;
}

.entry-content table :is(th, td) {
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--mpt-line);
  vertical-align: top;
  text-align: left;
}
/* Colagens antigas: centralização e peso 400 escritos à mão em cada célula e span. */
.entry-content table :is(th, td),
.entry-content table :is(th, td) [style*='text-align'] {
  text-align: left !important;
}
.entry-content table [style*='font-weight'] {
  font-weight: inherit !important;
}
.entry-content table .mpb-num,
.entry-content table .mpb-num [style*='text-align'] {
  text-align: right !important;
  white-space: nowrap;
}
.entry-content table :is(th, td) p {
  margin: 0;
}
.entry-content table :is(th, td) p + p {
  margin-top: 0.5em;
}
.entry-content table tr:last-child > :is(th, td) {
  border-bottom: 0;
}

/* Cabeçalho: <thead>, ou a primeira linha feita só de <th> (o JS marca com .mpb-thead). */
.entry-content table thead :is(th, td),
.entry-content table tr.mpb-thead > :is(th, td) {
  padding-block: 12px;
  background: var(--mpt-head-bg);
  border-bottom: 1px solid #dadbec;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mpt-head-fg);
}
.entry-content table thead tr:last-child > :is(th, td) {
  border-bottom: 1px solid #dadbec;
}
.entry-content table tr.mpb-thead > :is(th, td) :is(strong, b) {
  font-weight: inherit;
}

/* Título dentro da tabela (primeira linha de célula única, nas tabelas antigas). */
.entry-content table tr.mpb-tcap > :is(th, td) {
  padding-block: 16px;
  background: #fff;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--mpt-label);
}

/* Primeira coluna = rótulo da linha. */
.entry-content table tbody tr:not(.mpb-thead, .mpb-tcap) > :first-child {
  font-weight: 600;
  color: var(--mpt-label);
}
.entry-content table tbody tr:not(.mpb-thead, .mpb-tcap) > th {
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.entry-content table.mpb-single-col tbody tr > :first-child {
  font-weight: 400;
  color: inherit;
}

@media (hover: hover) {
  .entry-content table tbody tr:not(.mpb-thead, .mpb-tcap):hover > :is(th, td) {
    background: var(--mpt-hover);
  }
}

.entry-content table a {
  color: #282b7e;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(252, 191, 0, 0.9);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.entry-content table a:hover {
  color: #1b1d58;
  text-decoration-color: #282b7e;
}

/* Tabela larga: as colunas não espremem abaixo de uma leitura confortável; a moldura rola. */
.entry-content .mpb-table--wide table :is(th, td) {
  min-width: 7.5rem;
}

/* Celular ------------------------------------------------------------ */

@media (max-width: 640px) {
  .entry-content {
    --mpt-radius: 14px;
  }
  .entry-content table {
    font-size: 14.5px;
  }
  .entry-content table :is(th, td) {
    padding: 12px 14px;
  }

  /* Uma ficha por linha: o nome da coluna em cima de cada valor. */
  .entry-content .mpb-table--stack table,
  .entry-content .mpb-table--stack tbody,
  .entry-content .mpb-table--stack tr,
  .entry-content .mpb-table--stack :is(th, td) {
    display: block;
    width: auto;
    min-width: 0;
  }
  .entry-content .mpb-table--stack :is(thead, tr.mpb-thead) {
    display: none;
  }
  .entry-content .mpb-table--stack tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mpt-line);
  }
  .entry-content .mpb-table--stack tbody tr:last-child {
    border-bottom: 0;
  }
  .entry-content .mpb-table--stack tbody tr > :is(th, td) {
    padding: 0;
    border: 0;
    background: none !important;
  }
  .entry-content .mpb-table--stack tbody tr > :first-child {
    margin-bottom: 10px;
    font-size: 15.5px;
  }
  .entry-content .mpb-table--stack tbody tr > :not(:first-child) + :not(:first-child) {
    margin-top: 10px;
  }
  .entry-content .mpb-table--stack tbody tr > :not(:first-child)[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #77756e;
  }
}

@media (max-width: 640px) {
  .entry-content .mpb-table--stack .mpb-num,
  .entry-content .mpb-table--stack .mpb-num [style*='text-align'] {
    text-align: left !important;
    white-space: normal;
  }
}