/* JAWNLogic shared navigation bar
   One stylesheet for every page that includes nav/navbar.php.
   Desktop: logo top-left, category bar, user-settings gear top-right.
   Mobile (<=768px): logo on top, gear top-right, hamburger in the logo's
   bottom-right gap; the menu drops down as a panel. */

:root {
  --jn-nav-bg: #0b0d10;
  --jn-nav-raised: #161a21;
  --jn-nav-text: #e5e7eb;
  --jn-nav-muted: #98a2b3;
  --jn-nav-accent: #38bdf8;
  --jn-nav-on-accent: #06131c;
  --jn-nav-border: #262d38;
  --jn-nav-height: 44px;
}

.jn-nav {
  position: relative;
  z-index: 50;
  background: var(--jn-nav-bg);
  color: var(--jn-nav-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.jn-nav a {
  color: inherit;
  text-decoration: none;
}

.jn-nav__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--jn-nav-height);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.jn-nav__brand {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
}

.jn-nav__logo {
  display: block;
  height: 68px;
  width: auto;
  padding-top: 6px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.7));
}

.jn-nav__toggle {
  display: none;
}

.jn-nav__menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.jn-nav__cats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jn-nav__cat {
  position: relative;
  display: flex;
  align-items: center;
}

.jn-nav__cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  color: var(--jn-nav-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.jn-nav__cat-btn:hover,
.jn-nav__cat-btn[aria-expanded="true"] {
  background: var(--jn-nav-raised);
  color: var(--jn-nav-accent);
}

/* Category + local link labels: the logo's blue gradient (J -> c), sampled
   from the JAWNLogic Apps logo. The navy end is dropped so it stays legible
   on the dark bar. */
.jn-nav__cat-btn > span,
.jn-nav__local a {
  background-image: linear-gradient(92deg, #00bffc 0%, #0078fc 45%, #00fbfd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jn-nav__chev {
  opacity: 0.7;
}

/* No gap between the button and the panel, and that is the fix for "the menu
   disappears as soon as I move the mouse down".
   The panel used to sit 0.25rem below the button so it cleared the bottom of the
   bar, but the <li> that owns the :hover is only as tall as the button. That 4px
   strip belonged to no box at all: moving the mouse down left the li, :hover
   ended, display flipped to none, and the menu was gone before the pointer got
   there. With margin 0 the panel starts exactly where the button ends, so the
   pointer is always over the button, the panel, or the li - never over a gap.
   An invisible strip inside the panel could not bridge the gap instead: the
   panel scrolls (overflow: auto), and a strip poking above it would be clipped
   and unhoverable. */
.jn-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--jn-nav-raised);
  border: 1px solid var(--jn-nav-border);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.jn-nav__cat:focus-within .jn-nav__dropdown,
.jn-nav__cat.is-open .jn-nav__dropdown {
  display: block;
}

/* Pointer hover opens a menu only where a pointer can hover. On touch screens
   :hover sticks after a tap, which fought the button's own toggle and made it
   look like the click did nothing. */
@media (hover: hover) {
  .jn-nav__cat:hover .jn-nav__dropdown {
    display: block;
  }
}

.jn-nav__dropdown li {
  margin: 0;
}

.jn-nav__app {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  font-size: 0.92rem;
}

.jn-nav__app:hover {
  background: var(--jn-nav-accent);
  color: var(--jn-nav-on-accent);
}

.jn-nav__app-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.jn-nav__local {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0 0 0 0.5rem;
  padding: 0 0 0 0.75rem;
  border-left: 1px solid var(--jn-nav-border);
}

.jn-nav__local a {
  color: var(--jn-nav-muted);
  font-size: 0.92rem;
  white-space: nowrap;
}

.jn-nav__local a:hover {
  color: var(--jn-nav-accent);
}

.jn-nav__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-left: 0.35rem;
  color: var(--jn-nav-muted);
}

.jn-nav__settings:hover {
  color: var(--jn-nav-text);
  background: var(--jn-nav-raised);
}

.jn-nav__settings svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .jn-nav__bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    height: auto;
    min-height: var(--jn-nav-height);
  }

  .jn-nav__brand {
    flex: 0 1 auto;
    align-self: flex-start;
    max-width: calc(100% - 48px);
  }

  .jn-nav__logo {
    height: 72px;
  }

  .jn-nav__toggle {
    position: absolute;
    /* Sits in the gap below the "g" descender, bottom-right of the logo. */
    right: 6px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: var(--jn-nav-accent);
    color: var(--jn-nav-on-accent);
    cursor: pointer;
  }

  .jn-nav__toggle svg {
    width: 18px;
    height: 18px;
  }

  .jn-nav__settings {
    align-self: flex-start;
    margin-left: 0;
  }

  .jn-nav__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--jn-nav-border);
  }

  .jn-nav__menu.is-open {
    display: flex;
  }

  .jn-nav__cats {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .jn-nav__cat-btn {
    width: 100%;
    justify-content: space-between;
  }

  .jn-nav__dropdown {
    position: static;
    width: 100%;
    max-height: none;
    margin: 0.25rem 0 0.35rem 0.5rem;
    border: 0;
    border-left: 2px solid var(--jn-nav-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .jn-nav__cat.is-open .jn-nav__dropdown {
    display: block;
  }

  .jn-nav__local {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--jn-nav-border);
  }
}