/* NexusDocs sidebar bottom cluster.
   On viewports narrower than the Material tablet breakpoint (60em / 960px),
   the language switcher + dark/light theme toggle are moved from the page
   header into a cluster pinned to the bottom of the primary sidebar.
   JS in /javascripts/sidebar-bottom.js performs the DOM move; this file
   holds the layout, sticky positioning, and visual styling. */

@media (max-width: 60em) {
  /* Hide the original header buttons on mobile — they were just moved into
     the sidebar bottom cluster by JS. The header still keeps the search
     bar, hamburger toggle, and site title. The selector is scoped to
     .md-header__inner so the buttons are only hidden while they live
     inside the header (not after JS moves them to the cluster). */
  .md-header__inner > form.md-header__option[data-md-component="palette"],
  .md-header__inner > .md-header__option > .md-select.md-header__lang {
    display: none !important;
  }

  /* Make the sidebar a flex column so the cluster can stick to the bottom
     of the drawer, below the scrolling nav list. */
  .md-sidebar--primary {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .md-sidebar__scrollwrap {
    flex: 1 1 auto;
    min-height: 0;
    /* Leave space at the bottom for the cluster so the last nav items
       are not hidden behind it when scrolled. */
    padding-bottom: 3.6rem;
  }

  /* The cluster is appended by JS as a direct child of .md-sidebar--primary
     (sibling of .md-sidebar__scrollwrap). Pin it to the bottom of the
     drawer viewport with a subtle top border. The sidebar is
     position: fixed by the theme (so the drawer can slide in), so the
     cluster's position: absolute will anchor to the sidebar's box. */
  .md-sidebar-bottom-cluster {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    background: var(--md-default-bg-color);
  }

  /* Visual order: lang switcher, then theme toggle. JS appends them in
     this order so DOM order matches visual order. The pair is centered
     within the cluster. */
  .md-sidebar-bottom-cluster > .md-header__option {
    flex: 0 0 auto;
  }

  /* Compact the buttons to fit the narrow sidebar (~250px). */
  .md-sidebar-bottom-cluster .md-header__button {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.4rem;
  }
  .md-sidebar-bottom-cluster .md-header__lang-icon {
    font-size: 1.15rem;
    line-height: 1;
  }

  .md-sidebar-bottom-cluster .md-header__lang-btn {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    justify-content: center;
  }

  /* The language dropdown menu — anchor it above the button so it does not
     get clipped by the sidebar bottom. The theme positions the menu
     with transform: translateX(-100%) inside a mobile @media query;
     we override the transform completely via attribute selector (high
     specificity) so the menu lines up with the lang wrapper's left edge. */
  .md-sidebar-bottom-cluster .md-select__inner[id="nexus-language-menu"] {
    bottom: calc(100% + 0.4rem) !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 8rem !important;
    max-width: calc(100vw - 2rem) !important;
    transform: none !important;
    margin-top: 0 !important;
    transition: opacity .15s ease, max-height .2s ease, visibility 0s;
    z-index: 10;
  }

  .md-sidebar-bottom-cluster .md-select:focus-within .md-select__inner[id="nexus-language-menu"],
  .md-sidebar-bottom-cluster .md-select:hover .md-select__inner[id="nexus-language-menu"] {
    transform: none !important;
  }

  /* The theme palette is a <form> with <input type="radio"> + <label>
     pairs. On mobile, the form is inline-flex so the visible label (the
     current scheme's icon) sits at the right of the cluster. */
  .md-sidebar-bottom-cluster form[data-md-component="palette"] {
    display: inline-flex;
    align-items: center;
  }

  .md-sidebar-bottom-cluster form[data-md-component="palette"] .md-header__button {
    margin: 0;
  }
}

/* On wider viewports, hide the cluster entirely (it is only used on mobile). */
@media (min-width: 60.001em) {
  .md-sidebar-bottom-cluster {
    display: none !important;
  }
}
/* When the cluster is in the open state (lang button clicked or focused),
   reposition the menu to anchor above the button and align with the
   button's left edge. The theme's mobile @media rule applies
   translateX(-100%) which pushes the menu off-screen when the button's
   text is short (e.g. "English"). Use !important to override the
   theme's transition transform. */
.md-sidebar-bottom-cluster .md-select:focus-within > .md-select__inner,
.md-sidebar-bottom-cluster .md-select:hover > .md-select__inner {
  bottom: calc(100% + 0.4rem) !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  width: max-content !important;
  min-width: 8rem !important;
  max-width: calc(100vw - 2rem) !important;
  z-index: 10 !important;
}

/* Open-state menu positioning.
   The theme's mobile @media rule applies translateX(-100%) which
   pushes the lang menu off-screen when the button text is short.
   Use the focused/open state of the .md-select to override. */
.md-sidebar-bottom-cluster .md-select:focus-within > .md-select__inner,
.md-sidebar-bottom-cluster .md-select:hover > .md-select__inner {
  bottom: calc(100% + 0.4rem) !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  width: max-content !important;
  min-width: 8rem !important;
  max-width: calc(100vw - 2rem) !important;
  z-index: 10 !important;
}