/* Navbar layout (Mena 2026-07-20, revised 2026-07-21).
   Drop the Services / About Us / Pricing / Blog text links from the bar
   and default to the pressable sidebar at EVERY width — the hamburger
   panel (which carries the links + Login) is the menu on desktop too.
   Top-right cluster: Login (desktop only) + sidebar toggle. Contact Us was
   removed from the bar; Login collapses into the menu on mobile. */

/* remove the desktop text links everywhere */
.navbar .nav_wrap {
  display: none !important;
}

/* Login placement (Mena 2026-08-25, two rounds).
   Round 1: "remove login from the menu it has its own button" -> the menu is
   sections only. Round 2, after the pill collided with the wordmark at 375px
   (1px of clearance): "mobile and tablet can have login inside the menu if the
   button doesnt fit bro".
   So: the BUTTON is the desktop login and the MENU ITEM is the mobile/tablet
   login, and exactly one of them exists at any width. Never both, never
   neither. The two rules below are deliberate mirror images of each other, so
   change them together. */
@media (max-width: 991px) {
  .navbar .nav-login-desktop {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hamburger-nav__li.is-login {
    display: none !important;
  }
}

/* the sidebar toggle shows at every width (template hid it above 991) */
.hamburger-anchor {
  display: block !important;
}

/* the dim backdrop must be paintable on desktop so the open menu dims
   the page there too; its opacity/visibility stay gated by
   data-navigation-status (nav-tweaks.js), so it's invisible until open */
.navigation__dark-bg {
  display: block !important;
}

/* the menu panel carries its own card background so it's self-contained
   when it scales open on desktop (the template's separate .bg card only
   sizes correctly in the mobile layout). Drops from the toggle at
   top-right via the panel's own transform-origin. */
.hamburger-nav__group {
  min-width: 15rem;
  background: var(--navbar-menu-bg, #101604);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px -12px rgba(9, 30, 60, 0.45);
  z-index: 2;
}

/* Close button above the open menu card (2026-08-21).
   The panel above carries z-index:2 so it paints over the template's
   separate .bg card. The toggle button is position:absolute with NO
   z-index, and it sits earlier in the DOM than the panel, so the panel
   painted over it: the X was there but unclickable at every width. The
   only exits were the dimmed backdrop, Escape, or picking a link, and a
   phone has no Escape. Lift the toggle above the panel. */
.hamburger-nav__toggle {
  z-index: 3;
}

/* The CLOSED menu must not hit-test (2026-08-27).
   `.hamburger-nav` is position:absolute and sized by its panel, so even
   closed it is a ~270x355 transparent box hanging over the hero. Measured
   at 440x836: `document.elementsFromPoint` at the centre of the frontal
   creator cards returned `.hamburger-nav` FIRST, above `.image3d`. Two
   consequences, both real:
     1. The card's own click listener never fired there. Creator taps only
        worked because roster.js falls back to coordinate hit-testing.
     2. The touch target was this div, whose touch-action is `auto` — both
        axes pannable. That is why putting `touch-action:none` on the cards
        changed nothing on the physical iPhone: iOS was never consulting the
        card, and kept cancelling the swipe to start a scroll.
   The template clearly intended this: `.hamburger-nav__toggle` and
   `.hamburger-nav__group` both declare `pointer-events:auto` for no reason
   unless their container was meant to be `none`. Restore the missing half.
   Closed, only the toggle is live; open, the panel and toggle both are
   (the group flips to visibility:visible and keeps its own auto). */
.hamburger-nav {
  pointer-events: none;
}