/* ============================================================================
   ChatLemur public NAVIGATION SYSTEM (feat/homepage-nav-system, board 2026-06-20)
   ----------------------------------------------------------------------------
   A grouped sub-menu nav so the everything-app BREADTH stays navigable on
   mobile + desktop. Replaces the flat .nav-menu row.

   ACCESSIBILITY (Joe is BLIND — top priority):
     * Desktop = the DISCLOSURE-BUTTON pattern: each top-level group is a real
       <button aria-expanded aria-controls> that toggles a panel of links. This
       is the robust pattern for a NAV of links (not a menu of *actions*), so we
       do NOT use role="menu"/menuitem (which would steal arrow keys from the
       links and mislead a screen reader about what the items do).
     * Full keyboard: Tab to a trigger, Enter/Space toggles, Arrow Up/Down moves
       within an open panel, Esc closes + returns focus to the trigger.
     * Mobile = hamburger → off-canvas drawer, accordion groups, focus trap,
       body-scroll-lock, Esc / overlay-tap close.
     * Reuses existing design tokens (--primary, --text-*, --bg-*, --radius-*,
       --spacing-*) — does NOT restyle the site.
   ============================================================================ */

/* ── Nav-container width override ─────────────────────────────────────────── */
/* The page .nav-container uses max-width: 1200px (shared with all sections).
   The full desktop nav row's natural content width (~1213px without gaps) can
   exceed the 1152px inner width of a 1200px container with 48px padding.
   Override to a wider max-width (1440px) so the nav can spread to fill the
   viewport before the hamburger breakpoint (1401px) kicks in. This does NOT
   affect the body content container width — only the nav bar.
   The navbar itself is full-width (no max-width), so the container can grow. */
@media (min-width: 1401px) {
    .navbar .nav-container {
        max-width: 1440px;
    }
}

/* ── Top-level grouped nav (replaces the flat .nav-menu flow) ─────────────── */
.nav-groups {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--spacing-xs, 6px);
    margin: 0;
    padding: 0;
    /* flex: 0 0 auto — do NOT shrink the groups list. Shrinking it causes the
       rightmost group buttons to overflow their container and sit on top of the
       .nav-flat items (the Community button protruded ~121px past the list edge).
       The responsive breakpoint (min-width: 1401px) ensures there is always
       enough room for the full row at its natural width before this shows. */
    flex: 0 0 auto;
}

.nav-group {
    position: relative;
}

/* The disclosure trigger button for a group (Lenny ▾, Markets ▾, …) */
.nav-group-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    font-family: inherit;
    transition: color var(--transition-fast);
}

.nav-group-trigger:hover,
.nav-group-trigger[aria-expanded="true"] {
    color: var(--primary);
}

.nav-group-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

.nav-group-caret {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-fast);
}

.nav-group-trigger[aria-expanded="true"] .nav-group-caret {
    transform: rotate(180deg);
}

/* The dropdown panel of sub-links */
.nav-group-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: var(--bg-secondary, rgba(21, 27, 47, 0.99));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.45));
    padding: 8px;
    margin: 0;
    list-style: none;
    z-index: 250;
    /* hidden by default; [hidden] is also set on the element for SR + no-JS */
}

.nav-group-panel[hidden] {
    display: none;
}

.nav-sublink {
    display: block;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--radius-md, 10px);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.3;
    text-decoration: none;
}

.nav-sublink-desc {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 400;
}

.nav-sublink:hover,
.nav-sublink:focus-visible {
    background: rgba(124, 58, 237, 0.16);
    color: var(--primary, #c4b5fd);
    outline: none;
}

.nav-sublink:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.nav-sublink[aria-disabled="true"] {
    opacity: 0.7;
    pointer-events: none;
}

.nav-sublink-soon {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.18);
    color: var(--primary, #c4b5fd);
    font-size: 0.66rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Flat top-level links / actions kept beside the groups (Pricing, About, …) */
.nav-flat {
    display: inline-flex;
    align-items: center;
    list-style: none;
    gap: 4px;        /* tighter than --spacing-sm so the row fits at 1401px+ */
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* ── Mobile: hamburger off-canvas drawer ──────────────────────────────────── */
.nav-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.nav-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--bg-secondary, rgba(15, 20, 38, 0.99));
    border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
    z-index: 901;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-drawer.is-open {
    transform: translateX(0);
}

/* When closed (hidden attribute set by the JS), fully remove from layout + AT.
   Without this the .nav-drawer { display:flex } rule overrides the UA
   [hidden]{display:none}, leaving the closed drawer rendered off-screen and
   still in the accessibility tree. */
.nav-drawer[hidden],
.nav-drawer-overlay[hidden] {
    display: none !important;
}

.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
}

.nav-drawer-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-md, 1rem);
}

.nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: var(--radius-md, 10px);
}

.nav-drawer-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.nav-drawer-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xl);
}

/* Accordion group inside the drawer */
.nav-acc {
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
}

.nav-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
}

.nav-acc-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

.nav-acc-trigger .nav-group-caret {
    flex: 0 0 auto;
}

.nav-acc-panel {
    padding-bottom: 8px;
    list-style: none;
    margin: 0;
}

.nav-acc-panel[hidden] {
    display: none;
}

.nav-acc-panel .nav-sublink {
    padding: 10px 12px;
    color: var(--text-secondary);
}

.nav-acc-panel .nav-sublink:hover,
.nav-acc-panel .nav-sublink:focus-visible {
    color: var(--primary);
}

/* Flat links + CTAs at the foot of the drawer */
.nav-drawer-flat {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
}

.nav-drawer-flat li {
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
}

.nav-drawer-flat a {
    display: block;
    padding: 14px 0;
    min-height: 48px;
    color: var(--text-primary);
    font-size: 1rem;
    text-decoration: none;
}

.nav-drawer-flat a:hover,
.nav-drawer-flat a:focus-visible {
    color: var(--primary);
}

.nav-drawer-cta {
    display: block;
    margin-top: var(--spacing-md);
    padding: 14px 18px;
    text-align: center;
    border-radius: var(--radius-md, 10px);
    background: var(--gradient-accent, #7c3aed);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
}

/* ── Responsive switch ────────────────────────────────────────────────────── */
/* Desktop groups + flat links visible above 1400px; drawer trigger hidden.
   Breakpoint raised from 1024px → 1400px (2026-07-13):
     Natural content widths:
       logo ~148px + 6 group buttons ~495px + 6 flat links ~490px + actions ~104px
       = ~1237px + 48px container padding = ~1285px minimum.
     With 3×16px gaps between flex children = ~1285+48 = ~1333px absolute min.
     1400px gives a comfortable ~67px breathing room and ensures .nav-groups
     (now flex: 0 0 auto — no shrink) never overflows into .nav-flat. */
@media (min-width: 1401px) {
    .nav-drawer,
    .nav-drawer-overlay {
        display: none;
    }
}

/* Below 1400px: hide the desktop groups + flat; the hamburger drives the
   off-canvas drawer. */
@media (max-width: 1400px) {
    .nav-groups,
    .nav-flat {
        display: none;
    }
}

/* Respect reduced-motion: kill the slide/opacity transitions. */
@media (prefers-reduced-motion: reduce) {
    .nav-drawer,
    .nav-drawer-overlay,
    .nav-group-caret {
        transition: none;
    }
}

/* ── Light theme parity (reuses the site's light tokens) ──────────────────── */
html[data-theme="light"] .nav-group-panel,
html[data-theme="light"] .nav-drawer {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .nav-group-trigger,
html[data-theme="light"] .nav-acc-trigger,
html[data-theme="light"] .nav-drawer-flat a {
    color: #1f2430;
}

html[data-theme="light"] .nav-sublink {
    color: #1f2430;
}

html[data-theme="light"] .nav-sublink-desc {
    color: #5b6270;
}

/* Very narrow phones (≤360px, e.g. iPhone SE): the nav-container's 1.5rem (24px)
   side padding + the logo + theme/lang/hamburger action row overflowed the
   viewport by ~16px, pushing the hamburger partly off-screen and forcing a
   horizontal scroll. Tighten the header padding + action gap here so the row
   fits cleanly with no h-scroll (verified at 320px). */
@media (max-width: 360px) {
    .navbar .nav-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .navbar .nav-actions {
        gap: 6px;
    }
}