/* EagleTagz demo: one standard logo in the top bar of every page (October 2026).
 *
 * The logo is a square image shown 28px tall. When a page's menu buttons were wider
 * than the screen (phones, and tablets on the main pages), the browser squeezed the
 * logo, down to a thin sliver or nothing, and the page could be dragged sideways.
 * Now the logo always keeps its square shape and size, and the menu fits instead:
 * icons only on narrow screens, a little tighter on phones, with the drop-down menus
 * kept inside the screen. */

/* ---------- the logo: always a 28px square ---------- */
header img[src*="eagletagz-logo"] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: none !important;
  flex: none !important;
  object-fit: contain;
}
header .justify-between > :first-child { flex-shrink: 0 !important; } /* logo + name */

/* drop-down menus show above the page (the video player's controls sat on top of them) */
header:not(.sticky) { position: relative; z-index: 45; }

/* ---------- main pages (Load Media, Camera, Micro, Copyright...): six drop-down menus ---------- */
@media (max-width: 1023px) {
  header .menu-button > span { display: none !important; }
  header .menu-button > i { margin-right: 0 !important; }
  header .menu-item > .menu-dropdown { left: auto !important; right: 0 !important; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  /* icon buttons 44px wide: Apple's minimum touch target */
  header .menu-button,
  header nav > a {
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-width: 44px;
    justify-content: center;
  }
  /* Tracking and Marketplace pages: icons only, like the main pages */
  header nav > a > span:not(.cart-badge) { display: none !important; }
  header nav > a > i { margin-right: 0 !important; }

  /* menus open as a full-width panel right under the bar */
  header .justify-between { position: relative; }
  header .menu-item { position: static !important; }
  header .menu-item > .menu-dropdown {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain; /* scrolling a long menu doesn't scroll (and close) the page */
    background-color: #111827 !important; /* solid, so the page doesn't show through */
  }
}

/* very narrow phones (under 360px): slightly tighter so six icons still fit beside the logo */
@media (max-width: 359px) {
  header .menu-button,
  header nav > a {
    padding-left: 11px !important;
    padding-right: 11px !important;
    min-width: 0;
  }
}