/**
 * App tab bar (phones only): bottom navigation from the "Mobile tabs" menu.
 * Markup: templates/navigation/menu--mobile-tabs.html.twig.
 *
 * Colours: inactive tabs heritage indigo on light (15.1:1), the active tab
 * brand red (5.5:1). Both pass WCAG AA for normal text.
 */

:root {
  --app-tabbar-h: 64px;
}

.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Same layer as the fixed header (site-header.css), under offcanvas panels. */
  z-index: 500;
  background: var(--bs-light, #f8f9fa);
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  /* Clears the iPhone home indicator when the app runs full-screen. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-tabbar__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: var(--app-tabbar-h);
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.app-tabbar__item {
  display: flex;
}

.app-tabbar__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heritage-indigo, #191957);
  text-decoration: none;
}

.app-tabbar__link .tc-icon {
  flex-shrink: 0;
}

.app-tabbar__link:hover {
  color: var(--bs-heritage-indigo, #191957);
  text-decoration: none;
}

.app-tabbar__link.is-active,
.app-tabbar__link.is-active:hover {
  color: var(--bs-primary, #c71c1c);
}

.app-tabbar__link:focus-visible {
  outline: 3px solid var(--bs-primary, #c71c1c);
  outline-offset: -3px;
  border-radius: 6px;
}

/* Keep the page's last content and footer clear of the fixed bar. */
@media (max-width: 767.98px) {
  body:has(.app-tabbar) {
    padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
}