/* ══════════════════════════════════════════════════════════════════
   COURSES — site theme alignment
   Bring the courses plugin (fc-* classes) in line with the
   PVentures dark/pv-page design system. Theme tokens (--pg-*)
   from app.css drive colors so light-mode swaps work for free.
   ══════════════════════════════════════════════════════════════════ */

/* ── Base shell ──────────────────────────────────────────────────── */
.fc-page,
.fc-learn {
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: var(--font-dark-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 70vh;
}

.fc-page *,
.fc-learn * {
  box-sizing: border-box;
}

.fc-page h1, .fc-page h2, .fc-page h3, .fc-page h4, .fc-page h5, .fc-page h6,
.fc-learn h1, .fc-learn h2, .fc-learn h3, .fc-learn h4, .fc-learn h5, .fc-learn h6 {
  color: var(--pg-text);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  line-height: 1.1;
  margin: 0 0 20px 0;
}

.fc-page h1, .fc-learn h1 {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 2px;
}
.fc-page h2, .fc-learn h2 {
  font-size: clamp(28px, 3vw, 40px);
}
.fc-page h3, .fc-learn h3 {
  font-size: 22px;
  letter-spacing: 1px;
}

.fc-page p,
.fc-learn p {
  color: var(--pg-text2);
  margin: 0 0 16px 0;
}

.fc-page a,
.fc-learn a {
  color: var(--pg-blue-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fc-page a:hover,
.fc-learn a:hover {
  color: var(--pg-text);
}

.fc-page strong,
.fc-learn strong {
  color: var(--pg-text);
}

.fc-page ul,
.fc-learn ul,
.fc-page ol,
.fc-learn ol {
  color: var(--pg-text2);
  padding-left: 20px;
  margin: 0 0 16px 0;
}

.fc-page li,
.fc-learn li {
  color: var(--pg-text2);
  margin-bottom: 8px;
}

/* ── Eyebrow / meta tags ────────────────────────────────────────── */
.fc-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pg-blue-bright) !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: block;
}

.fc-muted {
  color: var(--pg-text3) !important;
  font-size: 14px;
}

.fc-hero-copy {
  font-size: 20px;
  color: var(--pg-text2) !important;
  max-width: 720px;
  line-height: 1.7;
  margin: 0;
}

/* ── Catalog hero & generic detail hero ─────────────────────────── */
.fc-catalog-hero,
.fc-detail-hero,
.fc-dashboard-hero {
  padding: 100px 60px 40px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.fc-detail-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 60px;
}

.fc-detail-hero__content > h1 {
  margin-bottom: 16px;
}

.fc-detail-hero__image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--pg-card-border);
  box-shadow: var(--pg-glow);
  display: block;
}

.fc-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.fc-detail-meta > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-blue-bright);
  border: 1px solid var(--pg-border);
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--pg-accent-08);
}

/* ── Catalog grid ───────────────────────────────────────────────── */
.fc-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  padding: 40px 60px 100px;
  max-width: 1280px;
  margin: 0 auto;
}

.fc-course-card,
.fc-dashboard-card {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-course-card:hover,
.fc-dashboard-card:hover {
  border-color: var(--pg-card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--pg-glow);
}

.fc-course-card__media,
.fc-dashboard-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--pg-bg3);
  overflow: hidden;
  position: relative;
}

.fc-course-card__media img,
.fc-dashboard-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-course-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-course-card__body,
.fc-dashboard-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.fc-course-card__body h2,
.fc-dashboard-card__body h2 {
  font-size: 24px;
  margin: 0;
}

.fc-course-card__body h2 a,
.fc-dashboard-card__body h2 a {
  color: var(--pg-text) !important;
}
.fc-course-card__body h2 a:hover,
.fc-dashboard-card__body h2 a:hover {
  color: var(--pg-blue-bright) !important;
}

.fc-course-card__body p,
.fc-dashboard-card__body p {
  font-size: 15px;
  color: var(--pg-text2);
  margin: 0;
}

.fc-course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fc-course-card__meta > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-blue-bright);
  padding: 4px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 3px;
}

.fc-course-card__footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--pg-card-border);
}

.fc-price {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--pg-text);
  font-weight: 600;
}

.fc-price--large {
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--pg-blue-bright);
  display: block;
  margin-bottom: 16px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.fc-primary-button,
a.fc-primary-button,
button.fc-primary-button {
  background: var(--pg-blue) !important;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}

.fc-primary-button:hover,
a.fc-primary-button:hover,
button.fc-primary-button:hover {
  background: var(--pg-blue2) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.fc-primary-button[disabled],
button.fc-primary-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.fc-secondary-button,
a.fc-secondary-button,
button.fc-secondary-button {
  background: transparent !important;
  color: var(--pg-text) !important;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1px solid var(--pg-border) !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}

.fc-secondary-button:hover,
a.fc-secondary-button:hover,
button.fc-secondary-button:hover {
  border-color: var(--pg-blue) !important;
  color: var(--pg-blue-bright) !important;
}

.fc-link-button,
a.fc-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pg-blue-bright) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}

.fc-link-button::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.2s ease;
}
.fc-link-button:hover::after {
  transform: translateX(4px);
}

.fc-back-link,
a.fc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-blue-bright) !important;
  text-decoration: none !important;
  margin-bottom: 24px;
}
.fc-back-link::before {
  content: '\2190';
}
.fc-back-link:hover {
  color: var(--pg-text) !important;
}

/* ── Detail layout (sidebar + main) ─────────────────────────────── */
.fc-detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 60px 100px;
}

.fc-detail-main {
  min-width: 0;
  /* Plugin hardcodes background: #fff; theme it so headings (--pg-text)
     contrast correctly in dark mode and light mode alike. */
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  padding: 32px;
}

.fc-content-section {
  margin-bottom: 64px;
}
.fc-content-section:last-child {
  margin-bottom: 0;
}

.fc-rich-text {
  color: var(--pg-text);
  line-height: 1.8;
  font-size: 16px;
}

.fc-rich-text h1, .fc-rich-text h2, .fc-rich-text h3, .fc-rich-text h4 {
  color: var(--pg-text);
  margin-top: 32px;
  margin-bottom: 16px;
}

.fc-rich-text p {
  margin-bottom: 16px;
}

.fc-rich-text a {
  color: var(--pg-blue-bright) !important;
  text-decoration: underline;
  text-decoration-color: var(--pg-accent-30);
  text-underline-offset: 4px;
}
.fc-rich-text a:hover {
  text-decoration-color: var(--pg-blue-bright);
}

.fc-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.fc-feature-list li {
  position: relative;
  padding: 16px 16px 16px 44px;
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 6px;
  color: var(--pg-text);
  font-size: 15px;
  line-height: 1.5;
}

.fc-feature-list li::before {
  content: '\2713';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pg-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* ── Course outline (curriculum) ────────────────────────────────── */
.fc-outline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-outline-section {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 8px;
  padding: 24px;
}

.fc-outline-section > h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--pg-text);
  margin: 0 0 8px 0;
  letter-spacing: 1px;
  /* Plugin sets background: #f3f6f2 + padding: 12px 14px on this h3, which
     renders as a pale rectangle in dark mode. Override both so the title
     sits transparently on the themed .fc-outline-section card. */
  background: transparent;
  padding: 0;
}

.fc-outline-section > p {
  font-size: 14px;
  color: var(--pg-text2);
  margin: 0 0 16px 0;
}

.fc-outline-section ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fc-outline-section ol li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pg-card-border);
  color: var(--pg-text);
  font-size: 15px;
  margin: 0;
}

.fc-outline-section ol li:last-child {
  border-bottom: none;
}

.fc-outline-section ol li small {
  display: inline-flex;
  gap: 8px;
  color: var(--pg-text3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.fc-outline-section ol li small span {
  white-space: nowrap;
}

/* ── Resources / Instructor ─────────────────────────────────────── */
.fc-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.fc-resource-card {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-resource-card strong {
  color: var(--pg-text);
  font-size: 16px;
}

.fc-resource-card p {
  color: var(--pg-text2);
  font-size: 14px;
  margin: 0;
}

.fc-instructor {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 8px;
  padding: 24px;
}

.fc-instructor img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--pg-border);
}

.fc-instructor h3 {
  margin: 0 0 4px 0;
  font-size: 22px;
}

.fc-instructor p {
  margin: 0 0 8px 0;
  font-size: 15px;
}

/* ── Sidebar / purchase box ─────────────────────────────────────── */
.fc-detail-sidebar {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

.fc-purchase-box {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-purchase-box .fc-primary-button,
.fc-purchase-box .fc-secondary-button {
  width: 100%;
}

.fc-purchase-box p {
  font-size: 13px;
  color: var(--pg-text3);
  margin: 4px 0 0 0;
}

.fc-sidebar-button {
  margin-top: 4px;
}

/* ── Progress bar ───────────────────────────────────────────────── */
.fc-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-progress > span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pg-blue-bright);
  letter-spacing: 1px;
  min-width: 40px;
  text-align: right;
}

.fc-progress__track {
  flex: 1;
  height: 6px;
  background: var(--pg-accent-10);
  border-radius: 3px;
  overflow: hidden;
}

.fc-progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pg-blue) 0%, var(--pg-blue-bright) 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Dashboard (My Courses) ─────────────────────────────────────── */
.fc-dashboard-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  padding: 20px 60px 100px;
  max-width: 1280px;
  margin: 0 auto;
}

.fc-certificate-actions {
  background: var(--pg-accent-08);
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-certificate-actions > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-certificate-actions strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--pg-blue-bright);
}

.fc-certificate-actions span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pg-text3);
  letter-spacing: 1px;
}

.fc-certificate-actions__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Empty states ───────────────────────────────────────────────── */
.fc-empty {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  padding: 60px 40px;
  text-align: center;
  max-width: 720px;
  margin: 40px auto 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fc-empty h2 {
  margin: 0;
}

.fc-empty p {
  color: var(--pg-text2);
  margin: 0;
}

.fc-empty--small {
  padding: 32px 24px;
  margin: 16px auto;
}

/* ── Checkout ───────────────────────────────────────────────────── */
.fc-checkout {
  padding: 100px 24px;
  display: flex;
  justify-content: center;
}

.fc-checkout-card {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 12px;
  padding: 40px;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-checkout-card > p {
  color: var(--pg-text2);
  margin: 0;
}

.fc-checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--pg-bg3);
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  margin: 8px 0;
}

.fc-checkout-summary span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-checkout-summary strong {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--pg-blue-bright);
  letter-spacing: 1px;
}

.fc-payment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-payment-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--pg-text);
  font-size: 14px;
}

.fc-payment-form label > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-card-element {
  background: var(--pg-bg3);
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  padding: 14px;
  min-height: 48px;
}

.fc-form-message {
  font-size: 14px;
  color: var(--pg-text2);
  margin: 0;
  min-height: 1em;
}

.fc-form-message.is-success {
  color: #10B981;
}

.fc-form-message.is-error {
  color: #ef4444;
}

.fc-help-text {
  font-size: 13px;
  color: var(--pg-text3);
  margin: 0;
}

.fc-status-note {
  background: var(--pg-accent-08);
  border: 1px solid var(--pg-border);
  border-left: 3px solid var(--pg-blue-bright);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-status-note strong {
  font-size: 14px;
  color: var(--pg-text);
}

.fc-status-note span {
  font-size: 13px;
  color: var(--pg-text2);
}

.fc-status-note--test {
  border-left-color: #F59E0B;
}

.fc-status-note.is-success {
  border-left-color: #10B981;
}

.fc-checkout-success {
  text-align: center;
  align-items: center;
}

.fc-checkout-success .fc-eyebrow {
  margin-bottom: 8px;
}

.fc-checkout-success h1 {
  margin-bottom: 8px;
}

.fc-completion-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

/* ── Share card / share actions ─────────────────────────────────── */
.fc-share-card {
  background: var(--pg-accent-08);
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-share-card strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--pg-text);
  display: block;
}

.fc-share-card span {
  font-size: 13px;
  color: var(--pg-text3);
  display: block;
  margin-top: 2px;
}

.fc-share-card--compact,
.fc-share-card--sidebar {
  padding: 16px;
}

.fc-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-share-actions--inline {
  display: inline-flex;
  align-items: center;
}

.fc-share-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pg-bg2);
  border: 1px solid var(--pg-border);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--pg-text) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-share-action:hover {
  border-color: var(--pg-blue) !important;
  color: var(--pg-blue-bright) !important;
}

.fc-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-weight: 700;
  color: var(--pg-blue-bright);
}

.fc-share-label {
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   LEARN (player) view
   ══════════════════════════════════════════════════════════════════ */
.fc-learn {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 80px);
}

.fc-learn-sidebar {
  background: var(--pg-bg2);
  border-right: 1px solid var(--pg-card-border);
  padding: 32px 24px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}

.fc-learn-sidebar__top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.fc-my-courses-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-blue-bright) !important;
}

.fc-outline-toggle {
  display: none;
  width: 100%;
  background: var(--pg-bg3);
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--pg-text);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  flex-direction: column;
  gap: 4px;
}

.fc-outline-toggle span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--pg-text3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.fc-learn-outline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fc-learn-outline section h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-text3);
  margin: 0 0 8px 0;
  padding: 0 8px;
}

.fc-learn-outline a {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--pg-text2) !important;
  font-size: 14px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.fc-learn-outline a:hover {
  background: var(--pg-accent-04);
  color: var(--pg-text) !important;
}

.fc-learn-outline a.is-active {
  background: var(--pg-accent-12);
  border-color: var(--pg-border);
  color: var(--pg-text) !important;
}

.fc-learn-outline a.is-completed .fc-outline-status {
  color: var(--pg-blue-bright);
}

.fc-outline-status {
  color: var(--pg-text3);
  font-size: 14px;
  line-height: 1.4;
}

.fc-outline-title {
  display: block;
  line-height: 1.4;
  font-weight: 500;
}

.fc-outline-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.fc-outline-meta small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-outline-state {
  color: var(--pg-blue-bright) !important;
}

/* Learn main / lesson */
.fc-learn-main {
  padding: 48px 56px 80px;
  max-width: 960px;
  width: 100%;
  min-width: 0;
}

.fc-lesson-header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-lesson-header h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 0;
}

.fc-lesson-progress {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-lesson-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-lesson-progress strong {
  font-size: 18px;
  color: var(--pg-blue-bright);
}

/* Lesson stage / media */
.fc-lesson-stage {
  background: #000;
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 24px 0 32px;
  position: relative;
}

.fc-video,
.fc-inline-video,
.fc-video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
}

.fc-inline-video {
  border-radius: 8px;
  margin: 16px 0;
}

.fc-audio {
  width: 100%;
  margin: 16px 0;
}

.fc-lesson-image {
  display: block;
  width: 100%;
  height: auto;
}

.fc-document-shell {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fc-document-shell--inline {
  margin: 16px 0;
}

.fc-document-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pg-card-border);
  flex-wrap: wrap;
}

.fc-document-toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.fc-document-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-blue-bright);
}

.fc-document-toolbar strong {
  font-size: 16px;
  color: var(--pg-text);
}

.fc-document-toolbar p {
  margin: 0;
  font-size: 13px;
  color: var(--pg-text3);
}

.fc-document-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fc-document-frame {
  width: 100%;
  min-height: 600px;
  border: 0;
  background: #fff;
}

.fc-stage-placeholder {
  padding: 32px;
  text-align: center;
  background: var(--pg-bg3);
  color: var(--pg-text2);
}

.fc-stage-placeholder strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--pg-text);
  margin-bottom: 8px;
}

.fc-resource-link,
a.fc-resource-link {
  display: inline-block;
  padding: 8px 14px;
  background: var(--pg-blue) !important;
  color: #fff !important;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.fc-resource-link:hover {
  background: var(--pg-blue2) !important;
}

.fc-resource-link--secondary,
a.fc-resource-link--secondary {
  background: transparent !important;
  color: var(--pg-text) !important;
  border: 1px solid var(--pg-border);
}

.fc-resource-link--secondary:hover {
  border-color: var(--pg-blue) !important;
  color: var(--pg-blue-bright) !important;
}

/* Lesson content */
.fc-lesson-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.fc-download {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 8px;
  flex-wrap: wrap;
}

.fc-download strong {
  display: block;
  color: var(--pg-text);
  font-size: 15px;
}

.fc-download span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-download__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fc-download__actions a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-blue-bright) !important;
  border: 1px solid var(--pg-border);
  padding: 6px 12px;
  border-radius: 4px;
}

.fc-download__actions a:hover {
  border-color: var(--pg-blue) !important;
}

.fc-embed,
.fc-embed-frame {
  display: block;
  width: 100%;
  min-height: 400px;
  border: 1px solid var(--pg-card-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Quizzes & assignments */
.fc-assessments {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px 0;
}

.fc-quiz,
.fc-assignment {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-quiz h2,
.fc-assignment h2 {
  margin: 0;
  font-size: 24px;
}

.fc-assessment-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-question {
  border: 1px solid var(--pg-card-border);
  border-radius: 6px;
  padding: 16px;
  margin: 0;
  background: var(--pg-bg3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-question legend {
  font-weight: 600;
  color: var(--pg-text);
  padding: 0 4px;
}

.fc-question label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pg-text2);
  cursor: pointer;
  padding: 6px 4px;
}

.fc-question input[type="text"],
.fc-assignment input[type="url"],
.fc-assignment textarea {
  background: var(--pg-bg3);
  border: 1px solid var(--pg-border);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--pg-text);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
}

.fc-question input[type="text"]:focus,
.fc-assignment input[type="url"]:focus,
.fc-assignment textarea:focus {
  outline: none;
  border-color: var(--pg-blue);
  box-shadow: 0 0 0 2px var(--pg-accent-25);
}

.fc-assignment label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pg-text3);
}

.fc-assessment-status {
  background: var(--pg-accent-08);
  border: 1px solid var(--pg-border);
  border-left: 3px solid var(--pg-blue-bright);
  border-radius: 4px;
  padding: 12px 16px;
}

.fc-assessment-status.is-passed { border-left-color: #10B981; }
.fc-assessment-status.is-failed { border-left-color: #ef4444; }

/* Completion + lesson nav */
.fc-completion-card {
  background: var(--pg-bg2);
  border: 1px solid var(--pg-card-border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.fc-completion-card--done {
  border-left: 3px solid #10B981;
}

.fc-completion-card--finish {
  text-align: center;
  padding: 32px;
  align-items: center;
}

.fc-completion-card strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--pg-text);
}

.fc-lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--pg-card-border);
  flex-wrap: wrap;
}

.fc-lesson-nav .fc-secondary-button {
  margin-right: auto;
}

.fc-lesson-nav .fc-primary-button {
  margin-left: auto;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fc-detail-hero,
  .fc-detail-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fc-detail-sidebar {
    position: static;
  }

  .fc-learn {
    grid-template-columns: 1fr;
  }

  .fc-learn-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--pg-card-border);
  }

  .fc-outline-toggle {
    display: flex;
  }

  .fc-learn-outline {
    display: none;
  }

  .fc-learn-outline[data-course-outline][aria-hidden="false"],
  .fc-outline-toggle[aria-expanded="true"] + .fc-learn-outline {
    display: flex;
  }
}

@media (max-width: 768px) {
  .fc-catalog-hero,
  .fc-detail-hero,
  .fc-dashboard-hero {
    padding: 60px 24px 24px;
  }

  .fc-course-grid,
  .fc-dashboard-list {
    padding: 24px;
    gap: 20px;
  }

  .fc-detail-layout {
    padding: 0 24px 60px;
  }

  .fc-learn-main {
    padding: 32px 24px 60px;
  }

  .fc-checkout-card {
    padding: 28px 20px;
  }

  .fc-instructor {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc-completion-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-detail-hero__content > h1 {
    font-size: 36px;
  }
}

/* ── Light-mode adjustments ─────────────────────────────────────── */
[data-theme="light"] .fc-lesson-stage {
  background: #f1f5f9;
}

[data-theme="light"] .fc-video,
[data-theme="light"] .fc-inline-video,
[data-theme="light"] .fc-video-embed {
  background: #0a0a0a;
}

[data-theme="light"] .fc-document-frame {
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   READABILITY BOOST — Bebas Neue at 400 reads thin against the light
   surface; bump weight to 700 and add accent affordances so section
   starts are scannable.
   ══════════════════════════════════════════════════════════════════ */

/* Top-level section titles. `>` avoids matching nested headings
   inside the rich-text body, which get their own treatment below. */
.fc-content-section > h2,
.fc-quiz > h2,
.fc-assignment > h2 {
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--pg-card-border);
}

.fc-content-section > h2::after,
.fc-quiz > h2::after,
.fc-assignment > h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  background: var(--pg-blue-bright);
  border-radius: 2px;
}

/* Authored rich-text subheadings (markdown nests h2/h3 inside
   <div>/<section>, so descendant selector is correct here). */
.fc-rich-text h2,
.fc-rich-text h3,
.fc-rich-text h4 {
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 32px 0 12px 0;
  padding-left: 14px;
  border-left: 3px solid var(--pg-blue-bright);
  line-height: 1.2;
}

.fc-rich-text h2 { font-size: 26px; }
.fc-rich-text h3 { font-size: 22px; }
.fc-rich-text h4 { font-size: 18px; letter-spacing: 1px; }

.fc-rich-text > *:first-child { margin-top: 0; }

/* Paragraph / list copy inside descriptions — .fc-page p/li sets
   --pg-text2 with higher source-order priority than .fc-rich-text;
   override at the rich-text scope without !important. */
.fc-rich-text p,
.fc-rich-text li {
  color: var(--pg-text);
}

/* Curriculum + lesson-header + instructor + resource titles */
.fc-outline-section > h3 {
  font-weight: 700;
  border-left: 3px solid var(--pg-blue-bright);
  padding-left: 12px;
}

.fc-lesson-header h1 {
  font-weight: 700;
  letter-spacing: 2px;
}

.fc-instructor h3,
.fc-resource-card strong {
  font-weight: 700;
}

/* Theme remaining plugin containers that hardcode `background: #fff`. Without
   these overrides, the theme's heading color (--pg-text = #E8F0FE in dark
   mode) renders as pale-blue text on a stark-white card — unreadable. */
.fc-lesson-content,
.fc-lesson-nav,
.fc-lesson-progress,
.fc-assessments,
.fc-document-toolbar {
  background: var(--pg-bg2);
  border-color: var(--pg-card-border);
}