/* Course Content — OAS spec stylesheet
 *
 * Applied to:
 *   - The OAS preview page (preview-section.php)
 *   - The published academy lesson HTML (inlined / linked via the
 *     OAS-course-content WP plugin)
 *
 * Class prefix: cc-  (course-content)
 *
 * Keep this file self-contained — no Bootstrap, no theme variables. The
 * published academy site does not include OAS' theme.css, so anything not
 * baked in here will look broken on the live page.
 */

.cc-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
    line-height: 1.65;
    font-size: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* ---------- Text ---------- */

.cc-paragraph { margin: 0 0 16px; }
.cc-align-left    { text-align: left; }
.cc-align-center  { text-align: center; }
.cc-align-right   { text-align: right; }
.cc-align-justify { text-align: justify; }

.cc-heading {
    font-weight: 700;
    color: #1a202c;
    margin: 32px 0 12px;
    line-height: 1.25;
}
h2.cc-heading { font-size: 28px; }
h3.cc-heading { font-size: 22px; }
h4.cc-heading { font-size: 18px; }

/* ---------- Callouts ---------- */

.cc-callout {
    margin: 18px 0;
    padding: 14px 18px;
    border-left: 4px solid;
    border-radius: 6px;
}
.cc-callout-title { font-weight: 700; margin-bottom: 6px; }
.cc-callout-body p:last-child { margin-bottom: 0; }

.cc-callout-info          { background: #eff6ff; border-left-color: #2563eb; color: #1e3a8a; }
.cc-callout-warning       { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; }
.cc-callout-clinical-pearl{ background: #f5f3ff; border-left-color: #7c3aed; color: #5b21b6; }
.cc-callout-safety        { background: #fef2f2; border-left-color: #dc2626; color: #991b1b; }
.cc-callout-numbers       { background: #ecfeff; border-left-color: #0891b2; color: #155e75; }
.cc-callout-pitfalls      { background: #fef2f2; border-left-color: #b91c1c; color: #7f1d1d; }
.cc-callout-pearls        { background: #f0fdf4; border-left-color: #16a34a; color: #14532d; }
.cc-callout-guidelines    { background: #fafafa; border-left-color: #6b7280; color: #1f2937; }

/* ---------- Lists ---------- */

.cc-list { margin: 0 0 16px 24px; padding: 0; }
.cc-list li { margin-bottom: 6px; }

/* ---------- Citations ---------- */

.cc-cite { font-size: 0.7em; vertical-align: super; line-height: 0; }
.cc-cite a { text-decoration: none; color: #2563eb; }

/* ---------- Image ---------- */

.cc-image {
    margin: 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cc-image.cc-align-left   { align-items: flex-start; margin-right: auto; }
.cc-image.cc-align-right  { align-items: flex-end; margin-left: auto; }
.cc-image img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}
.cc-image.cc-image-rounded img {
    border-radius: 12px;
}
.cc-image.cc-image-framed-shadow img {
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cc-image-credit {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}
.cc-image-caption {
    display: block;
    font-size: 14px;
    color: #4b5563;
    margin-top: 4px;
    font-style: italic;
}

/* ---------- Image grid (side-by-side) ---------- */

.cc-image-grid {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}
.cc-image-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-image-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cc-image-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
    .cc-image-grid-cols-3,
    .cc-image-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
.cc-image-grid-cell {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: 8px;
}
.cc-image-grid-cell img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .2s ease;
}
.cc-image-grid-cell:hover img { transform: scale(1.04); }
.cc-image-grid-caption {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    padding: 0 4px;
}

/* ---------- Video (YouTube lazy-load) ---------- */

.cc-video {
    margin: 18px 0;
    position: relative;
    overflow: hidden;
}
.cc-video-aspect-16-9 { aspect-ratio: 16 / 9; }
.cc-video-aspect-4-3  { aspect-ratio: 4 / 3; }
.cc-video-aspect-1-1  { aspect-ratio: 1 / 1; }
.cc-video.cc-video-rounded { border-radius: 12px; }
.cc-video.cc-video-framed-shadow {
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cc-video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: inherit;
    overflow: hidden;
}
.cc-video-poster::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
}
.cc-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    background: rgba(204, 51, 51, 0.92);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding-left: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 1;
}
.cc-video-play:hover { background: #CC3333; transform: translate(-50%, -50%) scale(1.06); }
.cc-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.cc-video-credit, .cc-video-caption {
    display: block;
    text-align: center;
    margin-top: 4px;
}
.cc-video-credit { font-size: 11px; color: #6b7280; }
.cc-video-caption { font-size: 14px; color: #4b5563; font-style: italic; }
.cc-video-error { padding: 12px; background: #fef2f2; color: #991b1b; border-radius: 6px; }

/* ---------- Audio ---------- */

.cc-audio {
    margin: 18px 0;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    --cc-audio-color: #CC3333;
}
.cc-audio audio {
    width: 100%;
    accent-color: var(--cc-audio-color);
}
.cc-audio-credit  { display: block; font-size: 11px; color: #6b7280; margin-top: 4px; }
.cc-audio-caption { display: block; font-size: 14px; color: #4b5563; margin-top: 4px; font-style: italic; }

/* ---------- Annotated image ---------- */

.cc-annotated-image {
    margin: 18px 0;
    position: relative;
}
.cc-ai-svg { width: 100%; height: auto; cursor: zoom-in; user-select: none; }
.cc-ai-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    paint-order: stroke fill;
    stroke: #fff;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.cc-ai-label:hover { fill: #CC3333 !important; }
.cc-ai-hotspot { cursor: pointer; }
.cc-ai-hotspot circle { fill: rgba(204, 51, 51, 0.18); stroke: rgba(204, 51, 51, 0.6); stroke-dasharray: 4 3; }
.cc-annotated-image-quiz .cc-ai-svg { cursor: crosshair; }
.cc-ai-popup {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 14px;
    z-index: 5;
}
.cc-ai-popup-title { font-weight: 700; margin-bottom: 4px; color: #CC3333; }
.cc-ai-quiz-feedback {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}
.cc-ai-quiz-feedback.cc-correct { background: #f0fdf4; color: #166534; display: block; }
.cc-ai-quiz-feedback.cc-wrong { background: #fef2f2; color: #991b1b; display: block; }
.cc-annotated-image-error {
    padding: 12px; background: #fef2f2; color: #991b1b; border-radius: 6px;
}

/* ---------- Table ---------- */

.cc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}
.cc-table caption {
    text-align: left;
    font-style: italic;
    color: #6b7280;
    margin-bottom: 6px;
}
.cc-table thead { background: #f9fafb; }
.cc-table th, .cc-table td {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}
.cc-table th { font-weight: 700; color: #1f2937; }
.cc-table tbody tr:nth-child(even) { background: #fafafa; }

/* ---------- Divider ---------- */

.cc-divider {
    border: 0;
    height: 1px;
    background: #e5e7eb;
    margin: 28px 0;
}

/* ---------- References ---------- */

.cc-references {
    margin: 28px 0 0;
    padding: 0 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.cc-references summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
    color: #1f2937;
}
.cc-references ol { margin: 0 0 16px 24px; padding: 0; font-size: 13px; color: #374151; }
.cc-references li { margin-bottom: 6px; }
.cc-references a { color: #2563eb; word-break: break-all; }

/* ---------- Quiz ---------- */

.cc-quiz {
    margin: 18px 0;
    padding: 16px 18px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
}
.cc-quiz-question { font-weight: 700; margin-bottom: 12px; }
.cc-quiz-options { display: flex; flex-direction: column; gap: 6px; }
.cc-quiz-option {
    cursor: pointer;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-quiz-option:hover { background: #eef2ff; }
.cc-quiz-option input { margin-right: 6px; }
.cc-quiz-check {
    margin-top: 10px;
    background: #7c3aed;
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.cc-quiz-feedback {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}
.cc-quiz-feedback.cc-correct { background: #f0fdf4; color: #166534; }
.cc-quiz-feedback.cc-wrong   { background: #fef2f2; color: #991b1b; }
.cc-quiz-rationale {
    font-size: 13px;
    color: #4b5563;
    margin-top: 4px;
    padding-left: 18px;
    border-left: 2px solid #ddd6fe;
}

/* ---------- Raw HTML escape hatch ---------- */

.cc-raw-html {
    border: 2px dashed #f59e0b;
    background: #fffbeb;
    padding: 12px;
    margin: 18px 0;
    border-radius: 6px;
}
.cc-raw-html::before {
    content: "Raw HTML block";
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
    margin-bottom: 8px;
}

/* ---------- Legacy tooltip definitions (matches academy theme) ---------- */

.tooltip {
    position: relative;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    color: #2563eb;
}
.tooltip .tooltiptext {
    visibility: hidden;
    background: #1f2937;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 14px;
    position: absolute;
    z-index: 50;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 320px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0;
    transition: opacity .2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    text-decoration: none;
}
.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}
.tooltip:hover .tooltiptext,
.tooltip:focus .tooltiptext { visibility: visible; opacity: 1; }