/* Only active in the theme's desktop layout; mobile retains its full menu. */
#gh-navigation[data-menu-fit] .gh-navigation-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
#gh-navigation[data-menu-fit] .gh-navigation-menu {
  min-width: 0;
  /* Source reserves this space for its More button, which our menu removes.
     Let the grid's spare space provide separation without hiding labels early. */
  margin: 0;
}
#gh-navigation[data-menu-fit] .gh-navigation-menu > ul.nav {
  flex: 0 0 auto;
  width: max-content;
}
#gh-navigation[data-menu-fit] .gh-navigation-menu > ul.nav > li {
  flex-shrink: 0;
}

/* 1: Pictures, Videos, Recipes keep their existing icons. */
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  :is(.nav-pictures, .nav-videos, .nav-recipes) > a > .adaptive-nav-label {
  display: none;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  :is(.nav-pictures, .nav-videos, .nav-recipes) > a::before {
  margin-right: 0;
}
/* Tight internal spacing from the first reduction. Group edges follow the
   neighbouring labels: the right edge at stage 3, the left edge at stage 4. */
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  :is(.gh-navigation-inner, .gh-navigation-menu > ul.nav, .gh-navigation-actions, .gh-navigation-members) {
  column-gap: 8px;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-menu > ul.nav > li {
  margin-inline: 0;
  padding-inline: 0 !important;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"])
  .gh-navigation-menu > ul.nav > .nav-series-has_child {
  margin-right: 20px;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"])
  .gh-navigation-menu > ul.nav > .nav-pictures {
  margin-left: 20px;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-menu > ul.nav > li.menu-item-has-children {
  display: flex;
  align-items: center;
  gap: 4px;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-menu > ul.nav > li > i.fa-caret-down {
  margin-left: 0;
}
#gh-navigation:is([data-menu-fit="1"], [data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-actions > .gh-search {
  width: 40px;
  height: 40px;
  margin: 0;
}

/* 2: Member actions become labelled, keyboard-accessible icon links. */
#gh-navigation[data-menu-fit] .gh-navigation-members > a::before {
  display: none;
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 16px;
}
#gh-navigation[data-menu-fit] .gh-navigation-members > a[data-portal="signin"]::before {
  content: "\f2f6";
}
#gh-navigation[data-menu-fit] .gh-navigation-members > a[data-portal="signup"]::before {
  content: "\f234";
}
#gh-navigation:is([data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-members > a > .adaptive-nav-label {
  display: none;
}
#gh-navigation:is([data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-members > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
}
#gh-navigation:is([data-menu-fit="2"], [data-menu-fit="3"], [data-menu-fit="4"])
  .gh-navigation-members > a::before {
  display: inline-block;
}

/* 3: Series and Fedi become icon-only. 4: Contact becomes icon-only. */
#gh-navigation:is([data-menu-fit="3"], [data-menu-fit="4"])
  :is(.nav-series-has_child, .nav-fedi) > a > .adaptive-nav-label,
#gh-navigation[data-menu-fit="4"] .nav-contact-has_child > a > .adaptive-nav-label {
  display: none;
}
#gh-navigation:is([data-menu-fit="3"], [data-menu-fit="4"]) :is(.nav-series-has_child, .nav-fedi) > a::before,
#gh-navigation[data-menu-fit="4"] .nav-contact-has_child > a::before {
  margin-right: 0;
}

/* Allow keyboard users to open the existing submenus as well as pointer users. */
#gh-navigation li.menu-item-has-children:focus-within > .gh-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}