/**
 * Navbar — accessibility and responsive behaviour.
 *
 * Loaded after base.css. Everything is nested under .pl-nav, a class only the
 * navbar carries, so the names it shares with other templates (btn-group,
 * dropdown-menu, dropdown-item, nav-item and friends) keep behaving exactly as
 * they do elsewhere. base.css itself is never edited.
 *
 * Desktop is meant to look untouched. Anything that could move it is either
 * scoped to :focus-visible, which a mouse never triggers, or sits inside the
 * 1340px media query at the bottom.
 *
 * @author Murtaza Lightwala
 * @date   2nd September 2026
 *
 * Edit log:
 *   30 Oct 2026 - Colours use theme.css variables.
 */

/* --- Parity resets ---------------------------------------------------------
   These elements changed tag for accessibility. Each one is pinned back to
   what its old tag computed to, so nothing shifts. */

/* The logo carries width/height now so the browser can reserve its box. Those
   attributes double as presentational hints, so without height:auto the
   max-width cap squashes it to 240x81 instead of scaling to 240x60. */
.pl-nav .logo > a > img {
  height: auto;
}

/* Direct Mail: span -> button. Bootstrap already zeroes the border and
   background, so only the default button font needs cancelling. */
.pl-nav button.dropdown-item {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  text-align: inherit;
  background: none;
  border: 0;
}

/* Bell: <a href="#"> -> button. Nothing styles .notification-trigger, so the
   anchor was bare. Strip the button back to bare too. */
.pl-nav button.notification-trigger {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}

/* Account menu: div -> button. base.css still supplies the pill styling; only
   the button chrome needs undoing. */
.pl-nav button.user-icon {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  text-align: inherit;
  width: auto;
}

/* Hamburger. display:none on desktop keeps it out of flex layout entirely. */
.pl-nav .pl-nav__toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.pl-nav .pl-nav__toggle span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: var(--pl-color-surface);
}

/* --- Focus and keyboard ----------------------------------------------------
   :focus-visible ignores mouse clicks, so a mouse user sees none of this. */

.pl-nav :focus-visible {
  outline: 2px solid #45dae3;
  outline-offset: 2px;
  border-radius: 4px;
}

/* :has(:focus-visible), not :focus-within. :focus-within would also fire when
   a mouse click focuses the trigger and leave the panel stuck open. */
.pl-nav .dropdown-submenu:has(:focus-visible) .submenu {
  display: flex;
}

.pl-nav .dropdown:has(:focus-visible) .dropdown-content {
  display: block;
}

.pl-nav .notification-dropdown:has(:focus-visible) .notification-content {
  display: block;
}

/* Stop panel scroll from chaining to the page. */
.pl-nav .notification-content,
.pl-nav .dropdown-content {
  overscroll-behavior: contain;
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pl-nav,
  .pl-nav *,
  .pl-nav *::before,
  .pl-nav *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Mobile and tablet -----------------------------------------------------
   Nothing past this line can reach a full-width desktop. */

/* 1340px, not 768px. Bootstrap's .navbar carries flex-wrap:wrap and base.css
   never overrides it, so the bar is free to spill onto a second line. .logo
   holds the links as well as the logo and measures 944px, which leaves too
   little for the account cluster until about 1200px logged out and 1340px
   logged in. Below that it wrapped into a 142px two-row bar. The drawer now
   covers the whole of that range.

   base.css only supplies its mobile rules below 768px, so anything between
   769 and 1340 that used to come from there is repeated here. */
@media screen and (max-width: 1340px) {
  .pl-nav {
    flex-wrap: wrap;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .pl-nav .logo {
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
  }

  .pl-nav .pl-nav__toggle {
    display: block;
    margin-left: auto;
  }

  .pl-nav .nav-links {
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .pl-nav[data-open="true"] .nav-links {
    display: flex;
  }

  .pl-nav .nav-links > li {
    margin: 10px 0;
  }

  .pl-nav .btn-group {
    width: 100%;
    margin: 10px 0;
  }

  .pl-nav .btn-group > .dropdown-menu {
    width: 100%;
    text-align: center;
  }

  /* base.css hides this at 768px with nothing to reopen it, so logged-in users
     lose bell, orders, cart and account outright. Back in flow as a full-width
     row on the navbar gradient, revealed by the hamburger. */
  .pl-nav .nav-container {
    width: 100%;
    background: linear-gradient(270deg, #092338 0%, var(--pl-color-blue) 100%);
    position: relative;
    display: none;
    flex-direction: row;
    box-shadow: none;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pl-nav[data-open="true"] .nav-container {
    display: flex;
  }

  /* Logged-out equivalent of the block above. base.css leaves these visible at
     this width, so they sat outside the drawer instead of in it, and its column
     layout is overridden below 768px too. */
  .pl-nav .auth-buttons {
    display: none;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
  }

  .pl-nav[data-open="true"] .auth-buttons {
    display: flex;
  }

  /* The pair only needs ~235px, so stretching them across a 1200px drawer just
     looks broken. min-width evens them up: left to themselves Sign in is 66px
     and Register 76px, and the mismatch shows once they sit side by side. */
  .pl-nav .auth-buttons button {
    width: auto;
    min-width: 120px;
    margin: 5px;
  }

  /* Hover is meaningless on touch. Swap it for the .is-open the script sets. */
  .pl-nav .dropdown-submenu:hover .submenu,
  .pl-nav .dropdown:hover .dropdown-content,
  .pl-nav .notification-dropdown:hover .notification-content {
    display: none;
  }

  .pl-nav .dropdown-submenu.is-open .submenu {
    display: flex;
  }

  .pl-nav .dropdown.is-open .dropdown-content {
    display: block;
  }

  .pl-nav .notification-dropdown.is-open .notification-content {
    display: block;
  }

  /* Flies out sideways on desktop; has to stack here. */
  .pl-nav .dropdown-submenu .submenu {
    position: static;
    width: 100%;
    margin-top: 0;
    border: 0;
    border-radius: 0;
  }

  /* base.css hardcodes right:-80px, which runs off a narrow screen. */
  .pl-nav .notification-content {
    left: 0 !important;
    left: auto;
    width: min(320px, calc(100vw - 2rem));
    max-height: min(400px, 60vh);
    overflow-y: auto;
  }

  .pl-nav .dropdown-content {
    right: 0;
    max-width: calc(100vw - 2rem);
  }

  /* 44px hit targets, and no 300ms double-tap delay. */
  .pl-nav a,
  .pl-nav button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(69, 218, 227, 0.25);
  }

  .pl-nav .nav-links > li > a,
  .pl-nav .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .pl-nav .nav-links > li {
    width: 100%;
    text-align: center;
  }

  .pl-nav .nav-links > li > a {
    justify-content: center;
  }
}

/* --- Small phones ----------------------------------------------------------
   Below this a row of two pills gets cramped, so the auth buttons go back to
   stacked and full width where a thumb wants them. Must stay after the 1340px
   block: same specificity, so source order is what decides. */

@media screen and (max-width: 440px) {
  .pl-nav .auth-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .pl-nav .auth-buttons button {
    width: 100%;
    min-width: 0;
    margin: 5px 0;
  }
}