/*
 * assets/css/nav.css — Tens Direito
 * Navegação principal única, injectada por scripts/sincronizar_nav.py
 * entre os marcadores <!-- NAV:INICIO/FIM -->. Cores em valores
 * literais (não var(--...)) de propósito: este ficheiro é carregado em
 * todas as páginas, incluindo as que não declaram essas variáveis no
 * seu próprio <style>.
 *
 * :root abaixo é a excepção deliberada — define os tokens de cor da
 * marca para as 36 páginas (carregadas via este ficheiro), corrigindo
 * a auditoria WCAG de 2026-07-04: #0D9488 (--cor-marca) só tem 3.74:1
 * sobre branco, insuficiente para texto/links (AA exige 4.5:1); usar
 * sempre --cor-texto-marca (#0F766E, 5.47:1) para texto e links sobre
 * fundos claros. --cor-marca mantém-se para logo, fundos, bordas e
 * elementos grandes (só precisam de 3:1).
 */

:root {
  --cor-marca: #0D9488;
  --cor-texto-marca: #0F766E;
  --cor-texto-muted: #5C6770;
}

/*
 * Sublinhado para links dentro de texto corrido (WCAG 1.4.1 — não
 * depender só da cor). Âmbito deliberadamente restrito a parágrafos e
 * blocos de citação/aviso dentro de <main> — nunca cards, listas de
 * navegação (relacionados, pillar-lista, "Comece por aqui") ou a nav,
 * que continuam sem sublinhado por serem elementos de navegação, não
 * texto corrido.
 */
main p a,
.fonte-bloco a,
.fonte-inline a,
.aviso-info a,
.nota-tabela a,
.destaque-verde a,
.zona-cinzenta a,
.resumo-rapido a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * Link "Saltar para o conteúdo" (WCAG 2.4.1 Bypass Blocks) — primeiro
 * elemento focável de cada página, invisível até receber foco por
 * teclado. Aponta sempre para #main-content.
 */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0;
  background: #0F766E;
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  text-decoration: underline;
  border-radius: 0 0 6px 0;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.nav-wrap nav {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.nav-wrap .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-wrap .logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.nav-wrap .logo-text .tens { color: #111827; }
.nav-wrap .logo-text .direito { color: #0F766E; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
  text-decoration: none;
}

.nav-links a:hover { color: #0F766E; }

.nav-dropdown { position: relative; }

.nav-dropdown-btn {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: inherit;
}

.nav-dropdown-btn:hover { color: #0F766E; }
.nav-dropdown-btn::after { content: '▾'; font-size: 0.7rem; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 260px;
  z-index: 200;
  padding: 0.25rem 0;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0F172A;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.nav-dropdown-menu a:hover { background: #f8f9fa; color: #0F766E; }
.nav-dropdown.aberto .nav-dropdown-menu { display: block; }

.nav-search { position: relative; }

.nav-search input {
  padding: 0.4rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
  width: 190px;
  font-family: inherit;
}

.nav-search-resultados {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 260px;
  z-index: 150;
  margin-top: 4px;
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
}

/* Itens de resultado de pesquisa — partilhado pelos dropdowns da nav
   (todas as páginas) e pela pesquisa do hero em index.html, já que
   nav.css é carregado em todas as páginas. */
.resultado-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  color: #0F172A;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}

.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover, .resultado-item:focus { background: #f8f9fa; }

.resultado-titulo { font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.resultado-excerto { font-size: 0.78rem; color: #6B7280; line-height: 1.4; }
.resultado-titulo mark, .resultado-excerto mark {
  background: #FEF3C7;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.resultado-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.resultado-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0F766E;
  background: #F0FDF9;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}
.resultado-badge-ferramenta { color: #6B7280; background: #F3F4F6; }

.resultado-vazio { padding: 0.85rem 0.75rem; font-size: 0.85rem; color: #6c757d; }
.resultado-vazio p { margin: 0 0 0.4rem; }
.resultado-vazio a { font-weight: 700; color: #0F766E; }

.nav-toggle {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #111827;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-mobile-menu {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 2px solid #0F766E;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 999;
  padding: 0.85rem 1.5rem 1rem;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.nav-mobile-menu.aberto { display: flex; }

/* Linhas do menu: ~52px de altura, área de toque nunca abaixo de 48px. */
.nav-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0.15rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #0F172A;
  text-decoration: none;
  border-bottom: 1px solid #E5E7EB;
}

.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { color: #0D9488; }

/* Grelha 2×2 de ferramentas no topo do menu móvel. */
.nav-mobile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
}

.nav-mobile-menu a.nav-mobile-card {
  min-height: 48px;
  padding: 0.4rem 0.7rem;
  gap: 0.5rem;
  font-size: 0.95rem;
  background: #F0FDF9;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
}

.nav-mobile-card-icone { font-size: 1.15rem; line-height: 1; }

.nav-mobile-menu a.nav-mobile-destaque { color: #0F766E; font-weight: 700; }

/* Acordeão "Apoios" — <details>/<summary> nativo, funciona sem JS. */
.nav-mobile-acordeao { border-bottom: 1px solid #E5E7EB; }

.nav-mobile-acordeao summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.15rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #0F172A;
  cursor: pointer;
  list-style: none;
}

.nav-mobile-acordeao summary::-webkit-details-marker { display: none; }

.nav-mobile-acordeao summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.8rem;
  color: #6B7280;
  transition: transform 0.15s ease;
}

.nav-mobile-acordeao[open] summary::after { transform: rotate(-180deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-acordeao summary::after { transition: none; }
}

/* Link da página actual dentro do acordeão (marcado por nav.js) —
   cor + peso, nunca só a cor (WCAG 1.4.1). */
.nav-mobile-menu a.nav-ativo { color: #0F766E; font-weight: 700; }

.nav-mobile-sub {
  padding-left: 1.25rem !important;
  font-size: 0.95rem !important;
}

.nav-mobile-acordeao .nav-mobile-sub:last-child { border-bottom: none; }

.nav-search-movel input {
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.nav-search-movel .nav-search-resultados {
  position: static;
  box-shadow: none;
  border: none;
  margin-top: 0;
}

@media (max-width: 700px) {
  /* ".nav-search" sozinho apanharia também a pesquisa do menu móvel
     (".nav-search-movel" partilha a classe base) — "nav > .nav-search"
     só atinge a pesquisa do topo, fora do <nav>, escondida pelo hamburger. */
  .nav-links, .nav-wrap > nav > .nav-search { display: none; }
  .nav-toggle { display: flex; }
}