/* OUTCORA v5.35 — self-contained v5.34 mobile header plus Brave logo mask.
   The desktop header, footer, chart script and navigation markup are untouched. */

@media (max-width: 1240px) {
  .site-header {
    background-image:
      linear-gradient(90deg, rgba(7, 10, 15, .93) 0%, rgba(7, 10, 15, .63) 53%, rgba(7, 10, 15, .22) 100%),
      url('./outcora-header-banner.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, right center;
  }

  .site-header .brand img.site-logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .48));
  }
}

@media (max-width: 720px) {
  .site-header {
    isolation: isolate;
  }

  /* The original banner contains a logo baked into its left-hand region.
     Brave composites this artwork more visibly than Firefox. This mask sits
     above the background but beneath the real HQ lockup and controls. */
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 86%;
    background: linear-gradient(90deg, #070A0F 0%, #070A0F 68%, rgba(7, 10, 15, .99) 78%, rgba(7, 10, 15, .72) 90%, rgba(7, 10, 15, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .site-header .nav {
    position: relative;
    z-index: 2;
    display: block;
    height: 180px;
    padding: 10px 0 11px;
  }

  .site-header .brand {
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    flex: none;
    align-self: auto;
    width: min(320px, calc(100vw - 30px));
    min-width: 0;
    min-height: 0;
  }

  /* Always suppress the legacy image element. The pseudo-element below is
     the single mobile logo source in both Firefox and Brave. */
  .site-header .brand img.site-logo {
    display: none !important;
    visibility: hidden !important;
  }

  .site-header .brand::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2048 / 705;
    background: url('./outcora-footer-logo-hq.png') left center / contain no-repeat;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .36));
  }

  .site-header .nav-right {
    position: absolute;
    right: 0;
    bottom: 11px;
    align-self: auto;
    height: 44px;
    gap: 8px;
  }

  .site-header .nav-right > .button.button-primary[data-telegram] {
    display: inline-flex;
    flex: 0 1 104px;
    min-width: 86px;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header .nav-right .lang {
    flex: 0 0 76px;
    width: 76px;
    height: 44px;
    min-height: 44px;
    padding-left: 12px;
    padding-right: 26px;
  }

  .site-header .mobile-toggle {
    flex: 0 0 44px;
  }

  .site-header .mobile-menu {
    position: relative;
    z-index: 2;
  }

  .market-band {
    top: 180px;
  }
}

@media (max-width: 380px) {
  .site-header .nav-right {
    gap: 6px;
  }

  .site-header .nav-right .lang {
    flex-basis: 70px;
    width: 70px;
    padding-left: 10px;
  }

  .site-header .nav-right > .button.button-primary[data-telegram] {
    flex-basis: 96px;
    min-width: 80px;
    padding: 0 10px;
    font-size: 8px;
  }
}