/* ===========================================================================
   Nextside Performance — overrides de integração com o tema Hextra (vendored)
   Busca, TOC/scroll-to-top, Chroma e ajuste de margem mobile. Carregado por
   ULTIMO (custom/head-end.html) p/ vencer o main.css do Hextra no cascade.
   =========================================================================== */

/* === Hextra search — Nextside Apple token overrides === */

/* Wrapper integrado ao header */
.ns-search-wrapper {
  position: relative;
}

/* Oculta a Hextra search em mobile */
@media (max-width: 720px) {
  .ns-search-wrapper { display: none; }
}

/* Input principal da busca em estilo pill Apple */
.hextra-search-input {
  background: var(--bg-surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 6px 36px 6px 14px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  width: 100% !important;
}

.hextra-search-input:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
  outline: none !important;
}

.hextra-search-input::placeholder {
  color: var(--fg-soft) !important;
}

/* Kbd hint (Ctrl K / ⌘K) */
.hextra-search-wrapper kbd,
[class*="hextra-search"] kbd {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-soft) !important;
  font-family: var(--font-ui) !important;
  border-radius: 6px !important;
}

/* Dropdown de resultados em card Apple */
.hextra-search-results {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
  color: var(--fg) !important;
}

.hextra-search-results li a {
  color: var(--fg) !important;
  transition: background 120ms ease !important;
}

.hextra-search-results li a:hover {
  background: var(--bg-elevated) !important;
  color: var(--accent) !important;
}

/* Título do resultado */
.hextra-search-results li .excerpt {
  color: var(--fg-muted) !important;
  font-size: 13px !important;
}

/* === Ask AI button (post hero) === */
.ns-ask-ai-wrap {
  display: flex;
}

.ns-ask-ai {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 150ms ease;
}

.ns-ask-ai:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 113, 227, 0.04);
}

.ns-ask-ai svg {
  opacity: 0.7;
}

/* Mobile */
@media (max-width: 720px) {
  .ns-post-hero-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .ns-ask-ai-wrap {
    width: 100%;
  }
  .ns-ask-ai {
    font-size: 12px;
    padding: 8px 14px;
    width: 100%;
    justify-content: center;
  }
}

/* === Fix: Hextra prose headings em dark mode === */
:root[data-theme="dark"] .content h1,
:root[data-theme="dark"] .content h2,
:root[data-theme="dark"] .content h3,
:root[data-theme="dark"] .content h4,
:root[data-theme="dark"] .content h5,
:root[data-theme="dark"] .content h6 {
  color: var(--fg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .content h1,
  :root:not([data-theme]) .content h2,
  :root:not([data-theme]) .content h3,
  :root:not([data-theme]) .content h4,
  :root:not([data-theme]) .content h5,
  :root:not([data-theme]) .content h6 {
    color: var(--fg);
  }
}

/* === Fix: Hextra TOC sidebar — Nextside overrides === */
.hextra-toc a {
  color: var(--fg-muted);
  transition: color 150ms ease;
}

.hextra-toc a:hover {
  color: var(--fg);
}

.hextra-toc a.active,
.hextra-toc a[aria-current="true"] {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Wrapper do scroll-to-top */
.dark .hextra-toc .hextra-scrollbar > div:last-child,
:root[data-theme="dark"] .hextra-toc .hextra-scrollbar > div:last-child {
  background-color: var(--bg) !important;
  box-shadow: 0 -12px 16px var(--bg) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hextra-toc .hextra-scrollbar > div:last-child {
    background-color: var(--bg) !important;
    box-shadow: 0 -12px 16px var(--bg) !important;
  }
}

/* Scroll-to-top override em LIGHT mode */
:root .hextra-scrollbar [class*="hx:bg-white"],
:root .hextra-scrollbar [class*="hx-bg-white"],
:root [class*="hx:bg-white"]:has(a[href*="#top"]),
:root [class*="hx:bg-white"]:has([aria-label*="topo" i]) {
  background-color: var(--bg) !important;
  box-shadow: 0 -12px 16px var(--bg) !important;
}

[class*="from-white"],
[class*="hx:from-white"] {
  --tw-gradient-from: var(--bg) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

[class*="shadow-[0_-12px_16px_white]"],
[class*="hx:shadow-[0_-12px_16px_white]"] {
  box-shadow: 0 -12px 16px var(--bg) !important;
}

/* Defensivo: cor do texto do blockquote em dark mode */
:root[data-theme="dark"] .content blockquote,
:root.dark .content blockquote {
  color: var(--fg) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content blockquote {
    color: var(--fg) !important;
  }
}

/* Mobile content padding */
@media (max-width: 720px) {
  :root { --content-padding: 16px; }
}

/* === Chroma syntax highlight: cantos arredondados e syntax limpo === */
.chroma,
.highlight,
.highlight pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow-x: auto;
}

:root[data-theme="dark"] .chroma .err,
:root[data-theme="dark"] .chroma .x {
  color: var(--fg) !important;
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .chroma .err,
  :root:not([data-theme]) .chroma .x {
    color: var(--fg) !important;
    background: transparent !important;
  }
}

/* ── Regra mandatória: CTA com fundo primary / blue SEMPRE tem texto branco ── */
[class*="bg-[#0071e3]"]:not([class*="/"]),
[class*="bg-[#0077ed]"]:not([class*="/"]),
[class*="bg-[#0062c4]"]:not([class*="/"]),
[class*="bg-accent"]:not([class*="/"]),
.btn-primary,
.ns-nav-cta,
.ns-featured-chip,
.ns-filter-btn.active {
  background-color: #0071e3 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.ns-nav-cta:hover {
  background-color: #0077ed !important;
  color: #ffffff !important;
}

[class*="bg-[#0071e3]"]:not([class*="/"]) *,
[class*="bg-[#0077ed]"]:not([class*="/"]) *,
[class*="bg-[#0062c4]"]:not([class*="/"]) *,
[class*="bg-accent"]:not([class*="/"]) *,
.btn-primary *,
.ns-nav-cta * {
  color: #ffffff !important;
  stroke: #ffffff;
}