/*
 * MemberPress Courses classroom, branded to match the site.
 * Loaded only on /courses/ pages by inc/classroom.php. Colours that the
 * classroom exposes as settings (header, buttons, progress) are set there;
 * this file covers what the settings can't: logo, type, the navy chrome and
 * the shapes of buttons and cards.
 */

:root {
  --xbrat-navy: #0A0B22;
  --xbrat-navy-2: #111A3A;
  --xbrat-blue: #00AAFF;
  --xbrat-blue-dark: #0088CC;
  --xbrat-line: rgba(255, 255, 255, 0.12);
  --xbrat-muted: rgba(255, 255, 255, 0.7);
  --xbrat-radius: 1rem;
}

/* Type */
body.mpcs-classroom,
body.mpcs-classroom button,
body.mpcs-classroom input,
body.mpcs-classroom select,
body.mpcs-classroom textarea {
  font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
}
body.mpcs-classroom h1,
body.mpcs-classroom h2,
body.mpcs-classroom h3,
body.mpcs-classroom .entry-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xbrat-navy);
}
body.mpcs-classroom a { color: var(--xbrat-blue-dark); }

/* Header: navy bar with the white xBrat logo, like the site header */
body.mpcs-classroom #mpcs-navbar {
  background: var(--xbrat-navy);
  border-bottom: 1px solid var(--xbrat-line);
  min-height: 64px;
}
body.mpcs-classroom #mpcs-navbar .navbar-brand.site-branding {
  display: inline-block;
  width: 132px;
  height: 25px;
  background: var(--xbrat-logo) left center / contain no-repeat;
  font-size: 0;
}
body.mpcs-classroom #mpcs-navbar .navbar-brand.site-branding > span,
body.mpcs-classroom #mpcs-navbar .navbar-brand.site-branding > img { display: none; }
body.mpcs-classroom #mpcs-navbar .nav-back i { color: var(--xbrat-blue) !important; }
body.mpcs-classroom #mpcs-navbar .mpcs-nav-menu a,
body.mpcs-classroom #mpcs-navbar .dropdown > a,
body.mpcs-classroom #mpcs-navbar .btn-link { color: #fff !important; font-weight: 500; }
body.mpcs-classroom #mpcs-navbar .mpcs-nav-menu a:hover { color: var(--xbrat-blue) !important; }

/* Buttons: the site's blue pill */
body.mpcs-classroom .btn-green,
body.mpcs-classroom .btn.btn-primary,
body.mpcs-classroom .mpcs-lesson-button .btn,
body.mpcs-classroom #mpcs-navbar #mpcs-lesson-navigation > a:not(#mpcs-classroom-previous-lesson-link),
body.mpcs-classroom div#mpcs-lesson-navigation a:not(#previous_lesson_link),
body.mpcs-classroom div#mpcs-lesson-navigation button:not(#previous_lesson_link) {
  background: var(--xbrat-blue) !important;
  border-color: var(--xbrat-blue) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
}
body.mpcs-classroom .btn-green:hover,
body.mpcs-classroom .mpcs-lesson-button .btn:hover { background: var(--xbrat-blue-dark) !important; }
body.mpcs-classroom #mpcs-navbar #mpcs-lesson-navigation > a,
body.mpcs-classroom #mpcs-navbar #mpcs-lesson-navigation > button {
  border-radius: 999px;
  margin: 0 0.25rem;
  padding: 0.35rem 1.25rem;
  height: auto;
}

/* "Start next lesson" bar on the course page: readable label, not teal on teal */
body.mpcs-classroom #bookmark {
  background: rgba(0, 170, 255, 0.1) !important;
  border-radius: 999px;
  color: var(--xbrat-navy);
}
body.mpcs-classroom #bookmark .btn { color: #fff !important; }

/* Sidebar: navy, like the rest of the site */
body.mpcs-classroom #mpcs-sidebar {
  background: var(--xbrat-navy-2);
  color: #fff;
  border-right: 0;
}
body.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-wrapper,
body.mpcs-classroom #mpcs-sidebar #mpcs-sidebar-header,
body.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-content,
body.mpcs-classroom #mpcs-sidebar .mpcs-section,
body.mpcs-classroom #mpcs-sidebar .mpcs-lessons,
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson { background: transparent; }
body.mpcs-classroom #mpcs-sidebar h1,
body.mpcs-classroom #mpcs-sidebar h2,
body.mpcs-classroom #mpcs-sidebar .text-black,
body.mpcs-classroom #mpcs-sidebar a,
body.mpcs-classroom #mpcs-sidebar .tile,
body.mpcs-classroom #mpcs-sidebar .mpcs-section-title,
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson-link,
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson-row-link { color: #fff !important; }
body.mpcs-classroom #mpcs-sidebar .tile i { color: var(--xbrat-blue); }
body.mpcs-classroom #mpcs-sidebar .mpcs-section-title {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--xbrat-line);
}
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson,
body.mpcs-classroom #mpcs-sidebar .tile { border-color: var(--xbrat-line); }
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson:hover,
body.mpcs-classroom #mpcs-sidebar .tile:hover { background: rgba(255, 255, 255, 0.06); }
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson.current,
body.mpcs-classroom #mpcs-sidebar .tile.is-active {
  background: rgba(0, 170, 255, 0.18) !important;
  box-shadow: inset 3px 0 0 var(--xbrat-blue);
}
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson i,
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson-progress i { color: var(--xbrat-blue) !important; }
body.mpcs-classroom #mpcs-sidebar .course-progress .progress-text { color: var(--xbrat-muted) !important; }
body.mpcs-classroom .course-progress .progress-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
body.mpcs-classroom #mpcs-main .course-progress .progress-bar { background: #e6eaf2; }
body.mpcs-classroom .course-progress .user-progress { border-radius: 999px; }
body.mpcs-classroom #mpcs-sidebar .course-progress img,
body.mpcs-classroom #mpcs-sidebar-header img { border-radius: 0.5rem; }

/* Course page lesson list */
body.mpcs-classroom #mpcs-main .mpcs-section {
  border: 1px solid #e3e6ee;
  border-radius: var(--xbrat-radius);
  overflow: hidden;
}
body.mpcs-classroom #mpcs-main .mpcs-section-title {
  background: var(--xbrat-navy);
  color: #fff;
}
body.mpcs-classroom #mpcs-main .mpcs-section-title * { color: #fff; }
body.mpcs-classroom #mpcs-main .mpcs-lesson.current { background: rgba(0, 170, 255, 0.1) !important; }
body.mpcs-classroom #mpcs-main .mpcs-lesson-progress i { color: var(--xbrat-blue) !important; }

/* Courses list: navy page, rounded white cards */
body.post-type-archive-mpcs-course.mpcs-classroom { background: var(--xbrat-navy); }
body.post-type-archive-mpcs-course.mpcs-classroom .entry-content { background: transparent; }
body.post-type-archive-mpcs-course .mpcs-course-filter .btn,
body.post-type-archive-mpcs-course .mpcs-course-filter input[type=text],
body.post-type-archive-mpcs-course .mpcs-course-filter .input-group-btn {
  background: var(--xbrat-navy-2) !important;
  color: #fff !important;
  border-color: var(--xbrat-line) !important;
}
body.post-type-archive-mpcs-course .mpcs-course-filter .btn { border-radius: 999px; }
body.post-type-archive-mpcs-course .mpcs-course-filter .input-group input[type=text] { border-radius: 999px 0 0 999px; }
body.post-type-archive-mpcs-course .mpcs-course-filter .input-group-btn { border-radius: 0 999px 999px 0; }
body.post-type-archive-mpcs-course .mpcs-course-filter .dropdown a span,
body.post-type-archive-mpcs-course .mpcs-course-filter .dropdown a i { color: var(--xbrat-blue) !important; }
body.post-type-archive-mpcs-course .mpcs-cards .card {
  border: 0;
  border-radius: var(--xbrat-radius);
  overflow: hidden;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.post-type-archive-mpcs-course .mpcs-cards .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
body.post-type-archive-mpcs-course .mpcs-cards .card-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
body.post-type-archive-mpcs-course .mpcs-cards .card-title a,
body.post-type-archive-mpcs-course .mpcs-cards .card-title h2 {
  color: var(--xbrat-navy) !important;
  font-weight: 700;
}
body.post-type-archive-mpcs-course .mpcs-cards .card-body { color: #3a3c55; }
body.post-type-archive-mpcs-course .pagination a { color: #fff !important; }
body.post-type-archive-mpcs-course .no-results,
body.post-type-archive-mpcs-course .entry-content > .container > p { color: #fff; }

/* Sidebar course header and the mobile sidebar bar */
body.mpcs-classroom #mpcs-sidebar .course-progress { background: transparent; }
body.mpcs-classroom #mpcs-sidebar-navbar { background: var(--xbrat-navy); }
body.mpcs-classroom #mpcs-sidebar-navbar .sidebar-close {
  background: var(--xbrat-blue);
  border-color: var(--xbrat-blue);
  border-radius: 999px;
}
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson { border-bottom: 1px solid var(--xbrat-line); }
body.mpcs-classroom #mpcs-sidebar .mpcs-lesson + .mpcs-lesson { border-top: 0; }

/* Locked course cards: which plan unlocks them (inc/courseUpsell.php) */
body.post-type-archive-mpcs-course .mpcs-cards .xbrat-course-plan {
  display: inline-block;
  margin: 0.75rem 0 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 170, 255, 0.12);
  color: var(--xbrat-blue-dark);
  font-size: 0.8125rem;
  font-weight: 600;
}
body.post-type-archive-mpcs-course .mpcs-cards .xbrat-course-plan-icon { margin-right: 0.15rem; }
/* The plugin's own lock strip; the plan badge above replaces it. */
body.post-type-archive-mpcs-course .locked-course-overlay { display: none; }
