/* Pull in MkDocs Material-style admonitions (.md-typeset .admonition) for
   wrapped topic bodies without injecting a <link> into $mainContent. */
@import url("/css/material-admonitions.css");

/* Pilot sidebar deltas vs inherited alloy-theme/foundation styling.
 *
 * The wrapped page already picks up the inherited shell's CSS:
 *   - .sidenav-wrapper card-style container (alloy-theme)
 *   - foundation accordion show/hide on .is-accordion-submenu(.is-active)
 *   - chevron icons via FontAwesome on span.submenu-toggle
 *   - hover tint via --nav-menu--hover-background-color
 *
 * This file only adds what the design spec wants ON TOP of that:
 *   1. The "Online Help" blue header bar (no inherited equivalent).
 *   2. Active-section row highlight (#DBE9FF rounded fill, bold) for
 *      the top-level parent that owns the current page. The inherited
 *      rule for [aria-expanded="true"] > a is intentionally commented
 *      out in alloy-theme.css, so we paint our own here.
 *   3. A slightly deeper-blue chevron tone on the active section.
 *
 * Edit this file -> refresh the browser; the wrapper does NOT need to
 * be re-run because the file is bind-mounted by docker-compose.staging.yml.
 */

/* 1. Online Help header bar.
 *
 * Legacy has no equivalent of this header; it is a pilot-only addition.
 * To make it sit flush against the sidebar card edges (instead of inside
 * the inherited `.sidenav-container { padding: 13.3px 20px }`), we move
 * that padding from the container onto the inner <ul> — see rule 5
 * below. The selector here just paints the bar. */
.sidenav-container .sidenav-pilot-header {
  background: #1f6fc4;
  color: #ffffff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 8px 8px 0 0;
}

/* 5. Move the gutter from .sidenav-container to the inner accordion <ul>.
 *
 * Inherited Stylesheets/Styles.css declares
 *   .sidenav-container { padding: 20px; min-height: 60vh; ... }
 * which keeps a uniform 20px frame around everything inside the card.
 * For the pilot variant we want the "Online Help" bar to be flush with
 * the card edges (no inner gap) but still keep the same horizontal/vertical
 * gutter around the TOC. So neutralize the container padding and re-add
 * the same box on the <ul>.
 *
 * Scoped via `:has(> .sidenav-pilot-header)` so this only applies when
 * the pilot header is present; other products that fill the same shell
 * without a pilot header continue to get the inherited 20px frame. */
.sidenav-container:has(> .sidenav-pilot-header) {
  padding: 0;
}
.sidenav-container:has(> .sidenav-pilot-header) > ul.menu.sidenav {
  padding: 13.3333px 20px;
}

/* 2. Active-section parent: light-blue rounded fill, bold label.
 * Targets the top-level <li> that we mark with is-current-section
 * AND has aria-expanded="true" for the parent's currently open state.
 */
.sidenav-wrapper .menu.sidenav > li.is-current-section > a,
.sidenav-wrapper .menu.sidenav > li.is-accordion-submenu-parent.is-current-section[aria-expanded="true"] > a {
  background: #DBE9FF;
  color: #163661;
  font-weight: 700;
  border-radius: 6px;
}

/* 3. Active-section chevron: deeper blue (inherited default is #7FB3E0) */
.sidenav-wrapper .menu.sidenav > li.is-current-section > a span.submenu-toggle:before,
.sidenav-wrapper .menu.sidenav > li.is-current-section[aria-expanded="true"] > a span.submenu-toggle:before {
  color: #1f6fc4;
}

/* 4a. Neutralize Bootstrap's `.row > *` gutter on .sidenav-wrapper.
 *
 * The new shell wraps the sidebar inside a Bootstrap `.row` (layout.html),
 * which adds `padding: 0 12px` (calc(var(--bs-gutter-x) * .5) on each
 * side). Legacy :8080 doesn't load Bootstrap into the sidebar context,
 * so .sidenav-wrapper computes to padding 0 there. Match that. */
.row > .sidenav-wrapper {
  padding-right: 0;
  padding-left: 0;
}

/* 4b. Suppress hover underline on TOC links.
 *
 * alloy-theme.css declares `a:hover { text-decoration: underline }` on
 * every link. Legacy neutralizes that for the menu via Flare's
 * Components/Styles.css (`ul.menu a { text-decoration: none }`), which is
 * not loaded in the new shell. Replicate it locally, including :focus
 * and :active for keyboard parity. */
.sidenav-wrapper ul.menu.sidenav a,
.sidenav-wrapper ul.menu.sidenav a:hover,
.sidenav-wrapper ul.menu.sidenav a:focus,
.sidenav-wrapper ul.menu.sidenav a:active {
  text-decoration: none;
}

/* 4. Reset stray list padding inside the sidebar.
 *
 * alloy-theme.css declares a global `ol, ul, dl { padding: 8px 24px; }`
 * that hits the sidebar tree because nothing else in the new shell
 * neutralizes it. Legacy gets that neutralization for free from the
 * Flare-only skin (common/Skins/Default/Stylesheets/Components/Styles.css):
 *
 *   ul.menu, ul.menu ul, ul.menu li { padding: 0; }
 *
 * That skin is not loaded in the new (layout.html) shell, so reproduce
 * the same reset, scoped to the sidenav so we do not affect any other
 * `ul.menu` widget elsewhere on the page. Per-link padding is intentionally
 * left to the inherited rule for `.sidenav-wrapper .tree-node a`. */
.sidenav-wrapper ul.menu.sidenav,
.sidenav-wrapper ul.menu.sidenav ul,
.sidenav-wrapper ul.menu.sidenav li {
  padding: 0;
}