/* Style overrides for the Vanilla menu inside #oracle_subnav. */
:root {
  /* The pasted Vanilla dropdown uses 100vh - 178px as its content limit. */
  --ccc-legacy-dropdown-top: 178px;
  --ccc-legacy-dropdown-height: calc(100vh - var(--ccc-legacy-dropdown-top));
}

@supports (height: 100dvh) {
  :root {
    --ccc-legacy-dropdown-height: calc(100dvh - var(--ccc-legacy-dropdown-top));
  }
}

@media (min-width: 753px) {
  /* The active tab changes as soon as the menu opens. Using opacity here
     waits until the end of Vanilla's height animation and causes a jump. */
  #oracle_subnav .navmenu:has(.navmenu__nav-link.active) .navmenu__dropdown-container {
    box-sizing: border-box;
    height: var(--ccc-legacy-dropdown-height) !important;
    min-height: 0;
    overflow: hidden;
  }

  #oracle_subnav .navmenu:has(.navmenu__nav-link.active) .navmenu__dropdown-wrapper,
  #oracle_subnav .navmenu:has(.navmenu__nav-link.active) .navmenu__dropdown-content {
    box-sizing: border-box;
    height: 100%;
  }

  #oracle_subnav .navmenu:has(.navmenu__nav-link.active) .navmenu__dropdown-wrapper {
    min-height: 0;
  }

  /* Its inline max-height and min-height would otherwise constrain the panel. */
  #oracle_subnav .navmenu:has(.navmenu__nav-link.active) .navmenu__dropdown-content {
    max-height: none !important;
    min-height: 0 !important;
    /* Items supply their own 8px inset; avoid adding it twice so their text
       aligns with the first navigation tab. */
    padding-left: 0 !important;
  }

  /* Align sidebar headings and menu items with the panel's left edge. */
  #oracle_subnav .navmenu__dropdown-content--left {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  #oracle_subnav .navmenu__dropdown-content--left a,
  #oracle_subnav .navmenu__dropdown-content--left button {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  /* Vanilla's h3 adds an 8px top margin that offsets the following links. */
  #oracle_subnav .navmenu__dropdown-content--left h3.navmenu__dropdown-content--header {
    margin-top: 0;
    margin-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 4.8px;
  }

  #oracle_subnav .navmenu__dropdown-content--left h3.navmenu__dropdown-content--header .navmenu__dropdown-content--headerlink {
    padding-left: 0;
  }

  /* Leave 0.5rem below subheaders and between consecutive link rows. */
  #oracle_subnav .navmenu__dropdown-content--right h3.navmenu__dropdown-content--header {
    margin: 0 0 0.5rem;
  }

  #oracle_subnav .navmenu__dropdown-content--right .navmenu__dropdown-content--item {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  #oracle_subnav .navmenu__dropdown-content--right .navmenu__dropdown-content--item > a[href] {
    padding-top: 0;
    padding-bottom: 0;
  }

  #oracle_subnav .navmenu__dropdown-content--right .navmenu__dropdown-content--item + .navmenu__dropdown-content--item {
    margin-top: 0.5rem;
  }

  /* Add extra space only above later subheaders in each column. */
  #oracle_subnav .navmenu__dropdown-content--right h3.navmenu__dropdown-content--header:not(:first-child) {
    margin-top: 1rem;
  }

  /* Pillar links share the title's left edge, without list/dash markers. */
  #oracle_subnav .navmenu__dropdown-content ul,
  #oracle_subnav .navmenu__dropdown-content li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

  /* Inset sidebar content while keeping the background on the full item row. */
  #oracle_subnav .navmenu__dropdown-content--left .navmenu__dropdown-content--item {
    padding-left: 8px;
    padding-right: 8px;
  }

  #oracle_subnav .navmenu__dropdown-content--left .navmenu__dropdown-content--item,
  #oracle_subnav .navmenu__dropdown-close {
    cursor: pointer;
  }

  #oracle_subnav .navmenu__dropdown-content a {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
  }

  #oracle_subnav .navmenu__dropdown-content li::before,
  #oracle_subnav .navmenu__dropdown-content a::before {
    content: none;
    display: none;
  }

  /* Page links and their rows stay transparent, including hover/focus states.
     Submenu controls retain their selection background. */
  #oracle_subnav .navmenu__dropdown-content a[href]:not([href=""]):not([href^="#"]),
  #oracle_subnav .navmenu__dropdown-content .navmenu__dropdown-content--item:has(> a[href]:not([href=""]):not([href^="#"])),
  #oracle_subnav .navmenu__dropdown-content li:has(> a[href]:not([href=""]):not([href^="#"])),
  #oracle_subnav .navmenu__dropdown-content--right .navmenu__dropdown-content--item:hover {
    background-color: transparent !important;
  }

  /* Match the CCC link hover treatment. */
  #oracle_subnav .navmenu__dropdown-content a[href]:hover {
    color: #f0cc71;
    text-decoration-line: underline;
    text-decoration-color: #f0cc71;
  }

  /* Size the icon itself; preserve the close control's clickable area. */
  #oracle_subnav .navmenu__dropdown-close svg {
    display: block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    flex-shrink: 0;
  }

  /* Vanilla briefly exposes an internal scrollbar while the dropdown opens.
     Hide the bar without disabling wheel, keyboard, or touch scrolling. */
  #oracle_subnav .navmenu__dropdown,
  #oracle_subnav .navmenu__dropdown * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #oracle_subnav .navmenu__dropdown::-webkit-scrollbar,
  #oracle_subnav .navmenu__dropdown *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

@media (max-width: 752px) {
  #oracle_subnav h5 {
    margin-top: 8px;
  }
}