/*
  public/CSS/PAGES/_HOME_/External_CSS/page_menu.css
  The home page layout with its menu of sections (views/PAGES/_HOME_/body.ejs).
  Wide screens: the menu stays in view on the left while the page scrolls past.
  Small screens: the menu is a bar of links under the header that scrolls sideways.
  The section in view is marked by page_menu.js with aria-current="true".
*/

.page-menu-list {
  display: flex;
}

.page-menu-link {
  color: var(--page-menu-text);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-menu-link:hover,
.page-menu-link[aria-current="true"] {
  color: var(--page-menu-active-text);
}

/* ---------- Small screens: a bar under the header ---------- */

@media (max-width: 1199px) {
  /* Links that are jumped to stop below the header and the bar. */
  html {
    scroll-padding-top: calc(var(--header-height) + 76px);
  }

  .page-menu {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    border-bottom: 1px solid var(--hairline);
    background: var(--page-menu-bar-background);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .page-menu-list {
    gap: 6px;
    overflow-x: auto;
    padding: 10px var(--gutter);
    scrollbar-width: none;
  }

  .page-menu-list::-webkit-scrollbar {
    display: none;
  }

  /* A sideways-scrolling list ignores its own end padding, so the last link carries it. */
  .page-menu-list > li:last-child {
    padding-right: var(--gutter);
  }

  .page-menu-link {
    display: block;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .page-menu-link[aria-current="true"] {
    background: var(--panel-background);
  }
}

/* ---------- Wide screens: a menu on the left ---------- */

@media (min-width: 1200px) {
  .home-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    width: 100%;
    max-width: calc(var(--container-width) + 236px);
    margin-inline: auto;
  }

  .page-menu {
    position: sticky;
    top: var(--header-height);
    align-self: start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: clamp(36px, 5vw, 80px) 0 32px var(--gutter);
  }

  /* A thin line runs down the list; the section in view gets a blue mark on it. */
  .page-menu-list {
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid var(--page-menu-marker);
  }

  .page-menu-link {
    display: block;
    margin-left: -2px;
    padding: 9px 0 9px 18px;
    border-left: 2px solid transparent;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .page-menu-link[aria-current="true"] {
    border-left-color: var(--page-menu-active-marker);
    font-weight: 650;
  }
}