/* ==========================================================================
   nav-polish.css — native-app navigation polish (frosted-glass bars + sliding pill)
   Ported from the sibling fightcardlive app. Everything is scoped under
   `body.nav-polish`, which is only present when $GLOBALS['navPolishKill'] is unset.
   Flip the kill flag in secrets_campsite.php to revert instantly (no redeploy).
   ========================================================================== */

/* Bar colours via CSS vars so dark mode / theming still wins.
   Defaults mirror the existing opaque bars (#FFF topbar, #f9f9f9 footer). */
body.nav-polish {
  --nav-top-bar: #ffffff;
  --nav-bottom-bar: #f9f9f9;
  --nav-pill-color: #0076ff; /* same blue as the Turbo progress bar */
}
body.theme-dark.nav-polish {
  --nav-top-bar: #1c1f24;
  --nav-bottom-bar: #1c1f24;
}

/* --- Frosted glass on the persistent bars -------------------------------- */
/* color-mix keeps >=0.82 alpha so the bar reads solid immediately; the blur is
   enhancement, not the whole effect. Browsers without color-mix/backdrop-filter
   fall back to the opaque rules in style.css. */
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  body.nav-polish #app-topbar,
  body.nav-polish #footer-bar {
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    transition: background-color 0.25s ease;
  }
  body.nav-polish #app-topbar {
    background-color: color-mix(in srgb, var(--nav-top-bar) 82%, transparent) !important;
  }
  body.nav-polish #footer-bar {
    background-color: color-mix(in srgb, var(--nav-bottom-bar) 82%, transparent) !important;
  }

  /* Anti-flash: during navigation make the bars ~opaque so content behind them
     doesn't flash through the blur, then fade back to glass once the page paints.
     `nav-loading` is added on tap and removed shortly after turbo:load (see scripts.js). */
  body.nav-polish.nav-loading #app-topbar {
    background-color: color-mix(in srgb, var(--nav-top-bar) 99%, transparent) !important;
  }
  body.nav-polish.nav-loading #footer-bar {
    background-color: color-mix(in srgb, var(--nav-bottom-bar) 99%, transparent) !important;
  }
}

/* --- Detached / floating bottom bar -------------------------------------- */
/* Lift the bar off the screen edges into a rounded, shadowed pill-bar.
   overflow:hidden clips the sliding pill to the rounded corners. */
body.nav-polish #footer-bar.footer-bar-1 {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  height: 62px !important;
  min-height: 62px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}
body.theme-dark.nav-polish #footer-bar.footer-bar-1 {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* --- User preference: fixed (attached) bottom bar ------------------------- */
/* Opt-out of the floating pill (profile setting "Fixed bottom menu bar"). Keeps
   the frosted-glass look but pins the bar flush to the bottom edge, full width,
   square corners, with a top shadow and safe-area padding for notch phones. */
body.nav-polish.nav-fixed #footer-bar.footer-bar-1 {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  height: calc(62px + env(safe-area-inset-bottom)) !important;
  min-height: calc(62px + env(safe-area-inset-bottom)) !important;
}
body.theme-dark.nav-polish.nav-fixed #footer-bar.footer-bar-1 {
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.45) !important;
}
/* Native-feel touch tweaks */
body.nav-polish #app-topbar,
body.nav-polish #footer-bar {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* --- Many-item bar: horizontal scroll + edge-fade indicator --------------- */
/* When there are too many tabs to fit, the bar scrolls sideways instead of
   cramming icons. Sticky gradient pseudo-elements at each edge fade the icons
   into the bar colour, clearly signalling that more icons are hidden off-screen. */
body.nav-polish.nav-scroll #footer-bar.footer-bar-1 {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.nav-polish.nav-scroll #footer-bar.footer-bar-1::-webkit-scrollbar { display: none; }
/* Don't let icons shrink — give them a fixed width so the bar overflows & scrolls */
body.nav-polish.nav-scroll #footer-bar.footer-bar-1 > a {
  flex: 0 0 auto !important;
  min-width: 76px;
}
/* Edge fades + chevron affordance (sticky so they stay pinned while the strip
   scrolls under them). Negative margins overlay the icons without consuming
   layout width. Each side is shown only when there is actually more content
   that way (body.can-scroll-left / .can-scroll-right, toggled in scripts.js),
   so the chevron is a truthful "scroll this way" signal. */
body.nav-polish.nav-scroll #footer-bar.footer-bar-1::before,
body.nav-polish.nav-scroll #footer-bar.footer-bar-1::after {
  content: "";
  position: sticky;
  flex: 0 0 auto;
  width: 40px;
  align-self: stretch;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--nav-pill-color);
  opacity: 0;
  transition: opacity .2s ease;
}
body.nav-polish.nav-scroll #footer-bar.footer-bar-1::before {
  left: 0;
  margin-right: -40px;
  justify-content: flex-start;
  padding-left: 5px;
  content: "\2039"; /* ‹ */
  background: linear-gradient(to right, var(--nav-bottom-bar) 60%, transparent);
}
body.nav-polish.nav-scroll #footer-bar.footer-bar-1::after {
  right: 0;
  margin-left: -40px;
  justify-content: flex-end;
  padding-right: 5px;
  content: "\203A"; /* › */
  background: linear-gradient(to left, var(--nav-bottom-bar) 60%, transparent);
}
body.nav-polish.can-scroll-left #footer-bar.footer-bar-1::before { opacity: 1; }
body.nav-polish.can-scroll-right #footer-bar.footer-bar-1::after { opacity: 1; }
/* Gentle pulse to draw the eye to the chevron */
@media (prefers-reduced-motion: no-preference) {
  body.nav-polish.can-scroll-right #footer-bar.footer-bar-1::after { animation: navChevronPulse 1.6s ease-in-out infinite; }
  body.nav-polish.can-scroll-left  #footer-bar.footer-bar-1::before { animation: navChevronPulse 1.6s ease-in-out infinite; }
}
@keyframes navChevronPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
/* The sliding pill is omitted on the scrollable bar (active item shown by colour) */
body.nav-polish.nav-scroll #footer-bar .nav-pill { display: none !important; }

/* --- Sliding active-tab pill --------------------------------------------- */
/* #footer-bar is already position:fixed in style.css, so it is a positioned
   parent for the absolutely-positioned pill. The pill sits behind the icons
   (z-index 0; icons/labels are z-index 2). */
body.nav-polish #footer-bar .nav-pill {
  position: absolute;
  top: 6px;
  left: 0;
  width: 0;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--nav-pill-color) 30%, transparent);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  will-change: transform, width;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
}
/* Fallback pill colour where color-mix is unsupported */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  body.nav-polish #footer-bar .nav-pill {
    background: rgba(0, 118, 255, 0.28);
  }
}

/* Respect reduced motion: fade the pill in/out, don't slide. */
@media (prefers-reduced-motion: reduce) {
  body.nav-polish #footer-bar .nav-pill {
    transition: opacity .2s ease;
  }
}