/*
 * cjpt-site: the public main menu ([cjpt_site_menu], inc/menu.php; behaviour in assets/js/site-menu.js). Approved design: build/mockups/menu-v4.
 * Desktop (981px and up): bar items, click + gentle hover dropdown panels under the bar, one at a time. Phone (980px and below): a menu button
 * in the standard phone bar (phone-bar.css) and a full-height drill-in menu. Panels and the phone menu are hidden by CSS, so nothing shifts when
 * the script loads. Anchors are prefixed "body .cjn" because Elementor's paragraph (which holds the shortcode) does `a { all: unset }`.
 * The header's bar geometry (64px, 180px logo, sticky) is in build/site.css (Elementor kit custom CSS), the account / cart look at the end of this file.
 */
.cjn {
	--cjn-ink: #262626; --cjn-grey: #656563; --cjn-mint: #ECF7F7; --cjn-soft: #F5F5F5; --cjn-teal: #56C6D6; --cjn-lime: #C3E800; --cjn-line: #e2e4e4;
	font: 400 16px/1.5 "Open Sans", Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cjn-ink);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}
.cjn *, .cjn *::before, .cjn *::after { box-sizing: border-box; }
.cjn [hidden] { display: none !important; }
.cjn button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; -webkit-appearance: none; appearance: none; }
.cjn button:hover, .cjn button:focus { background: none; color: inherit; }
body .cjn a { box-sizing: border-box; color: var(--cjn-ink); text-decoration: none; }
body .cjn a:hover, body .cjn a:focus { color: var(--cjn-ink); text-decoration: none; }
body .cjn a:focus-visible, .cjn button:focus-visible { outline: 2px solid var(--cjn-ink); outline-offset: 2px; }
.cjn ul { list-style: none; margin: 0; padding: 0; }
.cjn li { margin: 0; padding: 0; }

/* Category heading: a label, never a link */
.cjn .cjn-h { margin: 0; font: 700 12px/1 "Josefin Sans", Helvetica, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cjn-grey); }
/* Item: always a link */
body .cjn a.cjn-it { display: block; font: 400 15.5px/1.35 "Open Sans", Helvetica, Arial, sans-serif; color: var(--cjn-ink); }
.cjn .cjn-m { display: block; }
.cjn .cjn-l { display: flex; align-items: baseline; gap: 8px; }
.cjn .cjn-d { display: block; font-size: 13.5px; line-height: 1.35; color: var(--cjn-grey); margin-top: 2px; }
.cjn .cjn-ext { color: var(--cjn-grey); flex: none; align-self: center; }
body .cjn a.cjn-ev { display: grid; align-items: baseline; }
.cjn .cjn-dt { font-weight: 600; white-space: nowrap; }
.cjn .cjn-ini, .cjn-ini { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #e3e3e3; color: #262626; font: 700 12px/1 "Josefin Sans", Helvetica, Arial, sans-serif; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; padding-top: 2px; }
/* the course card and its one teal button */
body .cjn a.cjn-feat { display: block; background: var(--cjn-mint); }
.cjn .cjn-feat img { display: block; object-fit: cover; object-position: 42% 20%; max-width: none; }
.cjn .cjn-ft { display: block; font: 700 19px/1.2 "Josefin Sans", Helvetica, Arial, sans-serif; }
.cjn .cjn-fl { display: block; font-size: 14px; line-height: 1.4; color: var(--cjn-grey); }
.cjn .cjn-btn { display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 "Josefin Sans", Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cjn-ink); background: var(--cjn-teal); border-radius: 0; padding: 3px 22px 0; height: 42px; white-space: nowrap; }
body .cjn a.cjn-btn.cjn-sec { background: #fff; border: 2px solid var(--cjn-ink); }
body .cjn a.cjn-feat:hover .cjn-btn, body .cjn a.cjn-feat:focus-visible .cjn-btn { background: var(--cjn-lime); }

/* ------------- desktop ------------- */
.cjn .cjn-mbtn, .cjn .cjn-menu { display: none; }
.cjn .cjn-bar { display: flex; align-items: center; }
.cjn .cjn-trig { position: relative; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 14px; font: 600 15px/1 "Open Sans", Helvetica, Arial, sans-serif; white-space: nowrap; }
.cjn .cjn-trig .cjn-dn { color: var(--cjn-grey); margin-top: 1px; }
.cjn .cjn-trig[aria-expanded="true"]::after, .cjn .cjn-trig:hover::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--cjn-ink); }
.cjn .cjn-trig[aria-expanded="true"] .cjn-dn { transform: rotate(180deg); color: var(--cjn-ink); }
body .cjn a.cjn-trig { display: flex; }
@media (min-width: 981px) {
	/* a panel is as wide as its content and hangs under its own trigger (the script aligns it; it never passes the bar's edge) */
	.cjn .cjn-panel { position: absolute; top: 64px; left: 0; z-index: 5; width: max-content; display: flex; gap: 56px; padding: 26px 30px 28px; background: #fff; border: 1px solid var(--cjn-line); border-top: 0; box-shadow: 0 16px 30px rgba(38, 38, 38, .09);
		opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; }
	.cjn .cjn-panel.cjn-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .15s ease, transform .15s ease; }
	.cjn .cjn-nav .cjn-h { padding-bottom: 11px; border-bottom: 1px solid var(--cjn-line); margin-bottom: 8px; }
	body .cjn .cjn-nav a.cjn-it { padding: 7px 12px; margin: 0 -12px; border-radius: 8px; white-space: nowrap; }
	.cjn .cjn-nav .cjn-cat { min-width: 190px; }
	body .cjn .cjn-nav a.cjn-ev { grid-template-columns: 96px auto; column-gap: 16px; padding: 9px 12px; }
	/* hover / focus = the account dropdown's pale mint (user-menu.css .cjm-dd-it): 8px radius, no transition, no underline */
	body .cjn .cjn-nav a.cjn-it:hover, body .cjn .cjn-nav a.cjn-it:focus-visible { background: var(--cjn-mint); }
	.cjn .cjn-nav .cjn-panel[data-flat] { padding-top: 18px; padding-bottom: 20px; }
	body .cjn .cjn-nav a.cjn-feat { display: flex; align-items: center; gap: 20px; padding: 14px 28px 14px 14px; margin-top: 14px; }
	.cjn .cjn-nav .cjn-feat img { width: 172px; height: 124px; flex: none; }
	.cjn .cjn-nav .cjn-fl { margin-top: 5px; white-space: nowrap; }
	.cjn .cjn-nav .cjn-ft { white-space: nowrap; }
	.cjn .cjn-nav .cjn-feat .cjn-btn { margin-top: 14px; }
	.cjn .cjn-nav .cjn-feat + .cjn-items { margin-top: 10px; }
}
@media (min-width: 981px) and (max-width: 1179px) {
	.cjn .cjn-trig { padding: 0 10px; gap: 6px; font-size: 14.5px; }
	.cjn .cjn-trig[aria-expanded="true"]::after, .cjn .cjn-trig:hover::after { left: 10px; right: 10px; }
	.cjn .cjn-panel { gap: 40px; padding: 24px 26px 26px; }
	body .cjn .cjn-nav a.cjn-it { font-size: 15px; }
}

/* ------------- phone ------------- */
@media (max-width: 980px) {
	.cjn .cjn-nav { display: none; }
	.cjn .cjn-mbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; }
	.cjn .cjn-mbtn span { display: flex; }
	.cjn .cjn-menu { position: fixed; top: var(--cjn-top, 56px); left: 0; right: 0; bottom: 0; z-index: 99; display: block; overflow: hidden; background: var(--cjn-soft); }
	.cjn .cjn-menu[hidden] { display: none !important; }
	.cjn .cjn-scr { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 20px; display: flex; flex-direction: column; background: var(--cjn-soft); transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
	.cjn .cjn-scr.cjn-on { transform: none; visibility: visible; transition: transform .2s ease; }
	.cjn .cjn-scr.cjn-left { transform: translateX(-24%); visibility: hidden; }
	.cjn .cjn-scr > * { flex: none; }
	.cjn .cjn-card, .cjn .cjn-menu .cjn-items { background: #fff; border: 1px solid var(--cjn-line); border-radius: 12px; overflow: hidden; }
	.cjn .cjn-g { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; padding: 0 20px; font: 600 17px/1 "Open Sans", Helvetica, Arial, sans-serif; text-align: left; }
	body .cjn a.cjn-g { display: flex; color: var(--cjn-ink); }
	.cjn .cjn-g .cjn-chev { color: var(--cjn-grey); }
	.cjn .cjn-g + .cjn-g, .cjn .cjn-menu a.cjn-it + a.cjn-it { border-top: 1px solid var(--cjn-line); }
	.cjn .cjn-back { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; height: 44px; min-width: 44px; padding: 0 12px 0 4px; margin-top: -6px; font: 600 14px/1 "Open Sans", Helvetica, Arial, sans-serif; color: var(--cjn-grey); }
	.cjn .cjn-gt { margin: 6px 4px 16px; font: 700 24px/1.15 "Josefin Sans", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--cjn-ink); }
	.cjn .cjn-gt:focus { outline: none; }
	.cjn .cjn-cat + .cjn-cat { margin-top: 26px; }
	.cjn .cjn-menu .cjn-h { margin: 0 4px 10px; }
	body .cjn .cjn-menu a.cjn-it { display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: 10px 20px; font-size: 16px; }
	body .cjn .cjn-menu a.cjn-ev { display: grid; grid-template-columns: 86px 1fr; column-gap: 10px; padding: 14px 20px; }
	body .cjn .cjn-menu a.cjn-it:active, body .cjn .cjn-menu a.cjn-it:focus-visible, .cjn .cjn-g:active, .cjn .cjn-g:focus-visible { background: var(--cjn-mint); }
	body .cjn .cjn-menu a.cjn-it:focus-visible, .cjn .cjn-g:focus-visible { outline-offset: -2px; }
	@media (hover: hover) { body .cjn .cjn-menu a.cjn-it:hover, .cjn .cjn-g:hover { background: var(--cjn-mint); } }
	body .cjn .cjn-menu a.cjn-feat { display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "i t" "i l" "b b"; column-gap: 14px; padding: 16px; border-radius: 12px; }
	.cjn .cjn-menu .cjn-fb { display: contents; }
	.cjn .cjn-menu .cjn-feat img { grid-area: i; width: 84px; height: 84px; border-radius: 6px; }
	.cjn .cjn-menu .cjn-ft { grid-area: t; align-self: end; }
	.cjn .cjn-menu .cjn-fl { grid-area: l; margin-top: 4px; }
	.cjn .cjn-menu .cjn-feat .cjn-btn { grid-area: b; height: 48px; margin-top: 14px; }
	.cjn .cjn-menu .cjn-feat + .cjn-items { margin-top: 10px; }
	.cjn .cjn-acctz { margin-top: auto; padding-top: 20px; }
	body .cjn .cjn-acctz a.cjn-btn { display: flex; width: 100%; height: 52px; }
	body .cjn .cjn-acctz a.cjn-out { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
}
/* Scroll lock on the ROOT only. With body overflow:hidden too, body became its own scroll box: the sticky header no longer stuck, so on a
   page scrolled down the open menu's header (and its X) sat off screen, and with the admin bar the header jumped under the menu (2026-10-14). */
html.cjn-lock { overflow: hidden; }
@media (min-width: 981px) { .cjn .cjn-menu, .cjn .cjn-mbtn { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cjn .cjn-panel, .cjn .cjn-panel.cjn-on, .cjn .cjn-scr, .cjn .cjn-scr.cjn-on { transition: none !important; } }

/* ------------- the bar's right side: [cjpt_account_link variant="bar"] and [cjpt_cart_link] (desktop; the phone look is phone-bar.css) ------------- */
@media (min-width: 981px) {
	body a.cjn-acct { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 6px; font: 400 15px/1 "Open Sans", Helvetica, Arial, sans-serif; letter-spacing: 0; color: #262626; white-space: nowrap; text-decoration: none; }
	body a.cjn-acct:hover, body a.cjn-acct:focus { color: #262626; text-decoration: none; }
	body a.cjn-acct .cjpt-icon--fa { display: none; }
	body a.cjn-acct .cjpt-icon--line { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
	body a.cjn-acct:focus-visible, header.elementor-location-header .cjpt-cart-link:focus-visible { outline: 2px solid #262626; outline-offset: 2px; }
	header.elementor-location-header a.cjpt-cart-link { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 2px 0 0; color: #262626; font-size: 0; } /* before the account control: about 20px of visible space between the two icons (the cart drawing sits 12px inside its 44px box) */
	header.elementor-location-header a.cjpt-cart-link:hover { color: #262626; text-decoration: none; }
	header.elementor-location-header a.cjpt-cart-link .cjpt-icon--fa { display: none; }
	header.elementor-location-header a.cjpt-cart-link .cjpt-icon--line { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
	header.elementor-location-header a.cjpt-cart-link .cjpt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	header.elementor-location-header a.cjpt-cart-link .cjpt-cart-link__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c3e800; color: #262626; font: 700 11px/18px "Open Sans", Helvetica, Arial, sans-serif; text-align: center; letter-spacing: 0; }
	header.elementor-location-header a.cjpt-cart-link--hide-empty .cjpt-cart-link__count[data-count="0"] { display: none; }
}
@media (min-width: 981px) and (max-width: 1179px) { body a.cjn-acct .cjn-acct__t { display: none; } }
@media (max-width: 980px) { body a.cjn-acct .cjn-acct__t { display: none; } body a.cjn-acct.is-logged-in { font-size: 12px; } }

/* Signed in: the member area's name menu (user-menu.css) sits in the bar; same size as the logged-out link. Below 1180px only the
   initials circle shows, as before (the name and chevron come back inside the member area's own bar). */
header.elementor-location-header .cjn-um { display: flex; align-items: center; }
header.elementor-location-header .cjn-um .cjm-um { margin-left: 0; }
header.elementor-location-header .cjn-um .cjm-dd { z-index: 200; }
@media (max-width: 1179px) { header.elementor-location-header .cjn-um .cjm-nm, header.elementor-location-header .cjn-um .cjm-chev { display: none; } header.elementor-location-header .cjn-um .cjm-um-btn { padding: 0 6px; gap: 0; } }

/* Cart and profile read as EQUAL (Ryan, 2026-10-14): the same line weight, and the same height of drawing. The cart's drawing fills its whole
   box while the person icon is narrower and leaves air above and below, so the cart box is 2px smaller to end at the same height; the count
   badge is smaller so it marks the cart without outweighing it. Phones keep the phone bar's own scale (24px icons, 1.75 stroke). */
body header.elementor-location-header a.cjpt-cart-link .cjpt-icon--line { width: 20px; height: 20px; stroke-width: 1.5; }
body header.elementor-location-header .cjn-um .cjm-av svg { width: 22px; height: 22px; stroke-width: 1.5; }
body header.elementor-location-header a.cjpt-cart-link .cjpt-cart-link__count { top: 5px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
@media (max-width: 980px) {
	body header.elementor-location-header a.cjpt-cart-link .cjpt-icon--line { width: 22px; height: 22px; stroke-width: 1.75; }
	body header.elementor-location-header .cjn-um .cjm-av svg { width: 24px; height: 24px; stroke-width: 1.75; }
	body header.elementor-location-header .cjn-um .cjm-av { width: 24px; }
	body header.elementor-location-header a.cjpt-cart-link { margin-right: 4px; }
}