/*
 * Explorer One mobile sticky bottom navigation. Loaded only by header-explorer-one.php (the
 * Explorer One public pages). Self-contained: literal palette values (the .eo2 token scope does
 * not reach this body-level element). Shown only below 48rem; desktop and the shared Academy
 * footer are untouched. Compositor-friendly; no JS.
 */

/* Hidden by default (desktop and anything >= 48rem). */
.eo-mobilenav { display: none; }

/* Keep page content clear of the fixed bar on mobile, including the device safe area. */
@media (max-width: 47.99rem) {
  body.academy-explorer-one-page { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

  .eo-mobilenav {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: #08153a;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(8, 21, 58, 0.28);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .eo-mobilenav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); /* equal columns for 3 items (legal unpublished) or 4 */
    gap: 0.25rem;
    margin: 0; padding: 0;
    list-style: none;
  }
  .eo-mobilenav li { min-width: 0; }
  .eo-mobilenav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.4rem 0.25rem;
    border-radius: 14px;
    color: #c6d2f3;
    font: 600 0.75rem/1.2 "Google Sans Flex", "Segoe UI", system-ui, -apple-system, sans-serif;
    text-decoration: none;
    text-align: center;
    transition: color 170ms cubic-bezier(0.22, 1, 0.36, 1), background-color 170ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .eo-mobilenav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .eo-mobilenav__ico { width: 1.5rem; height: 1.5rem; flex: none; }

  .eo-mobilenav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .eo-mobilenav a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(145deg, #5e7cff, #0d44e8);
    box-shadow: 0 6px 16px rgba(13, 68, 232, 0.4);
  }
  .eo-mobilenav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .eo-mobilenav a:active { transform: scale(0.97); }

  @media (prefers-reduced-motion: reduce) {
    .eo-mobilenav a { transition: none; }
    .eo-mobilenav a:active { transform: none; }
  }
  @media (forced-colors: active) {
    .eo-mobilenav { border-top: 1px solid CanvasText; }
    .eo-mobilenav a[aria-current="page"] { outline: 2px solid Highlight; }
  }
}