/* mobilenav.css — mobile bottom tab bar (app-like nav), replaces the burger
   menu on small screens. See docs/site-mobile-nav-plan.md.
   Isolated on purpose: this whole file + the .tabbar block in index.html
   can be removed to fully revert without touching anything else. */

.tabbar {
  display: none;
}

@media (max-width: 860px) {
  /* Burger menu is replaced by the tab bar on mobile */
  .nav__burger,
  .nav__mobile {
    display: none !important;
  }

  body {
    padding-bottom: 88px;
  }

  .tabbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 200;
    padding: 8px 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
  }
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  color: var(--text-subtle);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 14px;
  flex: 1;
}

.tabbar__item svg {
  width: 21px;
  height: 21px;
}

.tabbar__item.is-active {
  color: var(--accent);
}

.tabbar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: 0 10px 24px -4px rgba(26, 86, 219, .55);
  flex-shrink: 0;
}

.tabbar__cta svg {
  width: 24px;
  height: 24px;
}