/*
  GPG-CABECALHO-PADRAO-001: cabecalho institucional padrao, fiel ao
  "Tabua de Mare.dc.html" aprovado (Decisao 01 - "mesmo comportamento da
  Home"). Reusa os MESMOS nomes de classe ja usados por home.css
  (gv2-nav-brand/gv2-logo/gv2-nav-links/gv2-cta-coral/gv2-nav-cta,
  [data-mobile-toggle]/[data-mobile-panel]/.gv2m-burger) para que o
  markup seja identico ao da Home - so a raiz de escopo muda: aqui e a
  classe .gali-nav-padrao na propria <nav>, nao [data-page] > nav (Home
  continua usando sua propria copia em home.css, sem alteracao de
  arquivo). Carregado por catalogo.html, planejar.html e tabua.html -
  nunca por home.html, que ja tem cabecalho equivalente.

  Tokens de cor identicos aos ja usados em tabua.css/home.css (mesmos
  valores hex) - definidos aqui de novo porque catalogo.html/planejar.html
  ainda nao carregam esse conjunto (design-system.css usa outra paleta).
*/

.gali-nav-padrao {
  --ink: #1f2b26;
  --sand: #f7f0e3;
  --paper: #fffaf1;
  --ocean: #0f6357;
  --coral: #e2703f;
  --coral-deep: #c85f34;

  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 64px);
  background: var(--sand);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.gali-nav-padrao .gv2-nav-brand {
  display: flex;
  align-items: center;
  flex: none;
}

.gali-nav-padrao .gv2-logo {
  height: 41px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.gali-nav-padrao .gv2-nav-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 16px;
}

.gali-nav-padrao .gv2-nav-links a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.85;
  font-size: 16px;
  font-weight: 500;
}

.gali-nav-padrao .gv2-nav-links a:hover,
.gali-nav-padrao .gv2-nav-links a:focus-visible {
  opacity: 1;
}

/* Pagina atual destacada - mesmo tratamento visual do resto do site
   (peso 700 + sublinhado coral), acionado por aria-current="page". */
.gali-nav-padrao .gv2-nav-links a[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}

/* GPG-GALI-HOME-PRECONVERSA-001: mesmo padrao de estados dos CTAs coral
   da Home (Home v2.dc.html, .cta-coral) - dependencia tecnica necessaria
   porque o nav padrao (compartilhado por tabua.html/catalogo.html/
   planejar.html) e a origem real do CTA "Planejar com a Gali" da Tábua,
   nao tabua.css. Regra base do fundo fora dos estados de interacao,
   hover restrito a ponteiros finos, active mais claro que hover, foco
   visivel. */
.gali-nav-padrao .gv2-cta-coral {
  display: inline-flex;
  align-items: center;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}

.gali-nav-padrao .gv2-cta-coral:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .gali-nav-padrao .gv2-cta-coral:hover {
    background: color-mix(in srgb, var(--coral) 88%, white 12%);
  }
}

.gali-nav-padrao .gv2-cta-coral:active {
  background: color-mix(in srgb, var(--coral) 76%, white 24%);
}

.gali-nav-padrao .gv2-nav-cta {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Menus deslocados para perto do CTA (>=1025px) ---------- */
/* Fiel ao novo .dc.html: o grupo de links (unico filho que nao e o
   painel mobile) recebe margin-left:auto, empurrando-o - e tudo depois
   dele, ou seja so o CTA - para a direita, ficando visualmente proximo
   do botao "Planejar com a Gali" em vez de espalhado por
   justify-content:space-between sozinho. */
@media (min-width: 1025px) {
  .gali-nav-padrao > div:not([data-mobile-panel]) {
    margin-left: auto;
    margin-right: clamp(28px, 3.5vw, 56px);
  }

  /* GPG-TABUA-DESKTOP-TOPO-001: logotipo-guiaportodegalinhas.png tem um
     halo/glow transparente ao redor da marca - mesma correcao ja aplicada
     no logo desktop da Home (object-fit:cover com caixa fixa recorta o
     halo em vez de encolher a marca junto com ele). Tablet (896-1024px,
     641-895px) e mobile (<=640px) preservados sem alteracao. */
  .gali-nav-padrao > .gv2-nav-brand .gv2-logo {
    width: 130px;
    height: 46px;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- Tablet largo (896-1024px): densidade sem quebrar linha ---------- */
@media (min-width: 896px) and (max-width: 1024px) {
  .gali-nav-padrao > div:not([data-mobile-panel]) {
    gap: 18px;
  }
  .gali-nav-padrao > div:not([data-mobile-panel]) > a {
    font-size: 15px;
  }
}

/* ---------- Tablet estreito (641-895px): tudo numa linha so ---------- */
@media (min-width: 641px) and (max-width: 895px) {
  .gali-nav-padrao {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px 12px;
  }
  .gali-nav-padrao > .gv2-nav-brand .gv2-logo {
    height: 30px;
  }
  .gali-nav-padrao > div:not([data-mobile-panel]) {
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
  }
  .gali-nav-padrao > div:not([data-mobile-panel]) > a {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .gali-nav-padrao > a.gv2-nav-cta {
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
    flex: none;
  }
}

/* ---------- Mobile (<=640px): hamburguer, menus horizontais ocultos ---------- */
@media (min-width: 641px) {
  .gali-nav-padrao [data-mobile-toggle],
  .gali-nav-padrao [data-mobile-panel] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .gali-nav-padrao {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 9px 20px;
  }
  .gali-nav-padrao > div:not([data-mobile-panel]) {
    display: none;
  }
  .gali-nav-padrao > a.gv2-nav-cta {
    display: none;
  }
  .gali-nav-padrao [data-mobile-toggle] {
    display: flex;
  }

  /* GPG-TABUA-MOBILE-REFINO-001: logotipo-guiaportodegalinhas.png tem halo/
     glow transparente ao redor da marca - mesma correcao ja aplicada no
     logo mobile da Home (object-fit:cover com caixa fixa recorta o halo em
     vez de encolher a marca junto com ele). Nao altera o hamburguer, a
     altura/alinhamento do cabecalho, nem o logo desktop (>=1025px) ou
     tablet (641-1024px), definidos em blocos separados acima. */
  .gali-nav-padrao > .gv2-nav-brand .gv2-logo {
    width: 116px;
    height: 41px;
    object-fit: cover;
    object-position: center;
  }
}

[data-mobile-toggle] {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, #1f2b26 16%, transparent);
  border-radius: 999px;
  cursor: pointer;
}

[data-mobile-toggle]:hover {
  border-color: #0f6357;
}

.gv2m-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.gv2m-burger span {
  display: block;
  height: 2px;
  background: #1f2b26;
}

/* Icone aberto (X): mesma estrutura de 3 barras, a do meio some, as
   outras duas rotacionam - sem trocar o markup do botao. */
[data-mobile-toggle][aria-expanded="true"] .gv2m-burger {
  position: relative;
  width: 18px;
  height: 18px;
}
[data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(1) {
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  transform: rotate(45deg);
}
[data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(2) {
  opacity: 0;
}
[data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(3) {
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  transform: rotate(-45deg);
}

[data-mobile-panel] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fffaf1;
  border-bottom: 1px solid color-mix(in srgb, #1f2b26 12%, transparent);
  box-shadow: 0 16px 30px rgba(30, 25, 15, 0.10);
  padding: 6px 20px 18px;
  display: flex;
  flex-direction: column;
}

[data-mobile-panel][hidden] {
  display: none !important;
}

[data-mobile-panel] > a {
  font-size: 16px;
  font-weight: 500;
  color: #1f2b26;
  text-decoration: none;
  padding: 15px 2px;
  border-bottom: 1px solid color-mix(in srgb, #1f2b26 10%, transparent);
}

[data-mobile-panel] > a[aria-current="page"] {
  color: #0f6357;
  font-weight: 700;
}

[data-mobile-panel] > a.gv2m-panel-last {
  border-bottom: none;
}

[data-mobile-panel] > a.gv2m-panel-cta {
  margin-top: 12px;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-mobile-panel] > a.gv2m-panel-cta:hover {
    background: color-mix(in srgb, var(--coral) 88%, white 12%);
  }
}

[data-mobile-panel] > a.gv2m-panel-cta:active {
  background: color-mix(in srgb, var(--coral) 76%, white 24%);
}