/* ==========================================================================
   assets/exercicios_huios.css
   Estilo do conteúdo RICO dos exercícios da Huiós.

   POR QUE ESTE ARQUIVO EXISTE
     Os três campos de conteúdo do exercício — enunciado, ajuda e instruções —
     passaram a aceitar HTML colado pelo autor. Tabela, lista e destaque
     precisam de estilo, e ele não pode viver em dois lugares que seriam
     errados:
       · inline, dentro de cada conteúdo gravado — repetiria a folha de estilo
         em cada questão do banco e obrigaria a reeditar tudo para mudar uma cor;
       · em assets/styles.css, vitrine.css ou atividade.css — são folhas
         COMPARTILHADAS com o NEXO30, e um seletor de tabela solto ali alcança
         tela daquele produto.

   ESCOPO
     Tudo abaixo está preso a `.huios-rico`, a classe que pages/exercicios_huios.py
     põe na div que embrulha o conteúdo. Nenhum seletor de elemento solto:
     `table { }` aqui pegaria a aplicação inteira, porque o Dash serve todo
     arquivo de assets/ em todas as páginas.

   As cores são as da marca: navy #07152F, dourado #D6B24C, cinza de apoio.
   ========================================================================== */

.huios-rico {
  color: #1D2D44;
  font-size: 15px;
  line-height: 1.65;
}

/* O enunciado ocupa o lugar do antigo <h3 class="apostila-title">, então herda
   o peso e o tamanho daquele título. A ajuda fica em segundo plano. */
.huios-rico--enunciado {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: #07152F;
}

.huios-rico--ajuda {
  opacity: 0.8;
  font-size: 14px;
}

/* Markdown embrulha o conteúdo num wrapper próprio; sem isto o primeiro e o
   último parágrafo abrem um respiro que o layout não previa. */
.huios-rico > div > :first-child { margin-top: 0; }
.huios-rico > div > :last-child  { margin-bottom: 0; }

.huios-rico p { margin: 0 0 10px 0; }

.huios-rico h2,
.huios-rico h3,
.huios-rico h4 {
  color: #07152F;
  line-height: 1.3;
  margin: 18px 0 8px 0;
}
.huios-rico h2 { font-size: 20px; }
.huios-rico h3 { font-size: 17px; }
.huios-rico h4 { font-size: 15px; }

.huios-rico strong { font-weight: 700; color: #07152F; }
.huios-rico em     { font-style: italic; }
.huios-rico u      { text-decoration: underline; }

.huios-rico ul,
.huios-rico ol { margin: 0 0 10px 0; padding-left: 22px; }
.huios-rico li { margin-bottom: 4px; }

.huios-rico a {
  color: #0A6ED1;
  text-decoration: underline;
  overflow-wrap: anywhere;   /* URL longa não estoura a coluna no celular */
}

.huios-rico blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid #D6B24C;
  background: #F7F8FA;
  color: #3A4A63;
}

.huios-rico hr {
  border: 0;
  border-top: 1px solid #E4E9F0;
  margin: 16px 0;
}

.huios-rico code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  background: #F2F4F7;
  padding: 1px 5px;
  border-radius: 4px;
}

.huios-rico pre {
  background: #F2F4F7;
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;          /* código largo rola dentro do bloco */
}
.huios-rico pre code { background: none; padding: 0; }

.huios-rico img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ── Tabela ───────────────────────────────────────────────────────────────
   O motivo principal deste arquivo. A tabela é o elemento que o autor mais
   precisa e o que pior aparece sem estilo.

   A rolagem horizontal fica na PRÓPRIA tabela, com `display: block`, porque o
   autor cola só a <table> — não há um wrapper com overflow para envolvê-la, e
   inventar um exigiria pós-processar o HTML gravado.                        */
.huios-rico table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}

.huios-rico caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: #5A6B82;
  padding-bottom: 6px;
}

.huios-rico th,
.huios-rico td {
  border: 1px solid #E4E9F0;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.huios-rico thead th {
  background: #07152F;
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
}

.huios-rico tbody tr:nth-child(even) { background: #F7F8FA; }

@media (max-width: 640px) {
  .huios-rico--enunciado { font-size: 17px; }
  .huios-rico table      { font-size: 13px; }
  .huios-rico th,
  .huios-rico td         { padding: 6px 8px; }
}