/*
 * cjpt-site: THE standard DESKTOP bar of the logged-in areas, shared so the three bars cannot drift apart (the phone twin is phone-bar.css).
 *
 * One bar, same height, same three zones in every place:
 *   LEFT   quiet back link (one level up) | logo at ONE size
 *   CENTRE member area: empty. Course home: the progress line (it takes all the room between the left and right zones) + "21% complete". Lessons: the Previous / Mark complete / Next group
 *   RIGHT  the shared name menu (cjpt_member_user_menu(), user-menu.css)
 * Member area, course home and the login screen sit in the centred box (max width, gutters). Lessons, topics and quizzes do not: their bar
 * follows the two columns of LearnDash's Focus Mode page under them (sidebar | content), see learndash.css "Desktop bar".
 *   Member area  (templates/member/account.php, member.css)       "Back to website"  -> home page          desktop > 899px
 *   Course home  ([cjpt_ld_header] in inc/learndash.php)           "Online Courses"   -> member area        desktop > 768px
 *   Lesson, topic, quiz (focus/masthead.php, learndash.css)       no back link (Course Home is in the name menu); the logo -> that course   desktop > 768px
 *   Lessons are ONE bar too (outline toggle + logo | Previous, Mark complete, Next | name menu, learndash.css "Desktop bar"); no second row, no progress in it (it is on top of the outline).
 * The login bar (member.css) shares the height and the logo size. Change a value HERE and every bar follows: each area builds its own
 * box from these tokens (its phone breakpoint differs, so the box rules stay in the area's stylesheet); what is written once below
 * is the parts that look the same everywhere: back link, the logo (course pages), the zones, the progress line.
 * Everything below applies from 769px up; the areas hide / flatten these parts at their own phone breakpoint (member and login 899px).
 * Loaded by the standalone member / login documents and, through inc/assets.php, on LearnDash pages.
 */
:root {
	--cjpt-db-h: 64px;              /* bar height, rule included */
	--cjpt-db-max: 1248px;          /* widest the bar's box gets (the member area's width) */
	--cjpt-db-gutter: 24px;         /* space between the box edge and the outer items */
	--cjpt-db-line: var(--cjpt-bar-line, #e3e8e8); /* rule under a bar / row */
	--cjpt-db-ink: #262626;
	--cjpt-db-muted: #656563;       /* back link, progress label, lesson title */
	--cjpt-db-logo-w: 180px;        /* the logo, everywhere (height follows: 180 x 16px) */
	--cjpt-db-centre-gap: 48px;     /* course home: air either side of the progress line (24px below 1024px) */
	--cjpt-db-back-fs: 14px;
	--cjpt-db-back-gap: 20px;       /* back link box to logo: with the box's own slack about 22-26px of air to the words */
	--cjpt-db-back-w: 126px;        /* the back link's box: wide enough for the longest words, so the logo's left edge is the same in every bar */
	/* thin chevrons for the lesson row's Previous / Next, as masks */
	--cjpt-ico-chev-l: 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='m15 18-6-6 6-6'/%3E%3C/svg%3E");
	--cjpt-ico-chev-r: 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='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
@media (max-width: 1023px) {
	:root { --cjpt-db-centre-gap: 24px; }
}

@media (min-width: 769px) {
	/* Three zones: the left and right ones as wide as their content, the centre takes the rest (the progress line stretches; the member area's is
	 * empty). :where() = no specificity, so an area's own rules always win. */
	:where(.cjpt-db) :where(.cjpt-db__lead) { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
	:where(.cjpt-db) :where(.cjpt-db__centre) { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; margin: 0 var(--cjpt-db-centre-gap); }
	:where(.cjpt-db) :where(.cjpt-db__end) { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; min-width: 0; margin-left: auto; }
}

@media (min-width: 769px) {
	/* LEFT: back link, logo */
	.cjpt-db a.cjpt-db-back {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex: none;
		box-sizing: border-box;
		width: var(--cjpt-db-back-w); /* fixed: the logo starts at the same place whatever the words */
		min-height: 44px;
		margin: 0 var(--cjpt-db-back-gap) 0 0; /* the air between the back link and the logo (no divider line) */
		padding: 0;
		border: 0;
		background: none;
		color: var(--cjpt-db-muted);
		font: 400 var(--cjpt-db-back-fs)/1.2 "Open Sans", Helvetica, Arial, sans-serif;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
		white-space: nowrap;
	}
	.cjpt-db a.cjpt-db-back:hover,
	.cjpt-db a.cjpt-db-back:focus { color: var(--cjpt-db-ink); background: none; text-decoration: none; }
	.cjpt-db a.cjpt-db-back:focus-visible { outline: 2px solid var(--cjpt-db-ink); outline-offset: 2px; }
	.cjpt-db a.cjpt-db-back svg { display: block; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
	/* the logo link of the course pages (the member area's and the login bar's is .cjm-logo, member.css, same token) */
	.cjpt-db a.cjpt-db-logo { display: block; flex: none; box-sizing: border-box; width: var(--cjpt-db-logo-w); margin: 0; padding: 0; line-height: 0; }
	.cjpt-db a.cjpt-db-logo:focus-visible { outline: 2px solid var(--cjpt-db-ink); outline-offset: 4px; }
	.cjpt-db a.cjpt-db-logo img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }

	/* CENTRE (course home): the shared progress bar (.cjpt-pg, phone-bar.css) fills the space between the logo and the name menu. */
	.cjpt-db .cjpt-db__centre .cjpt-pg { flex: 1 1 auto; width: 100%; }
	.cjpt-db .cjpt-db__centre .cjpt-pg__bar { min-width: 160px; }
}