/* NexusDocs desktop header layout.
   On desktop (>= 76.25em viewport, when the sidebar, content, and TOC
   columns are all visible) the header mirrors the page grid:
     - logo + site title  -> centered over the sidebar (category) column
     - search bar         -> centered over the content column
     - language + theme   -> centered over the table-of-contents column
   Below that breakpoint the theme's default header is left untouched.

   NOTE: positions are hardcoded in px because this site sets
   html { font-size: 20px }, which rescales rem values away from the
   theme's grid math. The page grid is a fixed 1220px centered box:
   sidebar 242px / content 736px / TOC 242px. */

@media screen and (min-width: 76.25em) {
  .md-header__inner {
    position: relative;
    /* All in-flow children (theme/lang controls) are moved out of the
       flow below; without an explicit height the header would collapse. */
    height: 48px;
  }

  /* The current-page topic stays in flow (the theme swaps it in over
     "NexusDocs" on scroll) and is truncated by the title box above. */

  /* Logo + title: a single centered group over the sidebar column.
     Column center is 121px. The title box is fixed-width so the group
     stays centered; "NexusDocs" (~97px) fills it initially and the page
     topic truncates with an ellipsis when the theme swaps it in on
     scroll (topics are 270-350px wide, wider than the 242px column).
     pointer-events: none keeps the box from blocking the search bar. */
  .md-header__inner > .md-logo {
    position: absolute;
    top: 0;
    left: 47px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
  }
  .md-header__inner > .md-header__title {
    position: absolute;
    top: 0;
    left: 92px;
    width: 180px;
    overflow: hidden;
    pointer-events: none;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
  }

  /* Search: a bar centered over the content column (center 720px).
     The content column is 736px wide; splitting it into 4 even pieces
     (184px each), the bar is 2 pieces long = 368px. */
  .md-header__inner > .md-search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .md-header__inner > .md-search .md-search__button {
    width: 368px;
    height: 1.6rem;
  }

  /* Language + theme controls: a centered pair over the TOC column.
     TOC column center is 1209px. Theme button (~44px) + 8px gap +
     language button (~50px) = ~102px pair, so the pair starts at
     1209 - 51 = 1158px (relative to the grid's left edge). */
  .md-header__inner > .md-header__option[data-md-component="palette"] {
    position: absolute;
    top: 50%;
    left: 1048px;
    transform: translateY(-50%);
    z-index: 2;
  }
  .md-header__inner > .md-header__option:not([data-md-component="palette"]) {
    position: absolute;
    top: 50%;
    left: 1100px;
    transform: translateY(-50%);
    z-index: 2;
  }
}