@import url("/orion-theme.css?v=20260919-theme1");

/* =========================================================
   Orion shared navigation
   Canonical two-row header
   ========================================================= */

.site-header,
.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

.site-header {
  background: var(--header-bg, #3f51b5);
  color: var(--header-text, #ffffff);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);

  /*
   * Establish Orion's own typography so applications
   * such as Material for MkDocs cannot resize the
   * global navigation.
   */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

.site-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: .45em 1.1em;

  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) 8em;
  column-gap: 1em;
  align-items: center;
}


/* ---------------------------------------------------------
   Orion brand
   --------------------------------------------------------- */

.site-brand {
  grid-column: 1;
  grid-row: 1;

  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  color: var(--header-text, #ffffff);
  text-decoration: none;

  line-height: 1;
  white-space: nowrap;
}

.site-brand .orion-brand-top,
.site-brand .orion-brand-bottom {
  display: block;
  font-size: 1.05em;
  font-weight: 700;
}

.site-brand .orion-brand-bottom {
  margin-top: .12em;
}


/* ---------------------------------------------------------
   Two-row navigation area
   --------------------------------------------------------- */

.site-menu-stack {
  grid-column: 2;
  min-width: 0;

  display: grid;
  grid-template-rows: auto auto;
  row-gap: .05em;

  /*
   * Center the navigation group as one unit,
   * while keeping both rows aligned internally.
   */
  justify-self: center;
  width: max-content;
  max-width: 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;

  gap: .1em;
}

.site-nav-primary,
.site-nav-secondary {
  justify-content: flex-start;
}


/* ---------------------------------------------------------
   Navigation links
   --------------------------------------------------------- */

.site-nav a {
  display: inline-flex;
  align-items: center;

  color: var(--header-text, #ffffff);
  text-decoration: none;
  white-space: nowrap;

  padding: .34em .48em;
  border-radius: .35em;

  font-size: .95em;
  line-height: 1.15;
}

.site-nav a:hover,
.site-nav a:focus {
  background: rgba(255,255,255,.15);
}


/* ---------------------------------------------------------
   Orion-wide search
   --------------------------------------------------------- */

.site-search {
  display: flex;
  align-items: center;

  flex: 0 1 10.5em;
  width: 10.5em;
  min-width: 8em;

  margin-left: .35em;
}

.site-search input {
  width: 100%;
  min-width: 0;
  height: 32px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: .35em;

  background: rgba(0,0,0,.14);
  color: var(--header-text, #ffffff);

  padding: .3em .6em;

  font: inherit;
  font-size: .88em;
}

.site-search input::placeholder {
  color: rgba(255,255,255,.78);
}

.site-search input:focus {
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 1px;
}


/* ---------------------------------------------------------
   Account and theme controls
   --------------------------------------------------------- */

.site-account-link {
  flex: 0 0 auto;
}

.site-theme-control {
  position: static;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 2.1em;

  width: 2.1em;
  height: 2.1em;

  margin: 0 0 0 .15em;
  padding: 0;

  border: 0;
  border-radius: .35em;

  background: transparent;
  color: var(--header-text, #ffffff);

  font: inherit;
  font-size: 1em;
  line-height: 1;

  cursor: pointer;
}

.site-theme-control:hover,
.site-theme-control:focus {
  background: rgba(255,255,255,.15);
}


/* ---------------------------------------------------------
   Future dropdown foundation

   Handbooks, Manuals, Account, etc. can later receive
   dropdown containers without changing header geometry.
   --------------------------------------------------------- */

.site-nav-item {
  position: relative;
}

.site-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;

  min-width: 14em;

  display: none;
}


/* ---------------------------------------------------------
   Smaller desktop / tablet
   --------------------------------------------------------- */

@media (max-width: 1050px) {

  .site-header-inner {
    grid-template-columns: 6.4em minmax(0, 1fr) 6.4em;
    column-gap: .55em;
    padding-left: .75em;
    padding-right: .75em;
  }

  .site-nav a {
    padding-left: .34em;
    padding-right: .34em;
    font-size: .88em;
  }

  .site-search {
    flex-basis: 8.5em;
    width: 8.5em;
    min-width: 7em;
  }
}


/* ---------------------------------------------------------
   Narrow layouts
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .site-header-inner {
    grid-template-columns: 1fr;
    row-gap: .35em;
  }

  .site-brand,
  .site-menu-stack {
    grid-column: 1;
  }

  .site-menu-stack {
    justify-self: stretch;
    width: 100%;
  }

  .site-nav {
    flex-wrap: wrap;
  }

  .site-nav-primary,
  .site-nav-secondary {
    justify-content: flex-start;
  }

  .site-search {
    margin-left: 0;
  }
}


@media (max-width: 520px) {

  .site-nav a {
    font-size: .82em;
    padding: .3em;
  }

  .site-brand .orion-brand-top,
  .site-brand .orion-brand-bottom {
    font-size: .88em;
  }
}


/* =========================================================
   Orion dropdown navigation
   ========================================================= */

.site-nav-dropdown-item {
  position: relative;

  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-nav-dropdown-item > .site-nav-main-link {
  padding-right: .15em;
}

.site-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.45em;
  height: 2em;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: .3em;

  background: transparent;
  color: var(--header-text, #ffffff);

  font: inherit;
  line-height: 1;

  cursor: pointer;
}

.site-dropdown-toggle:hover,
.site-dropdown-toggle:focus {
  background: rgba(255,255,255,.15);
}

.site-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;

  display: none;

  min-width: 15.5em;
  padding: .35em;

  border: 1px solid var(--card-border, #dfe2e8);
  border-radius: .5em;

  background: var(--card-bg, #ffffff);
  box-shadow: 0 .4em 1.2em rgba(0,0,0,.18);
}

.site-dropdown a {
  display: block;

  padding: .55em .7em;

  border-radius: .35em;

  color: var(--page-text, #202124);
  text-decoration: none;
  white-space: nowrap;

  font-size: .92em;
}

.site-dropdown a:hover,
.site-dropdown a:focus {
  background: var(--soft-bg, #eef1fb);
  color: var(--page-text, #202124);
}

.site-nav-dropdown-item.is-open > .site-dropdown {
  display: block;
}


/* Keep desktop hover active while moving from a menu item
   across the small visual gap into its dropdown. */
.site-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.25em;
  height: .25em;
}

/* Sticky shared header: keep the page as the only main scroll surface. */
html {
  scroll-padding-top: calc(var(--orion-header-height, 7rem) + 1rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header-inner {
  grid-template-columns: 8em minmax(0, 1fr);
  padding-block: .3em;
}

.site-nav { flex-wrap: wrap; }
.site-nav a { min-height: 36px; }
.site-dropdown-toggle { width: 36px; min-height: 36px; }
.site-search input { font-size: 16px; }
.site-nav a:focus-visible,
.site-dropdown-toggle:focus-visible,
.site-theme-control:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.site-dropdown {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - var(--orion-header-height, 7rem) - 1rem);
  max-height: calc(100dvh - var(--orion-header-height, 7rem) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-dropdown a { white-space: normal; }
.site-nav-secondary .site-dropdown { left: auto; right: 0; }

@media (pointer: coarse) {
  .site-nav a,
  .site-dropdown-toggle,
  .site-theme-control,
  .site-search input { min-height: 44px; }
  .site-dropdown-toggle,
  .site-theme-control { min-width: 44px; }
}

@media (max-width: 760px) {
  .site-header-inner {
    grid-template-columns: 1fr;
    row-gap: .1em;
    padding: .25em .5em;
  }
  .site-brand {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: .3em;
  }
  .site-brand .orion-brand-bottom { margin-top: 0; }
  .site-nav a { font-size: .88em; }
  .site-nav-dropdown-item { position: static; }
  .site-dropdown,
  .site-nav-secondary .site-dropdown {
    left: .5rem;
    right: .5rem;
    top: 100%;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .site-search { flex: 1 1 8em; }
}

@media print {
  .site-header { position: static; }
}

/* Preserve Material's drawer/overlay stacking and avoid an extra header row. */
.site-header.md-header { z-index: 3; }
.orion-shared-header-inner .site-menu-stack { grid-row: 1; }
.orion-shared-header-inner .orion-handbook-drawer-button {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin: 0;
}
.orion-shared-header-inner .site-brand { align-self: start; }
@media (max-width: 760px) {
  .orion-shared-header-inner .site-menu-stack { grid-row: 2; }
  .orion-shared-header-inner .orion-handbook-drawer-button {
    justify-self: end;
    align-self: center;
  }
  .orion-shared-header-inner .site-brand {
    min-height: 44px;
    justify-content: flex-start;
    align-items: center;
    padding-right: 44px;
  }
}

/* A consistent navy frame in both themes; the seal has no white backing. */
.site-header {
  background: var(--header-bg, #0c1b2e);
  border-bottom: 1px solid var(--orion-gold, #d7ac56);
}
.site-header .site-brand {
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  color: var(--header-text, #fff3d8);
}
.site-header .site-brand-seal {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  max-width: 40px;
  object-fit: contain;
}
.site-brand-name { display: block; }
.site-header .site-search input { border-color: #8a98aa; }
.site-header .site-search input::placeholder { color: #ded7c8; }
.site-nav a:hover,
.site-nav a:focus-visible { background: rgba(215,172,86,.16); }
.site-nav .site-dropdown a:hover,
.site-nav .site-dropdown a:focus-visible { background: var(--soft-bg); }
@media (max-width: 760px) {
  .site-brand-name { display: flex; gap: .3em; align-items: baseline; }
  .site-header .site-brand-seal { width: 28px; height: 28px; flex-basis: 28px; }
}