/* ==========================================================================
   Ajustes da Central de Ajuda SM Click sobre o tema Popular.

   As cores da marca ficam em hugo.yaml, em params.brand — o tema monta o site
   a partir de lá e não é preciso mexer em CSS para trocar de cor.

   Este arquivo cobre três coisas que o tema não traz:
     1. Modo escuro (o Popular é de paleta única)
     2. Navegação em árvore da documentação
     3. Busca

   Índice:
     1. Modo escuro
     2. Botão de trocar o tema
     3. Navegação lateral em árvore
     4. Busca
     5. Cartões e índice de seção
     6. Navegação entre páginas
     7. Ajustes de leitura
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Modo escuro

   O tema define as cores como variáveis. Aqui trocamos o valor delas quando a
   página está marcada como escura — o resto do site se ajusta sozinho.
   Os tons vêm do tema escuro do próprio produto
   (sm-zap-front/src/brand/whitelabels/smclick/themes/dark.json).
   -------------------------------------------------------------------------- */

html[data-tema="escuro"] {
  --surface-page: #111b21;
  --surface-card: #1c2b36;
  --surface-tertiary: #16232b;
  --surface-wash: #14303f;
  --surface-wash-soft: #14252d;
  --surface-ink: #0b1319;
  --surface-code: #16232b;

  --text-strong: #ffffff;
  --text-body: #d7e0e8;
  --text-muted: #9fb0bf;
  --text-link: #7dd3fc;
  --text-link-hover: #bae6fd;

  --ink-800: #ffffff;
  --ink-700: #d7e0e8;
  --ink-500: #9fb0bf;
  --ink-200: #2b3b46;
  --ink-100: #22313b;
  --ink-50: #16232b;

  --border-subtle: #26343d;
  --border-default: #33454f;
  --border-strong: #4b6374;

  /* No escuro o azul precisa ser mais claro para continuar legível.
     As variáveis gold-* são as que o tema usa para os tons derivados da cor
     principal — o nome vem do dourado original do Popular, mas o valor é
     nosso. */
  --color-primary: #38bdf8;
  --color-primary-hover: #7dd3fc;
  --color-primary-active: #0ea5e9;
  --gold-50: #12303f;
  --gold-100: #163a4c;
  --gold-300: #2b6c8c;
  --gold-500: #38bdf8;
  --gold-700: #7dd3fc;

  --color-accent: #4ade80;
  --indigo-500: #4ade80;

  --text-on-brand: #04222e;
  color-scheme: dark;
}

html[data-tema="escuro"] body {
  background: var(--surface-page);
  color: var(--text-body);
}

/* O tema usa branco fixo em algumas faixas; no escuro elas precisam acompanhar. */
html[data-tema="escuro"] .g-bg-white {
  background: var(--surface-page);
}

html[data-tema="escuro"] .g-bg-tertiary {
  background: var(--surface-tertiary);
}

html[data-tema="escuro"] .g-card,
html[data-tema="escuro"] .g-pagehero {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

html[data-tema="escuro"] header .g-nav,
html[data-tema="escuro"] .g-nav {
  background: var(--surface-page);
}

/* As caixas de aviso do tema usam cores claras fixas; no escuro o texto
   precisa voltar a ser escuro para continuar legível sobre elas. */
html[data-tema="escuro"] .g-callout--tip,
html[data-tema="escuro"] .g-callout--warn {
  color: #1b1b1b;
}

html[data-tema="escuro"] .g-callout--tip .g-callout__body,
html[data-tema="escuro"] .g-callout--warn .g-callout__body,
html[data-tema="escuro"] .g-callout--tip .g-callout__title,
html[data-tema="escuro"] .g-callout--warn .g-callout__title {
  color: #1b1b1b;
}

/* --------------------------------------------------------------------------
   2. Botão de trocar o tema
   -------------------------------------------------------------------------- */

.sm-tema-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: 0.5rem;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sm-tema-botao:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--gold-50);
}

/* --------------------------------------------------------------------------
   3. Navegação lateral em árvore

   O tema lista as páginas de documentação numa lista plana. Nossa documentação
   tem mais de 140 páginas em vários níveis, então usamos árvore: cada seção é
   um <details> que abre e fecha, e as seções do caminho da página aberta já
   vêm abertas.
   -------------------------------------------------------------------------- */

.sm-sidebar {
  gap: 0;
}

.sm-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Recuo por nível, com uma linha guia à esquerda. */
.sm-nav--n1,
.sm-nav--n2,
.sm-nav--n3,
.sm-nav--n4 {
  margin-inline-start: 0.55rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--border-subtle);
}

.sm-nav li {
  margin: 0;
}

.sm-nav__item,
.sm-nav__capa,
.sm-nav__anchor {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--text-body);
  border-left: 3px solid transparent;
}

.sm-nav__item:hover,
.sm-nav__capa:hover,
.sm-nav__anchor:hover {
  color: var(--color-primary);
}

.sm-nav__item.is-active,
.sm-nav__capa.is-active {
  color: var(--gold-700);
  background: var(--gold-50);
  border-left-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Cabeçalho de uma seção que abre e fecha. */
.sm-nav__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.sm-nav__resumo::-webkit-details-marker {
  display: none;
}

.sm-nav__resumo:hover {
  color: var(--color-primary);
  background: var(--gold-50);
}

.sm-nav__seta {
  flex: none;
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

details[open] > .sm-nav__resumo .sm-nav__seta {
  transform: rotate(90deg);
}

/* "Visão geral": link para a capa da própria seção. */
.sm-nav__capa {
  margin-inline-start: 0.55rem;
  padding-inline-start: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Títulos internos da página aberta. */
.sm-sidebar__titulo {
  margin: 1.25rem 0 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sm-nav__anchor {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sm-nav__anchor--n2 {
  padding-inline-start: 1.4rem;
}

/* --------------------------------------------------------------------------
   4. Busca
   -------------------------------------------------------------------------- */

.sm-busca {
  position: relative;
  margin-bottom: 1rem;
}

.sm-busca__campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-muted);
}

.sm-busca__campo:focus-within {
  border-color: var(--color-primary);
}

.sm-busca__campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
}

.sm-busca__resultados {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 0.4rem);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.35rem;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.45);
}

.sm-busca__item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
}

.sm-busca__item:hover {
  background: var(--gold-50);
}

.sm-busca__titulo {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.sm-busca__trilha {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sm-busca__vazio {
  margin: 0;
  padding: 0.6rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Cartões e índice de seção
   -------------------------------------------------------------------------- */

.sm-indice-secao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: var(--space-5);
}

.sm-card {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sm-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px -18px rgb(0 0 0 / 0.4);
}

.sm-card__title {
  margin: 0 0 0.3rem;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--text-strong);
}

.sm-card__icon {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  color: var(--color-primary);
}

.sm-card__contagem {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Grade dos cartões usados dentro do conteúdo. */
.sm-cards {
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   6. Navegação entre páginas
   -------------------------------------------------------------------------- */

.sm-paginacao {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.sm-paginacao__link {
  flex: 1;
  max-width: 22rem;
  padding: 0.9rem 1.1rem;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sm-paginacao__link:hover {
  border-color: var(--color-primary);
  background: var(--gold-50);
}

.sm-paginacao__link--fim {
  text-align: end;
}

.sm-paginacao__rotulo {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sm-paginacao__titulo {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   7. Ajustes de leitura
   -------------------------------------------------------------------------- */

/* Em telas estreitas a barra lateral vai para cima do conteúdo. */
@media (max-width: 900px) {
  .g-doc {
    grid-template-columns: 1fr;
  }

  .sm-sidebar {
    position: static;
    max-height: none;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
  }

  .sm-paginacao {
    flex-direction: column;
  }

  .sm-paginacao__link--fim {
    text-align: start;
  }
}

/* --------------------------------------------------------------------------
   8. Vídeo

   Mantém a proporção 16:9 em qualquer largura de tela.
   -------------------------------------------------------------------------- */

.sm-video {
  margin: var(--space-4) 0;
}

.sm-video__quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--surface-tertiary);
}

.sm-video__quadro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sm-video figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Imagens de captura de tela dentro do conteúdo. */
.g-prose img {
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
}