/* ═══════════════════════════════════════════════════════
   MOBILE NAV — HAMBURGER MENU
   ═══════════════════════════════════════════════════════

   HOW IT WORKS (the big picture):
   ─────────────────────────────────
   On mobile, the nav links are hidden. We add a "hamburger"
   button (three horizontal lines — ☰) that the user taps.
   Tapping it adds a CSS class (.open) to the nav, which
   makes a full-screen menu slide down from the top.

   This is done with JavaScript toggling a class, and CSS
   doing all the visual work. The JS itself is tiny — about
   5 lines. All the complexity is in the CSS below.
*/


/* ── HAMBURGER BUTTON ──────────────────────────────────
   Hidden on desktop. On mobile it becomes visible.

   WHY display:none on desktop:
   We don't want the hamburger showing on large screens
   where the normal nav links are already visible.

   The button has no background or border — just three
   lines made entirely out of CSS (see .hamburger-line).
*/
.nav-hamburger {
  display: none;                  /* hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;              /* pushes it to the far right of the nav */
  z-index: 200;                   /* sits above the slide-down menu */
}

/* Each of the three lines in the hamburger icon.
   They're plain divs styled as thin rectangles.
   The transition property means any CSS change animates
   smoothly over 0.3 seconds — used for the X animation below. */
.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--platinum);    /* off-white lines */
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* ── HAMBURGER → X ANIMATION ────────────────────────────
   When the nav has the .open class (added by JS when tapped),
   the three lines animate into an X shape:

   Line 1: rotates 45° (down-right diagonal)
   Line 2: fades out (the middle line disappears)
   Line 3: rotates -45° (up-right diagonal)

   transform-origin: center means they rotate around their
   own midpoint, which is what creates the clean X shape.
   This is a very common UI pattern — users instantly
   understand the X means "close".
*/
.nav.open .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav.open .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* ── MOBILE DROPDOWN MENU ──────────────────────────────
   This is the full-screen menu that slides down when open.

   HOW THE SLIDE ANIMATION WORKS:
   We use max-height transitioning from 0 to a large value.
   You can't animate height: 0 → height: auto in CSS (auto
   doesn't animate). max-height is the workaround — set it
   to 0 when closed, and something larger than it'll ever
   be (500px) when open. The transition does the rest.

   overflow: hidden clips the content while it's animating
   so you don't see the items before the menu fully opens.

   WHY position: absolute?
   The nav is position: sticky. If we let the mobile menu
   push the page down, it would shift all the content below.
   Instead, we take it "out of flow" with absolute positioning
   so it overlays the page content below the nav bar.
*/
.nav-mobile-menu {
  display: none;                    /* only shown on mobile — see @media below */
  position: absolute;
  top: 60px;                        /* exactly the nav height — starts right below it */
  left: 0;
  right: 0;
  background: rgba(11, 12, 12, 0.98); /* near-solid onyx — menus should be opaque */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  max-height: 0;                    /* starts collapsed */
  overflow: hidden;
  transition: max-height 0.35s ease; /* the slide animation */
  z-index: 150;
}

/* When .open is on the nav, expand the menu.
   500px is safely larger than the menu will ever be.
   The transition above handles the smooth slide. */
.nav.open .nav-mobile-menu {
  max-height: 500px;
}

/* Each link in the mobile menu.
   Larger tap targets (padding: 18px 28px) are important
   on mobile — fingers are bigger than cursors.
   border-bottom creates the divider lines between items. */
.nav-mobile-menu a {
  display: block;
  padding: 18px 28px;
  color: rgba(233, 234, 236, 0.7);  /* slightly dimmed platinum */
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, background 0.2s;
}

.nav-mobile-menu a:last-child {
  border-bottom: none;              /* no divider after the last item */
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a.active {
  color: var(--gold);
  background: rgba(237, 178, 48, 0.05); /* very faint gold wash on hover */
}

/* The "Leave Table" logout button inside the mobile menu.
   Styled differently from the links — it's destructive (logs you out)
   so it gets the dusty lavender treatment to visually separate it. */
.nav-mobile-menu .nav-mobile-logout {
  display: block;
  width: 100%;
  padding: 18px 28px;
  background: none;
  border: none;
  border-top: 1px solid rgba(138,112,144,0.2); /* faint lavender separator */
  color: var(--dusty-lavender);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}

.nav-mobile-menu .nav-mobile-logout:hover {
  color: var(--red-bright);
}


/* ── RESPONSIVE BREAKPOINT ──────────────────────────────
   Everything inside @media (max-width: 768px) only applies
   on screens narrower than 768 pixels — phones and small tablets.

   768px is a conventional breakpoint — it's roughly the width
   of an iPad in portrait mode. Below that, we're on mobile.

   Inside here we:
   1. Show the hamburger button (was display:none on desktop)
   2. Show the mobile menu container (was display:none)
   3. Hide the desktop nav links and logout button
   4. Make sure the nav can contain the absolute-positioned menu
*/
@media (max-width: 768px) {

  /* Show the hamburger */
  .nav-hamburger {
    display: flex;                  /* flex so the lines stack vertically */
  }

  /* Show the mobile menu container (still collapsed via max-height: 0) */
  .nav-mobile-menu {
    display: block;
  }

  /* Hide the desktop nav links — they'd stack weirdly on mobile */
  .nav-links {
    display: none;
  }

  /* Hide the desktop logout button — replaced by one inside the mobile menu */
  .nav-logout {
    display: none;
  }

  /* position: relative on the nav so the absolutely-positioned
     .nav-mobile-menu is positioned relative to the nav bar itself,
     not the whole page. Without this, the dropdown would be
     positioned relative to the nearest positioned ancestor — which
     could be anywhere and cause layout bugs. */
  .nav {
    position: sticky;               /* keep sticky */
    flex-wrap: wrap;                /* allow the menu to wrap below */
  }

}