/* =============================================================================
   Sidebar Navigation Panel
   -----------------------------------------------------------------------------
   .sidebar-panel                — outer container (collapsed via .is-collapsed)
     .sidebar-toc                — sticky TOC header row
     .sidebar-content            — scrollable body (hidden when collapsed)
       .sidebar-divider          — <hr> separator
       .sidebar-section          — module group (collapsed via .is-collapsed)
         .sidebar-section__header
         .sidebar-section__items
           .sidebar-item
           .sidebar-item--learning-obj
   ============================================================================= */

/* --- Panel container ------------------------------------------------------- */
.sidebar-panel {
  background-color: var(--panel-main-default);
  border: var(--weight-xxs) solid var(--surface-neutral-border);
  border-left: none;
  border-radius: 0 var(--corner-m-radius) var(--corner-m-radius) 0;
  box-shadow: 0 2px var(--weight-s) rgba(18, 18, 18, 0.2);
  width: 300px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
  position: fixed;
  top: var(--header-h);
  margin-top: var(--spacing-s);
  max-height: calc(100vh - var(--header-h) - var(--spacing-s) - var(--spacing-xs));
  overflow: hidden;
  z-index: 10;
}

/* --- TOC header ------------------------------------------------------------ */
.sidebar-toc {
  flex-shrink: 0;
  padding: var(--spacing-xs);
}

.sidebar-toc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 var(--spacing-xxs);
}

.sidebar-toc__label {
  font-family: var(--font-family);
  font-size: var(--type-sidebar-module-size);
  font-weight: var(--type-sidebar-module-weight);
  line-height: var(--type-sidebar-item-active-line-height);
  letter-spacing: var(--type-sidebar-module-tracking);
  color: var(--colour-primary-70);
}

.sidebar-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--colour-primary-70);
}

/* Show close icon when expanded, menu icon when collapsed */
.sidebar-toc__icon--close { display: block; }
.sidebar-toc__icon--menu  { display: none; }
.sidebar-panel.is-collapsed .sidebar-toc__icon--menu  { display: block; }
.sidebar-panel.is-collapsed .sidebar-toc__icon--close { display: none; }

/* --- Collapsible content --------------------------------------------------- */
.sidebar-content {
  display: flex;
  flex-direction: column;
   overflow-y: auto;   /* add: scroll when content overflows */
  flex: 1;            /* add: fill remaining panel height below the TOC header */
  min-height: 0;
}

.sidebar-panel.is-collapsed .sidebar-content { display: none; }

/* --- Divider --------------------------------------------------------------- */
.sidebar-divider {
  border: none;
  border-top: 1px solid var(--surface-neutral-border);
  margin: 0;
  flex-shrink: 0;
}

/* --- Module section -------------------------------------------------------- */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs) var(--spacing-s);
  flex-shrink: 0;
}

.sidebar-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  flex-shrink: 0;
}

.sidebar-section__label {
  font-family: var(--font-family);
  font-size: var(--type-sidebar-module-size);
  font-weight: var(--type-sidebar-module-weight);
  line-height: var(--type-sidebar-module-line-height);
  letter-spacing: var(--type-sidebar-module-tracking);
  color: var(--panel-list-item-on-list);
  text-decoration: none;
  flex: 1;
}

.sidebar-section__label:hover { text-decoration: underline; }

.sidebar-section__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--panel-list-item-on-list);
}

.sidebar-section__chevron { display: block; flex-shrink: 0; color: var(--panel-list-item-on-list); }

/* Chevron direction by section state */
.sidebar-section__chevron--up   { display: block; }
.sidebar-section__chevron--down { display: none; }
.sidebar-section.is-collapsed .sidebar-section__chevron--up   { display: none; }
.sidebar-section.is-collapsed .sidebar-section__chevron--down { display: block; }

/* --- Items list ------------------------------------------------------------ */
.sidebar-section__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.sidebar-section.is-collapsed .sidebar-section__items { display: none; }

/* --- Nav item -------------------------------------------------------------- */
.sidebar-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--corner-round);
  background-color: var(--panel-list-item-default);
  color: var(--panel-list-item-on-list);
  font-family: var(--font-family);
  font-size: var(--type-sidebar-item-size);
  font-weight: var(--type-sidebar-item-weight);
  line-height: var(--type-sidebar-item-line-height);
  letter-spacing: var(--type-sidebar-item-tracking);
  text-decoration: none;
  transition: background-color .15s ease;
}

.sidebar-item:hover:not(:active) {
  background-color: var(--panel-list-item-hover);
  font-weight: var(--type-sidebar-item-active-weight);
}

.sidebar-item:active {
  background-color: var(--panel-list-item-pressed);
  font-weight: var(--type-sidebar-item-active-weight);
}

/* Scroll-spy: section currently in view */
.sidebar-item--in-view {
  font-weight: var(--type-sidebar-item-active-weight);
  background-color: var(--panel-list-item-pressed);
}

/* Learning objective variant 
.sidebar-item--learning-obj { background-color: var(--panel-list-item-learning-objectives); }
.sidebar-item--learning-obj:hover:not(:active) { background-color: var(--panel-list-item-learning-objectives-hover); }
.sidebar-item--learning-obj:active             { background-color: var(--panel-list-item-learning-objectives-pressed); }
*/

/* --- Page layout (sidebar + content) --------------------------------------- */
.page-body {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.page-main {
  min-width: 0;
  max-width: clamp(760px, 55vw, 960px);
  margin: 0 auto 0 332px;
  padding: var(--spacing-xxxl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxxl);
}

/* Mobile — sidebar becomes a collapsible bar below the header.
   Scoped to .page-body so mod2's own layout is left untouched. */
@media (max-width: 900px) {
  .page-body { display: block; }

  /* Anchor jumps land below the fixed header + sidebar bar.
     Scoped with :has(.page-body) so only the standard module pages (mod1/mod3)
     are affected — mod2 keeps its own scroll-padding-top. */
  html:has(.page-body) {
    scroll-padding-top: calc(var(--header-h, 66px) + var(--sidebar-bar-h, 40px) + var(--spacing-m));
  }

  /* Reposition as a full-width bar pinned just below the site header.
     --header-h and --sidebar-bar-h are set from JS (header height changes
     when the mobile nav menu expands). */
  .page-body .sidebar-panel {
    position: fixed;
    top: var(--header-h, 66px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--header-h, 66px));
    margin-top: 0;
    z-index: 40;   /* below the header (50), above page content */
    border-radius: 0;
    border-left: var(--weight-xxs) solid var(--surface-neutral-border);
    overflow: hidden;
    transform: none;
    transition: none;
  }

  /* Dropdown content area — scrollable when expanded */
  .page-body .sidebar-content {
    max-height: 50vh;
    overflow-y: auto;
  }

  /* Collapsed bar shows the current section title — truncate if it's long */
  .page-body .sidebar-toc__inner {
    gap: var(--spacing-xs);
  }

  .page-body .sidebar-toc__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* No left-margin offset; pad content down past the fixed sidebar bar */
  .page-main {
    margin-left: 0;
    max-width: 100%;
    padding: calc(var(--sidebar-bar-h, 40px) + var(--spacing-l)) var(--spacing-l) var(--spacing-xl);
  }

  .page-main {
  gap: var(--spacing-xxl);
}
}