/* =====================================================
   bottom-nav.css
   PURPOSE: Styles for the bottom navigation bar ONLY.
   The bottom nav (navigation) contains:
     - Home button
     - Game Modes button
     - Study Scheduler button
     - Profile button
   (The "+" Add button used to live here too — it's now
   a floating button on the Home screen instead; see
   .home-fab in styles/home.css.)

   The nav bar is ALWAYS fixed to the bottom of the
   screen on every screen in the app, styled like an
   iOS tab bar: translucent blurred background, gray
   inactive icons, accent-colored active icon.
   ===================================================== */

/* --- Bottom Nav Container --- */
#bottom-nav {
  position:         fixed;  /* Always at the bottom */
  bottom:           0;
  left:             0;
  width:            100%;
  height:           calc(var(--bottom-nav-height) + var(--safe-area-bottom));
  padding-bottom:   var(--safe-area-bottom);
  /* clears the home-indicator area on notched devices */
  background-color: color-mix(in srgb, var(--color-nav-bg) 82%, transparent);
  backdrop-filter:      blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:       var(--border-width) solid var(--color-border);
  /* --border-width = 1px hairline, --color-border = iOS
     separator color — replaces the old 2px colored border */
  display:          flex;
  align-items:      center;
  justify-content:  space-around;
  /* z-index of 200 keeps nav above all screen content */
  z-index:          200;
  padding-left:     8px;
  padding-right:    8px;
}

/* --- Individual Nav Button --- */
.nav-btn {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              2px;
  flex:             1;
  height:           100%;
  background-color: transparent;
  border:           none;
  color:            var(--ios-systemGray);
  /* inactive tab color — iOS uses neutral gray, not the
     secondary text color, for unselected tab icons */
  font-size:        11px;
  font-family:      var(--font-primary);
  cursor:           pointer;
  transition:       color 0.15s ease;
  border-radius:    var(--border-radius);
  padding:          4px 4px;
}

.nav-btn .icon {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-btn:hover {
  color: var(--color-nav-active);
}

/* Active/current screen nav button highlight */
.nav-btn--active {
  color: var(--color-nav-active);
}

.nav-btn:active .icon {
  transform: scale(0.9);
}