/* ============================================================
   header.css — sticky top bar with logo + nav
   ============================================================ */

header              { position: sticky; top: 0; background: var(--color-background); z-index: 10; }
header > .container { display: flex; align-items: center; justify-content: space-between;
                      padding-top: var(--space-4); padding-bottom: var(--space-4); }
header > .container > a { display: inline-flex; align-items: center; }
header nav          { display: flex; gap: var(--space-4); align-items: center; }

/* Show the download CTA only on phones; hide on desktop. */
@media (min-width: 769px) { header .nav-download { display: none; } }
@media (max-width: 768px) { header .nav-desktop  { display: none; } }

/* On the smallest viewports, drop "Use exabrain" entirely and promote
   Download to the primary (solid) style. */
@media (max-width: 480px) {
  header .nav-cta             { display: none; }
  header .nav-download        { background: var(--color-secondary);
                                color: var(--color-secondary-foreground); }
  header > .container > a img { height: 20px; width: auto; }
}