/* Cabeçalho padrão — aquitemquimica.com.br
   Classes atq-* para não conflitar com CSS de cada página.
   Fontes: Bricolage Grotesque (marca) · Instrument Sans (links de site)
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&family=Instrument+Sans:wght@400;500&display=swap');

/* ── brand ──────────────────────────────────────────── */
.atq-brand {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink, var(--tinta, var(--txt, #111827)));
  white-space: nowrap;
  flex-shrink: 0;
}
.atq-brand span { color: var(--accent-ink, #2563eb); }

/* ── nav standalone (discursivas, pilhas2) ──────────── */
nav.atq-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--surface, var(--papel, var(--bg, #fff)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line, var(--linha, var(--brd, rgba(0,0,0,.12))));
}

/* ── top bar: brand + site links + hamburger ────────── */
.atq-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  border-bottom: 1px solid var(--line, var(--linha, var(--brd, rgba(0,0,0,.1))));
}

/* ── site-wide links ────────────────────────────────── */
.atq-site-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.atq-site-links a {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2, var(--tinta-2, var(--txt2, #6b7280)));
  text-decoration: none;
  white-space: nowrap;
}
.atq-site-links a:hover {
  color: var(--ink, var(--tinta, var(--txt, #111827)));
}

/* ── hamburger (mobile only) ────────────────────────── */
.atq-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--line, var(--linha, var(--brd, rgba(0,0,0,.15))));
  border-radius: 6px;
  padding: 6px 7px;
  cursor: pointer;
  margin-left: auto;
  color: var(--ink-2, var(--tinta-2, var(--txt2, #6b7280)));
}
.atq-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* ── mobile dropdown ────────────────────────────────── */
.atq-mobile-menu {
  border-bottom: 1px solid var(--line, var(--linha, var(--brd, rgba(0,0,0,.1))));
}
.atq-mobile-menu[hidden] { display: none; }
.atq-mobile-menu .wrap {
  display: flex;
  flex-direction: column;
  padding-block: 6px;
}
.atq-mobile-menu a {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2, var(--tinta-2, var(--txt2, #6b7280)));
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, var(--linha, var(--brd, rgba(0,0,0,.08))));
}
.atq-mobile-menu a:last-child { border-bottom: 0; }
.atq-mobile-menu a:hover {
  color: var(--ink, var(--tinta, var(--txt, #111827)));
}

/* ── mobile: colapsa site-links, mostra hamburger,
       atalhos de seção rolam na horizontal ──────────── */
@media (max-width: 640px) {
  .atq-site-links { display: none; }
  .atq-hamburger  { display: flex; }
  .navlinks {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .navlinks::-webkit-scrollbar { display: none; }
}