/*
 * Estilo do conteúdo editável no painel (texto das publicações e páginas
 * genéricas), sobre o fundo azul da página. Fica na camada "components" do
 * Tailwind, abaixo dos utilitários: não altera nenhum elemento do site
 * original, só dá forma a blocos que a equipe venha a adicionar (títulos,
 * listas, imagens etc.).
 *
 * As cores usam as variáveis do app.css (--primary-foreground, --accent);
 * o app.css compilado não tem as variáveis --color-*.
 */
@layer components {
  /* Cor de base do corpo: o mesmo branco a 80% dos parágrafos. */
  [data-obs-conteudo] {
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }

  [data-obs-conteudo] :where(p) {
    font-size: 1rem;
    line-height: 1.625;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }

  [data-obs-conteudo] :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    color: var(--primary-foreground);
    line-height: 1.25;
  }
  [data-obs-conteudo] :where(h2) { font-size: 1.5rem; }
  [data-obs-conteudo] :where(h3) { font-size: 1.25rem; }
  [data-obs-conteudo] :where(h4) { font-size: 1.125rem; }

  [data-obs-conteudo] :where(ul, ol) {
    padding-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.625;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }
  [data-obs-conteudo] :where(ul) { list-style: disc; }
  [data-obs-conteudo] :where(ol) { list-style: decimal; }
  [data-obs-conteudo] :where(li + li) { margin-top: 0.5rem; }
  [data-obs-conteudo] :where(li)::marker {
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }

  /* Links: branco sublinhado, para continuarem identificáveis. */
  [data-obs-conteudo] :where(a) {
    color: var(--primary-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Negrito e itálico herdam a cor do texto em volta. */
  [data-obs-conteudo] :where(strong, b, em, i) {
    color: inherit;
  }
  [data-obs-conteudo] :where(strong, b) { font-weight: 600; }

  [data-obs-conteudo] :where(img, video, iframe) {
    max-width: 100%;
    border-radius: 1.25rem;
  }
  [data-obs-conteudo] :where(img) { height: auto; }
  [data-obs-conteudo] :where(figcaption) {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }

  [data-obs-conteudo] :where(blockquote) {
    border-left: 3px solid color-mix(in oklab, var(--primary-foreground) 20%, transparent);
    padding-left: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }
  [data-obs-conteudo] :where(blockquote cite) { color: inherit; }

  [data-obs-conteudo] :where(hr) {
    border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 20%, transparent);
  }

  [data-obs-conteudo] :where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }
  [data-obs-conteudo] :where(th, td) {
    border: 1px solid color-mix(in oklab, var(--primary-foreground) 20%, transparent);
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
  }
  [data-obs-conteudo] :where(th) { font-weight: 600; }

  /*
   * Blocos de layout do editor (Colunas, Grupo, Linha, Pilha, Grade). O tema
   * não carrega os estilos globais do WordPress, que dão o arranjo e o espaço
   * entre os blocos de dentro deles: aqui eles ganham o arranjo padrão do
   * WordPress e o mesmo espaço do resto do texto (1,5rem); as colunas, 2em
   * entre si, como no WordPress.
   */
  [data-obs-conteudo] :where(.is-layout-flow, .is-layout-constrained) > :where(* + *) {
    margin-block-start: 1.5rem;
  }
  [data-obs-conteudo] :where(.is-layout-flex) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }
  [data-obs-conteudo] :where(.is-layout-flex.is-vertical) {
    flex-direction: column;
    align-items: flex-start;
  }
  [data-obs-conteudo] :where(.is-layout-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 1.5rem;
  }
  [data-obs-conteudo] :where(.wp-block-columns) {
    column-gap: 2em;
  }

  /*
   * Parágrafos, títulos e colunas vazios (sobras do editor) não ocupam
   * espaço. O !important vence o display:flex das Colunas, que o WordPress
   * imprime fora de camada.
   */
  [data-obs-conteudo] :where(p, h1, h2, h3, h4, h5, h6, .wp-block-column):empty,
  [data-obs-conteudo] :where(.wp-block-columns:not(:has(> :not(:empty)))) {
    display: none !important;
  }

  /*
   * Cores de texto vindas do editor (classes has-*-color e style="color:…"),
   * comuns nos posts importados, ficariam escuras sobre o azul: só neste
   * escopo, o texto herda a cor do site. Só a cor do texto muda; fundos e
   * imagens (inclusive gráficos) ficam como estão.
   */
  [data-obs-conteudo] :is([class*="-color"], [style*="color"]):not(img, svg, svg *) {
    color: inherit !important;
  }
  /* Títulos com cor do editor continuam no branco total dos títulos. */
  [data-obs-conteudo] :is(h1, h2, h3, h4, h5, h6):is([class*="-color"], [style*="color"]) {
    color: var(--primary-foreground) !important;
  }
}

/*
 * Imagem do editor em "Tamanho completo": o WordPress marca a figura com a
 * classe size-full, que no app.css também é um utilitário do Tailwind
 * (width e height 100%). Dentro de Colunas, ou de qualquer bloco em linha ou
 * grade, a altura de 100% passa a valer e o texto vaza da seção, ficando por
 * trás de "Outras notícias". No conteúdo, a figura volta ao tamanho automático
 * do WordPress. Fica na camada utilities, com seletor mais específico, para
 * vencer o .size-full; fora do conteúdo nada muda.
 */
@layer utilities {
  [data-obs-conteudo] .size-full {
    width: auto;
    height: auto;
  }
}