/* ==========================================================
   Bottom Navigation — mobile/installed-app pattern
   Self-contained on purpose: doesn't depend on style.css,
   so it's safe to add without touching your existing styles.
   ========================================================== */

.bottom-nav {
  display: none; /* desktop: hidden, header nav handles navigation */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #0A1F3D;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone home-bar clearance */
}

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  max-width: 100%;
  height: 60px;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.bottom-nav-item i {
  font-size: 18px;
  line-height: 1;
}

.bottom-nav-item.active {
  color: #ffffff;
}

.bottom-nav-item.active::before {
  content: "";
  position: absolute;
  transform: translateY(-28px);
  width: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #3B82F6; /* blue accent — Digital Utilities division tone */
}

/* WhatsApp item gets its own accent — it's the primary conversion action,
   worth visually separating from the rest even when not the active page. */
.bottom-nav-item.whatsapp {
  color: #25D366;
}
.bottom-nav-item.whatsapp.active {
  color: #ffffff;
}
.bottom-nav-item.whatsapp.active::before {
  background: #25D366;
}

/* Only show on small/mobile screens — header nav remains the desktop pattern */
@media (max-width: 860px) {
  .bottom-nav { display: block; }

  /* Stop the bar covering the last bit of page content (footer CTA, etc.) */
  body { padding-bottom: 60px; }
}