/* The site-wide header bar. See nav.js for how an app opts in.
 *
 * It always wears the retro house style (WORKSPACE.md), whatever theme the
 * app around it is in: it is the site's chrome, not the app's. Everything is
 * scoped under #wp-site-nav and every class starts wp-nav-, so it cannot
 * reach into an app's own styles, and the rules are specific enough that an
 * app's element selectors (`a`, `ul`, `summary`) don't reach into it either.
 *
 * The font is declared under its own family name and loaded from this
 * directory, so it works on gather.willperlak.com (which has no /fonts/) and
 * never collides with an app's own @font-face. It needs `font-src 'self'`;
 * without it the bar falls back to the next font in the stack. */
@font-face {
  font-family: "WP Nav Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "WP Nav Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

@keyframes wp-nav-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The bar's height when closed, for an app whose shell fills the viewport
   (`min-height: calc(100dvh - var(--wp-site-nav-h, 0px))`). Only defined
   when this file loads, so the fallback 0 is right exactly when the bar is
   absent, e.g. an app run locally. The phone menu grows the bar when opened;
   that is content pushing the page down, and nothing needs to subtract it. */
:root { --wp-site-nav-h: 44px; }

/* The bar takes the landing page's old marquee slot: black, a ridged purple
   rule above and below. Its height is reserved before the script fills it
   (the placeholder is empty until then), so the page does not jump. */
#wp-site-nav {
  display: block;
  position: relative;
  z-index: 900;
  box-sizing: border-box;
  min-height: var(--wp-site-nav-h);
  margin: 0;
  padding: 0;
  background: #000;
  border-top: 3px ridge #cc00ff;
  border-bottom: 3px ridge #cc00ff;
  color: #eaeaea;
  font-family: "Comic Sans MS", "WP Nav Comic Relief", "Comic Sans", sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#wp-site-nav *,
#wp-site-nav *::before,
#wp-site-nav *::after {
  box-sizing: border-box;
  border-radius: 0;
  font-family: inherit;
}

#wp-site-nav .wp-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 12px;
  min-height: 38px;
}

#wp-site-nav .wp-nav-brand {
  color: #ffee00;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
}
#wp-site-nav .wp-nav-brand:hover { text-decoration: underline; }
#wp-site-nav .wp-nav-star {
  display: inline-block;
  animation: wp-nav-twinkle 2.5s ease-in-out infinite;
}

#wp-site-nav .wp-nav-list,
#wp-site-nav .wp-nav-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}
#wp-site-nav .wp-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
#wp-site-nav .wp-nav-item {
  position: relative;
  margin: 0;
  padding: 0;
}
/* The "|" between items, as on the landing page's old link grid. */
#wp-site-nav .wp-nav-item + .wp-nav-item::before {
  content: "|";
  color: #00ffcc;
  font-weight: bold;
  padding: 0 4px;
}
#wp-site-nav .wp-nav-item { display: flex; align-items: center; }

#wp-site-nav .wp-nav-link {
  display: inline-block;
  padding: 4px 6px;
  margin: 0;
  color: #00ff00;
  background: none;
  border: 0;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
#wp-site-nav .wp-nav-link:hover { text-decoration: underline; }
#wp-site-nav .wp-nav-link:focus-visible,
#wp-site-nav .wp-nav-brand:focus-visible,
#wp-site-nav .wp-nav-burger:focus-visible {
  outline: 2px solid #ffee00;
  outline-offset: 1px;
}
#wp-site-nav .wp-nav-link[aria-current="page"],
#wp-site-nav .wp-nav-current {
  color: #ffee00;
  font-weight: bold;
}

/* Dropdown groups. <summary> loses its disclosure triangle for a ▾ that
   flips when open. */
#wp-site-nav summary.wp-nav-link { list-style: none; }
#wp-site-nav summary.wp-nav-link::-webkit-details-marker { display: none; }
#wp-site-nav summary.wp-nav-link::after {
  content: " \25BE";
  color: #cc00ff;
}
#wp-site-nav details[open] > summary.wp-nav-link::after { content: " \25B4"; }

#wp-site-nav .wp-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin-top: 6px;
  padding: 6px 0;
  background: #1a002a;
  border: 3px outset #cc00ff;
  outline: 4px double #00ccff;
  box-shadow: 4px 4px 0 #000;
}
#wp-site-nav .wp-nav-panel li { margin: 0; padding: 0; }
#wp-site-nav .wp-nav-panel .wp-nav-link {
  display: block;
  padding: 6px 14px;
}
#wp-site-nav .wp-nav-panel .wp-nav-link::before {
  content: "\2726";
  margin-right: 6px;
  color: #cc00ff;
}
#wp-site-nav .wp-nav-panel .wp-nav-link:hover {
  background: #000010;
}

/* The checkbox that drives the phone menu is visually hidden but stays
   focusable, so a keyboard can open the menu without the script. */
#wp-site-nav .wp-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
#wp-site-nav .wp-nav-burger { display: none; }

@media (max-width: 640px) {
  #wp-site-nav .wp-nav-inner {
    justify-content: space-between;
  }
  #wp-site-nav .wp-nav-burger {
    display: inline-block;
    padding: 1px 10px;
    line-height: 1.3;
    color: #000;
    background: #00ff00;
    border: 3px outset #00ff00;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
  }
  #wp-site-nav .wp-nav-toggle:focus-visible + .wp-nav-burger {
    outline: 2px solid #ffee00;
    outline-offset: 2px;
  }
  #wp-site-nav .wp-nav-toggle:checked + .wp-nav-burger {
    border-style: inset;
  }
  #wp-site-nav .wp-nav-list {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 8px;
    border-top: 1px dashed #cc00ff;
  }
  #wp-site-nav .wp-nav-toggle:checked ~ .wp-nav-list { display: flex; }
  #wp-site-nav .wp-nav-item { display: block; }
  #wp-site-nav .wp-nav-item + .wp-nav-item::before { content: none; }
  #wp-site-nav .wp-nav-link { display: block; padding: 8px 6px; }
  /* On a phone the groups open in place instead of floating. */
  #wp-site-nav .wp-nav-panel {
    position: static;
    margin: 0 0 4px 12px;
    outline: 0;
    box-shadow: none;
    border: 0;
    border-left: 3px ridge #cc00ff;
    background: transparent;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wp-site-nav .wp-nav-star { animation: none; }
}

@media print {
  #wp-site-nav { display: none; }
}