/* Navegação pública das páginas sem mapa (ver js/nav.js) — botão hamburger
   flutuante no canto superior esquerdo + menu suspenso.
   As classes das linhas (.public-nav-link, .public-nav-divider,
   .public-nav-badge, .public-nav-theme-row) e o aspeto do botão
   (.public-nav-toggle) são reaproveitados pelo menu do mapa
   (css/shell.css), que só muda o posicionamento — por isso continuam a
   viver aqui, sem duplicado do outro lado. */
.public-nav {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: var(--z-overlay);
}

.public-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.public-nav-toggle:hover { color: var(--color-accent); }

.public-nav-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  gap: 0.1rem;
}
.public-nav-menu.open { display: flex; }

/* Pill, como no Sardal: a linha do menu é larga e baixa, que é a forma a
   que uma pílula assenta. Os botões da barra inferior ficam de propósito em
   raio médio — são caixas altas com ícone e rótulo em coluna, e uma pílula
   numa caixa dessas lê-se como um estádio. */
.public-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-small);
  border: none;
  background: none;
  /* width: 100% mais padding horizontal, sem border-box, dava uma linha
     1,8rem mais larga do que a caixa — invisível enquanto a linha não tinha
     fundo, e à vista desde que a pílula do néon passou a pintá-lo. */
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}
.public-nav-link.active { color: var(--color-accent); font-weight: var(--weight-semibold); }
.public-nav-link.public-nav-disabled { color: var(--color-text-muted); cursor: default; }
.public-nav-link.public-nav-disabled:hover { background: var(--color-bg-sunken); }

/* Os links num contentor só deles, para poderem ser reescritos sem levar o
   divisor e o tema atrás. Repete o gap do menu para a coluna ficar igual ao
   que era quando eram filhos diretos. */
.public-nav-links { display: flex; flex-direction: column; gap: 0.1rem; }

.public-nav-divider { height: 1px; background: var(--color-border); margin: 0.3rem 0.2rem; }
.public-nav-theme-row { display: flex; justify-content: center; padding: 0.2rem; }

.public-nav-badge {
  margin-left: auto;
  font-size: var(--text-micro);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
}

.public-nav-notice {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.6rem 0.8rem;
  font-size: var(--text-small);
  display: none;
}
.public-nav-notice.visible { display: block; }

@media (max-width: 389px) {
  .public-nav-toggle { width: 2.1rem; height: 2.1rem; }
}