/*
 * Mobile navigation panel for the landing page.
 *
 * The stock mobile menu rendered as three unrelated floating pieces: home.css
 * gives .navbar-nav.glass-nav its own white rounded box, while .auth-group is a
 * sibling with no background at all, so the Login and Sign Up buttons ended up
 * hovering over the hero on their own, each a different width. This makes the
 * whole collapsed area one panel.
 *
 * Loaded only by resources/views/home/index.blade.php. The same navbar
 * component is also rendered by the public document form pages; they keep the
 * old menu until this file is linked there too.
 *
 * home.css declares several of these properties with !important inside its own
 * max-width: 991.98px block, which is why the overrides below have to match it.
 * Everything is scoped to #nav-bar so nothing here can reach the dashboard.
 */

@media (max-width: 991.98px) {
  /* ---------- The panel ---------- */

  /*
   * Anchored to the navbar rather than pushed into the flow: .navbar is
   * position:fixed, so it is the containing block and top:100% lands exactly
   * under it. The hero no longer gets shoved down when the menu opens.
   */
  #nav-bar .navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0.75rem;
    left: 0.75rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    margin-top: 0.5rem;
    padding: 0.6rem;
    /*
     * Fully opaque and with no backdrop-filter of its own. The bar it hangs
     * from gets one from the :has() rule at the bottom of this file, and a
     * backdrop-filter nested inside another one renders the hero faintly
     * through the panel instead of hiding it.
     */
    background: #183c68;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(8, 20, 38, 0.4);
  }

  /* Undo the white card home.css puts on the link list — the panel above is
     the surface now, the list is just its contents. */
  #nav-bar .navbar-nav.glass-nav {
    margin: 0;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ---------- Links ---------- */

  #nav-bar .navbar-nav .nav-link {
    margin: 0 0 0.15rem;
    /* 0.9rem + 1.05rem line-height clears the 44px minimum tap target. */
    padding: 0.9rem 1rem !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
  }

  #nav-bar .navbar-nav .nav-link:hover,
  #nav-bar .navbar-nav .nav-link:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    transform: none;
  }

  /* ---------- Auth buttons ---------- */

  /* Inside the panel and separated by a rule, instead of floating below it. */
  #nav-bar .auth-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.6rem !important;
    margin: 0.6rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  /* Both buttons share the hero's button shape so the page has one CTA
     language: 12px radius, same weight, same height. */
  /* margin !important because the Login link carries Bootstrap's mr-2, which
     otherwise offsets it from the Sign Up button below it. */
  #nav-bar .auth-group .btn-login-nav,
  #nav-bar .auth-group .btn-success {
    width: 100%;
    margin: 0 !important;
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem;
    font-weight: 600;
  }

  #nav-bar .auth-group .btn-login-nav {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
  }

  #nav-bar .auth-group .btn-login-nav:hover,
  #nav-bar .auth-group .btn-login-nav:focus {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
    color: #ffffff;
  }

  #nav-bar .auth-group .btn-success {
    background-color: var(--second, #57a773);
    border-color: var(--second, #57a773);
    color: #ffffff;
  }

  #nav-bar .auth-group .btn-success:hover,
  #nav-bar .auth-group .btn-success:focus {
    background-color: var(--second-dark, #157145);
    border-color: var(--second-dark, #157145);
  }

  /* ---------- Toggler ---------- */

  #nav-bar .navbar-toggler {
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, border-color 0.25s ease;
  }

  /* Scrolled and closed, the bar turns white and home.css darkens the icon —
     the white-on-white button chrome would vanish, so darken it to match. */
  #nav-bar.navbar-scrolled:not(:has(.navbar-collapse.show)) .navbar-toggler {
    border-color: rgba(26, 26, 26, 0.2);
    background: rgba(26, 26, 26, 0.04);
  }

  #nav-bar .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }

  #nav-bar .navbar-toggler:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  /* Bootstrap flips aria-expanded on the button, so the open state can be
     styled without any extra JavaScript. */
  #nav-bar .navbar-toggler[aria-expanded='true'] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
  }

  /*
   * At the top of the page the navbar is transparent; with the panel open the
   * logo and toggler would sit on bare hero artwork. :has() gives the bar a
   * background for exactly as long as the menu is open — if a browser does not
   * support it, the panel is still fully opaque on its own.
   */
  /* background-color !important for the same reason .navbar-scrolled needs it
     in navbar.css: .navbar's own `background: transparent` otherwise wins. */
  #nav-bar:has(.navbar-collapse.show),
  #nav-bar:has(.navbar-collapse.collapsing) {
    background-color: #183c68 !important;
  }

  /* The scrolled state turns the logo and toggler dark for a light bar; the
     bar is dark while the menu is open, so keep them white. */
  #nav-bar.navbar-scrolled:has(.navbar-collapse.show) .logo-text,
  #nav-bar.navbar-scrolled:has(.navbar-collapse.show) .toggler-icon {
    color: #ffffff !important;
  }
}