/*
 * cjpt-site: THE standard phone header bar, shared by every area so the bars cannot drift apart.
 *
 * Three fixed positions, all vertically centred, same height everywhere: menu LEFT, logo CENTRED, account RIGHT.
 * Icons are thin dark outline icons (24px box, 1.75px stroke, #262626), tap targets at least 44px.
 *   Public site (Elementor header "Header - Main", build/site.css)  menu | logo | account + cart            <= 980px
 *   Login (templates/member/login.php, member.css)                  menu | logo | account + cart            <= 899px
 *   Member area (templates/member/account.php, member.css)          sections drawer | logo | initials menu  <= 899px
 *   Course pages (learndash.css, Focus Mode + course header)        outline | progress (or logo) | initials <= 768px
 *   Cart / checkout / thank-you (checkout.css, "Header - Cart & Checkout") back arrow | logo | lock         <= 767px
 * Each area keeps the breakpoint where it already switched to its phone layout (desktop and tablet layouts are untouched).
 * Change a value HERE and every bar follows. Loaded on every front-end page and by the standalone member / login documents.
 */
:root {
	--cjpt-bar-h: 56px;             /* bar height, all areas */
	--cjpt-bar-ink: #262626;        /* icon + text colour */
	--cjpt-bar-line: #e3e8e8;       /* rule under the bar */
	--cjpt-bar-icon: 24px;          /* icon box */
	--cjpt-bar-stroke: 1.75;        /* icon stroke width (24-unit viewBox, so px at 24px) */
	--cjpt-bar-tap: 44px;           /* minimum tap target */
	--cjpt-bar-gutter: 6px;         /* space between the screen edge and the outer tap targets */
	--cjpt-bar-side: 96px;          /* width of the left and right slots of the flex-built bars (room for two tap targets) */
	--cjpt-bar-logo-w: 150px;       /* logo width on a phone */
	--cjpt-prog: #64e149;           /* progress fill: LearnDash's green, the ONE value for every progress bar (member area, course pages, phone bar) */
	--cjpt-prog-track: #e3e8e8;     /* progress track */
	--cjpt-prog-h: 6px;             /* progress line height */
	/* The two icons that Elementor / LearnDash draw themselves (their toggles), as masks: menu (3 lines) and close (x). */
	--cjpt-ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
	--cjpt-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* An icon button of the bar (markup: <button|a class="cjpt-pb-btn"><svg class="cjpt-pb-i" viewBox="0 0 24 24">...</svg></button>). */
.cjpt-pb-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--cjpt-bar-tap);
	height: var(--cjpt-bar-tap);
	min-width: var(--cjpt-bar-tap);
	min-height: var(--cjpt-bar-tap);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--cjpt-bar-ink);
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.cjpt-pb-btn:hover,
.cjpt-pb-btn:focus {
	background: none;
	color: var(--cjpt-bar-ink);
}
.cjpt-pb-btn:focus-visible {
	outline: 2px solid var(--cjpt-bar-ink);
	outline-offset: -4px;
}
.cjpt-pb-btn svg.cjpt-pb-i,
svg.cjpt-pb-i {
	display: block;
	width: var(--cjpt-bar-icon);
	height: var(--cjpt-bar-icon);
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--cjpt-bar-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* The same icon drawn by CSS where we do not own the markup (Elementor / LearnDash toggles): add class cjpt-pb-mask. */
.cjpt-pb-mask::before,
header.elementor-location-header .elementor-menu-toggle::before { /* the Elementor header's menu toggle (shown at 980px and below) */
	content: "";
	display: block;
	width: var(--cjpt-bar-icon);
	height: var(--cjpt-bar-icon);
	background-color: var(--cjpt-bar-ink);
	-webkit-mask: var(--cjpt-ico-menu) center / contain no-repeat;
	mask: var(--cjpt-ico-menu) center / contain no-repeat;
}
.cjpt-pb-mask[aria-expanded="true"]::before,
.expanded .cjpt-pb-mask::before,
header.elementor-location-header .elementor-menu-toggle[aria-expanded="true"]::before {
	-webkit-mask-image: var(--cjpt-ico-x);
	mask-image: var(--cjpt-ico-x);
}

/* (body a. beats Elementor's `.e-paragraph-base a { all: unset }`.)
 * The account and cart links ([cjpt_account_link], [cjpt_cart_link], class cjpt-pb-tool) in the bars of the public site and the login
 * page: on a phone they become thin dark outline icons in a 44px tap target; the cart's count badge keeps the brand lime. */
@media (max-width: 980px) {
	body a.cjpt-pb-tool {
		position: relative;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--cjpt-bar-tap);
		height: var(--cjpt-bar-tap);
		margin: 0;
		padding: 0;
		color: var(--cjpt-bar-ink);
		font-size: 0;
		line-height: 1;
		text-decoration: none;
	}
	body a.cjpt-pb-tool:hover,
	body a.cjpt-pb-tool:focus {
		color: var(--cjpt-bar-ink);
		text-decoration: none;
	}
	body a.cjpt-pb-tool:focus-visible {
		outline: 2px solid var(--cjpt-bar-ink);
		outline-offset: -4px;
	}
	body a.cjpt-pb-tool .cjpt-icon--fa {
		display: none;
	}
	body a.cjpt-pb-tool .cjpt-icon--line {
		display: block;
		width: var(--cjpt-bar-icon);
		height: var(--cjpt-bar-icon);
		fill: none;
		stroke: currentColor;
		stroke-width: var(--cjpt-bar-stroke);
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	body a.cjpt-pb-tool .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;
	}
	body a.cjpt-pb-tool .cjpt-cart-link__count {
		position: absolute;
		top: 3px;
		right: 0;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 999px;
		background: #c3e800;
		color: #262626;
		font: 700 11px/18px "Open Sans", Helvetica, Arial, sans-serif;
		letter-spacing: 0;
		text-align: center;
	}
}

/* THE progress bar (cjpt_site_progress_bar(), inc/learndash.php): member card, phone Continue card, outline header, course-home bar, phone lesson bar.
 * A thin rounded green line with "N% complete" beside it (--stack: under it). Green is for progress only; teal stays for buttons. */
.cjpt-pg { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; }
.cjpt-pg__bar { display: block; flex: 1 1 auto; min-width: 0; height: var(--cjpt-prog-h); border-radius: 999px; background: var(--cjpt-prog-track); overflow: hidden; }
.cjpt-pg__fill { display: block; height: 100%; border-radius: 999px; background: var(--cjpt-prog); }
.cjpt-pg__txt { flex: none; margin: 0; color: #656563; font: 400 13px/1 "Open Sans", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.cjpt-pg--stack { flex-direction: column; align-items: stretch; gap: 7px; }
.cjpt-pg--stack .cjpt-pg__bar { flex: none; }