/**
 * Banner fade overrides — loaded after page styles so gradients
 * blend into admin background color (--theme-bg), not hardcoded milky.
 */

/* Desktop: banner/hero extends under transparent header — no main top gap */
@media (min-width: 1101px) {
  #mobile-nav-btn {
    display: none !important;
  }

  body[data-calendar-base] main#page-content,
  body.is-archive-year main#page-content,
  body.is-conventions main#page-content,
  body.is-live-page main#page-content,
  body.is-library-index main#page-content,
  body.is-upload-page main#page-content,
  body[data-calendar-base] main,
  body.is-archive-year main,
  body.is-conventions main,
  body.is-live-page main,
  body.is-library-index main,
  body.is-upload-page main {
    padding-top: 0 !important;
  }
}

/* Mobile: reserve space for fixed header on list/banner pages (menu hero stays flush) */
@media (max-width: 1100px) {
  body.is-archive-year main#page-content,
  body.is-conventions main#page-content,
  body.is-live-page main#page-content,
  body.is-library-index main#page-content,
  body.is-upload-page main#page-content,
  body.is-archive-year main,
  body.is-conventions main,
  body.is-live-page main,
  body.is-library-index main,
  body.is-upload-page main {
    padding-top: var(--header-offset, 76px) !important;
  }

  body[data-calendar-base] main#page-content,
  body[data-calendar-base] main {
    padding-top: 0 !important;
  }

  /* Header + drawer above player shell (z-index 80 on mobile mini) */
  #site-header {
    z-index: 100000 !important;
  }

  #mobile-nav-overlay {
    z-index: 100001 !important;
  }

  #mobile-nav-btn {
    display: inline-flex !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Transparent at top; milky when scrolled — beat global site-theme header rules */
  body:not(.header-scrolled) #header-shell,
  html:not(.header-scrolled) body:not(.header-scrolled) #header-shell {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  body.header-scrolled #header-shell,
  html.header-scrolled #header-shell,
  html.header-scrolled body #header-shell {
    background: var(--theme-bg, var(--milky, #faf5ee)) !important;
    border-bottom: 1px solid var(--theme-color-border, rgba(37, 30, 27, 0.14)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
  }

  /* Banner list pages: dark header text on mobile (transparent or milky) */
  body.is-archive-year .header-fg,
  body.is-archive-year .nav-link,
  body.is-conventions .header-fg,
  body.is-conventions .nav-link,
  body.is-live-page .header-fg,
  body.is-live-page .nav-link,
  body.is-library-index .header-fg,
  body.is-library-index .nav-link {
    color: var(--theme-ink, var(--ink2, #251e1b)) !important;
    text-shadow: none !important;
  }

  body.is-archive-year .brand-sep,
  body.is-conventions .brand-sep,
  body.is-live-page .brand-sep,
  body.is-library-index .brand-sep {
    background: rgba(37, 30, 27, 0.25) !important;
  }

  /* Player portal must not steal header/hamburger clicks */
  #player-portal,
  #player-shell {
    pointer-events: none;
  }

  #player-shell .mp-card,
  #player-shell .mp-fab,
  #player-shell button,
  #player-shell a,
  #player-shell input,
  #player-shell select,
  #player-shell label,
  #player-shell [role="button"],
  #player-shell [data-mp-controls],
  #player-shell .mp-speed-menu,
  #player-shell .mp-speed-float,
  .player-inline-video-fab {
    pointer-events: auto;
  }

  #player-shell.hidden {
    pointer-events: none !important;
  }
}

.archive-hero-desktop {
  background: var(--theme-bg) !important;
}

.archive-hero-desktop::after {
  background: var(--banner-fade-standard) !important;
}

.library-hero__fade {
  background: var(--banner-fade-library) !important;
}

@media (max-width: 1100px) {
  .library-hero__fade {
    background: var(--banner-fade-library-mobile) !important;
  }
}

.oc-hero::after {
  background: var(--banner-fade-oc-bottom) !important;
}

.oc-hero::before {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--theme-color) 4%, transparent), rgba(0, 0, 0, 0.18) 68%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.24) 38%,
      color-mix(in srgb, var(--theme-bg) 12%, transparent) 70%,
      color-mix(in srgb, var(--theme-bg) 96%, transparent) 100%
    ) !important;
}

.upload-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  z-index: 1;
  background: var(--banner-fade-library-mobile) !important;
}

@media (min-width: 1101px) {
  body.is-archive-year .view::before {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.14) 18%,
        rgba(0, 0, 0, 0.04) 38%,
        color-mix(in srgb, var(--theme-bg) 10%, transparent) 56%,
        color-mix(in srgb, var(--theme-bg) 46%, transparent) 72%,
        color-mix(in srgb, var(--theme-bg) 86%, transparent) 88%,
        var(--theme-bg) 100%
      ),
      url("/static/banners/archive_top.jpg") center top / cover no-repeat !important;
  }
}