/* OC Content Boxes v1.0.0 — study callout boxes for OphthalmologyCourses.com
   Types: keypoint, examtip, pearl, warning, definition, mnemonic
   Markup:
   <div class="oc-box oc-box--keypoint">
     <p class="oc-box__title">Key Point</p>
     <p>Content…</p>
   </div>
*/

.oc-box {
  --oc-accent: #026670;
  --oc-bg: #e8f3f3;
  --oc-icon: none;
  position: relative;
  margin: 1.75em 0;
  padding: 1.15em 1.35em 1.15em 1.25em;
  background: var(--oc-bg);
  border-left: 4px solid var(--oc-accent);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 42, 53, 0.08);
  line-height: 1.6;
  text-align: left; /* boxes stay readable even inside centered wrappers */
}

.oc-box > :last-child { margin-bottom: 0 !important; }
.oc-box p { margin: 0 0 0.7em; }
.oc-box ul, .oc-box ol { margin: 0.3em 0 0.7em; padding-left: 1.4em; }
.oc-box li { margin-bottom: 0.25em; }
.oc-box a { color: var(--oc-accent); text-decoration: underline; }
.oc-box strong { color: inherit; }

.oc-box__title {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 0.6em !important;
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oc-accent);
}

.oc-box__title::before {
  content: "";
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  background-color: var(--oc-accent);
  -webkit-mask: var(--oc-icon) center / contain no-repeat;
  mask: var(--oc-icon) center / contain no-repeat;
}

/* ---- Key Point (brand teal, star) ---- */
.oc-box--keypoint {
  --oc-accent: #026670;
  --oc-bg: #e8f3f3;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
}

/* ---- Exam Tip (brand gold, graduation cap) ---- */
.oc-box--examtip {
  --oc-accent: #8a6a00;
  --oc-bg: #fdf6dd;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 8l11 5 9-4.09V15h2V8L12 3zM5 12.3V16c0 1.66 3.13 3 7 3s7-1.34 7-3v-3.7l-7 3.18-7-3.18z'/%3E%3C/svg%3E");
}

/* ---- Clinical Pearl (violet, gem) ---- */
.oc-box--pearl {
  --oc-accent: #6d28d9;
  --oc-bg: #f3eefe;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9l4-6zm2.6 6L12 17.2 15.4 9H8.6z'/%3E%3C/svg%3E");
}

/* ---- Warning / Pitfall (red, triangle) ---- */
.oc-box--warning {
  --oc-accent: #b42318;
  --oc-bg: #fdeceb;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-7h-2v5h2V9z'/%3E%3C/svg%3E");
}

/* ---- Definition (blue, book) ---- */
.oc-box--definition {
  --oc-accent: #14509e;
  --oc-bg: #edf3fc;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zm-2 9l-2.5-1.5L11 11V4h5v7z'/%3E%3C/svg%3E");
}

/* ---- Mnemonic (green, lightbulb) ---- */
.oc-box--mnemonic {
  --oc-accent: #1d7a46;
  --oc-bg: #eaf6ef;
  --oc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v1a1 1 0 01-1 1h-4a1 1 0 01-1-1v-1zm3-19a7 7 0 00-4.2 12.6c.7.55 1.2 1.44 1.2 2.4h6c0-.96.5-1.85 1.2-2.4A7 7 0 0012 2zm-3 15h6v2H9v-2z'/%3E%3C/svg%3E");
}

/* Mnemonic letters convention: bold first letters render in accent colour */
.oc-box--mnemonic strong { color: #15803d; }

/* Mobile */
@media (max-width: 480px) {
  .oc-box { padding: 1em 1em 1em 0.95em; border-radius: 8px; }
}

/* Print-friendly */
@media print {
  .oc-box { box-shadow: none; border: 1px solid var(--oc-accent); border-left-width: 4px; }
}

/* ------------------------------------------------------------------
   Marketers Delight "Content Box" block: label beside the icon.
   Front end: real <span class="oc-cb-label"> injected via render_block.
   Editor canvas: label exposed as --oc-cb-label variable, rendered by
   the ::after rule below (var unset on the front end -> content:none).
------------------------------------------------------------------- */
.md-content-box .md-cb-icon { vertical-align: middle; position: relative; }

.md-content-box .oc-cb-label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0.7em 0.6em;
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Editor-only preview, positioned beside the icon badge */
.md-content-box .md-cb-icon::after {
  content: var(--oc-cb-label, none);
  position: absolute;
  left: calc(100% + 0.6em);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Masteriyo learn-page content fixes (this stylesheet is whitelisted
   there). The Chakra-based player collapses list indentation to 12px;
   restore normal reading indentation for lesson content.
------------------------------------------------------------------- */
.masteriyo-interactive-description ul,
.masteriyo-interactive-description ol {
  padding-left: 1.6em !important;
  margin: 0.5em 0 1em !important;
}
.masteriyo-interactive-description li { margin-bottom: 0.3em; }
.masteriyo-interactive-description ul { list-style: disc; }
.masteriyo-interactive-description ul ul { list-style: circle; }
.masteriyo-interactive-description ol { list-style: decimal; }