/* portal-sidebar.css - Course nav drawer close-UX scoped layer.
 *
 * Orchestrator inline polish 2026-05-16 in response to Jon's two-strike
 * report: (1) Course nav drawer has no visible close affordance; (2) when
 * sidebar is open and the user opens Sections, the sidebar stays put and
 * covers content. This file adds the close button + tap-outside backdrop
 * + auto-stack discipline against portal-toc.
 *
 * Lives in a separate file (NOT portal.css) per the now-quintuple-vouched
 * scoped-CSS-file pattern. Tokens inherit from :root in portal.css.
 *
 * License: (c) 2026 Virtus Cyber Academy.
 */

/* ============================================================
 * Close (X) button injected by portal-sidebar.js into the
 * .va-portal-sidebar aside element when on a narrow viewport.
 * ============================================================ */
.va-portal-sidebar-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg-card);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  display: none;        /* shown only on narrow viewports via media query */
}

.va-portal-sidebar-close:hover,
.va-portal-sidebar-close:focus {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

/* ============================================================
 * Tap-outside backdrop injected when the sidebar opens.
 * z-index 33 places it BELOW the sidebar (35) and BELOW the
 * sidebar-toggle (40) but ABOVE the page header (which sits at 30
 * in portal.css). Clicking it closes the sidebar.
 * ============================================================ */
.va-portal-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 3rem 0 0 0;    /* clear the sticky header */
  background: rgba(0, 0, 0, 0.45);
  z-index: 33;
}

body.sidebar-open .va-portal-sidebar-backdrop {
  display: block;
}

/* ============================================================
 * Mobile presentation rules. Desktop (>820px) keeps the sidebar
 * as a sticky two-pane layout per portal.css; the close button +
 * backdrop are not needed there.
 * ============================================================ */
@media (max-width: 820px) {
  .va-portal-sidebar-close {
    display: block;
  }

  /* Reinforce sidebar visibility against the new backdrop layer. */
  .va-portal-sidebar {
    padding-top: 3rem;  /* leaves room for the absolutely-positioned close button */
  }
}

@media print {
  .va-portal-sidebar-close,
  .va-portal-sidebar-backdrop {
    display: none !important;
  }
}