/* mypapit.net — shared sticky top navigation.
   Created 2026-10-11 by Jebon.

   Two themes:
     .site-nav          light  — for mypapit.net profile pages, which define
                                 --line/--text/--accent/--accent-soft.
     .site-nav--dark    dark   — for /uitm-minecraft-skins/ (app palette:
                                 bg #090f23, gold #f2cc64, text #f6f7ff).

   Every var() has a hard fallback so this file works even on a page that does
   not define the custom properties. */

:root { --nav-h: 52px; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line, #ddd);
}

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 18px;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: var(--nav-h);
}

.site-nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text, #222);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}

.site-nav a:hover {
  background: var(--accent-soft, #eaf4fc);
  color: #124e7c;
}

.site-nav a[aria-current="page"] {
  background: var(--accent, #1b70b7);
  color: #fff;
}

/* ---------- dark theme: /uitm-minecraft-skins/ ---------- */

.site-nav--dark {
  background: rgba(9, 15, 35, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-nav--dark a { color: #f6f7ff; }

.site-nav--dark a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffe5a2;
}

.site-nav--dark a[aria-current="page"] {
  background: #f2cc64;
  color: #171308;
}

/* Keep the bar on ONE row on narrow screens: the app-header offset below is
   `calc(var(--nav-h) + 12px)`, which is only correct while the nav is one row. */
@media (max-width: 430px) {
  .site-nav ul { padding: 0 10px; gap: 2px; }
  .site-nav a { padding: 7px 8px; font-size: 0.88rem; }
}

/* The skin studio has its OWN sticky header (`header.site-header` in the built
   bundle, `position:sticky; top:12px; z-index:10`). Without this override the two
   sticky bars would occupy the same 12px band and overlap. Push the app header
   down by exactly the nav height. Selector is deliberately specific and scoped
   to the dark nav's sibling, so it cannot affect the mypapit.net pages (which
   have no #root at all) or any future page that uses the light nav. */
.site-nav--dark ~ #root header.site-header {
  top: calc(var(--nav-h) + 12px) !important;
}

/* sticky bar must not cover in-page anchor targets (#collection etc.) */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }