/* ==========================================================================
   CKEditor Content Styles
   .ck-text — tipografia para texto rico (HTML do CKEditor) armazenado no
   banco. Aplicada pelo helper `prose(...)`; o card de layout fica por conta
   de Portais::ConteudoComponent.
   ========================================================================== */

/* Content typography */
.ck-text {
  @apply bg-white text-gray-700 text-base font-normal leading-relaxed break-words;
}
.ck-text p {
  @apply mb-5;
}
.ck-text h1 {
  @apply border-b border-gray-300 text-3xl font-bold mb-7 pb-5;
  color: var(--color-theme-heading);
}
.ck-text h2 {
  @apply text-2xl font-bold mb-5 mt-2;
  color: var(--color-theme-heading);
}
.ck-text h3 {
  @apply text-xl font-bold mb-2.5 mt-1.5;
  color: var(--color-theme-heading);
}
.ck-text h3.subtitle {
  @apply -mt-4 mb-7;
}
.ck-text h4 {
  @apply text-lg font-bold mt-1 mb-2;
}
.ck-text li {
  @apply mb-2;
}
.ck-text b, .ck-text strong {
  @apply font-bold;
}
.ck-text code {
  @apply rounded px-3 py-1 text-sm;
  background-color: hsla(0, 0%, 78%, 0.3);
}
.ck-text .marker-yellow {
  @apply bg-yellow-200;
}
.ck-text img {
  @apply max-w-full h-auto mx-auto my-4;
}
.ck-text ol,
.ck-text ul,
.ck-text dl {
  @apply ps-5 mt-4 mb-6;
}
/* O reset do Tailwind zera o marcador (`ol,ul,menu{list-style:none}`) e o
   recuo aqui era reposto sem ele — listas do conteudo ficavam sem bolinha nem
   numero. `revert` volta ao user-agent, que ja traz disc/circle/square por
   nivel de aninhamento e decimal no ol. */
.ck-text ul,
.ck-text ol {
  list-style: revert;
}
.ck-text small.sub {
  @apply block text-gray-500 text-sm leading-tight;
}
.ck-text a:not([class*="bg-"]) {
  color: var(--color-theme-dark);
}
.ck-text a:not([class*="bg-"]):hover {
  color: var(--color-theme);
}

/* Tables */
.ck-text table:not(.custom-table *) {
  @apply w-auto border-collapse mx-auto my-5;
  background-color: #fff !important;
}
.ck-text table:not(.custom-table *) th,
.ck-text table:not(.custom-table *) td {
  @apply border border-gray-300 py-2 px-3 text-center;
  background-color: #fff !important;
}
.ck-text table:not(.custom-table *) th {
  @apply font-bold;
}

/* Blockquote */
.ck-text blockquote {
  @apply border-l-4 border-gray-300 my-5 py-3 px-5 italic text-gray-600;
}

/* Separador. A cor vem do `color` porque o reset do Tailwind desenha o hr como
   border-top com border-color: currentColor. */
.ck-text hr {
  margin: 0 2rem 1.5rem 2rem;
  color: #ddd;
}

/* Broken image warning (legacy CSI image references) */
.ck-text img[src*="sti.catalogo"],
.ck-text img[src*="upload1"] {
  @apply border-4 border-dashed border-red-500 p-4 bg-red-100;
}

/* Ancoras do indice do artigo: o titulo alvo nao pode parar embaixo da navbar
   sticky. O offset vem do mesmo token que o layout ja define.
   Cobre h2/h3/h4 — os tres niveis que o editor produz e que o indice pode
   ancorar. O controller do indice tambem le este valor (scrollMarginTop do
   primeiro titulo) para saber onde fica a linha de leitura, entao um nivel de
   fora daqui traria de volta o descasamento entre ancora e destaque. */
.ck-text h2,
.ck-text h3,
.ck-text h4 {
  scroll-margin-top: calc(var(--layout-sticky-top, 4.5rem) + 1rem);
}