/** ProwessApps V4 - Reusable programming-language course hub. */
.pa-course-hub{--pa-course-accent:#1769e0;--pa-course-accent-dark:#0f55bd;color:var(--pa-text);background:var(--pa-surface-soft)}
.pa-course-hero{position:relative;overflow:hidden;padding:clamp(3.5rem,7vw,6rem) 0 5.5rem;color:#fff;background:radial-gradient(circle at 8% 10%,color-mix(in srgb,var(--pa-course-accent) 45%,transparent),transparent 24rem),linear-gradient(135deg,#0e253d,#174f8f)}
.pa-course-hero:after{content:"";position:absolute;right:-8rem;bottom:-10rem;width:28rem;height:28rem;border-radius:50%;background:color-mix(in srgb,var(--pa-course-accent) 28%,transparent)}
.pa-course-breadcrumb{position:relative;z-index:1;display:flex;gap:.55rem;margin-bottom:1.5rem;color:#d9e8f7;font-size:.9rem}.pa-course-breadcrumb a{color:#fff}
.pa-course-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.pa-course-eyebrow,.pa-course-card-kicker{display:inline-flex;align-items:center;gap:.45rem;color:var(--pa-course-accent);font-size:.76rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.pa-course-hero .pa-course-eyebrow{color:#ffe2c2}
.pa-course-hero h1{max-width:14ch;margin:.65rem 0 1rem;color:#fff;font-size:clamp(2.7rem,5vw,4.8rem);font-weight:900;line-height:1.02;letter-spacing:-.05em}.pa-course-hero>div p{max-width:62ch;color:#dbe8f4;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.pa-course-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}.pa-course-actions .btn{display:inline-flex;align-items:center;gap:.45rem}
.pa-course-btn-primary{color:#fff;background:var(--pa-course-accent);border:1px solid var(--pa-course-accent)}.pa-course-btn-primary:hover{color:#fff;background:var(--pa-course-accent-dark);border-color:var(--pa-course-accent-dark)}.pa-course-btn-secondary{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.55)}.pa-course-btn-secondary:hover{color:#fff;background:rgba(255,255,255,.12)}
.pa-course-outcomes{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:1.4rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--pa-radius-xl);box-shadow:var(--pa-shadow);backdrop-filter:blur(14px)}.pa-course-outcomes-icon{display:grid;width:3rem;height:3rem;place-items:center;color:#fff;background:var(--pa-course-accent);border-radius:var(--pa-radius);font-size:1.35rem}.pa-course-outcomes .pa-course-card-kicker{color:#ffe2c2}.pa-course-outcomes h2{margin:.2rem 0 0;color:#fff;font-size:1.4rem;font-weight:850}.pa-course-outcomes ul{grid-column:1/-1;display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.pa-course-outcomes li{display:flex;gap:.55rem;color:#f4f8fc}.pa-course-outcomes li i{margin-top:.35rem;color:#7ee2ad}
.pa-course-progress-wrap{position:relative;z-index:2;margin-top:-3rem}.pa-course-progress-card{padding:clamp(1.2rem,3vw,2rem);background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius-xl);box-shadow:var(--pa-shadow)}.pa-course-progress-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.pa-course-progress-head h2{margin:.25rem 0;color:var(--pa-navy);font-size:clamp(1.35rem,2vw,1.8rem);font-weight:850}.pa-course-progress-head p{margin:0;color:var(--pa-muted)}.pa-course-progress-pills{display:flex;flex-wrap:wrap;gap:.5rem}.pa-course-progress-pills span{padding:.4rem .65rem;color:var(--pa-primary);background:var(--pa-primary-soft);border-radius:999px;font-size:.82rem;font-weight:700}.pa-course-progress-track{height:.7rem;margin:1.1rem 0;overflow:hidden;background:#e5ebf1;border-radius:999px}.pa-course-progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pa-success),var(--pa-course-accent));transition:width .25s ease}.pa-course-progress-actions{margin-bottom:1rem}.pa-course-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.pa-course-stats>div{padding:.9rem;text-align:center;background:var(--pa-surface-soft);border:1px solid var(--pa-border);border-radius:var(--pa-radius)}.pa-course-stats strong,.pa-course-stats span{display:block}.pa-course-stats strong{color:var(--pa-navy);font-size:.95rem}.pa-course-stats span{color:var(--pa-muted);font-size:.78rem}
.pa-course-section{padding:clamp(3.5rem,6vw,5.5rem) 0}.pa-course-section-soft{background:#edf3f8;border-block:1px solid var(--pa-border)}.pa-course-section-heading{max-width:50rem;margin:0 auto 2rem;text-align:center}.pa-course-section-heading h2{margin:.35rem 0 .6rem;color:var(--pa-navy);font-size:clamp(2rem,3.5vw,3rem);font-weight:900;letter-spacing:-.04em}.pa-course-section-heading p{margin:0;color:var(--pa-muted)}
.pa-course-layout{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1.25rem;align-items:start}.pa-course-sidebar{position:sticky;top:calc(var(--pa-header-height) + 1rem);max-height:calc(100vh - var(--pa-header-height) - 2rem);overflow:auto;overscroll-behavior:contain;padding:1rem;background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius-lg);box-shadow:var(--pa-shadow-sm);scrollbar-width:thin}.pa-course-sidebar h3{position:sticky;top:-1rem;z-index:1;margin:-1rem -1rem .5rem;padding:1rem;color:var(--pa-navy);background:#fff;border-bottom:1px solid var(--pa-border);font-size:1rem}.pa-course-sidebar a{display:block;padding:.55rem .65rem;color:var(--pa-text);border-radius:var(--pa-radius-sm);font-size:.88rem;text-decoration:none}.pa-course-sidebar a:hover,.pa-course-sidebar a:focus{color:var(--pa-primary-hover);background:var(--pa-primary-soft)}
.pa-course-module{padding:clamp(1rem,2vw,1.4rem);margin-bottom:1rem;background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius-lg);box-shadow:var(--pa-shadow-xs);scroll-margin-top:calc(var(--pa-header-height) + 1rem)}.pa-course-module header>span{color:var(--pa-course-accent);font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.pa-course-module h3{margin:.25rem 0;color:var(--pa-navy);font-size:1.35rem;font-weight:850}.pa-course-module header p{margin:0 0 1rem;color:var(--pa-muted)}.pa-course-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.pa-course-lesson{position:relative;display:flex;min-width:0;flex-direction:column;padding:1rem;color:var(--pa-text);background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius);text-decoration:none;transition:transform var(--pa-transition),box-shadow var(--pa-transition),border-color var(--pa-transition)}.pa-course-lesson-number{color:var(--pa-course-accent);font-size:.68rem;font-weight:800;text-transform:uppercase}.pa-course-lesson h4{margin:.3rem 2rem .35rem 0;color:var(--pa-navy);font-size:1rem;font-weight:800}.pa-course-lesson p{margin:0 0 .75rem;color:var(--pa-muted);font-size:.84rem;line-height:1.5}.pa-course-lesson-action{display:flex;align-items:center;justify-content:space-between;margin-top:auto;color:var(--pa-primary);font-size:.8rem;font-weight:750}.pa-course-lesson-check{position:absolute;top:.8rem;right:.8rem;display:none;width:1.5rem;height:1.5rem;place-items:center;color:#fff;background:var(--pa-success);border-radius:50%;font-size:.7rem}.pa-course-lesson.pa-completed .pa-course-lesson-check{display:grid}.pa-course-lesson.pa-completed{border-color:color-mix(in srgb,var(--pa-success) 45%,var(--pa-border));background:var(--pa-success-soft)}
.pa-course-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.pa-course-tool{display:flex;flex-direction:column;padding:1.25rem;color:var(--pa-text);background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius-lg);box-shadow:var(--pa-shadow-xs);text-decoration:none}.pa-course-tool>div{display:grid;width:2.8rem;height:2.8rem;place-items:center;color:var(--pa-course-accent);background:color-mix(in srgb,var(--pa-course-accent) 10%,#fff);border-radius:var(--pa-radius)}.pa-course-tool h3{margin:.8rem 0 .35rem;color:var(--pa-navy);font-size:1.1rem}.pa-course-tool p{color:var(--pa-muted)}.pa-course-tool>span{display:flex;justify-content:space-between;margin-top:auto;color:var(--pa-primary);font-weight:750}
.pa-course-faq{max-width:58rem;margin:auto;overflow:hidden;background:#fff;border:1px solid var(--pa-border);border-radius:var(--pa-radius-lg);box-shadow:var(--pa-shadow-sm)}.pa-course-faq .accordion-item{border:0;border-bottom:1px solid var(--pa-border)}.pa-course-faq .accordion-item:last-child{border-bottom:0}.pa-course-faq .accordion-button{min-height:3.8rem;color:var(--pa-navy);font-weight:750;box-shadow:none}.pa-course-faq .accordion-button:not(.collapsed){color:var(--pa-course-accent-dark);background:color-mix(in srgb,var(--pa-course-accent) 9%,#fff)}.pa-course-faq p{margin:0}
.pa-course-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(1.5rem,4vw,3rem);color:#fff;background:linear-gradient(135deg,var(--pa-course-accent-dark),#102d49);border-radius:var(--pa-radius-xl);box-shadow:var(--pa-shadow)}.pa-course-cta span{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pa-course-cta h2{margin:.35rem 0;color:#fff;font-size:clamp(1.7rem,3vw,2.6rem)}.pa-course-cta p{margin:0;color:#e3edf6}.pa-course-cta .btn{display:flex;gap:.5rem;flex:0 0 auto}
.pa-lesson-navigation{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.pa-lesson-navigation a{display:flex;max-width:48%;flex-direction:column;padding:.85rem 1rem;color:var(--pa-text);border:1px solid var(--pa-border);border-radius:var(--pa-radius);text-decoration:none}.pa-lesson-navigation a[rel=next]{margin-left:auto;text-align:right}.pa-lesson-navigation span{color:var(--pa-muted);font-size:.75rem}.pa-lesson-navigation strong{color:var(--pa-primary)}
@media(hover:hover) and (pointer:fine){.pa-course-lesson:hover,.pa-course-tool:hover{border-color:color-mix(in srgb,var(--pa-course-accent) 45%,var(--pa-border));box-shadow:var(--pa-shadow-sm);transform:translateY(-3px)}}
@media(max-width:991.98px){.pa-course-hero-grid,.pa-course-layout{grid-template-columns:1fr}.pa-course-sidebar{position:static;max-height:none}.pa-course-sidebar nav{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}.pa-course-sidebar a{flex:0 0 auto;background:var(--pa-surface-soft)}.pa-course-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.pa-course-hero{padding:3rem 0 5rem}.pa-course-hero-grid{gap:2rem}.pa-course-hero h1{font-size:clamp(2.35rem,11vw,3.3rem)}.pa-course-actions .btn{width:100%}.pa-course-progress-head{flex-direction:column}.pa-course-lessons,.pa-course-tools-grid{grid-template-columns:1fr}.pa-course-cta{align-items:stretch;flex-direction:column;text-align:center}.pa-course-cta .btn{justify-content:center}.pa-course-section{padding-block:3.5rem}}
@media(max-width:374.98px){.pa-course-progress-card,.pa-course-module{padding:.9rem}.pa-course-stats{grid-template-columns:1fr}.pa-course-lesson{padding:.85rem}}
@media(prefers-reduced-motion:reduce){.pa-course-lesson,.pa-course-tool,.pa-course-progress-track span{transition:none}}
/**
 * ProwessApps V4
 * Distinct language themes for the reusable Course Hub.
 *
 * Append after the existing course-hub CSS, or replace the corresponding
 * hero/button/accent rules with this section.
 */

.pa-course-hub {
  --pa-course-accent: #1769e0;
  --pa-course-accent-dark: #0f55bd;
  --pa-course-accent-soft: #eaf3ff;
  --pa-course-hero-start: #0e253d;
  --pa-course-hero-middle: #174f8f;
  --pa-course-hero-end: #102d49;
  --pa-course-glow: rgba(23, 105, 224, 0.38);
  --pa-course-highlight: #dbeafe;
  --pa-course-success: #16845b;
  --pa-course-surface: #f4f7fb;

  color: var(--pa-text);
  background: var(--pa-course-surface);
}

/* Main hero now uses variables from each language configuration. */
.pa-course-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem) 0 5.5rem;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 8% 10%,
      var(--pa-course-glow),
      transparent 25rem
    ),
    linear-gradient(
      135deg,
      var(--pa-course-hero-start) 0%,
      var(--pa-course-hero-middle) 58%,
      var(--pa-course-hero-end) 100%
    );
}

.pa-course-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.pa-course-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -9rem;
  bottom: -12rem;
  width: 31rem;
  height: 31rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pa-course-accent) 32%, transparent);
  filter: blur(2px);
}

.pa-course-hero-orb {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.pa-course-hero-orb-one {
  top: 2rem;
  right: 37%;
  width: 7rem;
  height: 7rem;
  background: color-mix(in srgb, var(--pa-course-highlight) 18%, transparent);
}

.pa-course-hero-orb-two {
  bottom: 3rem;
  left: 42%;
  width: 4rem;
  height: 4rem;
  background: color-mix(in srgb, var(--pa-course-accent) 22%, transparent);
}

.pa-course-breadcrumb i {
  align-self: center;
  font-size: 0.58rem;
  opacity: 0.7;
}

.pa-course-language-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--pa-course-hero-start);
  background: var(--pa-course-highlight);
  border-radius: 0.65rem;
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.12);
  font-size: 1rem;
  font-weight: 900;
}

.pa-course-hero .pa-course-eyebrow {
  color: var(--pa-course-highlight);
}

.pa-course-hero-copy {
  min-width: 0;
}

.pa-course-hero-lead {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.pa-course-btn-primary {
  color: #ffffff;
  background: var(--pa-course-accent);
  border-color: var(--pa-course-accent);
  box-shadow: 0 0.65rem 1.35rem color-mix(in srgb, var(--pa-course-accent) 32%, transparent);
}

.pa-course-btn-primary:hover,
.pa-course-btn-primary:focus {
  color: #ffffff;
  background: var(--pa-course-accent-dark);
  border-color: var(--pa-course-accent-dark);
}

.pa-course-btn-secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(8px);
}

.pa-course-btn-secondary:hover,
.pa-course-btn-secondary:focus {
  color: var(--pa-course-hero-start);
  background: var(--pa-course-highlight);
  border-color: var(--pa-course-highlight);
}

.pa-course-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  list-style: none;
  font-size: 0.84rem;
  font-weight: 650;
}

.pa-course-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.pa-course-hero-meta i {
  color: var(--pa-course-highlight);
}

.pa-course-outcomes {
  grid-template-columns: 1fr;
  padding: clamp(1.2rem, 2.4vw, 1.65rem);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.08)
    );
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.15);
}

.pa-course-outcomes-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.pa-course-outcomes-icon {
  flex: 0 0 auto;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      var(--pa-course-accent),
      var(--pa-course-accent-dark)
    );
}

.pa-course-outcomes .pa-course-card-kicker {
  color: var(--pa-course-highlight);
}

.pa-course-outcomes ul {
  grid-column: auto;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.pa-course-outcomes li {
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.58rem 0.65rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
}

.pa-course-outcome-check {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  color: var(--pa-course-hero-start);
  background: var(--pa-course-highlight);
  border-radius: 50%;
  font-size: 0.62rem;
}

.pa-course-outcomes-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
}

.pa-course-outcomes-footer span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pa-course-outcomes-footer i {
  color: var(--pa-course-highlight);
}

/* Carry each language color beyond the hero. */
.pa-course-card-kicker,
.pa-course-module header > span,
.pa-course-lesson-number,
.pa-course-tool > div {
  color: var(--pa-course-accent);
}

.pa-course-progress-track span {
  background:
    linear-gradient(
      90deg,
      var(--pa-course-success),
      var(--pa-course-accent)
    );
}

.pa-course-progress-pills span,
.pa-course-sidebar a:hover,
.pa-course-sidebar a:focus,
.pa-course-sidebar a[aria-current="true"] {
  color: var(--pa-course-accent-dark);
  background: var(--pa-course-accent-soft);
}

.pa-course-sidebar a[aria-current="true"] {
  box-shadow: inset 3px 0 var(--pa-course-accent);
  font-weight: 760;
}

.pa-course-lesson.pa-completed {
  border-color: color-mix(in srgb, var(--pa-course-success) 42%, var(--pa-border));
  background: color-mix(in srgb, var(--pa-course-success) 9%, #ffffff);
}

.pa-course-lesson-action,
.pa-course-tool > span {
  color: var(--pa-course-accent-dark);
}

.pa-course-section-soft {
  background:
    linear-gradient(
      180deg,
      var(--pa-course-accent-soft),
      var(--pa-course-surface)
    );
}

.pa-course-cta {
  background:
    radial-gradient(circle at 90% 20%, var(--pa-course-glow), transparent 18rem),
    linear-gradient(
      135deg,
      var(--pa-course-accent-dark),
      var(--pa-course-hero-start)
    );
}

/* ----------------------------------------------------------
   Distinct language details
   ---------------------------------------------------------- */

/* Java: warm orange over deep navy. */
.pa-course-hub--java .pa-course-language-mark,
.pa-course-hub--java .pa-course-outcomes-icon {
  border-radius: 50% 50% 46% 54% / 54% 42% 58% 46%;
}

/* C: indigo/cyan systems-programming identity. */
.pa-course-hub--c .pa-course-hero::before {
  background-image:
    linear-gradient(rgba(167, 243, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 243, 255, 0.09) 1px, transparent 1px);
  background-size: 36px 36px;
}

.pa-course-hub--c .pa-course-language-mark {
  border: 1px solid rgba(255, 255, 255, 0.65);
  transform: rotate(-4deg);
}

/* C++: deeper blue with a sharper technical treatment. */
.pa-course-hub--cpp .pa-course-hero::before {
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.06) 87.5%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.06) 87.5%);
  background-size: 52px 90px;
}

.pa-course-hub--cpp .pa-course-language-mark,
.pa-course-hub--cpp .pa-course-outcomes-icon {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border-radius: 0;
}

/* Python: recognizable blue-and-gold theme. */
.pa-course-hub--python .pa-course-language-mark {
  color: #17324d;
  background: linear-gradient(135deg, #ffd343 0 48%, #9ed6f5 48% 100%);
}

.pa-course-hub--python .pa-course-outcomes-icon {
  color: #17324d;
  background: linear-gradient(135deg, #ffd343 0 48%, #4b9bd3 48% 100%);
}

.pa-course-hub--python .pa-course-btn-primary {
  color: #132b42;
  background: #ffd343;
  border-color: #ffd343;
  box-shadow: 0 0.65rem 1.35rem rgba(255, 211, 67, 0.22);
}

.pa-course-hub--python .pa-course-btn-primary:hover,
.pa-course-hub--python .pa-course-btn-primary:focus {
  color: #132b42;
  background: #f1c32e;
  border-color: #f1c32e;
}

@media (max-width: 767.98px) {
  .pa-course-hero-meta {
    justify-content: center;
  }

  .pa-course-outcomes {
    padding: 1rem;
  }
}