/* AlphaHub brand logo override */
:root {
  --alphahub-logo-url: url("/assets/joystik.png?v=20260606d");
}

/*
  Target the icon/mark only when it is inside the main brand block.
  This avoids touching channel avatars/cards.
*/
.brand > :first-child:not(:has(*)),
.brand .logo,
.brand .alpha-logo-mark,
.brand .brand-logo,
.brand .brand-mark,
.brand .brand-icon,
.brand .brand-badge,
.brand .logo-mark,
.brand .site-logo,
.brand .header-logo,
.brand .app-logo,
.topbar .brand > :first-child:not(:has(*)),
header .brand > :first-child:not(:has(*)),
.logo[aria-hidden="true"] {
  background: transparent var(--alphahub-logo-url) center / contain no-repeat !important;
  background-image: var(--alphahub-logo-url) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 60px !important;
  height: 44px !important;
  min-width: 60px !important;
  flex: 0 0 60px !important;
}

/* Hide old generated square/pseudo icon layers */
.brand > :first-child:not(:has(*))::before,
.brand > :first-child:not(:has(*))::after,
.brand .logo::before,
.brand .logo::after,
.brand .alpha-logo-mark::before,
.brand .alpha-logo-mark::after,
.brand .brand-logo::before,
.brand .brand-logo::after,
.brand .brand-mark::before,
.brand .brand-mark::after,
.brand .brand-icon::before,
.brand .brand-icon::after,
.brand .brand-badge::before,
.brand .brand-badge::after,
.brand .logo-mark::before,
.brand .logo-mark::after,
.logo[aria-hidden="true"]::before,
.logo[aria-hidden="true"]::after {
  content: none !important;
  display: none !important;
}

/* Fallback for browsers without :has support */
@supports not selector(:has(*)) {
  .brand > span:first-child,
  .brand > div:first-child,
  .topbar .brand > span:first-child,
  .topbar .brand > div:first-child,
  header .brand > span:first-child,
  header .brand > div:first-child {
    background: transparent var(--alphahub-logo-url) center / contain no-repeat !important;
    background-image: var(--alphahub-logo-url) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 60px !important;
    height: 44px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
  }
}

@media (max-width: 640px) {
  .brand > :first-child:not(:has(*)),
  .brand .logo,
  .brand .alpha-logo-mark,
  .brand .brand-logo,
  .brand .brand-mark,
  .brand .brand-icon,
  .brand .brand-badge,
  .brand .logo-mark,
  .brand .site-logo,
  .brand .header-logo,
  .brand .app-logo,
  .topbar .brand > :first-child:not(:has(*)),
  header .brand > :first-child:not(:has(*)),
  .logo[aria-hidden="true"] {
    width: 54px !important;
    height: 40px !important;
    min-width: 54px !important;
    flex-basis: 54px !important;
  }
}