/*
 * Estilo do conteúdo editável no painel (texto das publicações e páginas
 * genéricas). 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.).
 */
@layer components {
  [data-obs-conteudo] :where(p) {
    font-size: 1rem;
    line-height: 1.625;
    color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
  }

  [data-obs-conteudo] :where(h2, h3, h4) {
    font-family: var(--font-display);
    color: var(--color-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(--color-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: var(--color-accent); }

  [data-obs-conteudo] :where(a) {
    color: var(--color-signal);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  [data-obs-conteudo] :where(strong, b) {
    font-weight: 600;
    color: var(--color-primary-foreground);
  }

  [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(--color-primary-foreground) 65%, transparent);
  }

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

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

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