/* ============================================================
   ATIC Website — floating pill navbar (yujung branch)

   The capsule nav, shared by every page. Loaded after styles.css
   so it overrides the flat fixed bar defined there.
   ============================================================ */
/* ── 2. Floating pill navbar ───────────────────────────────── */
.navbar {
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  padding: 18px 0;
  height: auto;
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  box-shadow:
    0 10px 30px rgba(70, 22, 107, 0.1),
    0 2px 6px rgba(70, 22, 107, 0.06);
  height: auto;
  gap: 20px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner {
    -webkit-backdrop-filter: blur(18px) saturate(165%);
    backdrop-filter: blur(18px) saturate(165%);
    background: rgba(255, 255, 255, 0.68);
  }
}

/* styles.css turns the full-width bar opaque on scroll, which puts a white
   band across the whole viewport behind the capsule. Only the capsule should
   be visible, so the bar stays transparent in both states and the scrolled
   treatment moves onto the capsule alone. */
.navbar.scrolled {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.navbar.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 14px 36px rgba(70, 22, 107, 0.14),
    0 2px 8px rgba(70, 22, 107, 0.08);
}

.nav-logo-img { height: 34px; width: auto; }

/* The CTA that lives inside the capsule, as in the reference */
.gh-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--ease);
}
.gh-nav-cta-label {
  display: inline;
  visibility: visible;
  opacity: 1;
  flex: 0 0 auto;
}
.gh-nav-cta:hover { background: #341153; color: #fff; transform: translateY(-1px); }
.gh-nav-cta svg { flex: 0 0 auto; }

/* Below the pill's breakpoint the hamburger menu carries the CTA, so the
   mobile sheet gets its own copy of it. */
.mobile-nav a.gh-nav-cta,
.mobile-nav a.gh-nav-cta:hover,
.mobile-nav a.gh-nav-cta:focus,
.mobile-nav a.gh-nav-cta:active {
  align-self: flex-start;
  margin-top: 8px;
  color: #fff;
}

@media (max-width: 1180px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 11px 7px; font-size: 0.8125rem; }
  .gh-nav-cta { padding: 11px 15px; font-size: 0.8125rem; }
}

@media (max-width: 900px) {
  /* Phone: a plain full-width bar, not a capsule. Height stays --nav-h so
     .mobile-nav, which is positioned at top: var(--nav-h), still sits flush
     under it. */
  .navbar {
    height: var(--nav-h);
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #eee;
  }
  .navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(70, 22, 107, 0.07);
  }
  .nav-inner,
  .navbar.scrolled .nav-inner {
    max-width: none;
    margin: 0;
    height: 100%;
    padding: 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-links + .gh-nav-cta { display: none; } /* the sheet carries it */

  /* .mobile-nav a sets display:block, which flattened the sheet's CTA —
     its label sat hard against the left edge of a full-width pill. */
  .mobile-nav a.gh-nav-cta {
    display: flex;
    justify-content: center;
    align-self: stretch;
    margin-top: 16px;
    padding: 14px 20px;
    border-bottom: 0;
    /* match the menu links above it; the capsule's 13px looked shrunken
       inside a full-width pill */
    font-size: 1rem;
    font-weight: 500;
  }
  /* the other sheet links carry no chevron */
  .mobile-nav .gh-nav-cta svg { display: none; }
}

/* Set by main.js for the first two frames only: the bar has a 0.3s
   transition, and without this a reload at a scrolled position animates the
   capsule from one state to the other in full view. */
.navbar.nav-boot,
.navbar.nav-boot .nav-inner {
  transition: none !important;
}