/* ==========================================================================
   TriKdanG — App Navigation (mobile tab bars)
   Two small, INDEPENDENT fixed rows of icon "tabs" shown only on narrow
   screens — a Top bar and a Bottom bar, each turned on separately from
   Appearance -> Customize -> "App Navigation — Top Bar" / "App
   Navigation — Bottom Bar". Either, both, or neither can be enabled at
   once. Their destinations are edited in trikdang_app_nav_items() in
   functions.php, not here.

   Both bars share this one stylesheet and the class ".site-app-nav",
   but every rule that needs to tell them apart (position, slide
   direction, hairline border side) targets the "--top"/"--bottom"
   modifier class on the <nav> element itself (site-app-nav--top /
   site-app-nav--bottom) rather than a body-level class — since both
   can be in the DOM at the same time, a body class alone can't say
   which specific <nav> a rule is about.

   Both bars get the SAME dynamic sticky behavior: pinned in place while
   near the top of the page, then slide fully out of view on scroll-down
   and slide back in on scroll-up (YouTube/app-style), each sliding off
   toward its own edge — top bar up, bottom bar down. That's
   .site-app-nav--hidden below, kept in sync per bar by
   assets/js/app-nav-sticky.js.

   Mirrors the header's own fixed/spacer/hide-on-scroll pattern (see
   .site-header in motif.css and assets/js/header-sticky.js), but under
   its own completely separate CSS variables and classes
   (--trikdang-app-nav-{position}-actual-height /
   .site-app-nav--hidden) — never reusing the header's own. Feeding a
   JS-measured height back into something that helps determine that
   same element's own size is a feedback loop (see the long comment at
   the top of header-sticky.js for the full story of why); keeping
   every one of these variables and classes entirely separate from the
   header's — and from each other, per bar — is what keeps that mistake
   from being possible here too, not just unlikely.

   Only enqueued at all once at least one bar is turned on (see
   trikdang_enqueue_app_nav_assets() in functions.php) — unlike the
   theme's other site-wide CSS, there's no reason to ship this to every
   visitor when both are off.
   ========================================================================== */

.site-app-nav {
  display: none; /* shown only below the mobile breakpoint, further down, per bar */
  position: fixed;
  left: 0;
  right: 0;
  z-index: 45; /* above regular content; the header's own overlay menu (when open) still wins */
  background: var(--wp--preset--color--night-flight, #0b0b0c);
  transition: transform 0.25s ease, top 0.2s ease;
}

.site-app-nav--hidden {
  /* Direction matches whichever edge this specific bar is pinned to —
     read straight off its own --top/--bottom modifier class, not a
     body-level class, so this is correct even with both bars enabled
     at once. */
  transform: translateY(100%);
}
.site-app-nav--top.site-app-nav--hidden {
  transform: translateY(-100%);
}

.site-app-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Clearance for the iOS home-indicator / gesture bar, only on whichever
   edge actually touches it. */
.site-app-nav--bottom .site-app-nav__list {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.site-app-nav--top .site-app-nav__list {
  padding-top: env(safe-area-inset-top, 0px);
}

.site-app-nav__item {
  flex: 1 1 0;
  min-width: 0;
}

.site-app-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.5rem 0.25rem;
  color: var(--wp--preset--color--paper, #F3EFE4);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: 0.7rem;
  line-height: 1.1;
}

.site-app-nav__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

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

/* Icon-only style: the label stays in the markup (screen readers still
   get it, and nothing needs to change if this is switched back later)
   but is visually hidden — the standard visually-hidden-but-accessible
   technique, not display:none. Scoped to the specific bar's own
   modifier class, so one bar can run icon-only while the other runs
   icon+label. */
.site-app-nav--icon-only .site-app-nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-app-nav__item.is-current .site-app-nav__link {
  color: var(--wp--preset--color--signature-red, #E4002B);
}

/* ---- Bottom bar ---- */
.site-app-nav--bottom {
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Top bar ---- */
/* Stacks directly below the existing fixed header rather than
   overlapping it — using the header's own already-synced actual-height
   variable (read only, never written here) so this still lines up
   correctly whatever height the header ends up rendering at.

   Once the header itself has scrolled out of view (.site-header--hidden,
   toggled by header-sticky.js), this bar docks up to the very top of
   the screen instead of leaving a blank gap where the header used to
   be — same idea as the sticky filter-chip row under a YouTube-style
   header. assets/js/app-nav-sticky.js toggles ".site-app-nav--docked"
   on this element to match the header's own current state every scroll
   frame. */
.site-app-nav--top {
  top: var(--trikdang-header-actual-height, var(--trikdang-header-height, 64px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-app-nav--top.site-app-nav--docked {
  top: 0;
}

/* Same hairline borders, re-tinted dark for light mode — a white
   hairline reads fine on the dark "night-flight" background but nearly
   disappears once that background flips to light cream. */
:root[data-theme='light'] .site-app-nav--bottom {
  border-top-color: rgba(20, 21, 26, 0.12);
}
:root[data-theme='light'] .site-app-nav--top {
  border-bottom-color: rgba(20, 21, 26, 0.12);
}

/* ---- Reserved spacing ---- */
/* Same idea as .site-header-spacer (see parts/header.html and the big
   comment on it in motif.css): a plain in-flow element sized to match
   each bar's real rendered height, so page content never sits
   underneath it. --trikdang-app-nav-top-actual-height /
   --trikdang-app-nav-bottom-actual-height are kept in sync with each
   bar's real height by app-nav-sticky.js, the same way header-sticky.js
   does for the header. Both spacers exist in the markup at all times
   (see parts/header.html and parts/footer.html) and are zero-height/
   hidden until that specific bar is actually enabled and the mobile
   breakpoint applies, so nothing about this affects a desktop visitor
   or the other bar. */
.site-app-nav-spacer {
  display: none;
}

/* ---- Bottom bar replaces the footer on mobile ---- */
/* This is what's actually meant to sit in the footer's place there, per
   the original design ask — the top bar doesn't overlap the footer at
   all, so it's left alone regardless of whether it's also enabled. */
body.tk-app-nav-bottom-enabled .site-footer {
  display: none;
}

@media (max-width: 781px) {
  body.tk-app-nav-top-enabled .site-app-nav--top {
    display: block;
  }
  body.tk-app-nav-bottom-enabled .site-app-nav--bottom {
    display: block;
  }
  body.tk-app-nav-top-enabled .site-app-nav-spacer--top {
    display: block;
    height: var(--trikdang-app-nav-top-actual-height, 56px);
  }
  body.tk-app-nav-bottom-enabled .site-app-nav-spacer--bottom {
    display: block;
    height: var(--trikdang-app-nav-bottom-actual-height, 56px);
  }
}