/* Top navigation — themed to Senior.stuysu.org. Self-contained; only needs the
   Adobe Fonts kit (ivymode + Neue Haas Grotesk) loaded on the page. */

.jc-nav, .jc-nav * { box-sizing: border-box; }

.jc-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 252, 255, .88);;              /* translucent blush */
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid rgba(12, 43, 86, .16);    /* navy hairline */
  font-family: "neue-haas-grotesk-text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.jc-nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.jc-nav__brand {
  font-family: "ivymode", Georgia, "Times New Roman", serif;
  font-weight: 300; font-size: 1.15rem; letter-spacing: -.01em;
  color: #0c2b56; text-decoration: none; white-space: nowrap;
}
.jc-nav__brand:hover { color: #b23a55; }

.jc-nav__tabs { display: flex; align-items: center; gap: 6px; }

.jc-nav__tab {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #0c2b56; text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  transition: background .18s, color .18s;
}
.jc-nav__tab:hover { background: rgba(247, 178, 189, .22); color: #b23a55; }
.jc-nav__tab.is-active { background: #0c2b56; color: #f7b2bd; }   /* the site's navy→pink flip */
.jc-nav__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 43, 86, .30); }

@media (max-width: 520px) {
  .jc-nav__inner { padding: 12px 16px; gap: 10px; }
  .jc-nav__brand { font-size: 1rem; }
  .jc-nav__tab { padding: 7px 10px; letter-spacing: .08em; }
}