/* =========================================================
   NAVBAR — navegação principal (sticky)
   Usa os tokens definidos em css/theme.css e css/base.css.
========================================================= */

:root {
  --nav-height: 64px;
  --nav-offset-top: var(--space-md);
  --nav-inset: var(--space-md);
}

html {
  scroll-padding-top: calc(var(--nav-offset-top) + var(--nav-height) + var(--space-md));
  scroll-behavior: smooth;
}

/* Navbar flutuante — largura própria, afastada das bordas */
.navbar {
  position: fixed;
  top: var(--nav-offset-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;

  width: min(calc(100% - (var(--nav-inset) * 2)), 1100px);
  border-radius: var(--radius-xl);

  background: rgba(var(--color-surface-rgb), 0.06);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition: var(--transition-base);
}

.navbar.is-scrolled {
  background: rgba(var(--color-surface-rgb), 0.12);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.navbar-inner {
  height: var(--nav-height);
  padding-inline: var(--space-lg);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* ---------------------------------------------------
   BRAND — "GT."
--------------------------------------------------- */

.navbar-brand {
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) ease;
}

.navbar-brand:hover {
  color: var(--accent-text);
}

/* ---------------------------------------------------
   LINKS (desktop)
--------------------------------------------------- */

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.navbar-links a {
  position: relative;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-3xs) 0;
  transition: color var(--duration-base) ease;
}

.navbar-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--blue-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.navbar-links a:hover {
  color: var(--text-primary);
}

.navbar-links a.is-active {
  color: var(--accent-text);
}

.navbar-links a.is-active::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------
   AÇÕES (tema + hamburguer)
--------------------------------------------------- */

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* o theme-toggle embutido na navbar não deve ficar fixed */
.navbar-actions .theme-toggle {
  position: static;
  top: auto;
  right: auto;
}

.navbar-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}

.navbar-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast) ease;
}

.navbar-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navbar-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------
   PROGRESSO DE LEITURA
--------------------------------------------------- */

/* Contorna o próprio perímetro da navbar flutuante conforme o scroll.
   pathLength="1" no <rect> normaliza o comprimento do caminho para 1.
   O progresso controla o comprimento do traço (stroke-dasharray) —
   0 = nada visível, 1 = contorno completo. O ponto de partida (centro
   vertical da borda esquerda) é fixo e só gira o traço via
   stroke-dashoffset (--nav-start-offset, calculado em js/nav.js a
   partir da proporção real da navbar). */
.navbar-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.navbar-progress-bar {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: var(--radius-xl);
  fill: none;
  stroke: var(--blue-accent);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: var(--nav-progress, 0) calc(1 - var(--nav-progress, 0));
  stroke-dashoffset: calc(-1 * var(--nav-start-offset, 0));
  transition: stroke-dasharray var(--duration-fast) linear;
}

/* ---------------------------------------------------
   PAINEL MOBILE
--------------------------------------------------- */

.navbar-mobile-panel {
  display: none;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
    --nav-inset: 16px;
  }

  /* notch/status bar: soma à distância já existente do topo, não
     substitui — em aparelhos sem safe-area o valor é 0 e nada muda */
  .navbar {
    top: calc(var(--nav-offset-top) + var(--safe-top));
  }

  /* área de toque confortável sem aumentar o texto "GT." */
  .navbar-brand {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
  }

  .navbar-links {
    display: none;
  }

  .navbar-menu-toggle {
    display: inline-flex;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }

  /* Painel pensado como extensão da navbar (mesma linguagem visual:
     surface + blur + border + radius + sombra), ancorado logo abaixo
     dela por um gap pequeno e intencional — não um dropdown genérico
     solto na página. */
  .navbar-mobile-panel {
    position: fixed;
    /* top é relativo à viewport, mas left/right não: .navbar tem
       transform (translateX, pra centralizar) e por isso vira o
       containing block dos próprios filhos "fixed" — left/right
       aqui são relativos À CAIXA DA NAVBAR (que já nasce inset do
       viewport), não à tela. 0/0 alinha o painel exatamente com as
       bordas da navbar (mesma largura, mesmas bordas esquerda/
       direita) — usar var(--nav-inset) aqui recuaria de novo. */
    /* relativo à caixa da navbar (ver nota acima): só precisa
       "descer" a própria altura da navbar (+ borda) + o gap — o
       deslocamento do topo da tela (nav-offset-top/safe-top) já
       está embutido na posição da navbar, containing block deste
       painel */
    top: calc(var(--nav-height) + 2px + var(--space-2xs));
    left: 0;
    right: 0;
    z-index: 899;

    flex-direction: column;
    padding: 4px var(--space-sm);

    /* opaco de propósito: o painel fica sobre o Hero (texto e foto
       por trás) em telas baixas — qualquer transparência real
       deixa conteúdo "fantasma" atravessando visualmente o menu */
    background:
      linear-gradient(180deg, rgba(var(--accent-glow-rgb), 0.06), transparent 50%),
      rgb(var(--color-bg-rgb));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);

    /* "se desprende" do botão hamburguer: origem no canto superior
       direito, entrada curta, sem bounce/slide longo */
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar-mobile-panel:not([hidden]) {
    display: flex;
  }

  .navbar-mobile-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* linhas editoriais (índice + rótulo + seta), não botões grandes
     arredondados empilhados — divisória fina entre itens */
  .navbar-mobile-panel a {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    text-decoration: none;
  }

  .navbar-mobile-panel a:last-child {
    border-bottom: none;
  }

  .nav-mobile-index {
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  .nav-mobile-label {
    flex: 1;
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
  }

  .nav-mobile-arrow {
    font-size: 0.8rem;
    color: var(--text-tertiary);
  }

  /* seção ativa: accent discreto no texto — sem preencher a linha
     inteira de azul */
  .navbar-mobile-panel a.is-active .nav-mobile-index,
  .navbar-mobile-panel a.is-active .nav-mobile-label,
  .navbar-mobile-panel a.is-active .nav-mobile-arrow {
    color: var(--accent-text);
  }
}