/* Sub-page navigation (lib.navigation.deepnav, Templates/Content/Templates/DeepNav.html).
   Figma glass box (node 5445:10085): level title + row of "btn-dark-hollow" buttons, active page
   "btn-dark" (5-atoms/button.scss). Glass chrome is the same as 6-molecules/card.scss. */
@layer organisms {
  .deepnav {
    width: min(100%, var(--pageHeaderFooter-width) + 2 * var(--padding-s));
    margin-inline: auto;
    padding-inline: var(--padding-s);
    margin-block-start: var(--padding-l);
  }
  .deepnav__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-l);
    padding: var(--padding-l);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--surface-border);
    background: var(--surface-bg);
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
  }
  .deepnav__title {
    margin: 0;
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-h1-h6);
    line-height: 1.2;
    color: var(--color-primary-anthracite);
  }
  .deepnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-s);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .deepnav + #mainContent {
    padding-block-start: var(--section-gap);
  }
  .maincontents .deepnav__list li {
    margin-left: 0;
    text-indent: 0;
  }
  .maincontents .deepnav__list li::before {
    content: normal;
  }
}