/*
 * Canonical PlayPuzzle header for static (non-Astro) HTML pages.
 * Paste this markup where the old <header>/nav block used to be:
 *
 * <link rel="stylesheet" href="/assets/pp-header.css?v=1" />
 * <script defer src="/assets/pp-header.js?v=1"></script>
 *
 * <header class="pp-header">
 *   <div class="pp-header-inner">
 *     <a href="https://playpuzzle.in/" class="pp-logo" aria-label="PlayPuzzle Home">🧩 PlayPuzzle</a>
 *     <nav class="pp-nav" aria-label="Primary">
 *       <a href="https://kids.playpuzzle.in/">🧩 Kids</a>
 *       <a href="https://study.playpuzzle.in/">📚 Study</a>
 *       <a href="https://playpuzzle.in/about">About</a>
 *       <a href="https://playpuzzle.in/blog/">Blog</a>
 *       <a href="https://playpuzzle.in/contact.html">Contact</a>
 *       <a id="nav-signin" href="https://playpuzzle.in/login" class="pp-signin">Sign In</a>
 *       <span id="nav-user" class="pp-user">
 *         <a id="nav-profile-link" href="https://study.playpuzzle.in/profile" class="pp-profile-link"><span id="nav-name"></span></a>
 *         <button id="nav-signout" class="pp-signout" type="button">Sign Out</button>
 *       </span>
 *     </nav>
 *     <button id="menu-btn" class="pp-menu-btn" aria-label="Open menu" aria-expanded="false">
 *       <svg id="icon-open" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
 *       <svg id="icon-close" class="pp-hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
 *     </button>
 *   </div>
 * </header>
 *
 * IMPORTANT: the backdrop + drawer MUST be siblings of <header>, not children of it —
 * .pp-header has backdrop-filter, which creates a new containing block for any
 * position:fixed descendant, trapping the drawer inside the header's own box instead
 * of covering the viewport. Keep them outside </header> as shown below.
 *
 * <div id="mobile-backdrop" class="pp-backdrop" aria-hidden="true"></div>
 * <aside id="mobile-menu" class="pp-drawer" aria-label="Mobile navigation">
 *   <div class="pp-drawer-header">
 *     <a href="https://playpuzzle.in/" class="pp-logo">🧩 PlayPuzzle</a>
 *     <button id="menu-close" class="pp-close-btn" aria-label="Close menu">
 *       <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
 *     </button>
 *   </div>
 *   <div class="pp-drawer-body">
 *     <a href="https://kids.playpuzzle.in/" class="pp-drawer-link">🧩 Kids</a>
 *     <a href="https://study.playpuzzle.in/" class="pp-drawer-link">📚 Study</a>
 *     <a href="https://playpuzzle.in/about" class="pp-drawer-link">ℹ️ About</a>
 *     <a href="https://playpuzzle.in/blog/" class="pp-drawer-link">📝 Blog</a>
 *     <a href="https://playpuzzle.in/contact.html" class="pp-drawer-link">✉️ Contact</a>
 *     <div class="pp-drawer-footer">
 *       <a id="mob-signin" href="https://playpuzzle.in/login" class="pp-drawer-signin">Sign In</a>
 *       <div id="mob-user" class="pp-drawer-user">
 *         <a id="mob-profile-link" href="https://study.playpuzzle.in/profile" class="pp-drawer-profile"><span>👤</span><span id="mob-name"></span></a>
 *         <button id="mob-signout" class="pp-drawer-signout" type="button">Sign Out</button>
 *       </div>
 *     </div>
 *   </div>
 * </aside>
 *
 * Note: on pages outside playpuzzle.in itself (this file is only ever served from
 * playpuzzle.in), local links (About/Blog/Contact/Sign In/profile redirect) may be
 * root-relative instead of absolute — keep whichever the page already used.
 */

/* Defined on :root (not scoped to .pp-header) so the drawer/backdrop — which must be
   siblings of <header>, not descendants, to avoid the backdrop-filter containing-block
   trap — still inherit these variables regardless of where they sit in the DOM. */
:root {
  --pph-bg: rgba(255, 255, 255, 0.95);
  --pph-text: #4b5563;
  --pph-strong: #6d28d9;
  --pph-hover: #7c3aed;
  --pph-border: rgba(15, 23, 42, 0.08);
  --pph-drawer-bg: #ffffff;
}

[data-theme="dark"] {
  --pph-bg: rgba(11, 16, 32, 0.92);
  --pph-text: rgba(255, 255, 255, 0.75);
  --pph-strong: #c4b5fd;
  --pph-hover: #ddd6fe;
  --pph-border: rgba(255, 255, 255, 0.12);
  --pph-drawer-bg: #0b1020;
}

.pp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pph-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pp-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 640px) {
  .pp-header-inner { padding: 0 24px; }
}

.pp-logo {
  font-family: Fredoka, Nunito, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--pph-strong);
  text-decoration: none;
  white-space: nowrap;
}

.pp-nav {
  display: none;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pph-text);
}
@media (min-width: 640px) {
  .pp-nav { display: flex; }
}
.pp-nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pp-nav a:hover,
.pp-nav a[aria-current="page"] {
  color: var(--pph-hover);
}

.pp-signin {
  padding: 0.5rem 1rem;
  background: #7c3aed;
  color: #fff !important;
  border-radius: 9999px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.pp-signin:hover { background: #6d28d9; }
.pp-signin.pp-hidden { display: none; }

.pp-user { display: none; align-items: center; gap: 0.75rem; }
.pp-user.pp-visible { display: flex; }
.pp-profile-link { color: var(--pph-strong) !important; font-weight: 600; }
.pp-signout {
  font-size: 0.875rem;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.pp-signout:hover { color: #ef4444; }

.pp-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--pph-text);
  cursor: pointer;
}
.pp-menu-btn:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="dark"] .pp-menu-btn:hover { background: rgba(255, 255, 255, 0.08); }
@media (min-width: 640px) {
  .pp-menu-btn { display: none; }
}
.pp-hidden { display: none !important; }

.pp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(17, 24, 39, 0.35);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
.pp-backdrop.pp-open { display: block; }

.pp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 320px;
  max-width: 86vw;
  background: var(--pph-drawer-bg);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.pp-drawer.pp-open { transform: translateX(0); }
@media (min-width: 640px) {
  .pp-backdrop,
  .pp-drawer { display: none !important; }
}

.pp-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--pph-border);
  flex-shrink: 0;
}
.pp-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.04);
  border: none;
  color: var(--pph-text);
  cursor: pointer;
}
[data-theme="dark"] .pp-close-btn { background: rgba(255, 255, 255, 0.06); }

.pp-drawer-body { flex: 1; padding: 20px 16px; }
.pp-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: #374151;
  text-decoration: none;
  margin-bottom: 2px;
}
[data-theme="dark"] .pp-drawer-link { color: rgba(255, 255, 255, 0.8); }
.pp-drawer-link:hover { background: #f5f3ff; color: #6d28d9; }
[data-theme="dark"] .pp-drawer-link:hover { background: rgba(255, 255, 255, 0.06); color: #c4b5fd; }

.pp-drawer-footer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pph-border);
}
.pp-drawer-signin {
  display: block;
  text-align: center;
  background: #7c3aed;
  color: #fff !important;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}
.pp-drawer-signin:hover { background: #6d28d9; }
.pp-drawer-signin.pp-hidden { display: none; }
.pp-drawer-user { display: none; flex-direction: column; gap: 0.75rem; }
.pp-drawer-user.pp-visible { display: flex; }
.pp-drawer-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #f5f3ff;
  color: #6d28d9 !important;
  font-weight: 700;
  text-decoration: none;
}
[data-theme="dark"] .pp-drawer-profile { background: rgba(196, 181, 253, 0.12); }
.pp-drawer-signout {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pph-border);
  background: none;
  color: #6b7280;
  font-weight: 600;
  cursor: pointer;
}
.pp-drawer-signout:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }

body.pp-menu-locked { overflow: hidden; }