/* ==========================================================================
   app-shell.css — Phase 3 of docs/RESPONSIVE_APP_UI_PLAN.md

   One piece of markup (template-parts/app-shell.php) presented two ways:

     < 768px   bottom tab bar   (phone)
     768-1199  left icon rail   (tablet - a bottom bar reads wrong here)
     >= 1200   hidden           (desktop keeps the existing pill header)

   Loaded after responsive-base.css. Uses the tokens from _tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared base
   -------------------------------------------------------------------------- */
.em-shell-nav {
  position: fixed;
  z-index: var(--z-tabbar);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.em-shell-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.em-shell-nav__item {
  display: flex;
}

.em-shell-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #6b7280;
  font-family: var(--font-base);
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.em-shell-nav__link:hover,
.em-shell-nav__link:focus {
  color: var(--accent, #388E3C);
  text-decoration: none;
}

.em-shell-nav__link.is-active {
  color: var(--accent, #388E3C);
}

.em-shell-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.em-shell-nav__icon i {
  display: block;
}

/* The active item reads as filled rather than only tinted - the cue native
   tab bars use, and it survives being viewed without colour. */
.em-shell-nav__link.is-active .em-shell-nav__icon {
  transform: translateY(-1px);
}

/* The brand mark and the extra destinations belong to the tablet sidebar,
   which app-mode.css builds. Hidden here so screens without app mode (the
   lesson player) keep the plain five-tab bar. */
.em-shell-nav__brand,
.em-shell-nav__item--extra {
  display: none;
}

/* --------------------------------------------------------------------------
   Phone: bottom tab bar (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .em-shell-nav {
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    box-shadow: var(--sh-up);
    /* The inset keeps the row clear of the iOS home indicator while the bar's
       background still bleeds to the physical bottom edge. */
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  .em-shell-nav__list {
    height: var(--tabbar-h);
  }

  .em-shell-nav__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .em-shell-nav__link {
    flex-direction: column;
    width: 100%;
    /* Fills the bar height, so the whole cell is tappable rather than just
       the icon - comfortably past the 44px minimum. */
    min-height: var(--tabbar-h);
    padding: 6px 2px;
    font-size: 10.5px;
    font-weight: var(--fw-medium);
  }

  .em-shell-nav__icon i {
    font-size: 20px;
  }

  .em-shell-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .1px;
  }

  /* Content must clear the bar. Applied to .site rather than body so the
     fixed bar itself is unaffected. */
  .site {
    padding-bottom: var(--tabbar-total);
  }

  /* The footer is long and the tab bar already covers navigation, so the
     footer's own padding does not need to double up. */
  .site-footer {
    padding-bottom: calc(18px + var(--safe-bottom));
  }
}

/* Very small phones: five labels at 360px are tight, so shrink type rather
   than truncate it. */
@media (max-width: 380px) {
  .em-shell-nav__link {
    font-size: 9.5px;
  }

  .em-shell-nav__icon i {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   Tablet: left icon rail (768px - 1199px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .em-shell-nav {
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--rail-w) + var(--safe-left));
    border-right: 1px solid rgba(0, 0, 0, .07);
    box-shadow: var(--sh-sm);
    padding-top: calc(var(--safe-top) + var(--sp-4));
    padding-bottom: calc(var(--safe-bottom) + var(--sp-4));
    padding-left: var(--safe-left);
    /* The rail sits below the floating header rather than over it, so the
       header's own mobile toggle and cart stay reachable. */
    z-index: var(--z-rail);
  }

  .em-shell-nav__list {
    flex-direction: column;
    gap: var(--sp-1);
    height: auto;
    /* Pushes the rail's items clear of the floating pill header. */
    padding-top: 84px;
  }

  .em-shell-nav__item {
    width: 100%;
  }

  .em-shell-nav__link {
    flex-direction: column;
    width: 100%;
    min-height: 60px;
    padding: var(--sp-2) var(--sp-1);
    font-size: 10px;
    font-weight: var(--fw-medium);
    border-radius: var(--r-md);
    margin: 0 var(--sp-2);
    width: calc(100% - var(--sp-4));
  }

  .em-shell-nav__link.is-active {
    background: rgba(56, 142, 60, .10);
  }

  .em-shell-nav__icon i {
    font-size: 21px;
  }

  .em-shell-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Give the page back the width the rail occupies. Margin rather than
     padding so existing full-bleed sections still bleed to the new edge. */
  .site,
  .header-float-wrap {
    margin-left: calc(var(--rail-w) + var(--safe-left));
  }

  .header-float-wrap {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Floating widgets must clear the shell
   The helper-bot launcher is fixed at bottom:14px, which puts it on top of the
   tab bar - it covered the last tab entirely. Corrected here rather than in
   the plugin so the offset lives with the thing that caused it, and so the
   plugin keeps working unchanged if the shell is ever removed.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .emhb-root {
    bottom: calc(14px + var(--tabbar-total));
  }

  /* Other floating affordances that pin to the bottom-right. */
  .em-fab,
  .back-to-top,
  #back-to-top {
    bottom: calc(16px + var(--tabbar-total));
  }
}

/* On tablets the rail occupies the left edge, so a bottom-right widget is
   already clear - it only needs to not sit under the rail if it moves left. */
@media (min-width: 768px) and (max-width: 1199px) {
  .emhb-root {
    left: auto;
  }
}

/* --------------------------------------------------------------------------
   Desktop: the existing pill header is the navigation
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .em-shell-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .em-shell-nav {
    display: none;
  }
}