/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Sticky header + long hamburger menus: keep items reachable on phones.
 * Header bar is h-20 / 5rem. This file is served by Propshaft without a
 * Tailwind build, so the rule applies in CI system tests as well as production.
 *
 * Cap the bar and hide desktop nav below md. Do not define a global `.hidden`
 * utility here: that would change visibility of every Stimulus-toggled panel
 * in the Propshaft-only CI path.
 */
@media (max-width: 767px) {
  header[role="banner"] nav[aria-label="Main navigation"],
  header[role="banner"] [data-desktop-user-nav] {
    display: none;
  }
}

.mobile-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  overflow: hidden;
}

.mobile-nav-bar img {
  height: 72px;
  width: auto;
}

.mobile-nav-panel {
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/*
 * Body scroll lock while the hamburger is open. Do not rely on Tailwind's
 * overflow-hidden utility: CI system tests load this Propshaft file without
 * a Tailwind build. Shared overlays also use this class via scroll_lock.js.
 */
.mobile-nav-body-lock {
  overflow: hidden;
}