@media (max-width: 900px) {
  :root {
    --site-header-height: 80px;
  }
}
@media (min-width: 900px) {
  :root {
    --site-header-height: 90px;
  }
}

/* Site header */
.site-header {
  position: sticky;
  z-index: 10;
  top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
  background-color: var(--color-site-background);
}
@media (max-width: 781px) {
  .site-header {
    top: 0; /* The admin bar is not sticky on mobile, so there is no need to account for its height */
  }
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-height);
  color: #ccc;
}



/* Logo and announcement */
.site-branding {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-logo-link,
.header-logo {
  display: block;
}
@media (max-width: 900px) {
  .header-logo {
    width: 90px;
  }
}
.header-info {
  font-family: "Fragment Mono", monospace;
}
.header-info-1 {
  color: var(--color-primary);
}
@media (max-width: 1099px) {
  .header-info {
    display: none;
  }
}



/* Main navigation */
.main-navigation {
  display: flex;
  gap: 32px;
  font-family: "Fragment Mono", monospace;
  font-size: 1.125rem;
  letter-spacing: .6px;
}
@media (max-width: 899px) {
  .main-navigation {
    display: none;
  }
}
.main-navigation a {
  transition: color .2s;
}
.main-navigation a:hover {
  color: var(--color-primary);
}
.menu {
  display: flex;
  gap: 36px;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
.menu-item {
  text-transform: uppercase;
}
.menu-item a {
  text-decoration: none;
}
.menu > .menu-item:before,
.menu > .menu-item:after {
  opacity: 0;
}
.menu [class*="current"] > a {
  color: var(--color-primary);
}

.menu > [class*="current"] > a{
  padding-inline: 2ch;
}
.menu > [class*="current"]:before,
.menu > [class*="current"]:after {
  position: absolute;
  top: 0;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.menu > [class*="current"]:before {
  content: '[ ';
  left: 1ch;
  color: var(--color-primary);
  animation: fadeIn .3s ease-in forwards, slideLeft .3s ease-out forwards;
}
@keyframes slideLeft {
  from { left: 1ch }
  to   { left: 0ch }
}
.menu > [class*="current"]:after {
  content: ' ]';
  right: 1ch;
  color: var(--color-primary);
  animation: fadeIn .3s ease-in forwards, slideRight .3s ease-out forwards;
}
@keyframes slideRight {
  from { right: 1ch }
  to   { right: 0ch }
}
.menu > [class*="current"] > .sub-menu {
  left: 0ch;
}

.menu .sub-menu {
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  position: absolute;
  left: -2ch;
  width: max-content;
  padding-bottom: 1ch;
  padding-right: 2ch;
  padding-top: 1em;
  padding-left: 5ch;
  background-color: var(--color-site-background);
  list-style: none;
}
.menu .sub-menu > .menu-item {
  position: relative;
  margin-top: 1em;
}
.menu .sub-menu > .menu-item:before {
  white-space: pre;
  position: absolute;
  left: -3ch;
  bottom: 0;
  color: #ccc;
  letter-spacing: 0;
}
.menu .sub-menu > .menu-item:first-child:before {
  content: "┬\A│\A├─ ";
}
.menu .sub-menu > .menu-item:not(:last-child):not(:first-child):before {
  content: "│\A├─ ";
}
.menu .sub-menu > .menu-item:last-child:before {
  content: "│\A└─ ";
}
.menu > .menu-item {
  position: relative;
}
.menu-item:hover > .sub-menu {
  opacity: 1;
  pointer-events: initial;
}



/* Language switcher */
.language-switcher a {
  display: flex;
  gap: 6px;
  padding-left: 12px;
  text-transform: uppercase;
  text-decoration: none;
}
.language-switcher svg {
  position: relative;
  bottom: 1px;
}



/* Mobile menu */
.mobile-navigation {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -1;
  left: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--site-header-height) + var(--wp-admin--admin-bar--height) + (100lvh - 100svh));
  padding-bottom: 32px;
  padding-inline: 16px;
  background-color: var(--color-site-background);
}
.mobile-navigation > * {
  margin-top: auto;
}
@media (min-width: 900px) {
  .mobile-navigation {
    display: none;
  }
}

.menu-mobile-open {
  overflow: hidden;
}
.menu-mobile-open .mobile-navigation {
  display: flex;
}

.mobile-controls {
  display: flex;
  gap: 16px;
}
@media (min-width: 900px) {
  .mobile-controls {
    display: none;
  }
}
.mobile-menu {
  width: 100%;
  max-width: 450px;
  margin-inline: auto;
  font-family: "Fragment Mono", monospace;
}
.mobile-menu,
.mobile-menu .sub-menu {
  list-style: none;
  padding-left: 0;
  font-size: 26px;
  color: #eee;
}
.mobile-menu .menu-item {
  border-top: 1px solid #666;
}
.mobile-menu .menu-item:last-child {
  border-bottom: 1px solid #666;
}
.mobile-menu [class*="current"],
.mobile-menu [class*="current"]:last-child {
  border: none;
}
.mobile-menu [class*="current"] + .menu-item {
  border-top: none;
}
.mobile-menu a {
  display: block;
  padding-block: 12px;
}
.mobile-menu > .menu-item-has-children > a {
  display: none;
}
.mobile-menu .current-menu-item,
.mobile-menu .current_page_parent:not(:has(.sub-menu)) {
  padding-left: 16px;
  color: #fff;
  background-color: var(--color-primary);
}
.mobile-menu .current-menu-item a:before,
.mobile-menu .current_page_parent:not(:has(.sub-menu)) a:before {
  content: ">";
}

.text-monospace {
  font-family: "Fragment Mono", monospace;
  color: #ccc;
  font-size: 18px;
}
.language-switcher-mobile a {
  display: block;
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s;
}
.menu-mobile-open .language-switcher-mobile a {
  opacity: 1;
}
.button-menu {
  appearance: none;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-transform: lowercase;
}
.language-switcher-mobile a,
.button-menu {
  padding-block: .5em;
}