/* ==========================================================================
   WBA Play — Shared CSS
   --------------------------------------------------------------------------
   Tokens, section primitives, and shared components used across all Play
   sub-pages (Junior Domestic, Senior Domestic, Senior Mixed, etc.).

   Inherits brand tokens from the parent theme's style.css. Defensive
   fallbacks ensure the addon renders correctly even if the theme's tokens
   haven't loaded yet.
   ========================================================================== */

.jd-page,
.jc-page,
.sd-page,
.sm-page,
.wh-page,
.ph-page,
.play-page {
  --pp-red:        var(--wba-red,        #C1272D);
  --pp-orange:     var(--wba-orange,     #F7931E);
  --pp-near-black: var(--wba-near-black, #1A1A1A);
  --pp-white:      var(--wba-white,      #FFFFFF);
  --pp-warm:       var(--wba-warm-white, #F8F8F6);
  --pp-border:     var(--wba-border,     #E6E6E2);
  --pp-muted:      var(--wba-muted,      #888888);
  --pp-ink-dim:    #4a4a4a;

  --pp-radius-sm: 8px;
  --pp-radius-md: 14px;
  --pp-radius-lg: 22px;

  --pp-section-pad: clamp( 56px, 8vw, 112px );
  --pp-container:   1240px;
  --pp-gutter:      clamp( 18px, 4vw, 40px );

  --pp-shadow-soft: 0 1px 2px rgba(26,26,26,.04), 0 12px 30px -12px rgba(26,26,26,.08);
  --pp-shadow-lift: 0 1px 2px rgba(26,26,26,.06), 0 22px 50px -18px rgba(26,26,26,.18);

  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--pp-near-black);
  background: var(--pp-white);
  overflow-x: clip;
}

/* Section container ----------------------------------------------------- */
.jd-section__inner {
  max-width: var(--pp-container);
  margin: 0 auto;
  padding: 0 var(--pp-gutter);
}

/* Section heading block ------------------------------------------------- */
.jd-section__head {
  max-width: 760px;
  margin: 0 0 56px;
}
.jd-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.jd-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pp-muted);
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
}
.jd-eyebrow--red   { color: var(--pp-red); }
.jd-eyebrow--white { color: rgba(255,255,255,.72); }

.jd-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp( 30px, 4.4vw, 54px );
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--pp-near-black);
}
.jd-h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--pp-near-black);
}
.jd-h2--white          { color: #fff; }
.jd-h2--white em       { color: rgba(255,255,255,.78); }

.jd-section__lede {
  font-size: clamp( 16px, 1.4vw, 19px );
  line-height: 1.55;
  color: var(--pp-ink-dim);
  margin: 0;
}
.jd-section__lede em {
  font-style: italic;
  color: var(--pp-near-black);
}
.jd-section__lede--white {
  color: rgba(255,255,255,.78);
}
.jd-section__lede--white em {
  color: #fff;
}

.jd-lead-p {
  font-size: clamp( 16px, 1.3vw, 18px );
  line-height: 1.55;
  margin: 0 0 18px;
}

/* Buttons --------------------------------------------------------------- */
.jd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  border: 2px solid transparent;
  cursor: pointer;
}
.jd-btn:hover { transform: translateY(-2px); }

.jd-btn--primary {
  background: var(--pp-red);
  color: #fff;
}
.jd-btn--primary:hover {
  background: #a51f24;
  color: #fff;
}

.jd-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.jd-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
}

.jd-btn--white {
  background: #fff;
  color: var(--pp-near-black);
}
.jd-btn--white:hover {
  background: var(--pp-warm);
  color: var(--pp-red);
}

/* Anchor nav (sticky jump-list) ----------------------------------------- */
.jd-anchors {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--pp-border);
}
.jd-anchors__inner {
  max-width: var(--pp-container);
  margin: 0 auto;
  padding: 0 var(--pp-gutter);
  display: flex;
  gap: clamp( 18px, 2.4vw, 36px );
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.jd-anchors__inner::-webkit-scrollbar { display: none; }

.jd-anchors a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 56px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pp-near-black);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.jd-anchors a:hover {
  color: var(--pp-red);
  border-color: var(--pp-red);
}

/* Hide top border under sticky bar when navigated to ------------------- */
.jd-page section[id],
.jc-page section[id],
.sd-page section[id],
.sm-page section[id],
.wh-page section[id],
.ph-page section[id],
.jc-card[id] {
  scroll-margin-top: 110px;
}

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jd-btn,
  .jd-anchors a,
  .jd-card,
  .jd-club {
    transition: none !important;
  }
  .jd-btn:hover { transform: none; }
}

/* Mobile guard rails ---------------------------------------------------- */
@media (max-width: 640px) {
  .jd-section__head { margin-bottom: 36px; }
  .jd-anchors a { height: 48px; }
}


/* ==========================================================================
   MODERN UTILITIES — added in the Play-section design pass.
   ========================================================================== */

/* SVG icons via wba_play_icon() ----------------------------------------- */
.wba-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  line-height: 1;
}
.wba-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* In the small uppercase eyebrow, sit icons proud of the text */
.jd-eyebrow .wba-icon {
  font-size: 1.25em;
  margin-right: 8px;
  color: var(--pp-red);
}
.jd-eyebrow--white .wba-icon { color: var(--pp-orange); }

/* In hero meta pills */
.jd-hero__meta .wba-icon {
  font-size: 1.05em;
  margin-right: 4px;
}

/* Inside buttons / footer-links */
.jd-btn .wba-icon { font-size: 1em; margin-right: 6px; }


/* Scroll-triggered fade-up reveal --------------------------------------- */
.wba-fade-up {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .65s cubic-bezier(.2,.7,.2,1),
    transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.wba-fade-up.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wba-fade-up { opacity: 1; transform: none; transition: none; }
}


/* Reusable decorative background numeral --------------------------------
   Apply `.wba-bg-num` on a grid container to start the counter, then on
   each child item to draw a giant faded numeral behind the content.

   Example:
     <div class="my-grid wba-bg-num">
       <article class="my-card">…</article>
       <article class="my-card">…</article>
     </div>

   The card needs `position: relative; overflow: hidden;` and any text
   content needs `position: relative; z-index: 1;` to sit above. */
.wba-bg-num { counter-reset: wba-bg; }
.wba-bg-num > * { counter-increment: wba-bg; position: relative; }
.wba-bg-num > *::before {
  content: counter( wba-bg, decimal-leading-zero );
  position: absolute;
  bottom: -22px;
  right: -8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 200px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--pp-near-black);
  opacity: 0.04;
  pointer-events: none;
  transition: opacity .35s ease, color .35s ease;
  z-index: 0;
}
.wba-bg-num > *:hover::before {
  opacity: 0.10;
  color: var(--pp-red);
}


/* ============================================================
   BEHAVIOURAL MANAGEMENT FRAMEWORK (shared across Play sub-pages)
   ============================================================ */
.jd-bmf {
  background: var(--pp-near-black);
  color: #fff;
  padding: var(--pp-section-pad) 0;
  position: relative;
  overflow: hidden;
}
.jd-bmf::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient( circle, rgba(193,39,45,.18), transparent 70% );
  pointer-events: none;
}

.jd-bmf__grid {
  display: grid;
  grid-template-columns: repeat( 3, 1fr );
  gap: 24px;
  position: relative;
  z-index: 2;
}
.jd-bmf__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--pp-radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.jd-bmf__card:hover {
  transform: translateY(-4px);
  border-color: var(--pp-red);
  background: rgba(193,39,45,.06);
}
.jd-bmf__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--pp-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  flex-shrink: 0;
}
/* Force icon SVGs to a uniform size and remove baseline whitespace
   regardless of the icon's source viewBox. */
.jd-bmf__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}
.jd-bmf__card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
  color: #fff;
}
.jd-bmf__card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0;
}
.jd-bmf__card p em { font-style: italic; color: #fff; }

@media (max-width: 920px) {
  .jd-bmf__grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
}