/* AudienceJet wordmark in the landing page header and footer.
 *
 * Kept out of landing.css on purpose: that file is the design as exported,
 * byte for byte, so a re-export from the designer drops straight in without
 * losing this.
 *
 * Two files rather than one, because the wordmark needs dark ink on pale
 * backgrounds and white on dark ones, and the page has both themes: the
 * website's own (public/site/brand, as app/views/site uses), so these pages
 * and the platform's header show the same logo as the home page.
 *
 * The theme is always stamped explicitly on <html> by the page and the
 * toggle, so keying on [data-theme] is reliable — dark is the state the
 * markup starts in, and light is the one to override.
 */

.brand .brand-logo {
  display: block;
  /* The artwork is 768x120: at the home page's height (public/site/site.css .logo). */
  height: 28px;
  width: auto;
}

.brand .brand-logo--on-light {
  display: none;
}

:root[data-theme="light"] .brand .brand-logo--on-dark {
  display: none;
}

:root[data-theme="light"] .brand .brand-logo--on-light {
  display: block;
}

/* No footer-specific rule: the footer's panel is var(--bg-2), which follows
 * the theme (#0b0f15 dark, #f2f5f9 light), so the rules above already pick
 * the right wordmark there. */

@media (max-width: 560px) {
  .brand .brand-logo {
    height: 24px;
  }
}