/* nav.css — two-tier navigation for the Blender x AI microsite.
   Overrides the flat .topbar link run in house.css. Loaded after it. */

header.topbar{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"brand primary" "brand secondary";
  align-items:center;
  column-gap:26px;
  row-gap:1px;
  padding:11px 30px 9px;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky; top:0; z-index:50;
}

header.topbar .brand{
  grid-area:brand;
  align-self:center;
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  color:#1a1a1a;
  text-decoration:none;
  padding-right:22px;
  border-right:1px solid var(--line);
  margin-right:4px;
}
header.topbar .brand .dot{color:#c0182a}

header.topbar nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px}
header.topbar nav.primary{grid-area:primary}
header.topbar nav.secondary{grid-area:secondary;gap:16px}

header.topbar nav.primary a{
  font-size:14px;
  font-weight:500;
  color:#333;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
header.topbar nav.primary a:hover{color:#000;border-bottom-color:var(--line)}
header.topbar nav.primary a.current{color:#000;font-weight:600;border-bottom-color:#c0182a}

header.topbar nav.secondary a{
  font-size:12px;
  color:#8a8a86;
  text-decoration:none;
}
header.topbar nav.secondary a:hover{color:#333}
header.topbar nav.secondary a.current{color:#1a1a1a;font-weight:600}

@media (max-width:820px){
  header.topbar{
    grid-template-columns:1fr;
    grid-template-areas:"brand" "primary" "secondary";
    row-gap:8px;
    padding:12px 18px 10px;
    position:static;
  }
  header.topbar .brand{border-right:0;padding-right:0}
  header.topbar nav{gap:14px}
  header.topbar nav.primary a{font-size:13.5px}
}