/* Org logo frame. Each variant gives the logo a FIXED HEIGHT but the
   width adapts to whatever aspect ratio the org uploaded — square logos
   stay square, wide wordmarks stay wide, tall logos stay narrow.
   object-fit: contain on the <img> plus width: auto on the frame lets
   the natural aspect ratio show.

   Frame is transparent — the logo sits directly on whatever surface
   it's in (white navbar, themed mobile menu, themed footer). Transparent-
   bg PNGs blend with that surface instead of getting a competing white
   card behind them. When the org has no logo at all, a separate
   fallback class draws a fixed square with the org's initials in white
   on a deterministic color. See web/components/_org_logo.php for markup. */
.org-logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Image variant. Height is set by the size class; width auto so the
   image's natural aspect ratio drives the frame width. */
.org-logo-frame .org-logo-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Initials fallback. No background image to inherit from, so we draw
   a fixed-square colored block with the org's initials. Separate from
   the .org-logo-frame backdrop styling so it doesn't get a redundant
   white halo. */
.org-logo-frame .org-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-stack);
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: inherit;
}

/* ── Size variants ─────────────────────────────────────────────────── */

.org-logo-frame--navbar {
  height: 48px;
  max-width: 200px;
}
.org-logo-frame--navbar .org-logo-fallback {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.org-logo-frame--mobile-menu {
  height: 56px;
  max-width: 220px;
}
.org-logo-frame--mobile-menu .org-logo-fallback {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.org-logo-frame--footer {
  height: 80px;
  max-width: 260px;
}
.org-logo-frame--footer .org-logo-fallback {
  width: 80px;
  height: 80px;
  font-size: 28px;
}