/* ==========================================================================
   CDEV — Navbar em cápsula flutuante (#navbar)
   Fonte: docs/design-system.md § 5.5 (v1.1) + docs/references/navbar-pill.png
   ========================================================================== */

.cdev-navbar-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-top: var(--space-4);
  align-self: flex-start;
}

/* Alinha a cápsula com a largura de conteúdo do resto do site (§ 4.2) sem
   alterar o .container padrão do Bootstrap usado pelas outras seções. */
.cdev-navbar-wrap .container {
  max-width: 1200px;
}

.cdev-navbar-pill {
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-padding-x: 0.5rem;
  background: color-mix(in oklch, var(--bs-gray-300) 35%, transparent);
  border: 1px solid color-mix(in oklch, var(--cdev-black) 26%, var(--cdev-white) 74%);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--cdev-white) 18%, transparent), var(--shadow-card);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, border-radius var(--duration-fast) ease-out;
}

/* Contraste adaptativo: o JS marca a seção sob a cápsula. A transparência
   continua preservando o fundo, mas a base muda para a navbar nunca sumir. */
.cdev-navbar-wrap[data-navbar-tone="dark"] .cdev-navbar-pill {
  background: color-mix(in oklch, var(--cdev-ink-700) 68%, transparent);
  border-color: color-mix(in oklch, var(--cdev-white) 32%, transparent);
}
.cdev-navbar-wrap[data-navbar-tone="light"] .cdev-navbar-pill {
  background: color-mix(in oklch, var(--cdev-white) 76%, transparent);
  border-color: color-mix(in oklch, var(--cdev-black) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--cdev-black) 10%, transparent), var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  .cdev-navbar-pill {
    transition: none;
  }
}
@media (min-width: 992px) {
  .cdev-navbar-pill { --bs-navbar-padding-x: 0.75rem; }
}
/* "O formato cápsula só faz sentido em uma linha só": quando o menu mobile
   abre e o conteúdo empilha em várias linhas, a cápsula vira retângulo. */
@media (max-width: 991.98px) {
  .cdev-navbar-pill:has(.navbar-collapse.show) {
    border-radius: var(--radius-lg);
  }
}

/* Marca: logo própria (assets/img/logo-cdev.png), recortada da referência
   docs/references/logo-cdev.png — o glow branco do wordmark só lê bem sobre
   fundo escuro, por isso a cápsula usa --bs-gray-700 em vez de um cinza claro. */
.cdev-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding-left: 10px;
}
.cdev-brand-logo {
  height: 26px;
  width: auto;
  display: block;
}
.cdev-brand:focus-visible {
  outline: 2px solid var(--cdev-pink-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Toggler — ícone nativo do Bootstrap, só ajusta foco/borda pra marca */
.cdev-toggler {
  border: none;
  padding: 6px 8px;
}
.cdev-toggler:focus { box-shadow: none; }
.cdev-toggler:focus-visible {
  outline: 2px solid var(--cdev-pink-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Links — Poppins 500. 2026-08-17: pedido do dono era trocar teal por
   --cdev-pink no ativo/hover, mas a regra fixa é "rosa só 1 ponto de
   decisão por seção" — a navbar já tem o CTA sólido em pink. Resolvido com
   --cdev-pink DESSATURADO (color-mix rumo a transparent, deixa o fundo
   escuro da cápsula aparecer por trás) em vez do tom cheio: ainda é da
   família da marca (não teal), mas claramente mais fraco que o CTA sólido —
   não compete 1:1 pela atenção na mesma dobra. */
.cdev-nav-links {
  gap: 2px;
}
.cdev-nav-links .nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--cdev-text-faint);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out;
}
.cdev-nav-links .nav-link:hover,
.cdev-nav-links .nav-link.active {
  color: color-mix(in oklch, var(--cdev-pink) 65%, transparent);
  border-bottom-color: color-mix(in oklch, var(--cdev-pink) 65%, transparent);
}
.cdev-nav-links .nav-link:focus-visible {
  outline: 2px solid var(--cdev-pink-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* CTA — único elemento em pink CHEIO da navbar (o link ativo/hover usa a
   versão dessaturada acima, ver comentário em .cdev-nav-links) */
.cdev-nav-cta {
  margin-left: 8px;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .cdev-brand { padding-left: 4px; }
  .cdev-nav-links {
    gap: 0;
    padding: var(--space-3) 0;
  }
  .cdev-nav-links .nav-link {
    padding: 10px 8px;
    border-bottom: none;
    border-left: 2px solid transparent;
  }
  .cdev-nav-links .nav-link:hover,
  .cdev-nav-links .nav-link.active {
    border-left-color: color-mix(in oklch, var(--cdev-pink) 65%, transparent);
    padding-left: 12px;
  }
  .cdev-nav-cta {
    margin-left: 0;
    margin-top: var(--space-2);
    display: flex;
    width: 100%;
  }
}