/* ==========================================================================
   MBJJ v4.2 display layer
   Loaded after club.css + schedule.css. Adds:
   1. Brand type + readability defaults (both themes)
   2. Accessible accent usage (yellow is never small text on white)
   3. Focus, tap-target and motion safety
   4. Dark theme
   5. Text size + high contrast preferences
   6. The Display panel itself
   ========================================================================== */

/* --- 1. Type + readability ------------------------------------------------ */
:root{
  --mbjj-on-accent:#111;
  --mbjj-surface:#fff;
  --mbjj-canvas:#111;
  --mbjj-body-size:1.0625rem;
}
.mbjj-block :is(h1,h2,h3,h4),
.mbjj-schedule :is(h1,h2,h3),
.mbjj-program-body h3,
.mbjj-price{
  font-family:var(--mbjj-font-display,inherit);
  text-wrap:balance;
}
/* Big uppercase headings: keep the punch, loosen the squeeze so words stay legible. */
.mbjj-block :is(h1,h2){letter-spacing:-.035em!important;line-height:.95!important}
.mbjj-block h3{letter-spacing:-.02em!important;line-height:1.1}
.mbjj-block :is(p,li,dd){
  font-size:max(var(--mbjj-body-size),1em);
  line-height:1.62;
  text-wrap:pretty;
}
.mbjj-block :is(.mbjj-lead,.mbjj-hero-copy p,.mbjj-start-card-copy p,.mbjj-sorriso-copy p){max-width:62ch}
.mbjj-block :is(small,.mbjj-small-note,.mbjj-tag,.mbjj-badge){line-height:1.35}

/* Hero tagline reads as a statement, not a footnote. */
.mbjj-hero-copy p{font-size:clamp(1.15rem,1rem + .6vw,1.45rem)!important;font-weight:700;letter-spacing:-.01em}

/* Blocksy header menu: bigger, brand font, no off-brand purple active state. */
.ct-header .ct-menu-link{font-family:var(--mbjj-font-body,inherit);font-size:clamp(12px,.42vw + 8.6px,14px)!important;font-weight:800!important;letter-spacing:.03em}
.ct-header [data-id="menu"] .menu>li>.ct-menu-link{position:relative}
.ct-header :is(.current-menu-item,.current_page_item)>.ct-menu-link{color:var(--mbjj-ink,#111)!important}
.ct-header [data-id="menu"] :is(.current-menu-item,.current_page_item)>.ct-menu-link::after{
  content:"";position:absolute;left:var(--menu-items-spacing,12px);right:var(--menu-items-spacing,12px);bottom:calc(50% - 1.1em);
  height:3px;border-radius:2px;background:var(--mbjj-accent,#fcbf28);
}
/* "Try a free class" in the menu becomes the call-to-action pill.
   Works automatically for links to the trial anchor, or add CSS class mbjj-menu-cta to any menu item. */
.ct-header [data-id="menu"] .menu>li:is(.mbjj-menu-cta,:has(>a[href*="try-free-class"],>a[href$="/trial/"]))>.ct-menu-link{
  background:var(--mbjj-accent,#fcbf28);color:var(--mbjj-on-accent,#111)!important;border-radius:999px;
  height:auto!important;min-height:40px;padding:0 16px!important;margin-inline:6px;
}
.ct-header [data-id="menu"] .menu>li:is(.mbjj-menu-cta,:has(>a[href*="try-free-class"],>a[href$="/trial/"]))>.ct-menu-link::after{display:none}
.ct-header [data-id="menu"] .menu>li:is(.mbjj-menu-cta,:has(>a[href*="try-free-class"],>a[href$="/trial/"]))>.ct-menu-link:hover{background:var(--mbjj-ink,#111);color:#fff!important}

/* Eyebrows: slightly larger, a little less tracking. */
.mbjj-eyebrow{font-size:.8rem!important;letter-spacing:.14em!important}

/* --- 2. Accent contrast ---------------------------------------------------
   The partner accent (yellow on the live site) is ~1.6:1 on white, so on light
   cards eyebrows become ink with an accent marker. On dark surfaces the accent
   text stays (12:1 on #111). */
.mbjj-eyebrow{color:var(--mbjj-ink,#111)}
.mbjj-eyebrow::before{
  content:"";display:inline-block;width:1.4em;height:.32em;margin-right:.55em;
  vertical-align:.18em;border-radius:2px;background:var(--mbjj-accent,#fcbf28);
}
.mbjj-hero-copy .mbjj-eyebrow::before,
.mbjj-program-body .mbjj-eyebrow::before{display:none}
.mbjj-sorriso-nation .mbjj-eyebrow,
.mbjj-footer .mbjj-eyebrow{color:var(--mbjj-accent,#fcbf28)}

/* Text sitting on the accent colour picks black or white automatically (set by PHP). */
.mbjj-button:hover,.mbjj-filter-set button:hover,.mbjj-filter-set button.active,
.mbjj-badge,.mbjj-badge-inline{color:var(--mbjj-on-accent,#111)!important}
.mbjj-badge[style*="--belt"],.mbjj-card-strip + .mbjj-badge{color:#fff!important}

/* Links inside running copy are clearly links. */
.mbjj-block:not(.mbjj-footer) p a:not(.mbjj-button){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--mbjj-accent,#fcbf28)}

/* --- 3. Focus, targets, motion -------------------------------------------- */
:is(.mbjj-block,.mbjj-schedule,.mbjj-display,.mbjj-footer,.ct-header) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mbjj-accent,#fcbf28)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 6px #111!important;
  border-radius:inherit;
}
.mbjj-button,.mbjj-filter-set button{min-height:44px;padding-inline:20px}

/* Hero actions (new in v4.2) */
.mbjj-hero-actions{margin-top:22px}
.mbjj-hero-actions .mbjj-button{font-size:1rem;min-height:48px;padding-inline:22px}
.mbjj-hero-actions .mbjj-button-primary{background:var(--mbjj-accent,#fcbf28);border-color:var(--mbjj-accent,#fcbf28);color:var(--mbjj-on-accent,#111)!important}
.mbjj-hero-actions .mbjj-button-primary:hover{background:var(--mbjj-ink,#111);border-color:var(--mbjj-ink,#111);color:var(--mbjj-surface,#fff)!important}

@media (prefers-reduced-motion:reduce){
  .mbjj-block *,.mbjj-schedule *,.mbjj-display *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[data-mbjj-motion="reduced"]{scroll-behavior:auto!important}
html[data-mbjj-motion="reduced"] *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html[data-mbjj-motion="reduced"] :is(.mbjj-member-card,.mbjj-tech-card,.mbjj-gallery-card,.mbjj-button):hover{transform:none!important}
html[data-mbjj-motion="reduced"] .mbjj-gallery-card:hover .mbjj-gallery-media img{transform:none!important}

/* --- 4. Dark theme ---------------------------------------------------------
   Same black/white identity, inverted: charcoal cards on a black canvas,
   white type, accent used for emphasis. Custom properties use !important so
   they also beat the inline style="--mbjj-ink:…" the shortcodes print. */
html[data-mbjj-theme="dark"]{color-scheme:dark}
html[data-mbjj-theme="dark"],
html[data-mbjj-theme="dark"] [class*="mbjj-"]{
  --mbjj-paper:#202020!important;
  --mbjj-ink:#f5f5f3!important;
  --mbjj-muted:#c9c9c5!important;
  --mbjj-line:#353535!important;
  --mbjj-surface:#161616;
  --mbjj-canvas:#0a0a0a;
}
html[data-mbjj-theme="dark"] body,
html[data-mbjj-theme="dark"] #main-container,
html[data-mbjj-theme="dark"] .site-main{background-color:var(--mbjj-canvas)!important;color:var(--mbjj-ink)}

/* Every light card/surface the plugin prints */
html[data-mbjj-theme="dark"] :is(
  .mbjj-panel,.mbjj-hero,.mbjj-join-cta,.mbjj-pathway,.mbjj-start-card,.mbjj-first-card,.mbjj-optional,
  .mbjj-gallery,.mbjj-gallery-card,.mbjj-member-card,.mbjj-tech-card,.mbjj-plan,.mbjj-announcement,
  .mbjj-milestone,.mbjj-login-box,.mbjj-dashboard,.mbjj-kids-card,.mbjj-ladder-item,.mbjj-haka,
  .mbjj-haka-line.is-leader,.mbjj-haka-action,.mbjj-haka-number,.mbjj-empty,.mbjj-check-grid label,
  .mbjj-access-gate,.mbjj-access-ok,.mbjj-member-welcome,.mbjj-program-page-hero,.mbjj-belt-ladder,
  .mbjj-coach-card,.mbjj-event-card,.mbjj-testimonial,.mbjj-form,.mbjj-contact-form,.mbjj-trial-form,
  .mbjj-waiver-form,.mbjj-hub-link,.mbjj-hub-nav a,.mbjj-gallery-lightbox-frame,.mbjj-gallery-lightbox-close
){
  background:var(--mbjj-surface)!important;
  color:var(--mbjj-ink)!important;
  border-color:var(--mbjj-line)!important;
  box-shadow:none!important;
}
html[data-mbjj-theme="dark"] .mbjj-hero{border-color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .mbjj-hero:after{border-color:#1d1d1d!important}
html[data-mbjj-theme="dark"] :is(.mbjj-stat-card,.mbjj-mini-stats div,.mbjj-quote,.mbjj-profile-editor,.mbjj-haka-line,.mbjj-gallery-media,.mbjj-pathway li span){background:var(--mbjj-paper)!important;border-color:var(--mbjj-line)!important}
html[data-mbjj-theme="dark"] .mbjj-gallery-placeholder{background:repeating-linear-gradient(135deg,#1a1a1a 0,#1a1a1a 12px,#222 12px,#222 24px)!important}

/* Headings/copy that older layers hard-coded to #111 */
html[data-mbjj-theme="dark"] :is(.mbjj-block,.mbjj-schedule-embed,.mbjj-schedule) :is(h1,h2,h3,h4,strong,label,legend,dt,dd,summary,.mbjj-price),
html[data-mbjj-theme="dark"] .mbjj-hero-copy :is(h1,p,.mbjj-eyebrow),
html[data-mbjj-theme="dark"] .mbjj-schedule-embed{color:var(--mbjj-ink)!important}
html[data-mbjj-theme="dark"] :is(.mbjj-block,.mbjj-schedule) :is(p,li,small,em,time,.mbjj-small-note,.mbjj-lead,.mbjj-detail-line){color:var(--mbjj-muted)!important}
html[data-mbjj-theme="dark"] .mbjj-sorriso-nation .mbjj-eyebrow{color:var(--mbjj-accent,#fcbf28)!important}

/* Buttons: inverted pair */
html[data-mbjj-theme="dark"] .mbjj-button{background:#f5f5f3!important;border-color:#f5f5f3!important;color:#111!important}
html[data-mbjj-theme="dark"] .mbjj-button-outline{background:transparent!important;color:#f5f5f3!important;border-color:#f5f5f3!important}
html[data-mbjj-theme="dark"] :is(.mbjj-button,.mbjj-button-outline):hover{background:var(--mbjj-accent,#fcbf28)!important;border-color:var(--mbjj-accent,#fcbf28)!important;color:var(--mbjj-on-accent,#111)!important}
html[data-mbjj-theme="dark"] .mbjj-hero-actions .mbjj-button-primary{background:var(--mbjj-accent,#fcbf28)!important;border-color:var(--mbjj-accent,#fcbf28)!important;color:var(--mbjj-on-accent,#111)!important}
html[data-mbjj-theme="dark"] .mbjj-tag{background:#f5f5f3!important;color:#111!important}
html[data-mbjj-theme="dark"] .mbjj-filter-set button{background:#1d1d1d!important;color:#f5f5f3!important;border-color:#3a3a3a!important}

/* Forms */
html[data-mbjj-theme="dark"] .mbjj-block :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea){
  background:#0f0f0f!important;color:#f5f5f3!important;border-color:#4a4a4a!important;
}
html[data-mbjj-theme="dark"] .mbjj-block :is(input,textarea)::placeholder{color:#8d8d89!important}
html[data-mbjj-theme="dark"] .mbjj-block select option{background:#0f0f0f;color:#f5f5f3}

/* The club logo stays a white emblem; a hairline ring stops it floating */
html[data-mbjj-theme="dark"] .mbjj-logo-card{background:#fff!important;border-color:#f5f5f3!important;box-shadow:0 0 0 8px #1d1d1d!important}
html[data-mbjj-theme="dark"] .mbjj-footer-logo{background:#fff!important}

/* Timetable */
html[data-mbjj-theme="dark"] :is(.mbjj-schedule,.mbjj-schedule-timegrid,.mbjj-timegrid-body,.mbjj-timegrid-corner,.mbjj-timegrid-day-name,.mbjj-calendar-panel,.mbjj-calendar-choice,.mbjj-single,.mbjj-selected-count,.mbjj-weekend-panel,.mbjj-weekday-panel,.mbjj-schedule-tooltip,.mbjj-schedule-footer,.mbjj-notice){
  background:var(--mbjj-surface)!important;color:var(--mbjj-ink)!important;border-color:var(--mbjj-line)!important;box-shadow:none!important;
}
html[data-mbjj-theme="dark"] :is(.mbjj-select-all,.mbjj-clear-all,.mbjj-toolbar-actions button){background:#1f1f1f!important;color:#f5f5f3!important;border-color:#444!important}
html[data-mbjj-theme="dark"] .mbjj-timegrid-day-name{background:#1b1b1b!important}
html[data-mbjj-theme="dark"] .mbjj-day-bg{background:#141414!important}
html[data-mbjj-theme="dark"] .mbjj-time-line{border-color:#2a2a2a!important}
html[data-mbjj-theme="dark"] .mbjj-time-label{color:#a9a9a5!important}
html[data-mbjj-theme="dark"] .mbjj-timegrid-wrap{background:#141414!important}

/* Blocksy header + mobile menu */
html[data-mbjj-theme="dark"] :is(.ct-header,[data-row],#header [data-row]){background-color:#0a0a0a!important;border-color:#222!important}
html[data-mbjj-theme="dark"] .ct-header :is(.ct-menu-link,a,.ct-label){color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-header .current-menu-item>.ct-menu-link{color:var(--mbjj-accent,#fcbf28)!important}
html[data-mbjj-theme="dark"] .ct-header .ct-icon,html[data-mbjj-theme="dark"] .ct-header svg{fill:#f5f5f3}
html[data-mbjj-theme="dark"] .site-logo-container img,
html[data-mbjj-theme="dark"] .ct-header .site-logo-container img{background:#fff;border-radius:50%}
html[data-mbjj-theme="dark"] #offcanvas .ct-panel-inner{background:#0a0a0a!important}
html[data-mbjj-theme="dark"] #offcanvas a{color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-footer,html[data-mbjj-theme="dark"] footer.ct-footer [data-row]{background-color:#0a0a0a!important}

/* --- 5. Text size + contrast ---------------------------------------------- */
html[data-mbjj-text="large"]{font-size:112.5%!important}
html[data-mbjj-text="xlarge"]{font-size:125%!important}
html[data-mbjj-text="large"] body{font-size:1.125rem}
html[data-mbjj-text="xlarge"] body{font-size:1.25rem}
html[data-mbjj-text="large"] .mbjj-block :is(p,li,dd){font-size:1.12rem}
html[data-mbjj-text="xlarge"] .mbjj-block :is(p,li,dd){font-size:1.22rem;line-height:1.68}
html[data-mbjj-text="xlarge"] .mbjj-eyebrow{font-size:.9rem!important}

html[data-mbjj-contrast="high"] [class*="mbjj-"]{--mbjj-muted:#111!important;--mbjj-line:#111!important}
html[data-mbjj-theme="light"][data-mbjj-contrast="high"] :is(.mbjj-hero,.mbjj-panel:not(.mbjj-program-links),.mbjj-start-card,.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card,.mbjj-kids-card,.mbjj-schedule) :is(p,li,small,em,time,.mbjj-small-note){color:#111!important}
html[data-mbjj-theme="light"][data-mbjj-contrast="high"] :is(.mbjj-sorriso-nation,.mbjj-program-card) :is(p,li,small,em,time){color:#fff!important}
html[data-mbjj-theme][data-mbjj-contrast="high"] .mbjj-schedule :is(.mbjj-class-block,.mbjj-weekend-class) :is(p,li,small,em,time,span,.mbjj-class-group){color:#fff!important}
html[data-mbjj-contrast="high"] :is(.mbjj-panel,.mbjj-start-card,.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card){border:2px solid #111!important}
html[data-mbjj-contrast="high"] .mbjj-block a:not(.mbjj-button){text-decoration:underline!important;text-decoration-color:currentColor!important}
html[data-mbjj-theme="dark"][data-mbjj-contrast="high"],
html[data-mbjj-theme="dark"][data-mbjj-contrast="high"] [class*="mbjj-"]{--mbjj-muted:#fff!important;--mbjj-line:#bdbdbd!important;--mbjj-ink:#fff!important;--mbjj-surface:#000;--mbjj-canvas:#000}
html[data-mbjj-theme="dark"][data-mbjj-contrast="high"] :is(.mbjj-block,.mbjj-schedule) :is(p,li,small,em,time,.mbjj-small-note){color:#fff!important}
html[data-mbjj-theme="dark"][data-mbjj-contrast="high"] :is(.mbjj-panel,.mbjj-start-card,.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card){border:2px solid #bdbdbd!important}

/* --- 6. Display panel ------------------------------------------------------ */
.mbjj-display{position:fixed;left:16px;bottom:16px;z-index:99990;font-family:var(--mbjj-font-body,inherit);color:#111}
.mbjj-display-toggle{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#111;color:#fff;border:2px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.mbjj-display-toggle svg{width:26px;height:26px;fill:currentColor}
.mbjj-display-toggle:hover{background:var(--mbjj-accent,#fcbf28);color:var(--mbjj-on-accent,#111)}
.mbjj-display-panel{
  position:absolute;left:0;bottom:calc(100% + 12px);width:min(330px,calc(100vw - 32px));
  background:#fff;color:#111;border:2px solid #111;border-radius:18px;padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.mbjj-display-panel[hidden]{display:none!important}
.mbjj-display-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.mbjj-display-head strong{display:block;font-family:var(--mbjj-font-display,inherit);font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.mbjj-display-head small{display:block;font-size:.82rem;color:#555;margin-top:2px}
.mbjj-display-close{width:36px;height:36px;border-radius:50%;border:2px solid #111;background:#fff;color:#111;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.mbjj-display fieldset{border:0;margin:0 0 12px;padding:0}
.mbjj-display fieldset{min-inline-size:0;border:0!important;margin:0 0 12px!important;padding:0!important}
.mbjj-display legend{display:block;float:left;width:100%;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin:0 0 7px!important;padding:0!important;border:0!important}
.mbjj-display legend + .mbjj-display-options{clear:both}
.mbjj-display-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mbjj-display-options.is-two{grid-template-columns:repeat(2,1fr)}
.mbjj-display-options button,.mbjj-display-reset{
  min-height:42px;border-radius:12px;border:2px solid #d6d6d6;background:#f4f4f2;color:#111;
  font:800 .86rem/1.1 var(--mbjj-font-body,inherit);cursor:pointer;padding:6px 8px;
}
.mbjj-display-options button[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.mbjj-display-options button[aria-pressed="true"]::after{content:" ✓"}
.mbjj-display-reset{width:100%;background:transparent;border-style:dashed}
html[data-mbjj-theme="dark"] .mbjj-display-toggle{background:#f5f5f3;color:#111;border-color:#111}
html[data-mbjj-theme="dark"] .mbjj-display-panel{background:#161616;color:#f5f5f3;border-color:#f5f5f3}
html[data-mbjj-theme="dark"] .mbjj-display-head small{color:#bdbdb9}
html[data-mbjj-theme="dark"] .mbjj-display-close{background:#161616;color:#f5f5f3;border-color:#f5f5f3}
html[data-mbjj-theme="dark"] :is(.mbjj-display-options button,.mbjj-display-reset){background:#222;color:#f5f5f3;border-color:#3d3d3d}
html[data-mbjj-theme="dark"] .mbjj-display-options button[aria-pressed="true"]{background:#f5f5f3;color:#111;border-color:#f5f5f3}
.mbjj-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.mbjj-display{left:12px;bottom:12px}.mbjj-display-toggle{width:48px;height:48px}}
@media print{.mbjj-display{display:none!important}}

/* Dark hero eyebrow pill (older layer forces a white pill background) */
html[data-mbjj-theme="dark"] .mbjj-hero-copy .mbjj-eyebrow{background:transparent!important;border-color:#f5f5f3!important;color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .mbjj-hero:before{background:#f5f5f3!important}

/* Timetable in dark mode: lift the class blocks off the grid, darken the time rail. */
html[data-mbjj-theme="dark"] .mbjj-time-label{background:linear-gradient(to right,#161616 0%,#161616 82%,rgba(22,22,22,0))!important;color:#bdbdb9!important}
html[data-mbjj-theme="dark"] .mbjj-time-line{border-top-color:rgba(255,255,255,.08)!important}
html[data-mbjj-theme="dark"] :is(.mbjj-class-block,.mbjj-weekend-class){
  --mbjj-primary:#262626;background:#262626!important;border-color:#3c3c3c!important;
  box-shadow:inset 4px 0 0 var(--mbjj-accent,#fcbf28),0 6px 16px rgba(0,0,0,.5)!important;
}
html[data-mbjj-theme="dark"] :is(.mbjj-class-block,.mbjj-weekend-class) :is(h4,strong,span,small,p){color:#f5f5f3!important}
html[data-mbjj-theme="dark"] :is(.mbjj-class-block,.mbjj-weekend-class):is(:hover,:focus-visible){background:#303030!important;border-color:var(--mbjj-accent,#fcbf28)!important}
/* Class names: no mid-word breaks like "Fundamental s" in narrow columns. */
.mbjj-class-block h4,.mbjj-weekend-class h4{overflow-wrap:normal!important;word-break:normal!important;hyphens:auto}

/* Phones: full-width hero buttons (big thumb targets); readable hamburger in dark. */
@media(max-width:600px){.mbjj-hero-actions{flex-direction:column;align-items:stretch}.mbjj-hero-actions .mbjj-button{width:100%;min-height:52px}}
html[data-mbjj-theme="dark"] .ct-header-trigger{--theme-icon-color:#f5f5f3;color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-header-trigger :is(svg,rect,path){fill:#f5f5f3!important}
/* Mobile off-canvas menu: big, bold, thumb-friendly. */
#offcanvas .mobile-menu .ct-menu-link,#offcanvas .mobile-menu a{font-family:var(--mbjj-font-display,inherit)!important;font-size:1.45rem!important;font-weight:900!important;text-transform:uppercase;letter-spacing:-.01em;min-height:50px;display:flex!important;align-items:center}
#offcanvas .mobile-menu .current-menu-item>a{color:var(--mbjj-accent,#fcbf28)!important}

/* Dark: small "ink" badges flip to white-on-black → black-on-white. */
html[data-mbjj-theme="dark"] :is(.mbjj-required,.mbjj-first-number,.mbjj-gallery-play,.mbjj-pathway li span::before,.mbjj-login-box .login-submit input){background:#f5f5f3!important;color:#111!important;border-color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .mbjj-optional{background:transparent!important;color:#c9c9c5!important;border-color:#555!important}
html[data-mbjj-theme="dark"] .mbjj-haka-callout{background:#f5f5f3!important;color:#111!important}
html[data-mbjj-theme="dark"] .mbjj-haka-callout :is(strong,span){color:#111!important}

/* Programme step numbers: yellow pill with dark number instead of yellow text on white. */
.mbjj-program-info-grid article>span:first-child{display:inline-block;background:var(--mbjj-accent,#fcbf28);color:var(--mbjj-on-accent,#111)!important;padding:.38em .7em;border-radius:999px;line-height:1}
/* Belt ladder headings were inheriting white from an older dark-card rule. */
.mbjj-ladder-block h3{color:var(--mbjj-ink,#111)!important}
/* Kids age cards: headings were white on white on the live site. */
.mbjj-kids-card h3{color:var(--mbjj-ink,#111)!important}
/* "Choose your pathway" heading sits directly on the black canvas in both themes. */
html[data-mbjj-theme="dark"] .mbjj-program-links>.mbjj-section-heading .mbjj-eyebrow{color:var(--mbjj-accent,#fcbf28)!important}
html[data-mbjj-theme="dark"] .mbjj-program-links>.mbjj-section-heading :is(p,.mbjj-lead){color:rgba(255,255,255,.8)!important}
/* Timetable header eyebrow + footer note were hard-coded #111. */
html[data-mbjj-theme="dark"] :is(.mbjj-schedule .mbjj-eyebrow,.mbjj-schedule-footer span,.mbjj-header h2,.mbjj-header .mbjj-year){color:var(--mbjj-ink)!important}

/* --- 7. Font Awesome icons (v4.2) -----------------------------------------
   Works with both Kit modes: webfont (<i>) and SVG (svg.svg-inline--fa). */
.mbjj-icon,.mbjj-block .svg-inline--fa,.mbjj-display .svg-inline--fa{flex:0 0 auto;line-height:1}
.mbjj-button :is(.mbjj-icon,.svg-inline--fa){font-size:.95em;width:1.05em;height:1em}
.mbjj-button:hover :is(.fa-arrow-right,.fa-arrow-up-right-from-square){transform:translateX(2px);transition:transform .16s ease}
.mbjj-footer-nav a{display:inline-flex;align-items:center;gap:.5em}
.mbjj-footer-nav a :is(.mbjj-icon,.svg-inline--fa){width:1.1em;font-size:1em;color:var(--mbjj-accent,#fcbf28)}
.mbjj-display-toggle :is(.mbjj-icon,.svg-inline--fa){font-size:27px;width:27px;height:27px}
.mbjj-display-head strong :is(.mbjj-icon,.svg-inline--fa){font-size:.95em;margin-right:.25em;color:var(--mbjj-accent,#fcbf28)}
.mbjj-display-close :is(.mbjj-icon,.svg-inline--fa){font-size:1rem}
.mbjj-display.has-fa .mbjj-display-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:8px 6px}
.mbjj-display.has-fa .mbjj-display-options button :is(.mbjj-icon,.svg-inline--fa){font-size:1.15rem}
.mbjj-display.has-fa .mbjj-display-options button :is(.is-size-1){font-size:.85rem}
.mbjj-display.has-fa .mbjj-display-options button :is(.is-size-2){font-size:1.1rem}
.mbjj-display.has-fa .mbjj-display-options button :is(.is-size-3){font-size:1.4rem}
.mbjj-display.has-fa .mbjj-display-options button[aria-pressed="true"]::after{content:none}
.mbjj-display.has-fa .mbjj-display-options button[aria-pressed="true"]{box-shadow:inset 0 -4px 0 var(--mbjj-accent,#fcbf28)}
.mbjj-display-reset{display:flex;align-items:center;justify-content:center;gap:8px}

/* --- 8. Photo hero (optional, v4.2) ---------------------------------------
   Black & white photo, dark overlay, white type; logo stays as the emblem. */
.mbjj-hero.has-photo{
  background:#0b0b0b!important;border-color:#0b0b0b!important;color:#fff;isolation:isolate;
  min-height:clamp(420px,58vh,640px);
}
.mbjj-hero.has-photo::after{
  content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;
  border:0!important;border-radius:inherit!important;opacity:1!important;z-index:0!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 48%,rgba(0,0,0,.35) 100%),
    var(--mbjj-hero-photo) center/cover no-repeat!important;
  filter:grayscale(1) contrast(1.08);
}
.mbjj-hero.has-photo::before{background:var(--mbjj-accent,#fcbf28)!important;z-index:1}
.mbjj-hero.has-photo .mbjj-hero-copy :is(h1,p){color:#fff!important}
.mbjj-hero.has-photo .mbjj-hero-copy .mbjj-eyebrow{color:#fff!important;background:transparent!important;border-color:#fff!important}
.mbjj-hero.has-photo .mbjj-button-outline{color:#fff!important;border-color:#fff!important;background:rgba(0,0,0,.25)!important}
.mbjj-hero.has-photo .mbjj-button-outline:hover{background:#fff!important;color:#111!important}
.mbjj-hero.has-photo .mbjj-logo-card{box-shadow:0 24px 60px rgba(0,0,0,.55)!important}
@media(max-width:760px){
  .mbjj-hero.has-photo::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.85) 70%),var(--mbjj-hero-photo) center/cover no-repeat!important}
}

/* ==========================================================================
   9. Visual upgrade pass (v4.2)
   Black footer, full photo hero, a yellow "Start here" band, consistent
   card shapes and on-brand forms. (Belt stripes removed in v4.2.1; the
   black header now applies to dark mode only.)
   ========================================================================== */
:root{--mbjj-radius-lg:24px;--mbjj-radius-md:18px;--mbjj-frame:#0a0a0a}

/* Dark mode header. Light mode keeps a white header (section 10). */
html[data-mbjj-theme="dark"] #header,html[data-mbjj-theme="dark"] .ct-header [data-row]{background-color:var(--mbjj-frame)!important;border-color:#1f1f1f!important}
#header{position:relative}
html[data-mbjj-theme="dark"] .ct-header :is(.ct-menu-link,.ct-label){color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-header :is(.current-menu-item,.current_page_item)>.ct-menu-link{color:#fff!important}
html[data-mbjj-theme="dark"] .ct-header .ct-menu-link:hover{color:var(--mbjj-accent,#fcbf28)!important}
html[data-mbjj-theme="dark"] .ct-header [data-id="menu"] .menu>li:is(.mbjj-menu-cta,:has(>a[href*="try-free-class"],>a[href$="/trial/"]))>.ct-menu-link{color:var(--mbjj-on-accent,#111)!important}
html[data-mbjj-theme="dark"] .ct-header [data-id="menu"] .menu>li:is(.mbjj-menu-cta,:has(>a[href*="try-free-class"],>a[href$="/trial/"]))>.ct-menu-link:hover{background:#fff!important;color:#111!important}
html[data-mbjj-theme="dark"] .ct-header :is(.ct-icon,svg){fill:#f5f5f3}
html[data-mbjj-theme="dark"] .ct-header-trigger{--theme-icon-color:#f5f5f3;color:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-header-trigger :is(svg,rect,path){fill:#f5f5f3!important}
html[data-mbjj-theme="dark"] .ct-header .site-logo-container img{background:#fff;border-radius:50%;box-shadow:0 0 0 3px #fff}
html[data-mbjj-theme="dark"] #offcanvas .ct-panel-inner{background:var(--mbjj-frame)!important}
html[data-mbjj-theme="dark"] #offcanvas :is(a,.ct-menu-link){color:#f5f5f3!important}
html[data-mbjj-theme="dark"] #offcanvas .ct-toggle-close{--theme-icon-color:#f5f5f3}

/* Black footer in both themes. */
#footer.ct-footer,#footer.ct-footer [data-row]{background-color:var(--mbjj-frame)!important;border-color:#1f1f1f!important}
html .mbjj-footer,html[data-mbjj-contrast] .mbjj-footer [class*="mbjj-"]{--mbjj-ink:#f5f5f3!important;--mbjj-muted:#cfcfcb!important;--mbjj-line:#2a2a2a!important;color:#f5f5f3}
.mbjj-footer :is(h2,h3,a,p,div){color:inherit}
.mbjj-footer :is(p,.mbjj-footer-note,.mbjj-footer-meta){color:#cfcfcb!important}
.mbjj-footer h3{color:var(--mbjj-accent,#fcbf28)!important;letter-spacing:.14em}
.mbjj-footer-nav a{color:#f5f5f3!important;text-decoration:none!important}
.mbjj-footer-nav a:hover{color:var(--mbjj-accent,#fcbf28)!important}
.mbjj-footer-logo{background:#fff!important;border-radius:50%}
.mbjj-footer-credit a,.mbjj-footer-bottom,.mbjj-footer-bottom a{color:#bdbdb9!important}
html[data-mbjj-theme="light"][data-mbjj-contrast="high"] .mbjj-footer :is(p,li,small,em,time,a){color:#fff!important}

/* WordPress leaves empty paragraphs around shortcodes; they add stray gaps. */
.entry-content>p:empty{display:none}

/* Consistent card shapes. */
:is(.mbjj-panel,.mbjj-hero,.mbjj-start-card,.mbjj-sorriso-nation,.mbjj-join-cta,.mbjj-pathway,.mbjj-schedule-timegrid){border-radius:var(--mbjj-radius-lg)!important}
:is(.mbjj-program-card,.mbjj-gallery-card,.mbjj-first-card,.mbjj-kids-card,.mbjj-plan,.mbjj-member-card,.mbjj-tech-card,.mbjj-milestone){border-radius:var(--mbjj-radius-md)!important}

/* Photo hero: the photo carries the page (the logo is already on the wall). */
.mbjj-hero.has-photo{grid-template-columns:minmax(0,1fr)!important;align-content:end;padding:clamp(28px,5vw,64px)!important;min-height:clamp(460px,66vh,700px)}
.mbjj-hero.has-photo .mbjj-hero-mark{display:none!important}
.mbjj-hero.has-photo .mbjj-hero-copy{max-width:760px}
.mbjj-hero.has-photo .mbjj-hero-copy h1{font-size:clamp(2.6rem,1.4rem + 5vw,6rem)!important;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.mbjj-hero.has-photo::before{display:none!important}
.mbjj-hero.has-photo::after{
  background:
    linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.15) 100%),
    linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 70%),
    var(--mbjj-hero-photo) center 35%/cover no-repeat!important;
}

/* Non-photo hero: belt stripe replaces the plain black underline. */

/* "Start here" becomes the loudest block on the page: an accent band. */
html[data-mbjj-theme] .mbjj-start-card.mbjj-block{background:var(--mbjj-accent,#fcbf28)!important;border:0!important;color:var(--mbjj-on-accent,#111)!important;box-shadow:none!important}
.mbjj-start-card::before{display:none!important}
html[data-mbjj-theme] .mbjj-start-card.mbjj-block :is(h2,p,.mbjj-eyebrow,.mbjj-start-card-copy p){color:var(--mbjj-on-accent,#111)!important}
.mbjj-start-card .mbjj-eyebrow::before{background:var(--mbjj-on-accent,#111)}
.mbjj-start-card h2{font-size:clamp(2.4rem,1.6rem + 3.5vw,4.6rem)!important}
html[data-mbjj-theme] .mbjj-start-card .mbjj-button{background:var(--mbjj-on-accent,#111)!important;border-color:var(--mbjj-on-accent,#111)!important;color:var(--mbjj-accent,#fcbf28)!important;min-height:54px;font-size:1.05rem;padding-inline:26px}
html[data-mbjj-theme] .mbjj-start-card .mbjj-button:hover{background:#fff!important;border-color:#fff!important;color:#111!important}

/* Sorriso card: buttons form one tidy column under the logo. */
.mbjj-sorriso-actions{display:grid!important;grid-template-columns:1fr;gap:8px;width:100%}
.mbjj-sorriso-actions .mbjj-button{width:100%;justify-content:center}

/* Programme cards: clearer hover, image depth. */
.mbjj-program-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.mbjj-program-card:hover{transform:translateY(-3px);border-color:var(--mbjj-accent,#fcbf28)!important;box-shadow:0 18px 40px rgba(0,0,0,.45)!important}
.mbjj-program-image{position:relative}
.mbjj-program-image::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);pointer-events:none}

/* Gallery cards lift slightly on hover. */
.mbjj-gallery-card:hover{transform:translateY(-3px)}

/* Programme step numbers: compact pills, not full-width bars. */
.mbjj-program-info-grid article>span:first-child{justify-self:start;width:max-content}

/* Forms: brand submit buttons (Blocksy default was bright blue). */
.mbjj-block :is(button[type="submit"],input[type="submit"]){
  appearance:none;background:#111!important;color:#fff!important;border:2px solid #111!important;border-radius:999px!important;
  min-height:50px;padding:0 26px!important;font:900 1rem/1 var(--mbjj-font-body,inherit)!important;cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.mbjj-block :is(button[type="submit"],input[type="submit"]):hover{background:var(--mbjj-accent,#fcbf28)!important;border-color:var(--mbjj-accent,#fcbf28)!important;color:var(--mbjj-on-accent,#111)!important;transform:translateY(-1px)}
html[data-mbjj-theme="dark"] .mbjj-block :is(button[type="submit"],input[type="submit"]){background:var(--mbjj-accent,#fcbf28)!important;border-color:var(--mbjj-accent,#fcbf28)!important;color:var(--mbjj-on-accent,#111)!important}
/* Calmer form fields: roomier inputs, clear focus edge. */
.mbjj-block :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea){min-height:48px;border-radius:12px!important}
.mbjj-block :is(input,select,textarea):focus{border-color:var(--mbjj-ink,#111)!important;box-shadow:0 0 0 3px var(--mbjj-accent,#fcbf28)!important;outline:0!important}

@media(max-width:760px){
  .mbjj-hero.has-photo{min-height:clamp(420px,78vh,620px)}
  .mbjj-start-card .mbjj-button{width:100%}
}
html[data-mbjj-motion="reduced"] :is(.mbjj-program-card,.mbjj-gallery-card):hover{transform:none!important}
html[data-mbjj-theme="dark"] .mbjj-filter-set button:is(.active,[aria-pressed="true"]){background:var(--mbjj-accent,#fcbf28)!important;border-color:var(--mbjj-accent,#fcbf28)!important;color:var(--mbjj-on-accent,#111)!important}

/* ==========================================================================
   10. Light theme (v4.2.1)
   Light now means light: pale canvas, white header, white cards with soft
   edges. Black stays for the programme cards, Sorriso card and footer, so the
   black and white identity is still there, just the other way round to dark.
   ========================================================================== */
html[data-mbjj-theme="light"]{--mbjj-canvas:#f2f2ef}
html[data-mbjj-theme="light"] :is(body,#main-container,.site-main){background-color:var(--mbjj-canvas)!important}
html[data-mbjj-theme="light"] :is(#header,.ct-header [data-row]){background-color:#fff!important;border-color:#e4e4e0!important}
html[data-mbjj-theme="light"] #header{box-shadow:0 1px 0 #e4e4e0}

/* White cards get a visible edge + soft shadow so they sit on the pale canvas. */
html[data-mbjj-theme="light"] :is(.mbjj-panel:not(.mbjj-program-links),.mbjj-gallery,.mbjj-first-card,.mbjj-schedule-timegrid,.mbjj-access-gate,.mbjj-member-welcome){
  border-color:#dededa!important;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px rgba(0,0,0,.06)!important}
html[data-mbjj-theme="light"] .mbjj-hero:not(.has-photo){box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.08)!important}

/* The programme heading used to sit on black; give it dark type on the light canvas. */
html[data-mbjj-theme="light"] .mbjj-program-links{background:transparent!important}
html[data-mbjj-theme="light"] .mbjj-program-links>.mbjj-section-heading :is(h2,h3){color:var(--mbjj-ink,#111)!important}
html[data-mbjj-theme="light"] .mbjj-program-links>.mbjj-section-heading .mbjj-eyebrow{color:var(--mbjj-ink,#111)!important}
html[data-mbjj-theme="light"] .mbjj-program-links>.mbjj-section-heading :is(p,.mbjj-lead){color:#4a4a47!important}
/* Black programme cards read as strong tiles on the light canvas. */
html[data-mbjj-theme="light"] .mbjj-program-card{box-shadow:0 18px 40px rgba(0,0,0,.14)!important}
html[data-mbjj-theme="light"] .mbjj-program-card:hover{box-shadow:0 24px 50px rgba(0,0,0,.22)!important}

/* ==========================================================================
   11. One border system (v4.2.2)
   Every container uses the photo-wall treatment: 1px soft edge + soft shadow.
   Inner cards use the same 1px edge without the big shadow. No thick black
   outlines, no heavy black rules. Buttons keep their 2px outline.
   ========================================================================== */
:root{--mbjj-edge:#dededa;--mbjj-edge-inner:#e6e6e2;--mbjj-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px rgba(0,0,0,.06)}
html[data-mbjj-theme="dark"]{--mbjj-edge:#2e2e2e;--mbjj-edge-inner:#2a2a2a;--mbjj-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.35)}

/* Section containers */
html[data-mbjj-theme] :is(.mbjj-panel:not(.mbjj-program-links),.mbjj-hero,.mbjj-sorriso-nation,.mbjj-gallery,.mbjj-schedule-timegrid,.mbjj-join-cta,.mbjj-pathway,.mbjj-access-gate,.mbjj-access-ok,.mbjj-member-welcome,.mbjj-program-page-hero,.mbjj-login-box,.mbjj-dashboard).mbjj-block,
html[data-mbjj-theme] :is(.mbjj-schedule-timegrid,.mbjj-program-page-hero){
  border:1px solid var(--mbjj-edge)!important;box-shadow:var(--mbjj-shadow)!important;
}
/* The Sorriso card is black in both themes: hairline in a dark grey. */
html[data-mbjj-theme] .mbjj-sorriso-nation.mbjj-block{border-color:#262626!important}
/* Photo hero: no frame line over the image. */
html[data-mbjj-theme] .mbjj-hero.has-photo.mbjj-block{border-color:transparent!important}

/* Inner cards */
html[data-mbjj-theme] :is(.mbjj-first-card,.mbjj-kids-card,.mbjj-ladder-item,.mbjj-plan,.mbjj-member-card,.mbjj-tech-card,.mbjj-milestone,.mbjj-gallery-card,.mbjj-empty,.mbjj-calendar-panel,.mbjj-weekend-panel,.mbjj-profile-editor,.mbjj-program-page-visual){
  border:1px solid var(--mbjj-edge-inner)!important;
}
html[data-mbjj-theme] .mbjj-program-page-visual{overflow:hidden;border-radius:var(--mbjj-radius-md)!important}
html[data-mbjj-theme] .mbjj-empty{border-style:dashed!important}

/* Remove the bar under the hero title (both hero styles). */
.mbjj-hero::before,.mbjj-hero.has-photo::before,.mbjj-hero:not(.has-photo)::before{display:none!important}

/* Logo emblem: hairline instead of a thick black ring. */
html[data-mbjj-theme] .mbjj-logo-card{border:1px solid var(--mbjj-edge)!important}

/* Programme step dividers + timetable rules: thin and soft. */
html[data-mbjj-theme] .mbjj-program-info-grid article{border-right:1px solid var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-program-info-grid article:last-child{border-right:0!important}
html[data-mbjj-theme] .mbjj-schedule .mbjj-header{border-bottom:1px solid var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-schedule-footer{border-top:1px solid var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-schedule-embed>.mbjj-section-heading{border-bottom:1px solid var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-timegrid-corner{border:1px solid var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-timegrid-day-name{border-width:1px 1px 1px 0!important;border-style:solid!important;border-color:var(--mbjj-edge)!important}
html[data-mbjj-theme] .mbjj-timegrid-body{border-width:0 1px 1px 1px!important;border-style:solid!important;border-color:var(--mbjj-edge)!important}
/* Black class blocks don't need an outline at all. */
html[data-mbjj-theme="light"] :is(.mbjj-class-block,.mbjj-weekend-class){border-color:transparent!important}

/* Form fields: 1px edge, the yellow focus ring does the emphasis. */
html[data-mbjj-theme] .mbjj-block :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea){border:1px solid #cfcfcb!important}
html[data-mbjj-theme="dark"] .mbjj-block :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea){border-color:#4a4a4a!important}
html[data-mbjj-theme] .mbjj-block :is(input,select,textarea):focus{border-color:var(--mbjj-ink,#111)!important}

/* High contrast keeps stronger edges on purpose. */
html[data-mbjj-contrast="high"] :is(.mbjj-panel,.mbjj-hero:not(.has-photo),.mbjj-gallery,.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card).mbjj-block,
html[data-mbjj-contrast="high"] :is(.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card){border:2px solid #111!important}
html[data-mbjj-theme="dark"][data-mbjj-contrast="high"] :is(.mbjj-panel,.mbjj-hero:not(.has-photo),.mbjj-gallery,.mbjj-first-card,.mbjj-gallery-card,.mbjj-plan,.mbjj-member-card){border-color:#bdbdbd!important}
html[data-mbjj-theme] .mbjj-schedule :is(input:not([type=checkbox]):not([type=radio]),select){border:1px solid var(--mbjj-edge)!important}