/* =====================================================================
   JPP MUSIC • 03 — GLOBAL COMPONENTS
   ---------------------------------------------------------------------
   Only the GLOBAL pieces every page relies on but does NOT define itself.
   (Each page ships its own scoped <style> for its content components —
   .jpp-about / .jpp-svc / .jpp-homecopy / etc — so those are NOT here.)
   Folded from the live Customizer "Additional CSS", dropping the Blocksy
   and light-legacy cruft. Dark values throughout.
   ===================================================================== */

/* ---- Gold pill heading (.tight-heading) ---- */
.tight-heading-wrapper{display:flex;justify-content:center;align-items:center;
  margin:30px auto 8px;padding:0 14px;width:100%;box-sizing:border-box}
.tight-heading{display:inline-block;background:#ffd400;color:#101013;font-weight:600 !important;
  font-size:2rem;line-height:1.1;padding:7px .4em;border-radius:3px;margin:0;
  box-shadow:0 2px 14px rgba(255,212,0,.22);text-align:center;white-space:nowrap}
.tight-heading strong{font-weight:600}
.tight-heading-wrapper > .wp-block-heading{margin-block-start:0;margin-block-end:0}
@media (max-width:1024px){ .tight-heading{white-space:normal;font-size:1.75rem;line-height:1.1;padding:6px .6em} }
@media (max-width:599px){ .tight-heading{font-size:1.55rem;padding:8px .9em} }

/* ---- Divider rule (1080 lane) ---- */
.jpp-rule{height:1px;border:0;background:rgba(255,255,255,.18);margin:22px auto;
  max-width:1080px;width:calc(100% - 28px);display:block;box-sizing:border-box}
@media (max-width:360px){ .jpp-rule{width:calc(100% - 20px)} }

/* ---- Reusable CTA panel (gold-outline buttons) ---- */
.jpp-cta{width:100%;padding:0 14px;margin:18px auto;max-width:1080px;box-sizing:border-box}
.jpp-cta,.jpp-cta *{box-sizing:border-box}
.jpp-cta__panel{width:100%;max-width:1080px;margin:0 auto;padding:22px 18px;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;background:rgba(255,255,255,.03);display:grid;gap:14px;text-align:center}
.jpp-cta__kicker{font-weight:700;font-size:1.2rem;color:#fff;font-family:"Outfit",system-ui,sans-serif;margin:0;line-height:1.2}
.jpp-cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.jpp-cta__btn{display:inline-flex;align-items:center;justify-content:center;height:52px;min-width:200px;
  padding:0 22px;border:2px solid #f6c945;border-radius:14px;background:transparent;color:#f6c945;
  font-weight:700;text-decoration:none;white-space:nowrap;line-height:1;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
.jpp-cta__btn:hover{background:rgba(246,201,69,.12);color:#f9d94d;border-color:#f9d94d;transform:translateY(-1px)}
.jpp-cta__btn:focus-visible{outline:2px solid #f9d94d;outline-offset:3px}
.jpp-cta__note{margin:0;opacity:.85;font-weight:600;line-height:1.4}
@media (max-width:859px){ .jpp-cta__btn{min-width:160px;width:calc(50% - 6px)} }
@media (max-width:420px){ .jpp-cta__btn{width:100%;min-width:0} }

/* ---- Stackable buttons (Music/Media hero pills) — base layout so the page's
   inline gradient/border overrides render as pills (Stackable plugin CSS dropped) ---- */
.stk-row.stk-button-group{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center}
.wp-block-stackable-button{display:inline-flex}
.stk-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:8px 26px;border-radius:17px;text-decoration:none;color:#fff;line-height:1}
.stk-link{text-decoration:none;color:#fff}
.stk-button:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.stk-button__inner-text{color:#fff;font-family:"Outfit",system-ui,sans-serif;font-weight:700;line-height:1}
.stk--svg-wrapper,.stk--inner-svg{display:inline-flex;align-items:center}
.stk--inner-svg svg{fill:#fff;display:block}
.stk-button:hover{filter:brightness(1.08)}

/* ---- Contact form — WPForms #2521 (dark scheme, folded from live Customizer) ---- */
#wpforms-2521{--gold:#f6c945;--gold-2:#ffd166;--ink:rgba(255,255,255,.88);--muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.22);--field:rgba(255,255,255,.04);--field-line:rgba(255,255,255,.28);color:var(--ink)}
.wpforms-container-full#wpforms-2521,div#wpforms-2521-container{max-width:760px;margin:0 auto;padding:0 14px}
#wpforms-2521 form.wpforms-form{border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2.2vw,22px);background:rgba(0,0,0,.10)}
#wpforms-2521 .wpforms-field-label{color:var(--ink);font-weight:700;margin-bottom:8px}
#wpforms-2521 .wpforms-required-label{color:var(--gold);font-weight:700}
#wpforms-2521 .wpforms-field-description{color:var(--muted);font-size:.95rem;margin-top:8px}
#wpforms-2521 input[type="text"],#wpforms-2521 input[type="email"],#wpforms-2521 input[type="tel"],
#wpforms-2521 select,#wpforms-2521 textarea{width:100%;background:var(--field);border:1px solid var(--field-line);
  border-radius:12px;color:var(--ink);padding:12px 14px;font-size:1rem;line-height:1.4;box-shadow:none}
#wpforms-2521 input::placeholder,#wpforms-2521 textarea::placeholder{color:rgba(255,255,255,.55)}
#wpforms-2521 textarea{min-height:160px;resize:vertical}
#wpforms-2521 input:focus,#wpforms-2521 select:focus,#wpforms-2521 textarea:focus{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,201,69,.18)}
#wpforms-2521 select option{background:#111;color:#fff}
#wpforms-2521 .wpforms-field{margin-bottom:18px}
#wpforms-2521 .wpforms-submit-container{margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#wpforms-2521 button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;line-height:1;
  height:52px;border:2px solid var(--gold);background:transparent;color:var(--gold);font-weight:700;
  border-radius:14px;padding:0 18px;min-width:118px;white-space:nowrap;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
#wpforms-2521 button[type="submit"]:hover{background:rgba(246,201,69,.12);color:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px)}
#wpforms-2521 .wpforms-confirmation-container-full{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.03);color:var(--ink)}

/* ---- Contact wrapper + text-only note (folded from live) ---- */
.jpp-contact-wrap{max-width:760px;margin:0 auto;padding:0 14px}
.jpp-contact-note{border:0;border-radius:0;padding:0;background:transparent;color:rgba(255,255,255,.88);margin:0 auto 16px}
.jpp-contact-note__head,.jpp-contact-note__icon{display:none}
.jpp-contact-note p{margin:10px 0 0;color:rgba(255,255,255,.72);line-height:1.6}
.jpp-contact-note p:first-of-type{margin-top:0}

/* ---- Platform-pill stacks (.jpp-platform-pills v4) — spacing normalizer ----
   Every page carries an IDENTICAL copy of the v4 pill CSS, but the FOLLOWING
   block's top padding drifts per page (28px on Bigfoot, 10px Skinny Bunnies,
   0px Home/Martial Law/Music For Videogames) so the last pill butts against
   the next text block. Normalize to the approved Bigfoot clearance, all
   viewports. (Verified 2026-06-12 across all 5 pill pages.) */
.jpp-platform-pills + *{padding-top:28px !important}

/* ---- Music & Projects catalog: single Work Item (.jpp-work) + homepage
   Featured grid (.jpp-featured). Dark skin, matching the site's panel / hairline
   / gold language. Loaded globally so it styles BOTH the single item pages and
   the homepage Featured Work section. Every piece is optional in the markup, so
   empty fields never produce empty boxes. ---- */
.jpp-work{max-width:880px;margin:0 auto;display:grid;gap:20px}
.jpp-work__art img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.18);display:block}
.jpp-work__sub{margin:0;color:#f6c945;font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:1.15rem;line-height:1.3}
.jpp-work__meta{margin:0;color:rgba(255,255,255,.66);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase}
.jpp-work__summary{margin:0;color:#fff;font-size:1.15rem;line-height:1.6}
.jpp-work__media{margin:0}
.jpp-work__story{color:rgba(255,255,255,.90);line-height:1.7}
.jpp-work__story > *:first-child{margin-top:0}
.jpp-work__links{display:flex;gap:12px;flex-wrap:wrap}
.jpp-work__btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;
  border:2px solid #f6c945;border-radius:14px;background:transparent;color:#f6c945;font-weight:700;
  text-decoration:none;line-height:1;transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
.jpp-work__btn:hover{background:rgba(246,201,69,.12);color:#f9d94d;border-color:#f9d94d;transform:translateY(-1px)}
.jpp-work__credits{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;color:rgba(255,255,255,.72);line-height:1.6}
.jpp-work__credits h3{margin:0 0 8px;color:#fff;font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:1.05rem}
.jpp-work__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.jpp-work__gallery figure{margin:0}
.jpp-work__gallery img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.18);display:block}

.jpp-featured{width:100%;padding:8px 14px;margin:18px auto;max-width:1080px;box-sizing:border-box}
.jpp-featured *{box-sizing:border-box}
.jpp-featured__lane{max-width:1080px;margin:0 auto}
.jpp-featured__h{margin:0 0 16px;text-align:center;color:#fff;font-family:"Outfit",system-ui,sans-serif;
  font-weight:700 !important;font-size:clamp(22px,2.6vw,34px);line-height:1.2}
.jpp-featured__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.jpp-featured__card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.03);overflow:hidden;
  transition:transform .16s ease,border-color .16s ease,background-color .16s ease}
.jpp-featured__card:hover{transform:translateY(-2px);border-color:rgba(246,201,69,.55);background:rgba(255,255,255,.05)}
.jpp-featured__art{display:block;aspect-ratio:16/10;overflow:hidden}
.jpp-featured__art img{width:100%;height:100%;object-fit:cover;display:block}
.jpp-featured__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.jpp-featured__title{color:#fff;font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:1.15rem;line-height:1.25}
.jpp-featured__sub{color:#f6c945;font-weight:600;font-size:.95rem;line-height:1.3}
.jpp-featured__sum{color:rgba(255,255,255,.66);font-size:.95rem;line-height:1.5}
@media (max-width:560px){ .jpp-featured__grid{grid-template-columns:1fr} }

/* =====================================================================
   KSES SAFETY NET (added 2026-06-12) — page-component CSS in the THEME
   ---------------------------------------------------------------------
   Some pages still carry this component CSS in an inline <style> in their
   content. WordPress's kses strips <style> on certain editor saves, which
   dumped raw CSS as visible text ("mess of code"). Mirroring the CSS here
   means the page renders correctly EVEN IF its inline <style> is stripped.
   (Durable fix = move all page CSS here / to shortcodes — Phase 6.)
   ===================================================================== */

/* Music/Media hero pills (Stackable) — full pill look so they survive a
   stripped inline <style> (only these two buttons use .stk-button). */
.stk-button{min-height:56px;padding:2px 26px;
  background:linear-gradient(180deg,rgb(191,91,204) 3%,rgb(76,26,76) 92%)}
.stk-button:before{border:2px solid #fff}
.stk-button__inner-text{font-size:clamp(22px,4vw,34px)}
.stk--inner-svg svg{height:43px;width:43px}

/* Platform pills (.jpp-platform-pills.v4) — Spotify / YouTube / Apple row. */
.jpp-platform-pills.v4{--gold:#f6c945;--gold2:#f9d94d;--content:980px;--rule:1080px;
  --pill-w:240px;--pill-w-md:260px;--pill-h:74px;--icon:50px;--font:clamp(20px,2.4vw,32px);
  --gap-y:18px;--radius:34px;--rule-h:1px;--rule-opacity:.22;--border:1px;--border-opacity:.55;
  --pad-x:14px;--pad-x-mobile:10px;--pill-inset:44px;--rule-gap-top:22px;--rule-gap-bottom:22px;
  --pill-pad-mobile:20px;color:inherit;width:100%;box-sizing:border-box}
.jpp-platform-pills.v4, .jpp-platform-pills.v4 *{box-sizing:border-box}
.jpp-platform-pills.v4 .rule{height:var(--rule-h);background:currentColor;opacity:var(--rule-opacity);
  max-width:var(--rule);width:calc(100% - (var(--pad-x) * 2));margin:0 auto}
.jpp-platform-pills.v4 .rule.top{margin-bottom:var(--rule-gap-top)}
.jpp-platform-pills.v4 .rule.bottom{margin-top:var(--rule-gap-bottom)}
.jpp-platform-pills.v4 .lane{max-width:var(--content);margin:0 auto;padding:0 var(--pad-x)}
.jpp-platform-pills.v4 .pill-row{display:grid;grid-template-columns:repeat(3,var(--pill-w));
  justify-content:space-between;align-items:center;row-gap:var(--gap-y);padding-inline:var(--pill-inset)}
@media (max-width:1024px){.jpp-platform-pills.v4 .pill-row{grid-template-columns:repeat(3,var(--pill-w-md));padding-inline:24px}}
@media (max-width:700px){.jpp-platform-pills.v4 .pill-row{grid-template-columns:1fr;padding-inline:var(--pill-pad-mobile)}
  .jpp-platform-pills.v4 .rule{display:none}}
.jpp-platform-pills.v4 a.btn{inline-size:var(--pill-w);block-size:var(--pill-h);display:inline-flex;
  align-items:center;justify-content:center;gap:10px;padding:6px 16px;color:currentColor;
  background:rgba(255,255,255,.02);text-decoration:none;border:var(--border) solid rgba(255,255,255,var(--border-opacity));
  border-radius:var(--radius);font-weight:900;font-size:var(--font);line-height:1;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
@media (max-width:1024px){.jpp-platform-pills.v4 a.btn{inline-size:var(--pill-w-md)}}
@media (max-width:700px){.jpp-platform-pills.v4 a.btn{inline-size:100%}}
.jpp-platform-pills.v4 a.btn svg{width:var(--icon);height:var(--icon);flex:0 0 auto;display:block}
@media (hover:hover){.jpp-platform-pills.v4 a.btn:hover{background:rgba(255,255,255,.04);
  border-color:rgba(246,201,69,.55);transform:translateY(-1px)}}

/* ---- Music release block (.jpp-release) — rendered by [jpp_work_item] for
   Music catalog items: release pill + title, kicker, lede, listen embed, a
   two-column Story / Release Details grid, tracklist, and the licensing line.
   Dark skin, gold accents, hairline rules — matches the rest of the catalog. */
.jpp-release{display:block;color:rgba(255,255,255,.90)}
.jpp-release__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.jpp-release__pill{display:inline-flex;align-items:center;height:30px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(246,201,69,.55);background:rgba(246,201,69,.10);color:#f6c945;
  font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.jpp-release__title{margin:0;color:#fff;font-family:"Outfit",system-ui,sans-serif;font-weight:700;
  font-size:clamp(24px,3vw,38px);line-height:1.15}
.jpp-release__kicker{margin:6px 0 0;color:#f6c945;font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:1.1rem}
.jpp-release__lede{margin:10px 0 0;color:#fff;font-size:1.12rem;line-height:1.6}
.jpp-release__rule{border:none;border-top:1px solid rgba(255,255,255,.18);margin:24px 0}
.jpp-release__listen h3,.jpp-release__story h3,.jpp-release__details h3,.jpp-release__tracks h3{
  margin:0 0 10px;color:#fff;font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:1.15rem}
.jpp-release__note{margin:0 0 12px;color:rgba(255,255,255,.66)}
.jpp-release__listen iframe{border-radius:12px;width:100%;border:0;min-height:152px}
.jpp-release__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.jpp-release__story > *:first-child{margin-top:0}
.jpp-release__story p{margin:0 0 12px;line-height:1.7}
.jpp-release__meta{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jpp-release__meta li{color:rgba(255,255,255,.82);line-height:1.5}
.jpp-release__meta strong{color:#fff;font-weight:600}
.jpp-release__credits{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
.jpp-release__tracklist{list-style:none;margin:0;padding:0;counter-reset:trk;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.jpp-release__tracklist li{counter-increment:trk;display:flex;align-items:baseline;gap:10px;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.jpp-release__tracklist li::before{content:counter(trk) ".";color:#f6c945;font-weight:600;min-width:24px}
.jpp-release__tt{flex:1;color:rgba(255,255,255,.90)}
.jpp-release__td{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.jpp-release__license{margin:0;text-align:center;color:rgba(255,255,255,.80);line-height:1.6}
@media (max-width:720px){
  .jpp-release__grid{grid-template-columns:1fr;gap:22px}
  .jpp-release__tracklist{grid-template-columns:1fr}
}