/* Praanadha shared header + slide-out menu.
   Used by every page together with /menu.js. Edit the menu items in menu.js. */
:root {
  --pm-cream: #FFF8EC;
  --pm-red: #662716;
  --pm-gold: #CDAB5B;
  --pm-line: rgba(131, 77, 49, 0.16);
  --pm-shade: rgba(58, 42, 32, 0.38);
  --pm-on-red: #FFF8EC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pm-cream: #1E1712; --pm-red: #E8B48F; --pm-gold: #CDAB5B;
    --pm-line: rgba(232, 180, 143, 0.18); --pm-shade: rgba(0, 0, 0, 0.55); --pm-on-red: #1E1712;
  }
}
:root[data-theme="dark"] {
  --pm-cream: #1E1712; --pm-red: #E8B48F; --pm-gold: #CDAB5B;
  --pm-line: rgba(232, 180, 143, 0.18); --pm-shade: rgba(0, 0, 0, 0.55); --pm-on-red: #1E1712;
}

/* Header (always visible, sticks to the top) */
header.pm-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--pm-cream);
  border-bottom: 1px solid var(--pm-line);
  padding: env(safe-area-inset-top, 0px) 0 0;
  margin: 0;
}
.pm-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 980px; margin: 0 auto; padding: 12px 20px;
}
.pm-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  font-size: 1.12rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--pm-red); text-decoration: none; line-height: 1.2;
}
.pm-brand img { width: 22px; height: auto; flex-shrink: 0; display: block; }
.pm-open, .pm-close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pm-red);
}
.pm-open svg, .pm-close svg { width: 26px; height: 26px; display: block; }
.pm-open:focus-visible, .pm-close:focus-visible, .pm-panel a:focus-visible, .pm-brand:focus-visible {
  outline: 2px solid var(--pm-gold); outline-offset: 3px;
}

/* Overlay + panel (built by menu.js) */
.pm-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--pm-shade);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.pm-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: min(84vw, 400px);
  background: var(--pm-cream);
  transform: translateX(100%); transition: transform .32s ease; visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 28px calc(32px + env(safe-area-inset-bottom, 0px)) 32px;
  font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
}
.pm-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--pm-gold);
}
.pm-top .pm-brand { font-size: 1.05rem; }
.pm-panel ul { list-style: none; margin: 0; padding: 0; }
.pm-panel li { border-bottom: 1px solid var(--pm-line); }
.pm-panel li a {
  display: block; padding: 20px 2px;
  color: var(--pm-red); text-decoration: none;
  font-size: 1.25rem; font-weight: 500; line-height: 1.25;
  transition: color .2s, padding-left .2s;
}
.pm-panel li a:hover, .pm-panel li a[aria-current="page"] { color: var(--pm-gold); padding-left: 4px; }

/* Highlighted "Book" pill */
.pm-book {
  display: inline-block;
  background: var(--pm-red); color: var(--pm-on-red);
  padding: 6px 24px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.pm-panel li a:hover .pm-book, .pm-panel li a[aria-current="page"] .pm-book { background: var(--pm-gold); color: #662716; }

/* Open state */
html.pm-is-open, html.pm-is-open body { overflow: hidden; }
html.pm-is-open .pm-overlay { opacity: 1; visibility: visible; }
html.pm-is-open .pm-panel { transform: translateX(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .pm-overlay, .pm-panel { transition: none; }
}