/* =====================================================================
   JPP MUSIC • 05 — CHROME (header + footer + nav)  ·  loads LAST
   ---------------------------------------------------------------------
   The approved dark re-skin chrome: two-tier header (dark logo area +
   purple menu bar) with a Services dropdown, an off-canvas mobile menu,
   and the deep-purple footer with the gold-block rollover. Ported from
   the approved preview (jpp-preview). Header/footer MARKUP lives in
   parts/header.html + parts/footer.html; interactions in assets/js/nav.js.
   ===================================================================== */

/* ---- GLOBAL HEADING TYPE — Outfit, weight 700 (James-approved calmer
   weight; overrides the live pages' inline 800/900). Gold pill = 600. ---- */
h1,h2,h3,h4,h5,h6{
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
}

/* ============ HEADER — two tier ============ */
.jms-site-header{position:sticky;top:0;z-index:100}
.logo-area{background:linear-gradient(0deg,#2a2a2a 0%,#000 65%);display:flex;align-items:center;
  justify-content:center;padding:12px 20px;position:relative}
.logo-area img{height:62px;width:auto;display:block}
.burger{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:42px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(255,255,255,.06);
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-bar{background:linear-gradient(180deg,#a571ae 3%,#4c1a4c 91%);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.menu-bar .inner{max-width:1100px;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:42px;padding:0 16px}
.menu{list-style:none;display:flex;align-items:center;margin:0;padding:0}
.menu>li{position:relative;display:flex;align-items:center}
.menu>li+li::before{content:"";width:1px;height:13px;background:rgba(255,255,255,.4);flex:0 0 auto}
.menu>li>a{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;color:#e9b7ff;
  text-decoration:none;font:600 12.5px/1 "Work Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.menu>li>a:hover{color:#fff}
.menu>li.cur>a{color:#ffd400}
.menu .caret{width:9px;height:9px;fill:currentColor;transition:transform .2s ease}

.menu .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:215px;
  background:#1b0f20;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px;
  display:none;flex-direction:column;box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:120}
.menu .has:hover .sub,.menu .has.open .sub{display:flex}
.menu .has.open>a .caret,.menu .has:hover>a .caret{transform:rotate(180deg)}
.menu .sub a{display:block;padding:9px 12px;color:#e9b7ff;text-decoration:none;
  font:600 13px/1.2 "Work Sans",sans-serif;border-radius:7px;text-transform:none;letter-spacing:0;white-space:nowrap}
.menu .sub a:hover{background:rgba(255,255,255,.06);color:#fff}

/* ============ MOBILE MENU (off-canvas) ============
   ⚠️ STACKING: .jms-site-header is sticky + z-index:100 → it is a STACKING
   CONTEXT, so the panel inside it can never out-stack a sibling overlay no
   matter its z-index. The backdrop therefore sits BELOW the header (z:90):
   it dims the page, the header + panel paint above it. (z:290 here painted
   the dim OVER the panel = "blacked-out menu" + taps hit the backdrop.) */
.mnav-backdrop{position:fixed;inset:0;background:rgba(12,7,16,.55);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;z-index:90}
.mnav-backdrop.open{opacity:1;visibility:visible}
.mnav-close{display:none}

@media (max-width:860px){
  /* Off-canvas rows are content-box by default, so width:100% + 48px of link
     padding overflowed the 330px panel and pushed the Services caret past the
     right edge (had to scroll right to see the twirl-down). Border-box keeps
     every row within the panel. (The .caret keeps content-box via its own
     higher-specificity rule below, so its padding still sizes the gold box.) */
  .menu-bar,.menu-bar *{box-sizing:border-box}
  .logo-area{justify-content:flex-start;padding-left:18px}
  .logo-area img{height:48px}
  .burger{display:flex}
  .menu-bar{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:330px;max-width:85vw;
    background:#1d1228;border-left:1px solid rgba(255,255,255,.10);
    transform:translateX(105%);transition:transform .38s cubic-bezier(.32,.72,.24,1);
    box-shadow:-16px 0 48px rgba(0,0,0,.55);z-index:300;display:block;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding:64px 0 30px}
  .menu-bar.open{transform:translateX(0)}
  .menu-bar .inner{display:block;max-width:none;min-height:0;padding:0}
  .menu{flex-direction:column;align-items:stretch;width:100%}
  .menu>li{display:block;position:static}
  .menu>li+li::before{display:none}
  /* staggered entrance: rows slide+fade in after the panel lands; delays only
     apply on .open so closing is instant */
  .menu-bar .menu>li{opacity:0;transform:translateX(22px);
    transition:opacity .26s ease,transform .3s cubic-bezier(.22,.9,.32,1)}
  .menu-bar.open .menu>li{opacity:1;transform:none}
  .menu-bar.open .menu>li:nth-child(1){transition-delay:.06s}
  .menu-bar.open .menu>li:nth-child(2){transition-delay:.10s}
  .menu-bar.open .menu>li:nth-child(3){transition-delay:.14s}
  .menu-bar.open .menu>li:nth-child(4){transition-delay:.18s}
  .menu-bar.open .menu>li:nth-child(5){transition-delay:.22s}
  .menu-bar.open .menu>li:nth-child(6){transition-delay:.26s}
  .menu>li>a{display:flex;width:100%;padding:15px 24px;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;letter-spacing:.05em;
    transition:background-color .14s ease}
  .menu>li>a:active{background:rgba(255,255,255,.07)}
  .menu>li.cur>a{background:rgba(255,212,0,.09);box-shadow:inset 3px 0 0 #ffd400}
  /* Services dropdown affordance — make it OBVIOUS on mobile. The faint 12px
     light-purple chevron read as decoration, not a control. Now a gold chevron
     in a rounded hairline box that fills + rotates 180° when the accordion opens
     (rotation handled by .has.open>a .caret above). */
  .menu .has>a .caret{width:13px;height:13px;fill:var(--jms-gold);
    padding:6px;box-sizing:content-box;border-radius:8px;flex:0 0 auto;
    border:1px solid rgba(246,201,69,.45);background:rgba(246,201,69,.10)}
  .menu .has.open>a .caret{background:rgba(246,201,69,.22);border-color:rgba(246,201,69,.70)}
  /* Services accordion: animated height (max-height+fade) instead of a
     display:none snap; the desktop hover rule is inert here since the
     closed state is max-height:0 */
  .menu .sub{position:static;transform:none;display:flex;flex-direction:column;min-width:0;
    background:rgba(0,0,0,.3);border:0;box-shadow:none;border-radius:0;padding:0;margin:0;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .26s ease}
  .menu .has.open .sub{max-height:280px;opacity:1}
  .menu .sub a{padding:13px 24px 13px 40px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;text-transform:none;letter-spacing:.02em}
  .menu .sub a:active{background:rgba(255,255,255,.07)}
  .mnav-close{display:flex;position:absolute;top:16px;right:16px;width:40px;height:40px;align-items:center;
    justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
    border-radius:9px;color:#fff;font:300 26px/1 system-ui;cursor:pointer;padding:0;
    transition:background-color .14s ease}
  .mnav-close:active{background:rgba(255,255,255,.14)}
}

@media (prefers-reduced-motion:reduce){
  .menu-bar,.mnav-backdrop,.menu-bar .menu>li,.menu .sub,.menu .caret,.burger span{transition:none !important}
}

/* ============ FOOTER (deep purple, gold-block rollover) ============ */
.foot-main{background:#4c1a4c;padding:30px 16px 20px;text-align:center;margin-top:30px}
.foot-main .flogo{height:46px;width:auto;display:block;margin:0 auto 18px}
.frow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:0;row-gap:8px;
  margin:0 auto 6px;padding:0 6px;max-width:900px;line-height:1.08}
.fsep{display:inline-block;padding:0 9px;color:rgba(255,255,255,.45);user-select:none}
.frow a{display:inline-block;color:rgba(255,255,255,.9);text-decoration:none;font:600 12px/1 "Work Sans",sans-serif;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:0;
  transition:background-color .14s,color .14s}
.frow a:hover,.frow a:focus-visible{background:#ffc800;color:rgba(11,12,15,.98)}
.foot-sub{background:#000;padding:18px 16px 22px;text-align:center}
.social{display:flex;justify-content:center;gap:20px;margin-bottom:12px}
.social a{display:inline-flex;color:#fff;opacity:.92}
.social a:hover{color:#f6c945;opacity:1}
.social svg{width:22px;height:22px;fill:currentColor}
.copy{color:rgba(255,255,255,.8);font:400 12.5px/1.65 "Work Sans",sans-serif}
.copy b{font-weight:700;color:#fff}
.copy .tag{font-style:italic}