/* Site-owned navigation polish; injected after theme CSS, no template/JS edits.
 * Keep nav positioning, fixed-display variables and direction/title logic intact.
 */
#page-header #nav {
  box-sizing: border-box;
  padding: 0 24px !important;
}

#nav > #blog_name {
  min-width: 0;
  margin-right: 8px;
}

#nav > #blog_name > #site-name {
  display: block;
  width: fit-content;
  max-width: 100%;
  /* Let the theme neon and home-hover halo paint outside the link. */
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title used to be an inline glyph box, slightly above the nav centre. */
#nav #name-container {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1;
}

#nav #name-container:hover {
  transform: translate(-50%, -50%) scale(1.03) !important;
}

#nav #page-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  line-height: 1;
}

/* Compact hover visuals; keep link hit areas and navigation handlers intact.
 * Centre the actual glyph box, independent of inherited heading line-height. */
#nav > #blog_name > #site-name::before,
#nav #page-name::before {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  scale: 1 !important;
  height: 40px;
  padding: 0;
  line-height: 1;
  text-shadow: none;
}

#nav > #blog_name > #site-name::before {
  width: 100%;
  max-width: 100%;
  font-size: 18px;
}

#nav #page-name::before {
  width: 144px;
  max-width: 100%;
  font-size: 16px;
}

#nav > #blog_name > #site-name:focus-visible::before,
#nav #page-name:focus-visible::before {
  opacity: 1;
}

/* Do not position #menus: absolute centre menus/title use #nav as their anchor. */
#nav > #menus {
  flex: 0 0 auto;
}

#nav > #menus > #nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#nav #nav-right > #search-button,
#nav #nav-right > #toggle-menu {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0;
}

/* Only the anchor is flex; the theme still hides/shows the hamburger wrapper. */
#nav #nav-right > #search-button > a.search,
#nav #nav-right > #meihua-button,
#nav #nav-right > #nightmode-button,
#nav #nav-right > #toggle-menu > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  line-height: 1;
  background: transparent;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

#nav #nav-right a > svg {
  display: block;
  top: 0 !important;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Solid-enough fallback: background alpha, not whole-nav opacity. */
#page-header.nav-fixed #nav,
#page-header.nav-visible #nav,
#page-header.not-top-img #nav {
  --navigation-fg: #292c30;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(251, 250, 247, 0.96) !important;
  opacity: 1;
  border-bottom: 1px solid rgba(30, 34, 40, 0.08);
  box-shadow: 0 2px 12px rgba(30, 34, 40, 0.05);
}

[data-theme="dark"] #page-header.nav-fixed #nav,
[data-theme="dark"] #page-header.nav-visible #nav,
[data-theme="dark"] #page-header.not-top-img #nav {
  --navigation-fg: #eceef0;
  background: rgba(37, 39, 42, 0.96) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

#page-header.nav-fixed #nav #site-name,
#page-header.nav-visible #nav #site-name,
#page-header.not-top-img #nav #site-name,
#page-header.nav-fixed #nav .menus_items > .menus_item > a,
#page-header.nav-visible #nav .menus_items > .menus_item > a,
#page-header.not-top-img #nav .menus_items > .menus_item > a,
#page-header.nav-fixed #nav #page-name,
#page-header.nav-visible #nav #page-name,
#page-header.not-top-img #nav #page-name,
#page-header.nav-fixed #nav #nav-right a,
#page-header.nav-visible #nav #nav-right a,
#page-header.not-top-img #nav #nav-right a {
  color: var(--navigation-fg) !important;
  text-shadow: none;
}

/* Static CSS eligibility, not a GPU-performance detector; no new scroll listeners. */
@media screen and (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    #page-header.nav-fixed #nav,
    #page-header.nav-visible #nav,
    #page-header.not-top-img #nav {
      background: rgba(251, 250, 247, 0.92) !important;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    [data-theme="dark"] #page-header.nav-fixed #nav,
    [data-theme="dark"] #page-header.nav-visible #nav,
    [data-theme="dark"] #page-header.not-top-img #nav {
      background: rgba(37, 39, 42, 0.92) !important;
    }
  }
}

/* Hero only: the theme's existing scroll classes decide when the surface appears. */
#page-header.full_page:not(.nav-fixed):not(.nav-visible):not(.not-top-img) #nav {
  background: transparent !important;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#page-header #nav #nav-right a:hover,
#page-header #nav #nav-right a:focus-visible {
  color: var(--theme-color) !important;
  background: rgba(128, 128, 128, 0.1);
  box-shadow: inset 0 0 0 1px var(--theme-color);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  #page-header #nav #nav-right a:hover,
  #page-header #nav #nav-right a:focus-visible {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
  }
}

#page-header #nav .menus_items > .menus_item > a:hover,
#page-header #nav .menus_items > .menus_item > a:focus-visible {
  color: var(--theme-color) !important;
}

#page-header #nav a:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}

/* Hide the original label only while its compact replacement is visible. */
#page-header #nav > #blog_name > #site-name:hover,
#page-header #nav > #blog_name > #site-name:focus-visible,
#page-header #nav #page-name:hover,
#page-header #nav #page-name:focus-visible {
  color: transparent !important;
  text-shadow: none !important;
  animation: none !important;
}

@media screen and (max-width: 800px) {
  #page-header #nav {
    padding: 0 12px !important;
  }

  #nav > #menus > #nav-right {
    gap: 4px;
  }

  /* Match the theme JS's 800px collapse, not its older 768px title breakpoint. */
  #nav #name-container {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  #nav > #blog_name > #site-name {
    font-size: 20px;
  }
}

/* Fixed-nav display rules otherwise outrank the theme's reading-mode hide. */
body.read-mode #page-header > #nav {
  display: none !important;
}

/* At 320px the brand slot is only 100px: clipping is intentional here,
 * but a quiet label avoids turning its animated glow into a hard-edged block. */
@media screen and (max-width: 360px) {
  #nav > #blog_name > #site-name {
    overflow: hidden;
    animation: none !important;
    text-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav > #blog_name > #site-name,
  #nav > #blog_name > #site-name::before,
  #nav #page-name::before {
    animation: none !important;
    transition: none !important;
  }
  #nav #nav-right a,
  #nav #nav-right svg {
    transition: none !important;
    animation: none !important;
  }
}