/* ==========================================================================
   Apogee — cromo HUD das páginas de documentação.

   REGRA INVARIÁVEL: este arquivo estiliza CROMO — header, tabs, nav, busca,
   títulos, moldura de tabela, trilho de admonition, footer. Ele NUNCA
   seleciona .highlight, pre, code, .tabbed-* nem .doc-*, e nunca mexe em
   cor, tamanho ou entrelinha de parágrafo e lista.

   Dois motivos. Blocos de código pertencem a apogee-code.css, que já
   funciona — qualquer seletor daqui que os alcance vira conflito de
   cascata. E o corpo do texto é a superfície de leitura longa: é
   exatamente onde o efeito não deve chegar. "HUD contido" é isto.

   Carrega DEPOIS de apogee-brand.css (tokens) e de apogee-code.css.
   ========================================================================== */

/* ───────────────── Foco visível (o Material cobre parte) ───────────────── */
.md-content a:focus-visible,
.md-nav__link:focus-visible,
.md-typeset a:focus-visible,
.md-footer a:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ───────────────────────── Header e tabs ───────────────────────── */
.md-header {
  position: relative;
  background-color: var(--md-primary-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--apogee-border);
}

/* Hairline de acento: o "instrumento ligado". Estático de propósito —
   uma animação no topo de toda página cansaria em leitura longa. */
.md-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--apogee-brand) 30%,
    var(--apogee-cyan) 55%,
    transparent
  );
  opacity: 0.85;
}

.md-header__title {
  font-family: var(--apogee-wordmark-font);
  letter-spacing: 0.05em;
}

.md-header__topic > .md-ellipsis {
  font-weight: 700;
}

.md-tabs {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid var(--apogee-border);
}

.md-tabs__link {
  font-family: var(--apogee-display-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.78;
  transition: opacity 150ms, color 150ms;
}

.md-tabs__link:hover {
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

/* ───────────────────────────── Busca ───────────────────────────── */
.md-search__form {
  background-color: var(--apogee-surface-3);
  border: 1px solid var(--apogee-border-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.md-search__form:hover {
  background-color: var(--apogee-surface-3);
}

.md-search__form:focus-within {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 1px var(--md-accent-fg-color), 0 0 16px var(--apogee-glow);
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

.md-search__output {
  border-radius: 0 0 8px 8px;
}

/* ────────────────────────── Nav lateral ────────────────────────── */
.md-nav__title {
  font-family: var(--apogee-display-font);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}

/* Trilho de acento no item ativo. box-shadow inset em vez de border-left
   para não deslocar o texto ao alternar de página. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-typeset-a-color);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--apogee-cyan);
  padding-left: 0.4rem;
}

.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

.md-nav--secondary .md-nav__link--active {
  box-shadow: inset 2px 0 0 0 var(--apogee-brand);
}

/* ──────────────────────── Títulos do conteúdo ──────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--apogee-display-font);
  font-weight: 650;
}

/* Glow só no h1 — um por página. */
.md-typeset h1 {
  color: var(--md-default-fg-color);
  letter-spacing: -0.01em;
  text-shadow: 0 0 22px var(--apogee-glow);
}

/* h2 ganha régua em gradiente no lugar da borda cinza do tema. */
.md-typeset h2 {
  position: relative;
  letter-spacing: -0.005em;
  padding-bottom: 0.35rem;
  border-bottom: none;
}

.md-typeset h2::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--apogee-brand),
    var(--apogee-cyan) 35%,
    transparent 75%
  );
  opacity: 0.6;
}

.md-typeset h3 {
  color: var(--md-default-fg-color);
  letter-spacing: 0.005em;
}

.md-typeset .headerlink {
  color: var(--md-default-fg-color--lightest);
}

.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset .headerlink:focus {
  color: var(--md-accent-fg-color);
}

/* ─────────────────────────── Links do corpo ───────────────────────────
   Só a decoração e a transição; a COR vem de --md-typeset-a-color. */
.md-typeset a {
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  transition: color 120ms, text-decoration-color 120ms;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: currentColor;
}

/* ──────────────────────────── Tabelas ────────────────────────────
   Moldura de instrumento. Sem mexer em font-size nem line-height: as
   tabelas de parâmetros do mkdocstrings já são densas. */
.md-typeset table:not([class]) {
  border: 1px solid var(--apogee-border-strong);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--apogee-surface-3);
  font-family: var(--apogee-display-font);
  font-weight: 650;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--apogee-brand);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--md-typeset-table-color--light);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--md-default-bg-color--lightest);
}

/* ─────────────────────────── Admonitions ───────────────────────────
   Trilho esquerdo aceso e barra de título tingida. O CORPO fica com
   fundo e cor normais: é conteúdo de leitura. */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--apogee-border);
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--apogee-display-font);
  font-weight: 650;
  letter-spacing: 0.01em;
  background: var(--md-default-bg-color--lightest);
}

/* Glow por severidade, só no trilho — nunca sob o parágrafo. */
.md-typeset .admonition.note,
.md-typeset details.note {
  box-shadow: -4px 0 12px -6px var(--apogee-glow);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success {
  box-shadow: -4px 0 12px -6px #34d3994d;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  box-shadow: -4px 0 12px -6px #fbbf244d;
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure {
  box-shadow: -4px 0 12px -6px #fb71854d;
}

/* ───────────────────────── Cards do Material ───────────────────────── */
.md-typeset .grid.cards > :is(ul, ol) > li {
  border: 1px solid var(--apogee-border);
  border-radius: 10px;
  background: var(--md-default-bg-color--lightest);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: var(--apogee-brand);
  box-shadow: 0 0 0 1px var(--apogee-brand), 0 0 22px var(--apogee-glow);
  transform: translateY(-2px);
}

/* ───────────────────────────── Footer ───────────────────────────── */
.md-footer {
  position: relative;
}

.md-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--apogee-brand),
    var(--apogee-cyan),
    transparent
  );
  opacity: 0.55;
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
}

.md-footer__title {
  font-family: var(--apogee-display-font);
}

/* ─────────────── Faixa "em construção" (main.html) ─────────────── */
.md-banner {
  background: var(--md-primary-fg-color);
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--apogee-border);
  font-size: 0.72rem;
}

.md-banner strong {
  color: var(--md-typeset-a-color);
}

/* ─────────────────────── Movimento reduzido ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > :is(ul, ol) > li:hover {
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────────── Print ───────────────────────────── */
@media print {
  .md-header::after,
  .md-footer::before,
  .md-typeset h2::after {
    display: none;
  }

  .md-typeset h1 {
    text-shadow: none;
  }

  .md-typeset .admonition,
  .md-typeset details {
    box-shadow: none;
  }
}