/* Home page: floating frosted-glass nav pill, with a collapsing menu on phones. */

.nav--glass {
  top: 16px;
  margin-inline: clamp(0.75rem, 3vw, 1.5rem);
  padding: 16px clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.nav__link {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.nav__link:hover { color: var(--text); }

/* Hamburger appears only once the inline links stop fitting */
.nav__toggle { display: none; }

@media (max-width: 720px) {
  .nav__toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
  }

  .nav--glass .nav__links {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: var(--r-sm);
    background: rgba(20, 19, 18, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .nav--glass .nav__links[hidden] { display: none; }
  .nav--glass .nav__link { padding: 12px; border-radius: 10px; }
  .nav--glass .nav__link:hover { background: rgba(255, 255, 255, 0.06); }
  .nav--glass .btn-pill { margin-block-start: 0.25rem; text-align: center; }
}