/* O cabeçalho do livro do Golden Flame, nos dois sites. Pedido do Og em 25/09/2026: a marca no
   alto, e embaixo os capítulos, os subcapítulos e as seções, uma fileira por nível, como o
   Archive of Nethys. O HTML é escrito no build pelo kaladiz_site.py (ligar_navegacao); aqui só a
   aparência. As cores são as do tema grimório, as mesmas do quartz.config.yaml. */

.gf-cabecalho {
  --gf-c-ouro: #d9a441;
  --gf-c-lilas: #b9a0e0;
  --gf-c-apagado: #9a8fa8;
  --gf-c-creme: #e7ddc8;
  --gf-c-fio: #2d2738;
  margin: 2.4rem 0 0;
}

.gf-cabecalho + .page-header,
.page > #quartz-body .gf-cabecalho + .page-header { margin-top: 1.6rem; }

.gf-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none !important;
  background: none !important;
}
.gf-marca img { width: 34px; height: 34px; flex: 0 0 auto; }
.gf-marca span {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.07em;
  color: var(--gf-c-ouro);
  line-height: 1;
}

/* as três fileiras: quanto mais funda, mais recuada e mais miúda */
.gf-fileira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.15rem;
}
.gf-fileira .gf-i { display: inline-flex; align-items: center; }
.gf-fileira a {
  text-decoration: none !important;
  background: none !important;
  border-bottom: 2px solid transparent;
  padding: 0.28rem 0 0.2rem;
  transition: color 0.15s, border-color 0.15s;
}
.gf-fileira a:hover { color: var(--gf-c-ouro) !important; }
.gf-fileira a.atual { color: var(--gf-c-ouro) !important; border-bottom-color: var(--gf-c-ouro); }
.gf-fileira a:focus-visible { outline: 2px solid var(--gf-c-ouro); outline-offset: 2px; }

.gf-capitulos {
  margin-top: 1.1rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--gf-c-fio);
  border-bottom: 1px solid var(--gf-c-fio);
}
.gf-capitulos a {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--gf-c-apagado) !important;
}

.gf-subcapitulos {
  margin-top: 0.45rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(185, 160, 224, 0.45);
}
.gf-subcapitulos a {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--gf-c-lilas) !important;
}

.gf-secoes {
  margin-top: 0.3rem;
  padding-left: 1.8rem;
  gap: 0.1rem 1rem;
}
.gf-secoes a {
  font-family: "Crimson Pro", Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gf-c-creme) !important;
  opacity: 0.82;
}
.gf-secoes a:hover { opacity: 1; }

/* a chama do trilho passa a ser o ícone do Golden Flame, em cor, e não mais a máscara do Lorc */
@media all and not (max-width: 800px) {
  /* `clip` e não `hidden`: com `hidden` o trilho ainda ROLA por dentro quando o menu leva o item
     atual para a vista, e a chama saía cortada na borda (medido: scrollLeft de 33px no Bard) */
  .page > #quartz-body .sidebar.left { overflow: clip !important; }
  .page > #quartz-body .sidebar.left::before {
    -webkit-mask: none !important;
    mask: none !important;
    background: url("/static/gf-icone.svg") center / contain no-repeat !important;
  }
}

@media (max-width: 800px) {
  /* no celular a barra do Quartz já trazia o nome do site, e ele saía duas vezes, uma sem ícone */
  .page > #quartz-body .sidebar.left .page-title { display: none; }
  .gf-cabecalho { margin-top: 1.2rem; }
  .gf-marca span { font-size: 1.3rem; }
  .gf-fileira { gap: 0.1rem 0.9rem; }
  .gf-secoes { padding-left: 0.9rem; }
}