/* Bottom navigation styles - mobile-first */
#bottom-nav {
  z-index: 60;
  /* base navigation height variable (keeps spacer & nav in sync) */
  --bn-h: 56px;
}
.safe-bottom {
  /* ensure notches and safe-area spacing on modern phones */
  padding-bottom: env(safe-area-inset-bottom, 8px);
}


/* Navigation area height (touch target). Increase if icons/content overlap page bottom.) */
#bottom-nav ul {
  height: 56px; /* thinner bottom nav for less intrusion on content */
}

#bottom-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

#bottom-nav svg {
  display: block;
}

/* Larger screens hide the fixed bottom nav */
@media (min-width: 768px) {
  #bottom-nav { display: none; }
  #bottom-nav-spacer { display: none; }
}

/* Prevent bottom-nav from covering content on small screens */
@media (max-width: 767px) {
  main {
    /* Keep a small padding but rely on the explicit spacer to reserve nav space */
    padding-bottom: 1rem;
  }

  /* Also give a bit more breathing room to the last card if present */
  .card:last-child, .panel:last-child, .profile-card:last-child {
    margin-bottom: 3rem; /* 48px — comfortable breathing room */
  }

  /* Optional visual spacer for very long content */
  .page-bottom-spacer {
    height: calc(48px + env(safe-area-inset-bottom, 12px));
  }

  /* Dedicated spacer element placed after main when bottom nav is present.
     This ensures the flow of the page always leaves room for the fixed nav. */
  #bottom-nav-spacer {
    display: block;
    height: calc(var(--bn-h) + env(safe-area-inset-bottom, 12px) + 8px);
    width: 100%;
  }
}