/* nav.css — Shared /p navbar + dropdown menu. One navbar for every /p page.
   Design source: Figma 158:3 (guest) / 158:5 (member + dropdown). Uses tokens.css. */

.ppw-nav {
  position: sticky;
  top: 0;
  z-index: 1000;   /* outrank any in-page z-index (e.g. expanded ticket cards) */
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* Glass elevation (2026-07-10) — translucent + blurred instead of a flat
     fill, so page content shows through faintly as it scrolls underneath
     (position:sticky already gives this the right stacking context). Alpha
     approximates --navbar-bg (#080818); CSS custom properties can't carry
     their own alpha without color-mix(), so this is hardcoded to match. */
  background: rgba(8, 8, 24, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  font-family: var(--font-thai);
  /* 2026-07-27 — same iOS backdrop-filter compositing fix as .emoji-icon
     (see p/tokens.css). Only .emoji-icon content (the CARDS dropdown) was
     protected by that rule; the raw inline-SVG icons this navbar also
     carries directly (.ppw-nav__lang-icon, .ppw-nav__login-icon) sit
     unprotected inside this same blurred stacking context, so the
     container itself is promoted too. Safe on a `position: sticky` element
     — this only breaks sticky when applied to an ANCESTOR of the sticky
     element, not the sticky element itself. */
  transform: translateZ(0);
}
/* Gradient hairline replacing the old flat border-bottom — thin gold→teal
   glow instead of plain gray, echoed on the two dropdowns below for
   continuity. */
.ppw-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 161, 64, 0.55), rgba(19, 205, 203, 0.55), rgba(244, 161, 64, 0.55));
  opacity: 0.7;
  pointer-events: none;
}

/* Brand */
.ppw-nav__brand { display: flex; flex-direction: column; gap: 2px; }
.ppw-nav__brand-title { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1; text-decoration: none; transition: text-shadow 0.2s ease; }
/* White glow instead of a color swap (2026-07-10 fix) — gold matched the
   "#PondPhuwinConcert" tag directly beneath it, reading as a clash rather
   than a hover state. Staying on --text-primary keeps it a neutral, always-
   legible affordance instead of competing with the tag's own accent color. */
a.ppw-nav__brand-title:hover { text-shadow: 0 0 12px rgba(255, 255, 255, 0.55); }
.ppw-nav__brand-tag   { font-size: 10px; color: var(--accent-gold); line-height: 1; }

/* Right cluster */
.ppw-nav__right { display: flex; align-items: center; gap: 8px; }

/* Dropdown header row — "เมนู" label (left) + language toggle (right) */
.ppw-nav__dropdown-header { display: flex; align-items: center; justify-content: space-between; }

/* Language toggle pill */
.ppw-nav__lang-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font: 600 11px var(--font-thai);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.ppw-nav__lang-btn:hover { border-color: rgba(19, 205, 203, 0.5); box-shadow: 0 0 12px rgba(19, 205, 203, 0.22); color: var(--text-primary); }
.ppw-nav__lang-icon { display: flex; font-size: 11px; }
.ppw-nav__lang-icon { display: flex; font-size: 11px; line-height: 1; }

/* Guest login pill */
.ppw-nav__login {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: transparent;
  color: var(--text-primary);
  font: 600 12px var(--font-thai);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ppw-nav__login:hover { border-color: rgba(19, 205, 203, 0.5); box-shadow: 0 0 12px rgba(19, 205, 203, 0.22); }
.ppw-nav__login-icon { display: flex; font-size: 12px; color: var(--accent-teal); }

/* Member avatar */
.ppw-nav__avatar-wrap { position: relative; }
.ppw-nav__avatar {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-teal);
  border-radius: 17px;
  font-size: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.ppw-nav__avatar:hover { box-shadow: 0 0 0 4px rgba(19, 205, 203, 0.16), 0 0 16px rgba(19, 205, 203, 0.35); transform: translateY(-1px); }
.ppw-nav__avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(19, 205, 203, 0.22); }

/* Avatar dropdown — myPPW / แก้ไขโปรไฟล์ / ออกจากระบบ. Anchored under the
   avatar itself (not the navbar), so it never fights the hamburger
   dropdown's own right-edge anchoring. Sized at 90% of its original spec
   (2026-07-08 ask) — dimensions below are the already-scaled values. */
.ppw-nav__avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 171px;
  display: flex; flex-direction: column; gap: 2px;
  /* Padding/radius/offset unified with .ppw-nav__dropdown below (2026-07-10
     ask — the two previously used different scales: 7px/11px/+7px here vs
     12px/12px/+8px there, which read as inconsistent when opened side by
     side even though each was internally fine). */
  padding: 12px;
  /* Glass elevation (2026-07-10) — background itself is set below in the
     shared gradient-border rule (alpha approximates --dropdown-bg #0E0E22). */
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  will-change: backdrop-filter, transform;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 1001;
}
.ppw-nav__avatar-dropdown[hidden] { display: none; }
.ppw-nav__avatar-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font: 600 12px var(--font-thai);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ppw-nav__avatar-item:hover { background: rgba(255, 255, 255, 0.12); }
.ppw-nav__avatar-item--gold:hover { background: rgba(244, 161, 64, 0.22); }
.ppw-nav__avatar-item--danger:hover { background: rgba(232, 67, 90, 0.22); color: #e8435a; }
.ppw-nav__avatar-item-icon { font-size: 13px; width: 16px; text-align: center; }
.ppw-nav__avatar-divider { height: 0; margin: 4px 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Hamburger */
.ppw-nav__menu-btn {
  width: 36px; height: 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ppw-nav__menu-btn:hover { border-color: rgba(244, 161, 64, 0.4); box-shadow: 0 0 12px rgba(244, 161, 64, 0.22); }
.ppw-nav__menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.ppw-nav__menu-btn span { display: block; width: 15px; height: 3px; border-radius: 2px; background: var(--text-primary); }

/* Dropdown — anchored under the hamburger button (right side of the navbar) */
.ppw-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  left: auto;
  width: 330px;
  max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  /* Glass elevation (2026-07-10) — background itself is set below in the
     shared gradient-border rule. */
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  will-change: backdrop-filter, transform;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.ppw-nav__dropdown[hidden] { display: none; }
.ppw-nav__dropdown-label { font-size: 12.65px; line-height: 1.25; color: var(--text-secondary); }

/* Full-perimeter gradient border for both dropdowns (2026-07-10 fix — the
   previous version only drew the gradient across the top edge via ::before,
   with a plain flat-gray border on the other 3 sides, which read as
   mismatched/awkward). Standard two-layer-background trick: a transparent
   border plus one background painted into the padding-box (the glass fill)
   and a second painted into the border-box (the gradient ring), so the
   gradient wraps seamlessly with no visible seam. conic-gradient (not
   linear) is required for the color to flow continuously around all 4
   corners instead of just left-to-right. */
.ppw-nav__dropdown,
.ppw-nav__avatar-dropdown {
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(rgba(14, 14, 34, 0.97), rgba(14, 14, 34, 0.97)),
    conic-gradient(from 180deg, rgba(244, 161, 64, 0.55), rgba(19, 205, 203, 0.55), rgba(244, 161, 64, 0.55));
  background-origin: border-box;
  /* Short-viewport fix (2026-07-28): neither dropdown had a height cap, so on
     short/landscape mobile screens the CARDS grid (9 cards) could run past
     the bottom of the viewport with no way to reach the clipped cards —
     dropdown top is pinned at navbar-h + 8px below the sticky navbar (see
     `top: calc(100% + 8px)` below), so that's what the cap is measured
     against; -24px leaves breathing room above the viewport's bottom edge. */
  max-height: calc(100vh - var(--navbar-h) - 32px);
  max-height: calc(100dvh - var(--navbar-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Always 2 cards per row — grid (not flex-wrap) so box-sizing/border/padding
   quirks can never push a card wide enough to force a 1-per-row wrap. */
.ppw-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ppw-nav__card {
  position: relative;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  /* Stagger-in on open (2026-07-21) — replays each time the dropdown goes
     display:none → flex, since CSS animations restart on that transition.
     --i (set per-card in JS) staggers the delay; capped so the whole grid
     settles within ~300ms. */
  animation: ppw-nav-card-in 0.22s ease backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes ppw-nav-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ppw-nav__card:not(.is-disabled):hover {
  border-color: rgba(244, 161, 64, 0.7);
  background: rgba(244, 161, 64, 0.1);
  box-shadow: 0 0 18px rgba(244, 161, 64, 0.25);
  transform: translateY(-1px);
}
.ppw-nav__card.is-active {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--accent-gold);
  border-left-width: 3px;
}
.ppw-nav__card.is-disabled { opacity: 0.4; pointer-events: none; }

.ppw-nav__card-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(19, 205, 203, 0.18);
  font-size: 14px;
}
.ppw-nav__card.is-active .ppw-nav__card-icon,
.ppw-nav__card--gold .ppw-nav__card-icon { background: rgba(244, 161, 64, 0.18); }

/* line-height: 1.25 (2026-07-09) — these otherwise fall back to Noto Sans
   Thai's own default line-height ("normal"), which runs unusually tall
   (~1.6x) and made even single-line card text look overly spaced out. */
.ppw-nav__card-title { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--text-primary); }
.ppw-nav__card-sub   { font-size: 10px; line-height: 1.25; color: var(--text-secondary); }
/* Top-right corner of the card (2026-07-09) — absolute, so it no longer
   pushes the title/sub text down as an extra flex row. */
.ppw-nav__card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 9px; line-height: 1.25; font-weight: 400;
  color: var(--text-secondary);
}

/* Compact icon+label-on-one-line variant (2026-07-10) — used by "back to
   main page" / "buy live ticket", which need no sub-text and read better as
   a single-line button than a full vertical card. */
.ppw-nav__card--inline { flex-direction: row; align-items: center; gap: 10px; }

/* Spans both grid columns (2026-07-11 ask, main-site lite nav's "buy live
   ticket" card) — generic modifier so any full-row card can opt in without
   its own separate grid. */
.ppw-nav__card--full { grid-column: 1 / -1; }

/* Stack group (2026-07-25 ask): cards sharing a `stack` key (e.g. "back to
   home" + "buy live ticket") render into one shared grid cell, split
   top/bottom, so together they match the row height of the card beside
   them (Nova Craft) instead of each claiming a full grid cell. The wrap
   div is itself the grid item, so it inherits the row's stretch height;
   `flex: 1` on each stacked card then splits that height evenly. */
.ppw-nav__card-stack { display: flex; flex-direction: column; gap: 8px; }
.ppw-nav__card--stacked { flex: 1; padding: 8px 10px; }
.ppw-nav__card--stacked .ppw-nav__card-icon { width: 22px; height: 22px; font-size: 12px; }
.ppw-nav__card--stacked .ppw-nav__card-title { font-size: 12px; }

/* Short-viewport fix, part 2 (2026-07-28): the max-height + overflow-y auto
   above (shared .ppw-nav__dropdown rule) already guarantees every card is
   reachable, but on short/landscape phones that meant near-constant
   scrolling just to see the whole grid. Shrinking the grid's own metrics
   below ~600px tall (comfortably above common landscape-phone heights like
   360–430px) fits more rows on screen before scroll ever kicks in, so most
   short-screen visitors never need to scroll at all. */
@media (max-height: 600px) {
  .ppw-nav__dropdown { gap: 6px; padding: 10px; }
  .ppw-nav__grid { gap: 6px; }
  .ppw-nav__card { padding: 8px 10px; gap: 5px; }
  .ppw-nav__card-icon { width: 22px; height: 22px; font-size: 12px; }
  .ppw-nav__card-title { font-size: 12px; }
  .ppw-nav__card-sub { font-size: 9px; }
}