/* ═══════════════════════════════════════════════════════════════════════════
   BRAND LOGO  —  shared by _Layout.cshtml (site.css) and _PublicLayout.cshtml
                  (public.css), which is why it is its own file rather than a
                  block in either one. The two stylesheets have no other overlap
                  and a copy in each would drift the moment one is edited.

   Two assets, not one: the wordmark is navy (#000C31) and the portal surfaces
   flip with html[data-theme="dark"], so a single file would disappear on one of
   them. CSS decides which is shown, so there is no server-side theme guess and
   no flash before site.js runs.

   Both <img> are always in the markup and the hidden one is still fetched
   (~6 KB gzipped, cached once for the whole site). That is the price of keeping
   the logo a real, printable, alt-texted image instead of a CSS background.

   Sizes are expressed as the HEIGHT OF THE IMAGE BOX, not of the mark. logo.svg
   keeps the source artwork's framing, which is 22.5% padding above and below, so
   the visible mark is ~55% of the height set here (48px box -> ~26px mark).
   ═══════════════════════════════════════════════════════════════════════════ */

.brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;              /* kill the inline-image descender gap */
  flex-shrink: 0;
}

.brand-logo img {
  display: block;
  width: auto;
  height: 48px;                /* default; overridden by the size modifiers */
}

/* ── theme switch ──────────────────────────────────────────────────────────
   Default is the navy wordmark, so anything that does not opt in is correct.

   Written as `img.brand-logo__*`, not as a bare class, on purpose: `.brand-logo img`
   above is (0,1,1) and `.brand-logo__dark` alone is only (0,1,0), so the plain class
   loses the cascade and BOTH images render. That failure looks like one logo with a
   stray second icon and a second ".com" beside it, because the reversed wordmark is
   invisible on a light surface. Keep the element qualifier.

   The dark swap is gated on .portal-layout / .public-layout, the body classes
   _Layout.cshtml sets. _PublicLayout.cshtml sets neither, and its .nav and .footer
   keep a white background no matter what html[data-theme] says — public.css has
   dark rules for some lp-* components but never redefines the page surfaces. Keying
   off the global attribute alone would therefore paint the white wordmark onto a
   white marketing nav. If that layout ever gains real dark surfaces, give its body
   one of these classes rather than loosening the selector.                      */
.brand-logo img.brand-logo__dark { display: none; }

html[data-theme="dark"] .portal-layout .brand-logo img.brand-logo__light,
html[data-theme="dark"] .public-layout .brand-logo img.brand-logo__light { display: none; }

html[data-theme="dark"] .portal-layout .brand-logo img.brand-logo__dark,
html[data-theme="dark"] .public-layout .brand-logo img.brand-logo__dark  { display: block; }

/* ── sizes ─────────────────────────────────────────────────────────────── */
.brand-logo--sm img { height: 56px; }   /* mobile bar, footers */
.brand-logo--md img { height: 64px; }   /* sidebar, marketing nav */
.brand-logo--lg img { height: 80px; }   /* public header */

@media (max-width: 768px) {
  .brand-logo--lg img { height: 52px; }
  .brand-logo--md img { height: 52px; }
  .brand-logo--sm img { height: 48px; }
}

@media (max-width: 480px) {
  .brand-logo--lg img { height: 48px; }
  .brand-logo--md img { height: 48px; }
  .brand-logo--sm img { height: 44px; }
}

/* A logo is a link in every placement; keep the hover consistent and make sure
   no inherited text-decoration paints a line under the image box. */
a:hover > .brand-logo,
a.brand-logo-link:hover .brand-logo { opacity: .78; }
a > .brand-logo { transition: opacity .15s; }