/* static/css/top_nav.css */

/*
Readable project overrides for the shared top nav.

Policy:
- Do not append custom CSS to compiled/minified app.css or starter.css.
- Keep project-specific nav/dropdown polish in separate readable files loaded
  after the bundle.

Scope:
- templates/includes/top_nav.html
- Account dropdown stacking / hit-area polish
- Shared search-preview stacking relative to page content

Why this file exists:
- The shared account dropdown needs small parity tuning without changing the
  compiled theme bundle.
- Public user-profile surfaces can include fixed-position UI near the upper-right
  corner, so shared top-nav hit areas must stay explicit and protected.
- The account menu should:
  - remain fully clickable
  - sit only slightly over the top nav
  - use a content-driven width instead of a fixed width
  - keep balanced left/right text padding
  - keep the full hit target while showing a slightly shorter hover highlight
  - keep label text white while hovered/focused
*/

.navbar.fixed-top {
  z-index: 1030;
}

#topNavSearchResults {
  z-index: 1035 !important;
}

/* Account dropdown -------------------------------------------------------- */

.top-nav-account-toggle {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
}

.top-nav-account-menu {
  width: auto;
  min-width: max-content;
  max-width: calc(100vw - 1rem);
  margin-top: 0.2rem;
  padding-top: 0.42rem;
  padding-bottom: 0.5rem;
  z-index: 1034;
}

/*
Keep the triangle decorative only.
It must not interfere with pointer hit-testing on the first menu item.
*/
.top-nav-account-menu.has-triangle,
.top-nav-account-menu.has-triangle::before,
.top-nav-account-menu.has-triangle::after {
  pointer-events: none;
}

.top-nav-account-menu .dropdown-item,
.top-nav-account-menu .dropdown-divider {
  pointer-events: auto;
}

.top-nav-account-menu.has-triangle {
  overflow: visible;
}

.top-nav-account-menu .dropdown-item {
  display: block;
  position: relative;
  padding: 0.46rem 1.5rem;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
}

/*
Tighten the spacing between the first two items a touch without changing the
overall item hit area pattern for the menu.
*/
.top-nav-account-menu .dropdown-item:first-child {
  padding-bottom: 7px;
}

.top-nav-account-menu .dropdown-item:first-child + .dropdown-item {
  padding-top: 7px;
}

/*
Increase the breathing room around the divider so:
- Settings sits a few pixels farther above it
- Logout sits a few pixels farther below it
*/
.top-nav-account-menu .dropdown-divider {
  margin: 7px 0 calc(0.36rem + 1px);
}

.top-nav-account-menu .dropdown-item:hover,
.top-nav-account-menu .dropdown-item:focus,
.top-nav-account-menu .dropdown-item:active {
  color: #fff;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(31, 50, 67, 0.96) 0,
    rgba(31, 50, 67, 0.96) 100%
  );
  text-decoration: none;
}