/* ── Variáveis e reset global ── */
:root {
  --bg: #070710;
  --surface: #0f0f1c;
  --surface2: #161626;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(88, 166, 255, 0.4);
  --accent: #58a6ff;
  --accent2: #3fb950;
  --accent3: #f78166;
  --accent4: #d2a8ff;
  --accent5: #e3b341;
  --text: #f0f6fc;
  --muted: #8b949e;
  --radius: 16px;
  --radius-sm: 10px;

  /* Tokens de superfície para componentes */
  --btn-surface: rgba(255,255,255,.04);
  --btn-surface-hover: rgba(255,255,255,.08);
  --kbd-bg: rgba(255,255,255,.06);
  --kbd-border: rgba(255,255,255,.12);

  /* Pagefind UI — GitHub Dimmed palette */
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: #58a6ff;
  --pagefind-ui-text: #f0f6fc;
  --pagefind-ui-background: #0f0f1c;
  --pagefind-ui-border: rgba(255, 255, 255, 0.1);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 10px;
  --pagefind-ui-tag: #161626;
  --pagefind-ui-font: var(--font-outfit);
}

/* ── Light mode (auto — sistema) ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f0f4ff;
    --surface: #ffffff;
    --surface2: #e6ecf8;
    --border: rgba(0,14,77,.08);
    --border-hover: rgba(9,105,218,.4);
    --accent: #0969da;
    --accent2: #1a7f37;
    --accent3: #d44b3a;
    --accent4: #6639b7;
    --accent5: #9a6700;
    --text: #0d1117;
    --muted: #57606a;
    --btn-surface: rgba(0,14,77,.04);
    --btn-surface-hover: rgba(0,14,77,.07);
    --kbd-bg: rgba(0,14,77,.05);
    --kbd-border: rgba(0,14,77,.11);
    --pagefind-ui-primary: #0969da;
    --pagefind-ui-text: #0d1117;
    --pagefind-ui-background: #ffffff;
    --pagefind-ui-border: rgba(0,14,77,.12);
    --pagefind-ui-tag: #e6ecf8;
  }
}

/* ── Light mode (explícito — toggle) ── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f4ff;
  --surface: #ffffff;
  --surface2: #e6ecf8;
  --border: rgba(0,14,77,.08);
  --border-hover: rgba(9,105,218,.4);
  --accent: #0969da;
  --accent2: #1a7f37;
  --accent3: #d44b3a;
  --accent4: #6639b7;
  --accent5: #9a6700;
  --text: #0d1117;
  --muted: #57606a;
  --btn-surface: rgba(0,14,77,.04);
  --btn-surface-hover: rgba(0,14,77,.07);
  --kbd-bg: rgba(0,14,77,.05);
  --kbd-border: rgba(0,14,77,.11);
  --pagefind-ui-primary: #0969da;
  --pagefind-ui-text: #0d1117;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: rgba(0,14,77,.12);
  --pagefind-ui-tag: #e6ecf8;
}

/* ── Dark mode (explícito — toggle) ── */
html[data-theme="dark"] {
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-outfit);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Search button ── */
.search-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--btn-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-family: inherit;
  padding: .3rem .65rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.search-btn:hover {
  background: var(--btn-surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
}
.search-btn kbd {
  font-size: .66rem;
  font-family: inherit;
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-radius: 4px;
  padding: .05rem .3rem;
  line-height: 1.6;
}

/* ── Theme toggle ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--btn-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover {
  background: var(--btn-surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
}
.theme-toggle svg { display: none; width: 15px; height: 15px; }

/* Dark mode → mostrar sol (clicar para ir a light) */
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* Light mode → mostrar lua (clicar para ir a dark) */
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* Fallback sem data-theme (sistema) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-sun { display: block; }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .theme-toggle .icon-moon { display: block; }
}

/* Transição suave ao trocar tema */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color .28s ease,
    color .22s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}
.search-btn-label { display: none; }
@media (min-width: 560px) { .search-btn-label { display: inline; } }

/* ── Search modal ── */
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3.5rem, 8vh, 6rem) 1rem 1rem;
}
.search-modal.open {
  display: flex;
  animation: modalFadeIn .18s ease both;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.search-modal-inner {
  position: relative;
  width: min(660px, 100%);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  box-shadow: 0 32px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(88,166,255,.08);
  overflow: hidden;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn .22s cubic-bezier(.16,1,.3,1) both;
}

@keyframes modalSlideIn {
  from { transform: translateY(-14px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ──────────────────────────────────────────────────────
   Pagefind UI — overrides completos para o tema escuro
   ────────────────────────────────────────────────────── */

/* Wrapper e form */
.search-modal-inner .pagefind-ui {
  font-family: var(--font-outfit) !important;
}

.search-modal-inner .pagefind-ui__form {
  padding: .9rem 1rem .5rem !important;
  border-bottom: 1px solid var(--border) !important;
}

.search-modal-inner .pagefind-ui__search-input {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-outfit) !important;
  font-size: .92rem !important;
  caret-color: var(--accent) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.search-modal-inner .pagefind-ui__search-input:focus {
  outline: none !important;
  border-color: rgba(88,166,255,.5) !important;
  box-shadow: 0 0 0 3px rgba(88,166,255,.12) !important;
}
.search-modal-inner .pagefind-ui__search-input::placeholder {
  color: var(--muted) !important;
  opacity: .6 !important;
}

/* Ícone de busca SVG dentro do input */
.search-modal-inner .pagefind-ui__search-input-label svg {
  color: var(--muted) !important;
  opacity: .6 !important;
}

/* Botão limpar */
.search-modal-inner .pagefind-ui__search-clear {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--muted) !important;
  transition: background .15s, color .15s !important;
}
.search-modal-inner .pagefind-ui__search-clear:hover {
  background: rgba(255,255,255,.1) !important;
  color: var(--text) !important;
}

/* Área de resultados */
.search-modal-inner .pagefind-ui__drawer {
  overflow-y: auto !important;
  max-height: calc(76vh - 80px) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.08) transparent !important;
}
.search-modal-inner .pagefind-ui__drawer::-webkit-scrollbar { width: 4px; }
.search-modal-inner .pagefind-ui__drawer::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 4px;
}

/* Mensagem de status ("X resultados para Y") */
.search-modal-inner .pagefind-ui__message {
  color: var(--muted) !important;
  font-family: var(--font-outfit) !important;
  font-size: .78rem !important;
  padding: .6rem 1rem .4rem !important;
}

/* Lista de resultados */
.search-modal-inner .pagefind-ui__results {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Item de resultado */
.search-modal-inner .pagefind-ui__result {
  border-top: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background .12s !important;
}
.search-modal-inner .pagefind-ui__result:first-child {
  border-top: none !important;
}
.search-modal-inner .pagefind-ui__result:hover {
  background: rgba(255,255,255,.025) !important;
}

.search-modal-inner .pagefind-ui__result-inner {
  padding: .85rem 1rem !important;
}

/* Título do resultado */
.search-modal-inner .pagefind-ui__result-title {
  margin: 0 0 .3rem !important;
  font-family: "Syne", system-ui, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

.search-modal-inner .pagefind-ui__result-link {
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.search-modal-inner .pagefind-ui__result-link:hover {
  color: var(--accent) !important;
}

/* Trecho do resultado */
.search-modal-inner .pagefind-ui__result-excerpt {
  color: var(--muted) !important;
  font-size: .8rem !important;
  line-height: 1.65 !important;
  font-family: var(--font-outfit) !important;
  margin: 0 !important;
}

/* Termo destacado (match) */
.search-modal-inner .pagefind-ui__mark {
  background: rgba(88,166,255,.22) !important;
  color: var(--accent) !important;
  border-radius: 3px !important;
  padding: .05em .25em !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* Sub-resultados (anchors dentro da página) */
.search-modal-inner .pagefind-ui__result-nested {
  list-style: none !important;
  padding: 0 !important;
  margin: .5rem 0 0 !important;
  border-left: 2px solid rgba(210,168,255,.25) !important;
  padding-left: .75rem !important;
}

.search-modal-inner .pagefind-ui__result-nested-result {
  padding: .25rem 0 !important;
  border: none !important;
}
.search-modal-inner .pagefind-ui__result-nested-result:hover {
  background: none !important;
}

.search-modal-inner .pagefind-ui__result-nested-url {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  color: var(--accent4) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-bottom: .15rem !important;
  transition: color .15s !important;
}
.search-modal-inner .pagefind-ui__result-nested-url::before {
  content: "#" !important;
  opacity: .5 !important;
  font-weight: 400 !important;
}
.search-modal-inner .pagefind-ui__result-nested-url:hover {
  color: var(--text) !important;
}

.search-modal-inner .pagefind-ui__result-nested-excerpt {
  color: var(--muted) !important;
  font-size: .76rem !important;
  line-height: 1.55 !important;
  font-family: var(--font-outfit) !important;
  margin: 0 !important;
  opacity: .75 !important;
}

/* Botão "Mais resultados" */
.search-modal-inner .pagefind-ui__suppressed-results {
  display: flex !important;
  justify-content: center !important;
  padding: .75rem 1rem 1rem !important;
}
.search-modal-inner .pagefind-ui__suppressed-results button {
  background: rgba(88,166,255,.06) !important;
  border: 1px solid rgba(88,166,255,.18) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--accent) !important;
  font-family: var(--font-outfit) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  padding: .45rem 1.1rem !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}
.search-modal-inner .pagefind-ui__suppressed-results button:hover {
  background: rgba(88,166,255,.12) !important;
  border-color: rgba(88,166,255,.35) !important;
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE — overrides de componentes com rgba fixo
   ═══════════════════════════════════════════════════════ */

html[data-theme="light"] .search-modal-inner,
html:not([data-theme="dark"]):is(html:has([data-theme="light"]), html) .search-modal-inner {
  border-color: rgba(0,14,77,.12) !important;
  box-shadow: 0 16px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(9,105,218,.1) !important;
}

html[data-theme="light"] .search-modal-inner .pagefind-ui__search-input {
  background: #f6f8ff !important;
  border-color: rgba(0,14,77,.15) !important;
  color: #0d1117 !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__search-input:focus {
  border-color: rgba(9,105,218,.5) !important;
  box-shadow: 0 0 0 3px rgba(9,105,218,.12) !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__search-clear {
  background: rgba(0,14,77,.05) !important;
  border-color: rgba(0,14,77,.12) !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__search-clear:hover {
  background: rgba(0,14,77,.1) !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__result:hover {
  background: rgba(0,14,77,.03) !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__drawer {
  scrollbar-color: rgba(0,14,77,.12) transparent !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__mark {
  background: rgba(9,105,218,.15) !important;
  color: #0969da !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__result-nested {
  border-left-color: rgba(102,57,183,.25) !important;
}
html[data-theme="light"] .search-modal-inner .pagefind-ui__suppressed-results button {
  background: rgba(9,105,218,.06) !important;
  border-color: rgba(9,105,218,.2) !important;
  color: #0969da !important;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .search-modal-inner {
    border-color: rgba(0,14,77,.12) !important;
    box-shadow: 0 16px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(9,105,218,.1) !important;
  }
  html:not([data-theme="dark"]) .search-modal-inner .pagefind-ui__search-input {
    background: #f6f8ff !important;
    border-color: rgba(0,14,77,.15) !important;
    color: #0d1117 !important;
  }
  html:not([data-theme="dark"]) .search-modal-inner .pagefind-ui__result:hover {
    background: rgba(0,14,77,.03) !important;
  }
  html:not([data-theme="dark"]) .search-modal-inner .pagefind-ui__mark {
    background: rgba(9,105,218,.15) !important;
    color: #0969da !important;
  }
}