/* Jule Edu – Global Styles (scoped) */

/* Scope: any of your shortcode containers can include the .jem-scope class.
   Example wrapper: <div class="jem-scope jule-student-results">…</div>
*/
.jem-scope {
  --jem-h-color: #0b2a55;
  --jem-text: #1f2937;
  --jem-muted: #5a6b84;
  --jem-line: #e8eef6;
  --jem-accent: #0b5ed7;
  --jem-radius: 12px;
}

/* Headings (scoped) */
.jem-scope h1,
.jem-scope .h1 {
  font-size: 26px;
  line-height: 1.2;
  color: var(--jem-h-color);
  margin: 0 0 0.6em;
  font-weight: 600;
}

.jem-scope h2,
.jem-scope .h2 {
  font-size: clamp(0.5rem, 0.08rem + 0.8vw, 1.3rem)!important;
  line-height: 1.25;
  color: var(--jem-h-color);
  margin: 1.1em 0 0.5em;
  font-weight: 700;
}

.jem-scope h3,
.jem-scope .h3 {
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
  line-height: 1.3;
  color: var(--jem-h-color);
  margin: 1em 0 0.5em;
  font-weight: 700;
}

/* Paragraphs & links (optional) */
.jem-scope p {
  color: var(--jem-text);
  margin: 0 0 0.9em;
}

.jem-scope a {
  color: var(--jem-accent);
  text-decoration: none;
}
.jem-scope a:hover { text-decoration: underline; }

/* Tables (optional) */
.jem-scope table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--jem-line);
  border-radius: var(--jem-radius);
  overflow: hidden;
}
.jem-scope th,
.jem-scope td {
  border: 1px solid var(--jem-line);
  padding: 10px 12px;
  text-align: left;
}
.jem-scope thead th {
  background: #f7f9fc;
  color: var(--jem-muted);
  text-transform: uppercase;
  font-size: 12px;
}

/* Utility badges/buttons used across your UIs (optional) */
.jem-scope .jem-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #eef6ff;
  color: var(--jem-h-color);
}

.jem-scope .jem-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px;
  border-radius: 10px;
  border: 1px solid #e3edf7;
  background: var(--jem-accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.jem-scope .jem-cjbtn1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid #e3edf7;
  background: var(--jem-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.jem-cjbtn1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid #e3edf7;
  background: var(--jem-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.jem-scope .jem-btn.secondary {
  background: #f9fbfe;
  color: var(--jem-h-color);
}
.jem-scope .jem-btn.danger {
  background: #ef4444;
  display: inline-flex;
   align-items: center;
   gap: 8px;
    padding: 4px 10px;
    border-radius: 10px;
}

.jem-scope .success {
  background: #2aa934;
}

.jem-scop button,
.jem-scop .button {
    padding: 3px 10px;
    border-radius: 12px;
    background: #f9f9f9;
    font-weight: 600;
}