/* =============================================================================
   Rubi Odonto :: conteudo.css (artigo, página, tratamento, 404)
   O texto do editor (.texto) e os poucos blocos que o conteúdo usa: o CSS de
   blocos do WordPress não carrega no site (ver DECISOES.md, "CSS de blocos").
   ========================================================================== */

/* ===== Foto do topo ===== */
.capa {
  margin: 0 0 2rem;
}

.capa img {
  display: block;
  width: 100%;
  border-radius: var(--rbo-raio);
  box-shadow: var(--rbo-sombra-sm);
}

/* ===== Artigo: categoria, revisão, datas ===== */
.artigo__categoria {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .25rem .8rem;
  background: var(--rbo-rubi-50);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--rbo-rubi-700);
  text-decoration: none;
}

.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .95rem;
  color: var(--rbo-texto-suave);
}

.artigo__meta > span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.artigo__revisao a {
  font-weight: 700;
}

/* ===== Tratamento: outros nomes e fatos rápidos ===== */
.cabecalho--tratamento {
  background: linear-gradient(180deg, var(--rbo-fundo-suave), var(--rbo-fundo));
}

.tratamento__nomes {
  margin-bottom: .5rem;
  color: var(--rbo-texto-suave);
  font-style: italic;
}

.fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.fatos__item {
  padding: 1.25rem 1.4rem;
  background: var(--rbo-fundo-suave);
  border-radius: var(--rbo-raio-sm);
}

.fatos dt {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  color: var(--rbo-rubi-800);
}

.fatos dd {
  margin: 0;
}

/* ===== Sumário ===== */
.sumario {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--rbo-fundo-suave);
  border-radius: var(--rbo-raio);
}

.sumario__titulo {
  margin-bottom: .75rem;
  font-family: var(--rbo-fonte-texto);
  font-size: 1rem;
  font-weight: 800;
}

.sumario ol {
  margin: 0;
  padding-left: 1.25rem;
}

.sumario li {
  margin-bottom: .35rem;
}

/* ===== Texto do editor ===== */
.texto {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.texto--pequeno {
  font-size: 1rem;
}

.texto > :first-child {
  margin-top: 0;
}

.texto h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
}

.texto h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.35rem;
}

.texto h4 {
  margin: 1.75rem 0 .5rem;
  font-family: var(--rbo-fonte-texto);
  font-size: 1.1rem;
  font-weight: 800;
}

.texto p,
.texto ul,
.texto ol {
  margin-bottom: 1.25rem;
}

.texto li {
  margin-bottom: .4rem;
}

.texto li::marker {
  color: var(--rbo-rubi-700);
}

.texto a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.texto blockquote,
.texto .wp-block-quote {
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 4px solid var(--rbo-rubi-300);
  font-family: var(--rbo-fonte-titulo);
  font-size: 1.2rem;
  color: var(--rbo-rubi-900);
}

.texto blockquote cite {
  display: block;
  margin-top: .5rem;
  font-family: var(--rbo-fonte-texto);
  font-size: .95rem;
  font-style: normal;
  color: var(--rbo-texto-suave);
}

.texto hr,
.texto .wp-block-separator {
  margin: 2.5rem auto;
  border: 0;
  border-top: 2px solid var(--rbo-rubi-100);
  opacity: 1;
}

/* ===== Blocos do editor que o conteúdo usa ===== */
.texto figure,
.texto .wp-block-image {
  margin: 2rem 0;
}

.texto img {
  border-radius: var(--rbo-raio-sm);
}

.texto figcaption,
.texto .wp-element-caption {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--rbo-texto-suave);
  text-align: center;
}

.texto .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.texto .aligncenter img {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .texto .alignleft {
    float: left;
    max-width: 50%;
    margin: .25rem 1.75rem 1rem 0;
  }

  .texto .alignright {
    float: right;
    max-width: 50%;
    margin: .25rem 0 1rem 1.75rem;
  }
}

.texto::after {
  content: '';
  display: table;
  clear: both;
}

.texto .has-text-align-center {
  text-align: center;
}

.texto .has-text-align-right {
  text-align: right;
}

.texto .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.texto .wp-block-column {
  flex: 1 1 260px;
  min-width: 0;
}

.texto .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0;
}

.texto .wp-block-button__link {
  display: inline-block;
  padding: .7rem 1.4rem;
  background: var(--rbo-rubi-700);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.texto .wp-block-button__link:hover {
  background: var(--rbo-rubi-800);
  color: #fff;
}

/* Tabela: rola para o lado no celular em vez de estourar a tela */
.texto .wp-block-table {
  overflow-x: auto;
}

.texto table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  font-size: .97rem;
}

.texto th,
.texto td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rbo-rubi-100);
  text-align: left;
}

.texto th {
  background: var(--rbo-fundo-suave);
  color: var(--rbo-rubi-900);
}

/* Vídeo e mapa: proporção reservada, a página não pula quando eles carregam */
.texto .wp-block-embed__wrapper,
.texto iframe {
  width: 100%;
  max-width: 100%;
}

.texto .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.texto iframe[src*="youtube"] {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--rbo-raio-sm);
}

/* ===== Tratamento relacionado (dentro do artigo) ===== */
.caixa-tratamento {
  margin: 3rem 0 1rem;
  padding: 1.75rem 2rem;
  background: var(--rbo-fundo-suave);
  border-radius: var(--rbo-raio);
  box-shadow: var(--rbo-sombra-sm);
}

.caixa-tratamento__rotulo {
  margin-bottom: .25rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--rbo-rubi-700);
}

.caixa-tratamento__titulo {
  margin-bottom: .5rem;
  font-size: 1.5rem;
}

.caixa-tratamento__titulo a {
  color: inherit;
  text-decoration: none;
}

.caixa-tratamento__titulo a:hover {
  color: var(--rbo-rubi-700);
}

/* ===== 404 ===== */
.error404 .busca {
  margin-bottom: 1rem;
}