/* =========================
   QuantEcon — custom.css (VISUAL)
   - Não altera layout do tema (sidebar já está oculta via head_custom)
   - Estilos para hero, cards, botões e rodapé
   ========================= */

/* Tipografia/utilidades */
:root {
  --qe-gap: 1rem;
  --qe-radius: .5rem;
  --qe-shadow: 0 2px 5px rgba(0,0,0,.06);
}
img { max-width: 100%; height: auto; }
.main-content table { display:block; max-width:100%; overflow-x:auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ===== Hero ===== */
.qe-hero{
  text-align:center; padding:2.5rem 1rem 2rem; margin:0 0 1rem 0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.qe-logo{ width:120px; height:auto; border-radius:8px; margin-bottom:.75rem; }
.qe-hero h1{ margin:.25rem 0 .5rem; font-weight:700; }
.qe-hero p{ margin:.25rem 0 .75rem; }

/* ===== Cards — suporta .cards/.card e .qe-cards/.qe-card ===== */
.cards, .qe-cards{
  display:grid; gap:var(--qe-gap);
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  margin:0 16px 2rem;
}
.card, .qe-card{
  padding:1rem; border-radius:var(--qe-radius); color:inherit;
  background:transparent; border:1px solid var(--color-border, #444);
  box-shadow: var(--qe-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .qe-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .qe-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18);
}
html[data-theme="light"] .card,
html[data-theme="light"] .qe-card{
  background:#fff;
  border-color:#e5e7eb;
}

/* Links dentro dos cards */
.card h3, .qe-card h3{ margin-top:.25rem; color:inherit; }
.card a, .qe-card a{ color: var(--link-color, #1f6feb); text-decoration: none; }
.card a:hover, .qe-card a:hover{ text-decoration: underline; }

/* ===== Botões ===== */
.btn, .btn.btn-primary{
  display:inline-block; padding:.48rem .85rem; border-radius:.55rem;
  border:1px solid rgba(31,111,235,.5);
  background:#1f6feb; color:#fff !important;
}
.btn:hover{ filter:brightness(1.05); }
.btn-ghost{
  display:inline-block; padding:.48rem .85rem; border-radius:.55rem;
  border:1px solid var(--color-border,#d1d5db);
  background:transparent; color:inherit; text-decoration:none;
}
.btn-ghost:hover{ background: rgba(0,0,0,.04); }

/* ===== Rodapé ===== */
.qe-footer{
  text-align:center; margin:2rem 0 0 0;
  font-size:.85rem; line-height:1.4; opacity:.85;
}

/* ===== Seções genéricas ===== */
.section{ margin: 2rem 0; }
.section h2{ margin: 0 0 .75rem 0; }

/* ===== Responsividade ===== */
@media (max-width: 900px){
  .qe-hero{ padding:2rem 1rem 1.5rem; }
  .cards, .qe-cards{ margin:0 12px 1.5rem; gap:.85rem; }
}

/* ===== Helpers ===== */
.qe-wrap{ padding: 0 16px; }
.qe-muted{ opacity:.75; }

/* ===== Top nav com efeito de "card" (mesmas cores e hover) ===== */
/* cobre tanto links de um header seu (.qe-nav a) quanto os aux_links do Just the Docs (.aux-nav a) */
.aux-nav a,
.qe-nav a {
  display: inline-block;
  padding: .48rem .85rem;
  border-radius: var(--qe-radius, .5rem);
  border: 1px solid var(--color-border, #e5e7eb);
  background: transparent;
  color: var(--link-color, #1f6feb);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* hover/focus: mesmo destaque dos cards */
.aux-nav a:hover,
.aux-nav a:focus,
.qe-nav a:hover,
.qe-nav a:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  background: rgba(31,111,235,.06);      /* sutil, combina com o link azul */
  border-color: rgba(31,111,235,.35);
  text-decoration: underline;
  outline: none;
}

/* active: “pressionado” como os cards */
.aux-nav a:active,
.qe-nav a:active {
  transform: translateY(-1px);
  box-shadow: var(--qe-shadow, 0 2px 5px rgba(0,0,0,.06));
}

/* opcional: espaçamento entre links do topo */
.aux-nav a + a,
.qe-nav a + a { margin-left: .35rem; }

/* ===== Botão dentro dos CARDS: hover com texto azul ===== */
.card .btn,
.qe-card .btn{
  background: #1f6feb;                 /* estado normal */
  color: #fff !important;
  border: 1px solid rgba(31,111,235,.5);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* hover/focus: fundo branco, texto azul, mesma pegada dos cards */
.card .btn:hover,
.qe-card .btn:hover,
.card .btn:focus-visible,
.qe-card .btn:focus-visible{
  background: #ffffff !important;
  color: #1f6feb !important;
  border-color: #1f6feb !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transform: translateY(-3px);
  text-decoration: none;
  filter: none !important;             /* cancela qualquer brighten antigo */
  outline: none;
}

/* active: leve pressão */
.card .btn:active,
.qe-card .btn:active{
  transform: translateY(-1px);
  box-shadow: var(--qe-shadow, 0 2px 5px rgba(0,0,0,.06));
}

/* ===== Links do topo como botões (mesma paleta dos cards) ===== */
.aux-nav a,
.qe-nav a{
  display: inline-block;
  padding: .48rem .85rem;
  border-radius: .55rem;
  border: 1px solid rgba(31,111,235,.5);
  background: #1f6feb;          /* igual ao .btn dos cards */
  color: #fff !important;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.aux-nav a:hover,
.aux-nav a:focus-visible,
.qe-nav a:hover,
.qe-nav a:focus-visible{
  background: #ffffff !important; /* inverte como no hover do botão do card */
  color: #1f6feb !important;
  border-color: #1f6feb !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transform: translateY(-3px);
  text-decoration: none;
  outline: none;
}

.aux-nav a:active,
.qe-nav a:active{
  transform: translateY(-1px);
  box-shadow: var(--qe-shadow, 0 2px 5px rgba(0,0,0,.06));
}

/* espaçamento entre links do topo (opcional) */
.aux-nav a + a,
.qe-nav a + a { margin-left: .35rem; }

/* ===== Centralizar os links do topo ===== */

/* Just the Docs (aux_links) */
.main-header { display: flex; flex-wrap: wrap; align-items: center; }

/* Faz a barra de links ocupar a largura toda e centraliza */
.main-header .aux-nav { width: 100%; }
.aux-nav .aux-nav-list{
  display: flex;
  gap: .35rem;                 /* espaçamento entre os botões */
  justify-content: center;     /* <-- centraliza */
  padding: 0;
  margin: .35rem 0 0;          /* um respiro abaixo do header */
}
.aux-nav .aux-nav-list-item{ list-style: none; }

/* Se você usa uma barra sua (qe-nav), centraliza também */
.qe-nav{
  display: flex;
  gap: .35rem;
  justify-content: center;     /* <-- centraliza */
}