/*
 * PMI course page (templates/course.php). The page is built from the theme's own sections (.inner-hero-alt,
 * .mid-blue-block, .about-block-alt, .fifty-grid-alt, .objectives, .single-course-grid, .pageCTA), which the theme styles;
 * this file only adds what those sections don't have: the hero's buttons, the icon tiles, the course card's progress and
 * trailer, the course content list with its Launch Module buttons, the testimonial and the trailer pop-up.
 */

#pcp {
	--pcp-panel: var(--midblue, #2a4d7e);
	--pcp-panel-2: #22406c;
	--pcp-line: rgba(255, 255, 255, .12);
	--pcp-muted: #c9d6ea;
	--pcp-orange: var(--orange, #ff8300);
	--pcp-light: var(--lightblue, #00b2e2);
	--pcp-done: #4fd18f;
}
#pcp .pcp-i { width: 1em; height: 1em; flex: none; }
#pcp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero: the training pages' title band, plus a line of intro and the buttons ---- */
#pcp .pcp-hero .single-title { margin-bottom: 120px; }
#pcp .pcp-hero__sub { max-width: 60%; margin: 28px 0 0; font-size: 20px; line-height: 1.6; color: #fff; }
#pcp .pcp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
#pcp .pcp-hero__actions .orange-button { margin: 0; padding: 14px 28px; font-size: 18px; }
#pcp .pcp-ghost-button {
	display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 12px 24px; cursor: pointer;
	background: transparent; color: #fff; border: 2px solid #fff; border-radius: 5px;
	font: 600 18px/1.3 "Work Sans", Helvetica, Arial, sans-serif; transition: background-color .3s ease, color .3s ease;
}
#pcp .pcp-ghost-button .pcp-i { width: 14px; height: 14px; }
#pcp .pcp-ghost-button:hover, #pcp .pcp-ghost-button:focus-visible { background: #fff; color: var(--blue, #1e345d); }

/* ---- the mid-blue band: the theme's icon tiles, with a line icon in place of an image ---- */
#pcp .pcp-facts .core-bg { display: inline-flex; align-items: center; justify-content: center; }
#pcp .pcp-facts .core-bg .pcp-i { width: 85px; height: 85px; color: #fff; stroke-width: 1.6; }
#pcp .pcp-facts .core-inner h5 { margin: 0; }

/* ---- two-column block: space between the headings and the lists ---- */
#pcp .pcp-detail .fifty-col > h4 { margin-top: 32px; }
#pcp .pcp-detail .fifty-col > h2 + h4 { margin-top: 8px; }
#pcp .pcp-detail .fifty-col > ul { margin-bottom: 0; }

/* ---- course overview: module cards ---- */
#pcp .pcp-overview .sing-col { position: relative; }
#pcp .pcp-done { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--pcp-done); font-size: 14px; font-weight: 600; }
#pcp .pcp-done .pcp-i { width: 14px; height: 14px; }

/* ---- the course card (theme .objectives): trailer image, progress, share ---- */
#pcp .pcp-card__trailer { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
#pcp .pcp-card__trailer img, #pcp .obj-top > img { display: block; width: 100%; height: auto; border-radius: 5px 5px 0 0; }
#pcp .pcp-card__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 64px; height: 64px; border-radius: 50%; background: var(--pcp-orange); color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
#pcp .pcp-card__play .pcp-i { width: 22px; height: 22px; margin-left: 3px; }
#pcp .pcp-card__trailer:hover .pcp-card__play, #pcp .pcp-card__trailer:focus-visible .pcp-card__play { transform: translate(-50%, -50%) scale(1.08); }
#pcp .objectives .price { margin: 0 0 16px; }
#pcp .pcp-progress { height: 8px; margin: 0 0 20px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#pcp .pcp-progress span { display: block; height: 100%; background: var(--pcp-orange); border-radius: 4px; }
#pcp .objectives .orange-button { padding: 12px 28px; font-size: 17px; }
#pcp .pcp-share {
	display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--pcp-muted); font: 500 15px "Work Sans", Helvetica, Arial, sans-serif;
}
#pcp .pcp-share:hover, #pcp .pcp-share:focus-visible { color: #fff; }
#pcp .pcp-admin-note { margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid var(--pcp-orange); background: rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.5; }
/* LearnDash's own join / "course ended" button, in the theme's button style */
#pcp .pcp-ld-buttons { display: inline-block; }
#pcp .pcp-ld-buttons form { margin: 0; }
#pcp .pcp-ld-buttons .btn-join, #pcp .pcp-ld-buttons input[type="submit"], #pcp .pcp-ld-buttons button, #pcp .pcp-ld-buttons a.button {
	display: inline-block; margin: 10px 0; padding: 12px 28px; border: 0; border-radius: 5px; cursor: pointer;
	background: var(--pcp-orange) !important; color: #fff !important; font: 600 17px/1.3 "Work Sans", Helvetica, Arial, sans-serif !important; text-transform: none;
}
#pcp .pcp-ld-buttons span.btn-join { background: rgba(255, 255, 255, .15) !important; cursor: default; }

/* ---- course content: each module and its lessons, with Launch Module ---- */
#pcp .pcp-content__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
#pcp .pcp-content__head h3 { margin: 0; }
#pcp .pcp-content__all {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 5px;
	background: none; color: #fff; cursor: pointer; font: 600 15px "Work Sans", Helvetica, Arial, sans-serif;
}
#pcp .pcp-content__all:hover, #pcp .pcp-content__all:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); }
#pcp .pcp-content__all .pcp-i { transition: transform .2s ease; }
#pcp .pcp-content__all[aria-expanded="true"] .pcp-i { transform: rotate(180deg); }
#pcp .pcp-lessons { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
#pcp .pcp-lesson { margin: 0; background: var(--pcp-panel); border-radius: 5px; list-style: none; }
#pcp .pcp-lesson__head { display: flex; align-items: center; gap: 18px; padding: 25px; }
#pcp .pcp-lesson__title { flex: 1; min-width: 0; }
#pcp .pcp-lesson__title h5 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 4px; }
#pcp .pcp-lesson__title h5 .pcp-done { margin: 0; }
#pcp .pcp-lesson__title p { margin: 0; }
#pcp .pcp-lesson__count { color: var(--pcp-muted); }
#pcp .pcp-lesson__lock { display: inline-flex; color: var(--pcp-muted); }
#pcp .pcp-lesson__toggle {
	flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--pcp-orange); color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color .3s ease;
}
#pcp .pcp-lesson__toggle:hover, #pcp .pcp-lesson__toggle:focus-visible { background: var(--pink, #b00060); }
#pcp .pcp-lesson__toggle .pcp-i { width: 18px; height: 18px; transition: transform .2s ease; }
#pcp .pcp-lesson__toggle[aria-expanded="true"] .pcp-i { transform: rotate(180deg); }
#pcp .pcp-lesson__steps[hidden] { display: none; }
#pcp .pcp-lesson__steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 25px 25px; list-style: none; }
#pcp .pcp-step { display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 18px; background: var(--pcp-panel-2); border-radius: 5px; list-style: none; }
#pcp .pcp-step__icon {
	flex: none; width: 36px; height: 36px; border-radius: 5px; background: var(--pcp-light); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
#pcp .pcp-step__icon .pcp-i { width: 13px; height: 13px; }
#pcp .pcp-step.is-done .pcp-step__icon { background: #2fa36b; }
#pcp .pcp-step__title { flex: 1; min-width: 0; }
#pcp .pcp-step__title strong { display: block; font-weight: 600; line-height: 1.4; }
#pcp .pcp-step__title span { font-size: 14px; color: var(--pcp-muted); }
#pcp .pcp-step .pcp-launch { flex: none; margin: 0; white-space: nowrap; }
#pcp .pcp-step__locked { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--pcp-muted); white-space: nowrap; }

/* ---- testimonial ---- */
#pcp .pcp-quote figure { margin: 0; }
#pcp .pcp-quote blockquote { margin: 0 0 20px; padding: 0 0 0 28px; border-left: 4px solid var(--pcp-orange); }
#pcp .pcp-quote blockquote p { margin: 0; font-size: 26px; line-height: 1.5; font-weight: 600; color: #fff; }
#pcp .pcp-quote figcaption { padding-left: 32px; color: var(--pcp-muted); }
#pcp .pcp-quote figcaption strong { color: #fff; }

/* ---- closing call to action (theme .pageCTA) ---- */
#pcp .pcp-cta { margin-top: 100px; }
#pcp .pcp-cta .orange-button { padding: 12px 28px; font-size: 17px; }

/* ---- trailer pop-up ---- */
#pcp .pcp-modal { width: min(960px, 92vw); padding: 0; border: 0; background: #000; overflow: visible; border-radius: 5px; }
#pcp .pcp-modal::backdrop { background: rgba(6, 14, 32, .85); }
#pcp .pcp-modal__frame { aspect-ratio: 16 / 9; }
#pcp .pcp-modal__frame iframe, #pcp .pcp-modal__frame video { display: block; width: 100%; height: 100%; border: 0; }
#pcp .pcp-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

@media (max-width: 1100px) {
	#pcp .pcp-hero__sub { max-width: none; }
}
@media (max-width: 760px) {
	#pcp .pcp-hero .single-title { margin-bottom: 60px; }
	#pcp .pcp-hero__sub { font-size: 18px; }
	#pcp .pcp-hero__actions .orange-button, #pcp .pcp-ghost-button { flex: 1 1 100%; justify-content: center; text-align: center; }
	#pcp .pcp-facts .core-bg .pcp-i { width: 56px; height: 56px; }
	#pcp .pcp-lesson__head { padding: 18px; gap: 14px; }
	#pcp .pcp-lesson__steps { padding: 0 14px 14px; }
	#pcp .pcp-step { flex-wrap: wrap; row-gap: 12px; padding: 14px; }
	#pcp .pcp-step__title { flex: 1 1 calc(100% - 52px); }
	#pcp .pcp-step .pcp-launch, #pcp .pcp-step__locked { margin-left: 52px; }
	#pcp .pcp-quote blockquote p { font-size: 20px; }
}

/* ======================================================================================================
 * The learning view (templates/course-learning.php): what a learner with access sees.
 * Progress card, course content with module and lesson statuses, side card. PMI navy / light blue / pink / orange.
 * ====================================================================================================== */
#pcp.pcl { --pcl-card: #263f68; --pcl-row: #22385c; --pcl-row-next: #2f4b78; --pcl-track: #1a2b48; padding: 130px 0 100px; }
#pcp.pcl .pcl__inner {
	max-width: 1240px; margin: 0 auto; padding: 0 30px;
	display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start;
}
#pcp.pcl h1, #pcp.pcl h2, #pcp.pcl h3 { text-transform: none; }

/* progress card */
#pcp.pcl .pcl-progress { background: var(--pcl-card); border-radius: 12px; padding: 40px; margin-bottom: 48px; }
#pcp.pcl .pcl-eyebrow { margin: 0 0 12px; color: var(--pcp-light); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#pcp.pcl .pcl-title { margin: 0 0 28px; font-size: 40px; line-height: 1.15; }
#pcp.pcl .pcl-progress__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
#pcp.pcl .pcl-progress__row p { margin: 0; color: var(--pcp-muted); }
#pcp.pcl .pcl-progress__row .pcl-progress__pc { color: #fff; font-size: 30px; font-weight: 800; line-height: 1; }
#pcp.pcl .pcl-bar { display: block; height: 10px; border-radius: 5px; background: var(--pcl-track); overflow: hidden; }
#pcp.pcl .pcl-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--pcp-light); }
#pcp.pcl .pcl-bar--small { width: 235px; max-width: 45%; height: 6px; flex: none; }

/* course content */
#pcp.pcl .pcl-content__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
#pcp.pcl .pcl-content__head h2 { margin: 0; font-size: 32px; }
#pcp.pcl .pcl-expand { padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--pcp-light); font: 700 15px "Work Sans", Helvetica, Arial, sans-serif; }
#pcp.pcl .pcl-expand:hover, #pcp.pcl .pcl-expand:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#pcp.pcl .pcl-modules { gap: 16px; }
#pcp.pcl .pcl-module { background: var(--pcl-card); border-radius: 12px; }
#pcp.pcl .pcl-module__head { padding: 28px; gap: 22px; cursor: pointer; }
#pcp.pcl .pcl-module__tile {
	flex: none; width: 56px; height: 56px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
	background: #1f3354; border: 2px solid rgba(255, 255, 255, .25); color: #fff; font-size: 22px; font-weight: 800;
}
#pcp.pcl .pcl-module--complete .pcl-module__tile { background: var(--pcp-light); border-color: var(--pcp-light); }
#pcp.pcl .pcl-module--complete .pcl-module__tile .pcp-i { width: 26px; height: 26px; stroke-width: 3; }
#pcp.pcl .pcl-module--progress .pcl-module__tile { background: var(--pink, #b00060); border-color: var(--pink, #b00060); }
#pcp.pcl .pcl-module__text { flex: 1; min-width: 0; }
#pcp.pcl .pcl-module__eyebrow { margin: 0 0 4px; color: var(--pcp-muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#pcp.pcl .pcl-module__text h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
#pcp.pcl .pcl-module__progress { display: flex; align-items: center; gap: 14px; color: var(--pcp-muted); font-size: 15px; }
#pcp.pcl .pcl-module__toggle { width: 46px; height: 46px; }
#pcp.pcl .pcl-module__toggle[aria-expanded="true"] { background: var(--pink, #b00060); }

/* lessons */
#pcp.pcl .pcl-steps { padding: 0 28px 28px; gap: 8px; }
#pcp.pcl .pcl-step { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 8px; background: var(--pcl-row); }
#pcp.pcl .pcl-step--next { background: var(--pcl-row-next); box-shadow: inset 4px 0 0 var(--pcp-orange); }
#pcp.pcl .pcl-step__tile {
	flex: none; width: 46px; height: 46px; border-radius: 6px; background: var(--pcp-light); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
#pcp.pcl .pcl-step__tile .pcp-i { width: 22px; height: 22px; }
#pcp.pcl .pcl-step__text { flex: 1; min-width: 0; }
#pcp.pcl .pcl-step__text strong { display: block; font-size: 17px; line-height: 1.35; }
#pcp.pcl .pcl-step__text span { color: var(--pcp-muted); font-size: 14px; }
#pcp.pcl .pcl-state { flex: none; width: 140px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--pcp-muted); }
#pcp.pcl .pcl-state__icon { width: 26px; height: 26px; flex: none; }
#pcp.pcl .pcl-state--complete { color: var(--pcp-light); }
#pcp.pcl .pcl-state--next { color: #fff; }
#pcp.pcl .pcl-state--next .pcl-state__icon { color: var(--pcp-orange); }
#pcp.pcl .pcl-step__go { flex: none; min-width: 120px; margin: 0; padding: 12px 20px; text-align: center; }

/* what you'll learn */
#pcp.pcl .pcl-outcomes { margin-top: 56px; }
#pcp.pcl .pcl-outcomes h2 { font-size: 32px; margin: 0 0 20px; }
#pcp.pcl .pcl-outcomes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#pcp.pcl .pcl-outcomes li { display: flex; gap: 14px; align-items: flex-start; margin: 0; list-style: none; line-height: 1.5; }
#pcp.pcl .pcl-outcomes li .pcp-i { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--pcp-light); stroke-width: 3; }

/* side card */
#pcp.pcl .pcl__side { position: static; }
#pcp.pcl .pcl-card { max-width: none; border-radius: 12px; overflow: hidden; }
#pcp.pcl .pcl-card .obj-top img, #pcp.pcl .pcl-card .pcp-card__trailer img { border-radius: 0; }
#pcp.pcl .pcl-card h3 { margin: 0 0 16px; font-size: 24px; }
#pcp.pcl .pcl-facts { margin: 0; }
#pcp.pcl .pcl-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pcp-line); }
#pcp.pcl .pcl-facts dt { color: var(--pcp-muted); }
#pcp.pcl .pcl-facts dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 1100px) {
	#pcp.pcl .pcl__inner { grid-template-columns: minmax(0, 1fr); }
	#pcp.pcl .pcl__side { position: static; order: -1; max-width: 560px; }
	#pcp.pcl .pcl-card .obj-top { display: none; } /* the trailer stays in reach on wide screens; here the learning comes first */
}
@media (max-width: 960px) {
	#pcp.pcl { padding-top: 120px; }
}
@media (max-width: 760px) {
	#pcp.pcl .pcl__inner { padding: 0 16px; }
	#pcp.pcl .pcl-progress { padding: 24px; }
	#pcp.pcl .pcl-title { font-size: 28px; }
	#pcp.pcl .pcl-module__head { padding: 18px; gap: 14px; }
	#pcp.pcl .pcl-module__tile { width: 44px; height: 44px; font-size: 18px; }
	#pcp.pcl .pcl-module__text h3 { font-size: 18px; }
	#pcp.pcl .pcl-steps { padding: 0 12px 12px; }
	#pcp.pcl .pcl-step { flex-wrap: wrap; gap: 12px 14px; padding: 14px; }
	#pcp.pcl .pcl-step__tile { width: 38px; height: 38px; }
	#pcp.pcl .pcl-step__text { flex: 1 1 calc(100% - 52px); }
	#pcp.pcl .pcl-state { width: auto; margin-left: 52px; }
	#pcp.pcl .pcl-step__go { margin-left: auto; min-width: 96px; padding: 10px 16px; }
}

/* "My resources": the course's and modules' Materials (templates/course-learning.php) */
#pcp.pcl .pcl-resources { margin-top: 24px; padding: 28px; border-radius: 12px; background: var(--pcp-panel); }
#pcp.pcl .pcl-resources__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#pcp.pcl .pcl-resources__head h3 { margin: 0; font-size: 24px; }
#pcp.pcl .pcl-resources__head span { color: var(--pcp-muted); font-size: 15px; white-space: nowrap; }
#pcp.pcl .pcl-resources__intro { margin: 6px 0 18px; color: var(--pcp-muted); font-size: 15px; line-height: 1.5; }
#pcp.pcl .pcl-resources ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
#pcp.pcl .pcl-file { display: flex; align-items: center; gap: 14px; margin: 0; list-style: none; }
#pcp.pcl .pcl-file__tile { flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--pcp-orange); color: #fff; display: flex; align-items: center; justify-content: center; }
#pcp.pcl .pcl-file--pdf .pcl-file__tile { background: var(--pink, #b00060); }
#pcp.pcl :is(.pcl-file--doc, .pcl-file--docx) .pcl-file__tile { background: var(--pcp-light); }
#pcp.pcl :is(.pcl-file--xls, .pcl-file--xlsx, .pcl-file--csv) .pcl-file__tile { background: #2fa36b; }
#pcp.pcl .pcl-file__tile .pcp-i { width: 22px; height: 22px; }
#pcp.pcl .pcl-file__text { flex: 1; min-width: 0; }
#pcp.pcl .pcl-file__text strong { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
#pcp.pcl .pcl-file__text span { color: var(--pcp-muted); font-size: 14px; }
#pcp.pcl .pcl-file__get {
	flex: none; width: 40px; height: 40px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff;
	display: flex; align-items: center; justify-content: center; transition: background-color .2s ease;
}
#pcp.pcl .pcl-file__get:hover, #pcp.pcl .pcl-file__get:focus-visible { background: var(--pcp-orange); }
#pcp.pcl .pcl-file__get .pcp-i { width: 20px; height: 20px; }

/* Learning Outcomes in the side card: the theme's info-box accordion (style.css), with a real button for keyboards */
#pcp.pcl .pcl-accordion { margin: 20px -30px 0; padding: 20px 30px 4px; border-top: 1px solid var(--pcp-line); }
#pcp.pcl .pcl-accordion .app-accordian__item { background: transparent; border-color: rgba(255, 255, 255, .25); }
#pcp.pcl .pcl-accordion .app-accordian__title { color: #fff; }
#pcp.pcl .pcl-accordion__toggle { flex: 1; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#pcp.pcl .pcl-accordion__toggle:focus-visible { outline: 2px solid var(--pcp-light); outline-offset: 4px; }
#pcp.pcl .pcl-accordion .app-accordian__content { color: #fff; }
#pcp.pcl .pcl-accordion .app-accordian__content li { margin-bottom: 8px; line-height: 1.45; }