/* ============================================================
   JAMMY HEADER
   Everything references tokens from style.css.
   No !important anywhere — there is no theme to fight now.
   ============================================================ */

.jam-header { position: sticky; top: 0; z-index: 500; }

/* ---- Visibility helpers ----
   Doubled selectors (.x.x) so these always beat a component's own
   `display` rule regardless of source order. Without this, .jam-balance's
   own `display: inline-flex` overrides .jam-mobile-only and the pill
   renders twice. Specificity, not !important. */
.jam-mobile-only.jam-mobile-only { display: none; }
.jam-desktop-only.jam-desktop-only { display: inline-flex; }

/* ============================================================
   TOP BAR
   ============================================================ */

.jam-topbar {
  background: var(--jam-grad);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  transition: margin-top .35s ease;
}

.jam-topbar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/*
 * Guest state: slim strip, links only, left-aligned.
 * The greeting is gone, so there's nothing to balance against on the right —
 * the links sit left where the eye starts. Height drops from ~33px to ~26px.
 * Logged-in keeps the full padding because it carries the name and balance.
 */
.jam-logged-out .jam-topbar-in {
  padding-top: 4px;
  padding-bottom: 4px;
  justify-content: flex-start;
  min-height: 26px;
}

.jam-hi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Scoped deliberately to plain links so .jam-hi-cta doesn't need !important
   to beat it. There is no theme to fight here — only my own specificity. */
.jam-hi a:not(.jam-hi-cta) { color: rgba(255, 255, 255, .85); font-weight: 500; }
.jam-hi a:not(.jam-hi-cta):hover { color: var(--white); }

/* Guest prompt — register/login should read as an invitation, not chrome. */
.jam-hi-cta {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .4px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 217, 107, .45);
  padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}
.jam-hi-cta:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}
.jam-hi-sep { color: rgba(255, 255, 255, .4); font-size: 12px; }

/*
 * In the slim guest strip the underline would crowd a 26px bar, so it goes.
 * The link keeps a taller invisible hit area via padding + negative margin,
 * so the tap target stays ~28px while the strip itself renders at 26px.
 * Without the negative margin the padding inflates the strip and defeats
 * the point of slimming it.
 */
.jam-logged-out .jam-hi-cta {
  font-size: 11.5px;
  border-bottom: none;
  padding: 7px 2px;
  margin: -7px 0;
}
.jam-logged-out .jam-hi-cta:hover { color: var(--white); }
.jam-logged-out .jam-hi-sep { font-size: 11px; }

.jam-live {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--gold);
  text-shadow: 0 1.5px 0 var(--gold-deep);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.jam-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: jam-pulse 1.4s infinite;
  flex-shrink: 0;
}

@keyframes jam-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.75); }
}

.jam-topbar-right { display: flex; align-items: center; gap: 12px; }

/* ---- Gold balance pill (the "lip" physics) ---- */
.jam-balance {
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .4px;
  padding: 5px 16px;
  border-radius: var(--pill);
  box-shadow: 0 3px 0 var(--gold-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .18s var(--spring), box-shadow .18s;
  white-space: nowrap;
}
.jam-balance:hover { color: var(--gold-ink); }
.jam-balance:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--gold-deep);
}

/* ============================================================
   MAIN BAR
   ============================================================ */

/* NOTE: no z-index, no position. See the logo block below — adding
   either here creates a stacking context and kills the logo bleed. */
.jam-bar {
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.jam-bar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  transition: height .35s ease;
}

/* ---- Sticky shrink ---- */
.jam-header.is-shrunk .jam-topbar { margin-top: -37px; }
/* The guest strip is slimmer, so it needs a smaller offset — using -37px
   would over-scroll and clip the white bar upward. */
.jam-logged-out .jam-header.is-shrunk .jam-topbar { margin-top: -26px; }
.jam-header.is-shrunk .jam-bar-in { height: var(--header-h-shrunk); }
.jam-header.is-shrunk .jam-logo-slot { bottom: var(--logo-drop-shrunk); }
.jam-header.is-shrunk .jam-logo-slot img,
.jam-header.is-shrunk .custom-logo { width: var(--logo-w-shrunk); }

/* ============================================================
   THE LOGO — centred, bleeding below the bar

   CRITICAL: .jam-logo-slot is a direct child of .jam-header, NOT of
   .jam-bar. .jam-topbar and .jam-bar must never be given a z-index or a
   position — either would create a stacking context that traps the logo
   inside the bar and kills the bleed. .jam-header is the only stacking
   context in this component.
   ============================================================ */

.jam-logo-slot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*
   * Anchored to the BOTTOM of .jam-header, not the top.
   *
   * The header's total height changes on scroll (the topbar margins itself
   * away by -37px and the bar shrinks). Measuring from the top meant the
   * logo stayed put while everything under it moved up, leaving it hanging
   * far below the bar in the shrunk state. The bottom edge is the thing the
   * logo actually bleeds out of, so anchoring there makes the topbar's
   * collapse irrelevant — one value works in both states.
   */
  bottom: var(--logo-drop);
  z-index: 100;
  line-height: 0;
  transition: bottom .35s ease;
  /* The slot is only as big as the logo; clicks pass through the
     transparent PNG corners to whatever is underneath. */
  pointer-events: none;
}
.jam-logo-slot a,
.jam-logo-slot img { pointer-events: auto; }

.jam-logo,
.custom-logo-link { display: inline-block; text-decoration: none; line-height: 0; }

.jam-logo-slot img,
.custom-logo {
  display: block;
  width: var(--logo-w);
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .3));
  transition: width .35s ease;
}

/* Reserves horizontal room between the two nav halves. */
.jam-logo-gap {
  flex-shrink: 0;
  width: calc(var(--logo-w) + 24px);
}

/* Text fallback, used only until a Custom Logo is set in the Customizer. */
.jam-logo-mark {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--jam-red);
  letter-spacing: .5px;
  text-shadow: 0 3px 0 var(--jam-red-deep), 0 0 20px rgba(227, 36, 59, .22);
  display: inline-block;
  transform: skewX(-6deg);
  line-height: 1.2;
  transition: font-size .35s ease;
}
.jam-header.is-shrunk .jam-logo-mark { font-size: 27px; }

/* ============================================================
   DESKTOP NAV
   ============================================================ */

/* Split nav: left half, logo gap, right half. Each half flexes so the
   logo stays optically centred regardless of how the items divide. */
.jam-nav { display: flex; align-items: center; gap: 2px; height: 100%; flex: 1; min-width: 0; }
.jam-nav-left { justify-content: flex-end; }
.jam-nav-right { justify-content: flex-start; }

.jam-link-wrap { position: relative; height: 100%; display: flex; align-items: center; }

.jam-link {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 3px 15px 0;
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: .5px;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}

.jam-link::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 13px;
  height: 3px;
  border-radius: 3px;
  background: var(--jam-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.jam-link:hover,
.jam-link.is-active,
.jam-link-wrap.is-open .jam-link { color: var(--jam-red); }

.jam-link:hover::after,
.jam-link.is-active::after,
.jam-link-wrap.is-open .jam-link::after { transform: scaleX(1); }

.jam-chev {
  font-family: var(--font-body);
  font-size: 9px;
  margin-left: 6px;
  transition: transform .25s;
  display: inline-block;
}
.jam-link-wrap.is-open .jam-chev { transform: rotate(180deg); }

/* ---- Mega dropdown ---- */
.jam-mega {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--white);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-pop);
  padding: 16px;
  display: grid;
  grid-template-columns: 224px 224px;
  gap: 6px;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}

.jam-link-wrap.is-open .jam-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

.jam-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, transform .15s;
}
.jam-mega-item:hover { background: #fdf0f1; transform: translateX(3px); color: var(--ink); }

.jam-mega-em { font-size: 22px; flex-shrink: 0; }
.jam-mega-txt b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: .3px;
}
.jam-mega-txt span { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* ---- CTA ---- */
.jam-cta {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .6px;
  background: var(--jam-grad);
  color: var(--cream);
  padding: 12px 26px;
  border-radius: var(--pill);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--jam-red-deep), 0 8px 18px rgba(227, 36, 59, .32);
  text-shadow: 0 2px 0 rgba(142, 19, 34, .45);
  transition: transform .18s var(--spring), box-shadow .18s;
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.jam-cta:hover { color: var(--cream); }
.jam-cta:active {
  transform: translateY(var(--lip));
  box-shadow: 0 0 0 var(--jam-red-deep), 0 3px 10px rgba(227, 36, 59, .3);
}
.jam-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: jam-sweep 3.2s ease-in-out infinite;
}

@keyframes jam-sweep {
  0%, 100% { transform: translateX(-40%); }
  50%      { transform: translateX(380%); }
}

.jam-bar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ============================================================
   BURGER
   ============================================================ */

.jam-burger {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--jam-grad);
  border: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 0 var(--jam-red-deep), 0 8px 16px rgba(227, 36, 59, .4);
  transition: transform .22s var(--spring), box-shadow .22s;
  flex-shrink: 0;
  padding: 0;
}
.jam-burger:active {
  transform: translateY(var(--lip));
  box-shadow: 0 0 0 var(--jam-red-deep), 0 3px 8px rgba(227, 36, 59, .35);
}

.jam-burger i {
  position: absolute;
  left: 12px; right: 12px;
  height: 3px;
  border-radius: 3px;
  background: var(--cream);
  transition: all .3s var(--spring);
}
.jam-burger i:nth-child(1) { top: 15px; }
.jam-burger i:nth-child(2) { top: 21.5px; }
.jam-burger i:nth-child(3) { top: 28px; }

.jam-burger.is-x i:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.jam-burger.is-x i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.jam-burger.is-x i:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }

/* ============================================================
   MOBILE TAKEOVER
   ============================================================ */

.jam-takeover {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--jam-grad);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  clip-path: circle(0 at calc(100% - 39px) 73px);
  transition: clip-path .55s var(--ease);
}

.jam-takeover.is-open { clip-path: circle(150% at calc(100% - 39px) 73px); }

/* hidden attr is removed by JS on first open so the reveal can animate */
.jam-takeover[hidden] { display: none; }

.jam-t-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter) 6px;
  flex-shrink: 0;
}

.jam-t-logo {
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--cream);
  letter-spacing: .4px;
  text-shadow: 0 2.5px 0 var(--jam-red-deep);
  display: inline-block;
  transform: skewX(-6deg);
}

.jam-t-close {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .45);
  cursor: pointer;
  position: relative;
  transition: transform .25s var(--spring), background .2s;
  flex-shrink: 0;
  padding: 0;
}
.jam-t-close:hover { background: rgba(255, 255, 255, .25); }
.jam-t-close:active { transform: scale(.88) rotate(90deg); }

.jam-t-close i {
  position: absolute;
  left: 13px; right: 13px; top: 21px;
  height: 3px;
  border-radius: 3px;
  background: var(--cream);
}
.jam-t-close i:nth-child(1) { transform: rotate(45deg); }
.jam-t-close i:nth-child(2) { transform: rotate(-45deg); }

/* ---- Takeover nav ---- */
.jam-t-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 26px;
  gap: 2px;
}

.jam-t-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: .5px;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--jam-red-deep), 0 0 20px var(--gold-glow);
  padding: 8px 0;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity .4s ease, transform .45s var(--spring);
}
.jam-t-item:hover { color: var(--cream); }

.jam-takeover.is-open .jam-t-item { opacity: 1; transform: translateX(0); }

.jam-takeover.is-open .jam-t-item:nth-child(1) { transition-delay: .18s; }
.jam-takeover.is-open .jam-t-item:nth-child(2) { transition-delay: .25s; }
.jam-takeover.is-open .jam-t-item:nth-child(3) { transition-delay: .32s; }
.jam-takeover.is-open .jam-t-item:nth-child(4) { transition-delay: .39s; }
.jam-takeover.is-open .jam-t-item:nth-child(5) { transition-delay: .46s; }
.jam-takeover.is-open .jam-t-item:nth-child(6) { transition-delay: .53s; }
.jam-takeover.is-open .jam-t-item:nth-child(7) { transition-delay: .60s; }
.jam-takeover.is-open .jam-t-item:nth-child(8) { transition-delay: .67s; }

.jam-t-em { font-size: 23px; text-shadow: none; flex-shrink: 0; }

.jam-t-badge {
  font-family: var(--font-display);
  font-size: 11px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  padding: 3px 10px;
  border-radius: var(--pill);
  text-shadow: none;
  letter-spacing: .4px;
}

/* Sub-items render as a quiet indented row under their parent */
.jam-t-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px 38px; }
.jam-t-subitem {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 5px 12px;
  border-radius: var(--pill);
  text-decoration: none;
}
.jam-t-subitem:hover { background: rgba(255, 255, 255, .22); color: var(--white); }

/* ---- Wallet card ---- */
.jam-t-wallet {
  margin: 0 var(--gutter) 24px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--card-r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .45s ease .6s, transform .45s ease .6s;
  flex-shrink: 0;
}
.jam-takeover.is-open .jam-t-wallet { opacity: 1; transform: translateY(0); }

.jam-t-who b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cream);
  letter-spacing: .3px;
}
.jam-t-who a { font-size: 12px; color: rgba(255, 255, 255, .8); font-weight: 500; }

.jam-t-amt {
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 15px;
  padding: 8px 18px;
  border-radius: var(--pill);
  box-shadow: 0 3px 0 var(--gold-deep);
  text-decoration: none;
  transition: transform .18s var(--spring), box-shadow .18s;
  white-space: nowrap;
}
.jam-t-amt:hover { color: var(--gold-ink); }
.jam-t-amt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--gold-deep); }

/* ---- Confetti ---- */
.jam-confetti {
  position: fixed;
  width: 9px; height: 9px;
  border-radius: 2px;
  z-index: 950;
  pointer-events: none;
}

/* Lock scroll behind the takeover */
body.jam-menu-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .jam-link { padding: 3px 11px 0; font-size: 13.5px; }
  .jam-link::after { left: 11px; right: 11px; }
}

@media (max-width: 960px) {
  .jam-mobile-only.jam-mobile-only { display: inline-flex; }
  .jam-desktop-only.jam-desktop-only { display: none; }

  .jam-nav { display: none; }
  .jam-logo-gap { display: none; }

  /* Layout A: burger left, logo centred, balance/spacer right — the
     three-slot layout. Centring fills the dead space the left-pinned
     logo left behind, and an 80px bar lets the logo be meaningfully
     bigger while staying fully contained (no bleed on mobile). */
  .jam-bar-in {
    height: 80px;
    justify-content: space-between;
    padding-left: 14px;
  }
  .jam-header.is-shrunk .jam-bar-in {
    height: 64px;
    padding-left: 14px;
  }

  /*
   * Mobile: logo CENTRED in the bar, contained (no bleed).
   *
   * It stays position:absolute — NOT static. In the markup .jam-logo-slot is
   * a sibling *after* .jam-bar (so it can bleed on desktop), so returning it
   * to normal flow renders it below the bar entirely, leaving the burger
   * alone in the bar. Absolute keeps it visually correct regardless of
   * source order.
   *
   * Offsets are in px, not %, because a percentage resolves against the whole
   * header (topbar included) and pushes the logo up into the red strip.
   */
  .jam-logo-slot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7px;
    display: flex;
    align-items: center;
    pointer-events: auto;
    transition: bottom .35s ease;
  }
  .jam-header.is-shrunk .jam-logo-slot { bottom: 6px; }
  .jam-logo-slot img,
  .custom-logo {
    width: var(--logo-w-mobile);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .24));
  }
  .jam-header.is-shrunk .jam-logo-slot img,
  .jam-header.is-shrunk .custom-logo {
    width: var(--logo-w-mobile-shrunk);
  }

  .jam-logo-slot img,
  .custom-logo,
  .jam-header.is-shrunk .jam-logo-slot img,
  .jam-header.is-shrunk .custom-logo {
    width: var(--logo-w-mobile);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22));
  }

  /* Keeps the centred logo optically centred when there's no balance pill. */
  .jam-bar-spacer { display: block; width: 44px; height: 1px; }

  .jam-logo-mark { font-size: 26px; }
  .jam-header.is-shrunk .jam-logo-mark { font-size: 23px; }

  .jam-topbar-in { padding: 7px 14px; font-size: 12.5px; }
  /* Keep the slim guest strip slim on mobile — the shorthand above would
     otherwise reset its 4px vertical padding back to 7px. */
  .jam-logged-out .jam-topbar-in { padding: 4px 14px; }
  /* NOTE: no `padding` shorthand on .jam-bar-in here — it would reset the
     padding-left above that keeps the burger clear of the logo. */
  .jam-bar-in { padding-right: 14px; }

  /* On mobile the balance lives in the white bar, not the topbar */
  .jam-topbar-right { display: none; }

  .jam-live { font-size: 11.5px; }

  .jam-header.is-shrunk .jam-topbar { margin-top: -34px; }
  .jam-logged-out .jam-header.is-shrunk .jam-topbar { margin-top: -26px; }
}

@media (max-width: 560px) {
  .jam-hi { font-size: 12px; }
  .jam-live { display: none; }
  .jam-t-item { font-size: 25px; }
  .jam-balance { font-size: 12.5px; padding: 5px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .jam-takeover { transition: none; clip-path: none; opacity: 0; pointer-events: none; }
  .jam-takeover.is-open { opacity: 1; pointer-events: auto; }
  .jam-t-item, .jam-t-wallet { opacity: 1; transform: none; transition: none; }
  .jam-cta::after, .jam-dot { animation: none; }
}