/* ============================================================
   PANDA-CLEAN  ·  Direction A  ·  MaliTrip
   ------------------------------------------------------------
   Mirrors the MaliBills polish layer: Apple-style pill buttons
   and a subtle blocky 8-bit shadow on the primary button, with
   the site's ORIGINAL fonts kept. Loaded AFTER style.css.
   ============================================================ */

/* ---- Apple-style pill buttons, kept warm ---- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-line {
  border-radius: 999px;
}

/* subtle 8-bit nod on the main action (uses the existing token) */
.btn-primary { box-shadow: var(--shadow-pixel); }

/* ============================================================
   UNIFIED NAV (shared style across Chamiz / MaliBills / MaliTrip)
   Minimalist panda on the left (-> Chamiz home), menu centered,
   language pill on the right. Desktop only; the mobile bottom-nav
   (<= 760px) is left untouched.
   ============================================================ */
.nav-home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-home:hover { opacity: 0.92; transform: translateY(-1px); }
.nav-home svg { width: 30px; height: 30px; }

/* Menu links stay grouped on the right, next to the language pill */
.dn-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Centered site title; positioned against the sticky .app-header */
.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-title span { color: var(--orange); }
/* The wordmark is always Latin brand text — keep it tightly tracked even in
   Thai mode (where `html[lang="th"] a` otherwise zeroes letter-spacing), so it
   matches MaliBills. */
html[lang="th"] a.nav-title { letter-spacing: -0.07em; }

/* On mobile MaliTrip uses its bottom-nav, so hide the top gnav there */
@media (max-width: 760px) {
  .desktop-nav .gnav { display: none; }
}