/**
 * Estilos para Notas de Rodapé
 * 
 * Estilos para exibição de notas de rodapé nos artigos e páginas.
 */

/* Referências de nota no texto */
.footnote-ref {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: var(--weight-bold);
  margin: 0 2px;
  transition: color 0.2s ease;
}

.footnote-ref:hover {
  color: var(--accent-2-dark);
  text-decoration: underline;
}

/* Separador antes das notas (oculto no frontend, visível apenas no editor) */
.footnotes-separator {
  display: none; /* Oculto no frontend - notas são exibidas em modais */
}

/* Seção de notas de rodapé (oculta no frontend, visível apenas no editor) */
.footnotes-section {
  display: none; /* Oculto no frontend - notas são exibidas em modais */
}

/* No editor Summernote, manter visível */
.note-editor .footnotes-section,
.ql-editor .footnotes-section {
  display: block !important;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.footnotes-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--heading);
  margin: 0 0 var(--space-md) 0;
}

/* Item de nota individual (oculto no frontend, visível apenas no editor) */
.footnote-item {
  display: none; /* Oculto no frontend - notas são exibidas em modais */
}

/* No editor Summernote, manter visível */
.note-editor .footnote-item,
.ql-editor .footnote-item {
  display: block !important;
  margin-bottom: 10px;
  font-size: 13px;
}

.footnote-item sup {
  font-size: 0.7em;
  margin-right: var(--space-xs);
  color: var(--accent-2);
}

.footnote-content {
  display: inline;
}

/* Link de voltar para a referência (oculto no frontend) */
.footnote-back {
  display: none; /* Oculto no frontend */
}

/* Estilos dentro do editor Summernote */
.ql-editor .footnote-ref,
.note-editor .footnote-ref {
  color: #0066cc;
  text-decoration: none;
}

.ql-editor .footnotes-section,
.note-editor .footnotes-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.ql-editor .footnote-item,
.note-editor .footnote-item {
  margin-bottom: 10px;
  font-size: 13px;
}

