/*
 * Shared site navigation. Include on EVERY page so the nav is identical
 * everywhere. Self-contained on purpose: it brings its own font, box model and
 * link reset, so it never depends on a page's base styles.
 *
 * Responsive: --nav-h drives the bar height; the media queries at the bottom
 * shrink it and the label text for tablet and phone widths. script.js sizes the
 * blue indicator to each cell, so it stays aligned at every breakpoint.
 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}

nav,
nav * {
  box-sizing: border-box;
}
nav {
  --nav-h: 100px;
  --nav-accent: #cb3ed4;
  width: 100%;
  height: var(--nav-h);
  position: fixed;
  bottom: 0;
  overflow: hidden;
 /* background-color: #0b0b0b;  */
  font-family: 'Open Sans', sans-serif;
  z-index: 10; /* keep the nav above the full-screen animation so hover works */
}
nav a {
  color: inherit;
  text-decoration: inherit;
}
nav ul {
  position: absolute;
  top: 0;
  left: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100vw;
  display: flex;
}
nav li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 2px;
  height: calc(var(--nav-h) - 2px);
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  color: #555;
  transition: background-color 0.5s 0.2s ease, color 0.3s ease;
  cursor: pointer;
  /* Sized for the Ethnocentric brand face (wide): smaller + tighter tracking
     than the old Open Sans so 5 labels + logo + settings fit the bar. */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
  transform: translateY(100%);
}
nav li.active {
  background-color: #151515;
  color: var(--nav-accent);
}
nav li.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--nav-accent);
}
/* Reveal the cells on load with a staggered pop. script.js sets --i to each
   cell's index; if it doesn't run, --i falls back to 1 and every cell still
   appears together. Works for any number of cells. */
nav li:not(.slide) {
  animation: pop 0.5s calc(0.15s * var(--i, 1)) 1 forwards;
}
nav li:hover {
  color: var(--nav-accent);
}
nav li:active {
  background-color: #222;
}

/* Logo + settings are fixed-width end cells (not equal-width like the text
   cells), so the nav matches the admin/auth bar: [logo] cells [settings]. */
nav li.nav-logo,
nav li.nav-settings {
  flex: 0 0 auto;
  padding: 0 18px;
}
nav li.nav-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
nav li.nav-logo img {
  height: 90%;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(30, 155, 255, 0.35));
}
nav li.nav-settings .nav-settings-btn {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  color: #8a8a97;
  cursor: pointer;
}
nav li.nav-settings .nav-settings-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
nav li.nav-settings:hover .nav-settings-btn {
  color: var(--nav-accent);
}
/* The blue indicator bar. script.js positions and sizes it to the hovered cell
   (reading its real offset/width), so it stays aligned for any number of cells,
   added or removed, without per-cell CSS. */
nav li.slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  margin-top: calc(var(--nav-h) - 2px);
  background-color: #1e9bff;
  z-index: -1;
  transition: left 0.3s ease, width 0.3s ease;
  transform: translateY(0);
}
@keyframes pop {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Tablet */
@media (max-width: 768px) {
  nav {
    --nav-h: 76px;
  }
  nav li {
    padding: 0 3px;
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  /* Trim the fixed end cells so the wide brand labels have room. */
  nav li.nav-logo,
  nav li.nav-settings {
    padding: 0 8px;
  }
  nav li.nav-settings .nav-settings-btn svg {
    width: 20px;
    height: 20px;
  }
}
/* Phone */
@media (max-width: 480px) {
  nav {
    --nav-h: 62px;
  }
  nav li {
    padding: 0 2px;
    font-size: 6.5px;
    letter-spacing: 0;
  }
  nav li.nav-logo,
  nav li.nav-settings {
    padding: 0 5px;
  }
  nav li.nav-settings .nav-settings-btn svg {
    width: 17px;
    height: 17px;
  }
}