/* =========================================================================
   styles.css — Da Correlação à Causalidade
   Tema dark "reading view" para os capítulos.
   Paleta consistente com a landing (landing.css), mas em tom ligeiramente
   mais claro para reduzir o contraste ao mudar da landing para o capítulo.
   ========================================================================= */

:root {
  /* Fundos (mais claros que a landing) */
  --bg-page:    #14192a;   /* fundo do capítulo (landing usa #0a0e1a) */
  --bg-section: #1c2338;   /* code, blockquote, callout, table-hover */
  --bg-elev:    #232c45;   /* elementos elevados (cards, sidebars internos) */

  /* Texto */
  --text-main:      #d8dee9;
  --text-secondary: #b0bccd;
  --text-muted:     #8a96ab;
  --heading:        #f0f4f8;

  /* Bordas */
  --border-light: #2a3449;
  --border-soft:  #1f273a;

  /* Accents (mesmas cores da landing para coerência) */
  --accent:       #00d9c0;
  --accent-soft:  #00a98e;
  --accent-dim:   rgba(0, 217, 192, 0.15);
  --violet:       #a78bfa;
  --violet-dim:   rgba(167, 139, 250, 0.15);
  --amber:        #ffb84d;
  --amber-dim:    rgba(255, 184, 77, 0.12);
  --rose:         #ff6b8a;
  --rose-dim:     rgba(255, 107, 138, 0.12);

  /* Tipografia */
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Espaçamento */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  --content-width: 48rem;
  --r-sm: 6px;
  --r-md: 10px;
  --t-fast: 120ms ease;
}

/* ---------- Body e tipografia base ----------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-main);
  background-color: var(--bg-page);
}

.page-columns .content {
  max-width: var(--content-width);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.25rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: 1.6rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-light);
}

h3 {
  font-size: 1.25rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

p { color: var(--text-main); }

p strong, li strong { color: var(--heading); font-weight: 600; }

em { color: var(--heading); font-style: italic; }

/* ---------- Links ---------------------------------------------------- */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

a:hover {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

a:visited { color: var(--violet); }

/* ---------- Código inline e blocos ----------------------------------- */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--bg-section);
  border: 1px solid var(--border-light);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--accent);
}

pre {
  background-color: var(--bg-section);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: var(--space-md);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-main);
}

/* ---------- Blockquote ---------------------------------------------- */
blockquote {
  border-left: 3px solid var(--accent);
  background-color: var(--bg-section);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  color: var(--text-secondary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

blockquote p:last-child { margin-bottom: 0; }

/* ---------- Figuras --------------------------------------------------- */
.figure-caption,
figcaption {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-sm);
  line-height: 1.5;
}

img { max-width: 100%; }

/* ---------- Imagens flutuantes (texto contornando) ------------------- */
/* Uso em markdown:
     ![Legenda](caminho/imagem.png){.fig-right}     -> à direita
     ![Legenda](caminho/imagem.png){.fig-left}      -> à esquerda
     ![Legenda](caminho/imagem.png){.fig-right width=400}  -> sobrescreve largura
   O texto que vier depois contorna a imagem.
   Em telas <600px, a imagem perde o flutuar e ocupa a linha cheia. */

.fig-right {
  float: right;
  max-width: 300px;
  margin: 0 0 1rem 1.5rem;
}

.fig-left {
  float: left;
  max-width: 300px;
  margin: 0 1.5rem 1rem 0;
}

/* Cabeçalhos limpam float — evita que H2/H3 apareça do lado de uma imagem */
h2, h3 { clear: both; }

/* Mobile: imagem flutuante vira bloco centralizado */
@media (max-width: 600px) {
  .fig-right,
  .fig-left {
    float: none;
    max-width: 100%;
    margin: 1rem auto;
    display: block;
  }
}

/* ---------- Callouts (dark) ----------------------------------------- */
.callout {
  background-color: var(--bg-section) !important;
  border: 1px solid var(--border-light) !important;
  border-left-width: 4px !important;
  border-radius: var(--r-md);
  color: var(--text-main);
}

.callout .callout-header,
.callout .callout-title-container,
.callout-title {
  background-color: transparent !important;
  color: var(--heading) !important;
}

.callout .callout-body,
.callout .callout-body-container { color: var(--text-main); }

.callout-note     { border-left-color: var(--accent) !important; }
.callout-tip      { border-left-color: var(--accent-soft) !important; }
.callout-warning  { border-left-color: var(--amber) !important; }
.callout-important{ border-left-color: var(--violet) !important; }
.callout-caution  { border-left-color: var(--rose) !important; }

/* ---------- Tabelas -------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.95rem;
  color: var(--text-main);
}

thead th {
  background-color: var(--bg-section);
  color: var(--heading);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--border-light);
}

tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

tbody tr:hover { background-color: var(--bg-section); }

/* ---------- Quarto: navbar, sidebar, TOC, título --------------------- */
/* Navbar (configurada como dark via _quarto.yml; este bloco refina) */
.navbar {
  border-bottom: 1px solid var(--border-light) !important;
}

/* O Quarto injeta o nome do arquivo como texto fallback quando text:""
   é fornecido junto com icon. Esconde só o texto do item da casinha. */
.navbar .nav-link:has(.bi-house) .menu-text {
  display: none !important;
}
/* Fallback para navegadores antigos sem :has() — assume casinha como
   primeiro item da navbar */
.navbar .navbar-nav > .nav-item:first-child .menu-text {
  display: none !important;
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--text-secondary) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-brand:hover {
  color: var(--accent) !important;
}

.navbar .dropdown-menu {
  background-color: var(--bg-section);
  border: 1px solid var(--border-light);
}

.navbar .dropdown-item {
  color: var(--text-secondary);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--bg-elev);
  color: var(--accent);
}

.navbar .dropdown-divider {
  border-top-color: var(--border-light);
}

/* Sidebar */
.sidebar,
.sidebar-navigation {
  background-color: var(--bg-page) !important;
}

.sidebar .sidebar-item-text,
.sidebar .sidebar-item .sidebar-item-text,
.sidebar a {
  color: var(--text-secondary) !important;
}

.sidebar a:hover,
.sidebar .sidebar-item:hover .sidebar-item-text {
  color: var(--accent) !important;
}

.sidebar .sidebar-section .sidebar-item-text {
  color: var(--heading) !important;
  font-weight: 600;
}

.sidebar .active > .sidebar-item-text,
.sidebar .sidebar-item.active > a {
  color: var(--accent) !important;
}

/* TOC (lateral direita) */
#TOC, .toc-sidebar, nav[role="doc-toc"] {
  color: var(--text-muted);
}

#TOC a, nav[role="doc-toc"] a {
  color: var(--text-muted) !important;
  border-bottom: none;
}

#TOC a:hover, nav[role="doc-toc"] a:hover,
#TOC a.active, nav[role="doc-toc"] a.active {
  color: var(--accent) !important;
}

#TOC ul li ul li a:hover,
nav[role="doc-toc"] ul li ul li a:hover {
  color: var(--accent) !important;
}

/* Título do capítulo (quarto-title-block) */
.quarto-title-block,
.quarto-title-block .quarto-title {
  color: var(--heading);
}

.quarto-title-block .subtitle,
.quarto-title .subtitle {
  color: var(--text-secondary);
  font-weight: 400;
}

/* Citações entre parênteses (Pandoc) e referência cruzada */
.citation, .quarto-cite {
  color: var(--accent);
}

/* Bibliografia — sobrescreve estilo claro do tema cosmo
   O Quarto gera, no fim do capítulo:
     <div id="quarto-appendix" class="default">
       <section class="quarto-appendix-contents" id="quarto-bibliography">
         <h2 class="quarto-appendix-heading">References</h2>
         <div id="refs" class="references csl-bib-body">
           <div id="ref-..." class="csl-entry">...</div>
   A regra do Quarto `#quarto-appendix.default { background-color: #fff }`
   tem alta especificidade (id+class), por isso aqui usamos seletores
   compostos com a mesma ou maior especificidade. */

#quarto-appendix.default,
#quarto-appendix.default .quarto-appendix-contents,
#quarto-appendix.default #quarto-bibliography,
#quarto-appendix.default #refs,
#quarto-appendix.default .csl-bib-body,
#quarto-appendix.default .csl-entry,
#quarto-appendix.default .quarto-appendix-bibtex {
  background-color: var(--bg-page) !important;
  background: var(--bg-page) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

#quarto-appendix.default {
  border-top: 1px solid var(--border-light) !important;
  padding-top: 1.5em !important;
  margin-top: 2em !important;
}

#quarto-appendix.default .quarto-appendix-heading {
  color: var(--heading) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding-bottom: var(--space-xs) !important;
  opacity: 1 !important;
}

#quarto-appendix.default .csl-entry,
#quarto-appendix.default .csl-left-margin,
#quarto-appendix.default .csl-right-inline {
  color: var(--text-main) !important;
}

#quarto-appendix.default .csl-left-margin {
  color: var(--text-muted) !important;  /* numeração das refs */
}

#quarto-appendix.default a {
  color: var(--accent) !important;
}

#quarto-appendix.default a:hover {
  color: var(--accent-soft) !important;
}

#quarto-appendix.default .quarto-appendix-bibtex {
  border: 1px solid var(--border-light) !important;
  background: var(--bg-section) !important;
}

/* Página dedicada de Referências (referencias.qmd) — não usa o appendix */
section#references,
section#references > h2,
.references {
  background: transparent;
  color: var(--text-main);
}

/* ---------- About page (sobre.qmd) ---------------------------------- */
.about-section {
  margin-bottom: var(--space-xl);
}

.about-section h2 {
  color: var(--accent);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-xs);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background-color: var(--bg-section);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  color: var(--text-main) !important;
  text-decoration: none;
  transition: all var(--t-fast);
}

.contact-link:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  background-color: var(--bg-elev);
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.tech-item {
  padding: var(--space-md);
  background-color: var(--bg-section);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
}

.tech-item h4 {
  color: var(--accent);
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.tech-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---------- Navegação prev/next no rodapé do capítulo --------------- */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
  margin: var(--space-2xl) 0 var(--space-xl) 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
  font-size: 0.95rem;
}

.chapter-nav-prev,
.chapter-nav-next {
  color: var(--text-secondary);
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--t-fast);
}

.chapter-nav-prev { justify-self: start; }
.chapter-nav-next { justify-self: end; text-align: right; }

.chapter-nav-prev:hover,
.chapter-nav-next:hover {
  color: var(--accent);
  border-bottom: none;
}

.chapter-nav-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.chapter-nav-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-right: 0.3rem;
}

.chapter-nav-title {
  font-weight: 500;
  color: inherit;
}

.chapter-nav-spacer {
  /* célula vazia quando não há prev ou next */
}

@media (max-width: 600px) {
  .chapter-nav {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .chapter-nav-prev,
  .chapter-nav-next {
    justify-self: center;
    text-align: center;
  }
}

/* ---------- Bootstrap helpers (ajuste de contraste) ------------------ */
.text-muted { color: var(--text-muted) !important; }

hr { border-color: var(--border-light); }

/* Scrollbar discreta (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Seleção de texto */
::selection { background: var(--accent-dim); color: var(--heading); }

/* ---------- Responsivo ----------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 1rem; line-height: 1.7; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.4rem; }
}