/*
 * Shared typography for rendered TipTap output (blog content, course overview,
 * curriculum module descriptions). Mirrors public/css/awcodes/tiptap-editor/tiptap.css
 * (the admin editor's own stylesheet) so published content looks the same on the
 * public site as it did while writing it, minus editor-only affordances
 * (selection outlines, resize handles, dashed placeholder borders).
 */

.wysiwyg-content {
    color: #292929;
    font-size: 1.0625rem;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wysiwyg-content > * + * {
    margin-block-start: 1.25rem;
}

.wysiwyg-content > * + h1,
.wysiwyg-content > * + h2,
.wysiwyg-content > * + h3,
.wysiwyg-content > * + h4,
.wysiwyg-content > * + h5,
.wysiwyg-content > * + h6 {
    margin-block-start: 2.25rem;
}

/* Headings */
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
}

.wysiwyg-content h1 { font-size: 2rem; line-height: 1.2; }
.wysiwyg-content h2 { font-size: 1.625rem; line-height: 1.25; }
.wysiwyg-content h3 { font-size: 1.375rem; line-height: 1.3; }
.wysiwyg-content h4 { font-size: 1.1875rem; }
.wysiwyg-content h5 { font-size: 1.0625rem; }
.wysiwyg-content h6 { font-size: 1rem; }

.wysiwyg-content .lead {
    font-size: 1.375rem;
    line-height: 1.5;
    color: #3f3f3f;
}

.wysiwyg-content small {
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Paragraphs */
.wysiwyg-content p {
    margin: 0;
}

/* A truly empty <p></p> (no <br>, no text) has no in-flow content, so
   browsers collapse its top/bottom margins through it and it renders with
   zero height — losing the blank line the author saw in the editor. Give it
   real inline content so a line box forms. */
.wysiwyg-content p:empty::before {
    content: "\00a0";
}

/* Lists */
.wysiwyg-content ul,
.wysiwyg-content ol {
    padding-inline-start: 1.5rem;
    margin-inline-start: 0.25rem;
}

.wysiwyg-content ul { list-style: disc; }
.wysiwyg-content ol { list-style: decimal; }

.wysiwyg-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.wysiwyg-content li > p {
    margin: 0;
}

.wysiwyg-content ul.checked-list {
    list-style-type: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.wysiwyg-content ul.checked-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.wysiwyg-content ul.checked-list li::before {
    content: "\2713";
    flex-shrink: 0;
    color: #16a34a;
    font-weight: 700;
}

/* Blockquote */
.wysiwyg-content blockquote {
    border-left: 4px solid #e5e7eb;
    padding-inline-start: 1.25rem;
    margin-inline-start: 0;
    font-size: 1.25rem;
    line-height: 1.6;
    font-style: italic;
    color: #4b5563;
}

.wysiwyg-content blockquote p {
    margin: 0;
}

/* Horizontal rule */
.wysiwyg-content hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

/* Links */
.wysiwyg-content a {
    color: var(--main-600, #7c3aed);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wysiwyg-content a:hover {
    color: var(--main-700, #6d28d9);
}

.wysiwyg-content a[id] {
    color: inherit;
    text-decoration: none;
}

/* Button-style links (TipTap "as button" links) */
.wysiwyg-content a[data-as-button="true"] {
    display: inline-block;
    background-color: #111827;
    color: #fff !important;
    text-decoration: none;
    border-radius: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
}

.wysiwyg-content a[data-as-button="true"]:hover {
    opacity: 0.9;
}

.wysiwyg-content a[data-as-button="true"][data-as-button-theme="primary"] { background-color: var(--main-600, #7c3aed); }
.wysiwyg-content a[data-as-button="true"][data-as-button-theme="secondary"] { background-color: #d97706; }
.wysiwyg-content a[data-as-button="true"][data-as-button-theme="tertiary"] { background-color: #16a34a; }
.wysiwyg-content a[data-as-button="true"][data-as-button-theme="accent"] { background-color: #dc2626; }

/* Text formatting */
.wysiwyg-content strong { font-weight: 700; }
.wysiwyg-content em { font-style: italic; }
.wysiwyg-content sup { font-size: 65%; }
.wysiwyg-content sub { font-size: 65%; }
.wysiwyg-content mark {
    background-color: #fef08a;
    border-radius: 0.2em;
    padding: 0.05em 0.2em;
    color: inherit;
}

/* Images */
.wysiwyg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    display: block;
    margin-inline: auto;
}

/* Tables */
.wysiwyg-content .tableWrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.wysiwyg-content table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin: 0;
}

.wysiwyg-content table td,
.wysiwyg-content table th {
    border: 1px solid #d1d5db;
    min-width: 1em;
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

.wysiwyg-content table td > p,
.wysiwyg-content table th > p {
    margin: 0;
}

.wysiwyg-content table th {
    background-color: #f3f4f6;
    color: #374151;
    font-weight: 700;
    text-align: left;
}

/* Inline code + code blocks */
.wysiwyg-content code {
    background-color: #f1f0ee;
    border-radius: 0.25rem;
    padding: 0.15em 0.4em;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wysiwyg-content pre {
    background-color: #1e1e2e;
    color: #d6deeb;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.wysiwyg-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Syntax highlighting classes emitted by the editor's lowlight code-block
   extension at save time (already baked into stored HTML). */
.wysiwyg-content .hljs-keyword { color: #c792ea; }
.wysiwyg-content .hljs-built_in { color: #addb67; }
.wysiwyg-content .hljs-type { color: #82aaff; }
.wysiwyg-content .hljs-literal { color: #ff5874; }
.wysiwyg-content .hljs-number { color: #f78c6c; }
.wysiwyg-content .hljs-regexp { color: #5ca7e4; }
.wysiwyg-content .hljs-string { color: #ecc48d; }
.wysiwyg-content .hljs-subst { color: #d3423e; }
.wysiwyg-content .hljs-symbol { color: #82aaff; }
.wysiwyg-content .hljs-class { color: #ffcb8b; }
.wysiwyg-content .hljs-function { color: #82aaff; }
.wysiwyg-content .hljs-title { color: #dcdcaa; }
.wysiwyg-content .hljs-params { color: #7fdbca; }
.wysiwyg-content .hljs-comment { color: #8892a0; }
.wysiwyg-content .hljs-doctag { color: #7fdbca; }
.wysiwyg-content .hljs-meta,
.wysiwyg-content .hljs-meta .hljs-keyword { color: #82aaff; }
.wysiwyg-content .hljs-meta .hljs-string { color: #ecc48d; }
.wysiwyg-content .hljs-section { color: #82b1ff; }
.wysiwyg-content .hljs-attr,
.wysiwyg-content .hljs-name,
.wysiwyg-content .hljs-tag { color: #7fdbca; }
.wysiwyg-content .hljs-attribute { color: #80cbc4; }
.wysiwyg-content .hljs-variable { color: #addb67; }
.wysiwyg-content .hljs-bullet { color: #d9f5dd; }
.wysiwyg-content .hljs-code { color: #80cbc4; }
.wysiwyg-content .hljs-emphasis { color: #c792ea; font-style: italic; }
.wysiwyg-content .hljs-strong { color: #addb67; font-weight: 700; }
.wysiwyg-content .hljs-link { color: #ff869a; }

/* Callout / "block" tool (colored banner) */
.wysiwyg-content .filament-tiptap-hurdle {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.wysiwyg-content .filament-tiptap-hurdle[data-color="gray_light"] { color: #111827; background-color: #e5e7eb; }
.wysiwyg-content .filament-tiptap-hurdle[data-color="gray"] { color: #fff; background-color: #6b7280; }
.wysiwyg-content .filament-tiptap-hurdle[data-color="gray_dark"] { color: #fff; background-color: #1f2937; }
.wysiwyg-content .filament-tiptap-hurdle[data-color="primary"] { color: #111827; background-color: var(--main-200, #ddd6fe); }
.wysiwyg-content .filament-tiptap-hurdle[data-color="secondary"] { color: #111827; background-color: #fde68a; }
.wysiwyg-content .filament-tiptap-hurdle[data-color="tertiary"] { color: #fff; background-color: #16a34a; }
.wysiwyg-content .filament-tiptap-hurdle[data-color="accent"] { color: #fff; background-color: #dc2626; }

/* Grid / column layout blocks */
.wysiwyg-content .filament-tiptap-grid,
.wysiwyg-content .filament-tiptap-grid-builder {
    display: grid;
    gap: 1.25rem;
    box-sizing: border-box;
    margin: 1.5rem 0;
}

.wysiwyg-content .filament-tiptap-grid-builder__column,
.wysiwyg-content .filament-tiptap-grid__column {
    box-sizing: border-box;
    min-width: 0;
}

.wysiwyg-content .filament-tiptap-grid[type="asymetric-right-thirds"],
.wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="2"] { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .wysiwyg-content .filament-tiptap-grid[type="asymetric-right-thirds"] { grid-template-columns: 1fr 2fr; }
    .wysiwyg-content .filament-tiptap-grid[type="asymetric-left-thirds"] { grid-template-columns: 2fr 1fr; }
    .wysiwyg-content .filament-tiptap-grid[type="asymetric-right-fourths"] { grid-template-columns: 1fr 3fr; }
    .wysiwyg-content .filament-tiptap-grid[type="asymetric-left-fourths"] { grid-template-columns: 3fr 1fr; }
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="5"] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="4"] { grid-template-columns: repeat(4, 1fr); }
    .wysiwyg-content .filament-tiptap-grid[type="responsive"][cols="5"] { grid-template-columns: repeat(5, 1fr); }
}

.wysiwyg-content .filament-tiptap-grid[type="fixed"][cols="2"] { grid-template-columns: repeat(2, 1fr); }
.wysiwyg-content .filament-tiptap-grid[type="fixed"][cols="3"] { grid-template-columns: repeat(3, 1fr); }
.wysiwyg-content .filament-tiptap-grid[type="fixed"][cols="4"] { grid-template-columns: repeat(4, 1fr); }
.wysiwyg-content .filament-tiptap-grid[type="fixed"][cols="5"] { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 640px) {
    .wysiwyg-content .filament-tiptap-grid-builder[data-stack-at="sm"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
    .wysiwyg-content .filament-tiptap-grid-builder[data-stack-at="md"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
    .wysiwyg-content .filament-tiptap-grid-builder[data-stack-at="lg"] { grid-template-columns: 1fr !important; }
}

/* Details / summary (collapsible, native <details>) */
.wysiwyg-content details {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.wysiwyg-content details summary {
    padding: 0.75rem 1rem;
    font-weight: 700;
    cursor: pointer;
    background-color: #f9fafb;
}

.wysiwyg-content details[data-type="details"] div[data-type="details-content"] {
    padding: 1rem;
}

.wysiwyg-content details[data-type="details-content"] > * + * {
    margin-block-start: 1rem;
}

/* Embeds (YouTube / Vimeo / native video) — responsive 16:9 container */
.wysiwyg-content [data-youtube-video],
.wysiwyg-content [data-vimeo-video] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 1.5rem 0;
}

.wysiwyg-content [data-youtube-video] iframe,
.wysiwyg-content [data-vimeo-video] iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.wysiwyg-content [data-native-video] video {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* Merge-tag / mention chips (email templates) */
.wysiwyg-content span[data-type="mergeTag"] {
    display: inline-block;
    margin-inline: 0.25rem;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    padding: 0.25rem 0.5rem;
}