/* ========================================
   Shared "mobile app" shell: the fixed bottom tab bar.
   Loaded by every page that includes templates/website/partials/app_tabbar.html
   (currently index.html and services.html). Page-specific content (the
   app-style home screen, the services/concerns cards, etc.) lives in that
   page's own stylesheet (mobile-home.css, mobile-services.css, ...).
   Visible only below 768px; on tablet/desktop the bar is hidden and the
   normal top navbar is used instead.
   ======================================== */

.app-tabbar {
  display: none;
}

@media (max-width: 767px) {
  .app-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    background: var(--color-white);
    border-top: 1px solid var(--color-neutral-100);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    /* Extra breathing room below the icon/label, on top of the safe-area
       inset for notched phones - without it the label sits right against
       the screen edge on ordinary phones (safe-area-inset-bottom is 0
       there). */
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    /* Forces its own GPU compositing layer - without this, iOS
       Safari/Chrome can let page content flash through underneath this
       bar for a frame while scrolling, since fixed-position elements
       aren't always composited separately by default on WebKit. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  /* Leave room for the fixed bottom tab bar (the including page adds this
     class to <body> via {% block body_class %}). Matches the bar's own
     height (roughly 53px) plus the extra padding-bottom above. */
  body.has-app-tabbar {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

.app-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1) var(--space-1);
  color: var(--color-neutral-500);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  /* Don't depend on base.css's sitewide `a { text-decoration: none }` reset
     being loaded - login.html/signup.html don't load it. */
}

.app-tabbar__item svg {
  width: 22px;
  height: 22px;
}

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