/* =========================================================
   JUPITER SCIENCE ACADEMY  (jsa-*)
   Central presentation layer for Course Manager templates.
   Divi should only host the [zwcc ...] layout shortcode.
========================================================= */

.jsa{
  --jsa-blue:var(--jps-blue,#002CD0);
  --jsa-blue-dark:var(--jps-blue-dark,#00219E);
  --jsa-violet:var(--jps-violet,#8A2BEF);
  --jsa-pink:var(--jps-pink,#FF3D7F);
  --jsa-yellow:var(--jps-yellow,#FFD23F);
  --jsa-sky:var(--jps-sky,#28C7FF);
  --jsa-deep:var(--jps-deep,#101B4D);
  --jsa-muted:#5A6684;
  --jsa-border:var(--jps-border,#E8ECFF);
  --jsa-soft:var(--jps-soft,#F3F6FF);
  --jsa-white:#fff;
  --jsa-shadow:0 14px 38px rgba(16,27,77,.09);
  --jsa-radius:18px;
  --jsa-head:Sora,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --jsa-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  width:100%;
  max-width:100%;
  color:var(--jsa-deep);
  font-family:var(--jsa-body);
  line-height:1.7;
  overflow-x:clip;
}
.jsa *,.jsa *::before,.jsa *::after{box-sizing:border-box}
.jsa img,.jsa svg,.jsa video,.jsa iframe{max-width:100%;height:auto}
.jsa a{color:var(--jsa-blue)}
.jsa-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.jsa h1,.jsa h2,.jsa h3,.jsa h4{font-family:var(--jsa-head);color:var(--jsa-deep);line-height:1.16}
.jsa h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em;margin:10px 0 16px}
.jsa h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.025em}
.jsa p:last-child{margin-bottom:0}

.jsa-hero{
  padding:54px 0 50px;
  background:
    radial-gradient(circle at 88% 8%,rgba(40,199,255,.18),transparent 28%),
    radial-gradient(circle at 4% 90%,rgba(138,43,239,.11),transparent 28%),
    linear-gradient(135deg,#f8faff 0%,#eef3ff 100%);
  border-bottom:1px solid var(--jsa-border);
}
.jsa-eyebrow,.jsa-panel-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:800;
}
.jsa-eyebrow{color:var(--jsa-blue)}
.jsa-panel-label{color:var(--jsa-muted);margin-bottom:14px}
.jsa .zcm-template-title{margin:10px 0 14px!important}
.jsa .zcm-template-title h1,
.jsa h1.zcm-template-title{margin:0!important}
.jsa .zcm-template-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:16px 0 0;
}
.jsa .zcm-template-meta-item{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border:1px solid rgba(0,44,208,.13);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--jsa-deep);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.jsa a.zcm-template-meta-item:hover{border-color:var(--jsa-blue);color:var(--jsa-blue)}
.jsa-context{margin-top:16px}
.jsa-context:empty{display:none}

.jsa-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.jsa-hero-actions > div{margin:0!important}
.jsa .zcm-start-btn,
.jsa-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 20px!important;
  border-radius:11px!important;
  font-family:var(--jsa-head)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-decoration:none!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.jsa .zcm-start-btn{
  background:var(--jsa-blue)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(0,44,208,.2)!important;
}
.jsa .zcm-start-btn:hover{background:var(--jsa-blue-dark)!important;transform:translateY(-1px)}
.jsa-btn-light{background:#fff;color:var(--jsa-blue)!important;border:1px solid var(--jsa-border)}
.jsa-btn-light:hover{box-shadow:0 8px 20px rgba(16,27,77,.09);transform:translateY(-1px)}

.jsa-section{padding:48px 0}
.jsa-section-soft{background:var(--jsa-soft);border-top:1px solid var(--jsa-border)}
.jsa-section-head{max-width:760px;margin-bottom:22px}
.jsa-section-head h2{margin:8px 0 7px}
.jsa-section-head p{color:var(--jsa-muted);margin:0}

.jsa-panel{
  background:var(--jsa-white);
  border:1px solid var(--jsa-border);
  border-radius:var(--jsa-radius);
  box-shadow:var(--jsa-shadow);
}
.jsa-content-panel{padding:clamp(24px,4vw,46px);min-width:0}
.jsa-course-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.jsa-lesson-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start}
.jsa-main,.jsa-sidebar{min-width:0}
.jsa-sidebar .jsa-panel{padding:20px}
.jsa-sticky{position:sticky;top:24px}
.jsa-curriculum{padding:22px}

.jsa .zcm-template-content{font-size:16px;line-height:1.78}
.jsa .zcm-template-content > :first-child{margin-top:0}
.jsa .zcm-template-content > :last-child{margin-bottom:0}
.jsa .zcm-template-content h2{margin-top:1.8em}
.jsa .zcm-template-content h3{margin-top:1.55em}
.jsa .zcm-template-content table{display:block;max-width:100%;overflow-x:auto}
.jsa .zcm-template-content pre{max-width:100%;overflow-x:auto}
.jsa .zcm-template-content code{overflow-wrap:anywhere}

.jsa .zartom-course-nav,
.jsa .zcm-course-nav{max-width:100%}
.jsa .zartom-course-nav a,
.jsa .zcm-course-nav a{text-decoration:none}
.jsa .zartom-course-nav ul,
.jsa .zcm-course-nav ul{margin-left:0;padding-left:0;list-style:none}
.jsa .zartom-course-nav li,
.jsa .zcm-course-nav li{margin:0}
.jsa .zartom-course-nav a,
.jsa .zcm-course-nav a{
  display:block;
  padding:9px 10px;
  margin:2px 0;
  border-radius:9px;
  color:var(--jsa-deep);
  font-size:14px;
  line-height:1.4;
}
.jsa .zartom-course-nav a:hover,
.jsa .zcm-course-nav a:hover{background:var(--jsa-soft);color:var(--jsa-blue)}
.jsa .zartom-course-nav .current-menu-item > a,
.jsa .zartom-course-nav .current > a,
.jsa .zcm-course-nav .current-menu-item > a,
.jsa .zcm-course-nav .current > a{background:#eaf0ff;color:var(--jsa-blue);font-weight:800}

.jsa-bottom-nav{margin-top:24px}
.jsa .zartom-lesson-prev-next,
.jsa .zartom-lesson-prev-next-compact{
  max-width:100%;
  margin:0!important;
  padding:16px!important;
  border:1px solid var(--jsa-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(16,27,77,.06)!important;
}
.jsa .zartom-lesson-prev-next a,
.jsa .zartom-lesson-prev-next-compact a{
  border-radius:9px!important;
  text-decoration:none!important;
}

.jsa .zartom-quiz,
.jsa .zcm-quiz,
.jsa-quiz-panel form{max-width:100%}
.jsa-quiz-panel input,
.jsa-quiz-panel select,
.jsa-quiz-panel textarea{max-width:100%}

body.single-zartom_course .et_pb_section:has(.jsa),
body.single-zartom_lesson .et_pb_section:has(.jsa),
body.single-zartom_quiz .et_pb_section:has(.jsa){padding-top:0!important;padding-bottom:0!important}
body.single-zartom_course .et_pb_row:has(.jsa),
body.single-zartom_lesson .et_pb_row:has(.jsa),
body.single-zartom_quiz .et_pb_row:has(.jsa){
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
}
body.single-zartom_course .et_pb_column:has(.jsa),
body.single-zartom_lesson .et_pb_column:has(.jsa),
body.single-zartom_quiz .et_pb_column:has(.jsa),
body.single-zartom_course .et_pb_code:has(.jsa),
body.single-zartom_lesson .et_pb_code:has(.jsa),
body.single-zartom_quiz .et_pb_code:has(.jsa),
body.single-zartom_course .et_pb_code_inner:has(.jsa),
body.single-zartom_lesson .et_pb_code_inner:has(.jsa),
body.single-zartom_quiz .et_pb_code_inner:has(.jsa){
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}

@media (max-width:979px){
  .jsa-course-grid,.jsa-lesson-grid{grid-template-columns:1fr}
  .jsa-sidebar{order:0}
  .jsa-main{order:1}
  .jsa-sticky{position:static}
  .jsa-sidebar .jsa-panel{padding:16px}
}

@media (max-width:766px){
  .jsa-wrap{width:calc(100% - 30px)}
  .jsa-hero{padding:36px 0 34px}
  .jsa-section{padding:34px 0}
  .jsa-content-panel{padding:22px 18px}
  .jsa-hero-actions{flex-direction:column;align-items:stretch}
  .jsa-hero-actions > *,
  .jsa-hero-actions > div,
  .jsa .zcm-start-btn,
  .jsa-btn{width:100%!important}
  .jsa .zcm-template-meta{gap:7px}
  .jsa .zcm-template-meta-item{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .jsa *{scroll-behavior:auto!important;transition:none!important}
}