/* ONE MOBILE DISCLOSURE MECHANISM, shared by the public top bar and the portal sidebar.
   Loaded by both surfaces. worximate.css and portal-shared.css keep owning their own LAYOUT;
   this file owns only the collapse/reveal interaction, so there is exactly one definition of it.
   ────────────────────────────────────────────────────────────────────────────────────────────
   WHY IT IS SPLIT THIS WAY (decided 2026-08-13). The portal KEEPS ITS SIDEBAR — six task
   destinations for a working contractor want a sidebar, the paid product's nav is not broken, and
   changing it mid-beta risks the surface real customers use. So "one component" is NOT one layout:
   it is one toggle control, one aria contract, one open/close behaviour and one collapsed-state
   treatment. The public nav collapses a top bar; the portal collapses a sidebar. Same interaction,
   same code path, different thing revealed. A component carrying two layout modes would be two
   implementations sharing a file, which is the divergence this exists to close.

   ⚠️ FAIL OPEN — THE LOAD-BEARING PROPERTY. Every rule below that HIDES anything is gated on
   `html.js-nav`, a class nav-toggle.js adds on load. If that script never runs, the toggle stays
   hidden AND nothing is ever hidden: the nav degrades to a wrapping list, which is what the portal
   already does today. It is never unreachable. This is the opposite of the bug being fixed, where
   a bare `display:none` left phones with no destinations at all.

   ⚠️ ONE BREAKPOINT: 900px, for both surfaces. The site previously had three (768 on the two
   public paths, 900 in the portal). 900 is the portal's, because a 220px sidebar plus content
   needs the room sooner than a top bar does; adopting it for the public nav collapses that bar
   slightly earlier than strictly necessary, which is harmless and removes a whole breakpoint. */

/* The toggle is hidden on desktop AND in the no-JS state. It is only ever shown by the gated
   rule below, so it can never appear without working behaviour behind it. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--iron, #2a3a4e);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--slate, #3d5468); }
.nav-toggle:focus-visible { outline: 2px solid var(--orange, #f5a623); outline-offset: 2px; }

/* Three bars, rotated into an X when open. Purely decorative — the accessible name lives on the
   button's aria-label, so these carry aria-hidden and are never announced. */
.nav-toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle-bars span {
  display: block; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--bone, #c8dde8); border-radius: 2px; transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* DESKTOP: the wrapper must not exist as a box, or it would change the layout of two navs that
   are not broken. `display: contents` makes its children participate in the parent's flex exactly
   as they did before the wrapper was introduced — the public bar keeps logo / links / auth as
   three flex children, and the portal keeps `margin-top:auto` working on .sidebar-bottom.
   The known `display:contents` accessibility-tree caveat does not bite here: the wrapper is a
   plain div with no semantics of its own, and at the only breakpoint where the toggle exists it is
   a REAL box (below), not `contents`. */
.nav-collapsible { display: contents; }

@media (max-width: 900px) {
  html.js-nav .nav-toggle { display: inline-flex; }

  /* The host needs to be a positioning context for the panel that drops out of it. */
  html.js-nav .nav-host { position: relative; }

  html.js-nav .nav-collapsible { display: none; }

  /* ONE collapsed-state treatment for both surfaces: a full-width panel dropping directly below
     the host, contents stacked. The public host is a fixed 64px bar and the portal host is a
     static strip, but both are full-width at this breakpoint, so `top:100%` lands correctly on
     each and the treatment really is shared rather than merely similar. */
  html.js-nav .nav-host.nav-open .nav-collapsible {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem 1.5rem 1rem;
    background: var(--navy, #0d1117);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Inside the open panel both surfaces stack vertically. These override the horizontal/inline
     assumptions each surface makes at its own breakpoint. */
  html.js-nav .nav-host.nav-open .wx-nav-links,
  html.js-nav .nav-host.nav-open .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0;
    list-style: none;
  }
  html.js-nav .nav-host.nav-open .wx-nav-auth,
  html.js-nav .nav-host.nav-open .sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  }
  /* The divider is a vertical rule between inline items; meaningless in a stack. */
  html.js-nav .nav-host.nav-open .wx-nav-divider,
  html.js-nav .nav-host.nav-open .nav-divider { display: none; }
  /* Full-width tap targets rather than inline-sized ones. */
  html.js-nav .nav-host.nav-open .wx-nav-auth > a,
  html.js-nav .nav-host.nav-open .btn-nav-login,
  html.js-nav .nav-host.nav-open .btn-nav-register {
    display: block;
    text-align: center;
  }
  html.js-nav .nav-host.nav-open .wx-nav-links a,
  html.js-nav .nav-host.nav-open .sidebar-nav li a { padding: 0.65rem 0.25rem; }

  /* The public bar is `justify-content: space-between`, so hiding the panel leaves logo-left /
     toggle-right for free. The portal sidebar at this width is a plain flex ROW with a gap, so
     the control needs to be pushed over explicitly. Without this it sits against the wordmark. */
  html.js-nav .sidebar.nav-host .nav-toggle { margin-left: auto; }

  /* portal-shared.css hides these at 900 because they made no sense in the old wrapping top bar.
     Inside an OPEN panel there is vertical room and they carry meaning again: the two section
     labels are the only thing separating the Menu list from the Account list, and the user block
     is how you tell which account you are signed into. A disclosure that dropped both would be
     less usable than the bar it replaced. `.sidebar-bottom p` stays hidden — it is set with
     !important there and it is decorative. */
  html.js-nav .nav-host.nav-open .sidebar-company,
  html.js-nav .nav-host.nav-open .sidebar-divider,
  html.js-nav .nav-host.nav-open .sidebar-section,
  html.js-nav .nav-host.nav-open .sidebar-user-info { display: block; }
}