/*
 * Tiptap content stylesheet — the SINGLE source of truth for how saved
 * page HTML renders. Shared across:
 *   - the live TipTap editor                 (MarkdownEditor.vue)
 *   - the page view                          (PageModal.vue)
 *   - the step editor's v-html preview       (StepEditor.vue)
 *   - the screenshot postcard                (postcard.blade.php)
 *   - the template preview iframe            (template-postcard.blade.php)
 *
 * Why a standalone file instead of @layer'd Tailwind:
 *   - The iframe deliberately does not load app.css; it needs the rules
 *     to be linkable on their own.
 *   - One file means one place to tune spacing/colours/sizes — no
 *     mismatch between renderers when something changes.
 *
 * Specificity contract:
 *   - All rules are scoped to `.tiptap-content`, so they only fire
 *     where TipTap content is rendered (the wrapper class is added
 *     consistently in every renderer above).
 *   - Inner selectors use plain elements / data-* attributes so they
 *     sit at specificity (0,1,1) — the same as Tailwind's prose plugin.
 *     When loaded AFTER app.css they win against `.prose .x` rules of
 *     equal specificity by document order.
 *   - Theme `custom_css` (injected by ThemeStyleEffects.vue) loads after
 *     this file, so themes can override any of these rules without
 *     `!important`.
 *
 * Inline styles set by TipTap node renderers (CardBlock.js etc.) are
 * still authoritative for per-instance values — width %, border-color,
 * box-shadow with --card-glow, etc. This file controls TYPE and SPACING
 * defaults; the node renderers control DYNAMIC per-block customisation.
 */

/* ── Container ──────────────────────────────────────────────────────── */
.tiptap-content {
    color: var(--text-color, #1a1a1a);
    font-family: var(--font-family, 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ── Tailwind typography plugin overrides ───────────────────────────── */
/* When the page view / editor still also has `.prose`, these vars
   redirect every prose element to our themed palette colours. Keeping
   them here (rather than in app.css under .theme-text-color) means the
   iframe and screenshot postcards also benefit when prose is loaded. */
.tiptap-content {
    --tw-prose-body: var(--palette-body, var(--text-color));
    --tw-prose-headings: var(--palette-heading, var(--text-color));
    --tw-prose-lead: var(--palette-body, var(--text-color));
    --tw-prose-links: var(--palette-body, var(--text-color));
    --tw-prose-bold: var(--palette-heading, var(--text-color));
    --tw-prose-counters: var(--palette-body, var(--text-color));
    --tw-prose-bullets: var(--palette-body, var(--text-color));
    --tw-prose-hr: var(--palette-divider, color-mix(in srgb, var(--text-color) 25%, transparent));
    --tw-prose-quotes: var(--palette-body, var(--text-color));
    --tw-prose-quote-borders: var(--palette-border, var(--text-color));
    --tw-prose-captions: var(--palette-body, var(--text-color));
    --tw-prose-kbd: var(--palette-body, var(--text-color));
    --tw-prose-code: var(--palette-body, var(--text-color));
    --tw-prose-pre-bg: var(--palette-surface-bg, color-mix(in srgb, var(--text-color) 8%, transparent));
}

/* ── Headings ───────────────────────────────────────────────────────── */
.tiptap-content h1,
.tiptap-content h2,
.tiptap-content h3,
.tiptap-content h4,
.tiptap-content h5,
.tiptap-content h6 {
    color: var(--palette-heading, var(--text-color, inherit));
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0.6em;
    margin-bottom: 0.5em;
}
.tiptap-content h1 { font-size: 1.6rem; }
.tiptap-content h2 { font-size: 1.3rem; }
.tiptap-content h3,
.tiptap-content h4,
.tiptap-content h5,
.tiptap-content h6 { font-size: 1.1rem; }

/* ── Paragraphs and lists ───────────────────────────────────────────── */
.tiptap-content p {
    color: var(--palette-body, var(--text-color, inherit));
    margin-bottom: 0.9em;
}

.tiptap-content ul,
.tiptap-content ol {
    color: var(--palette-body, var(--text-color, inherit));
    margin-bottom: 0.9em;
    padding-inline-start: 1.2rem;
    list-style-position: inside;
}
.tiptap-content ul { list-style: disc; }
.tiptap-content ol { list-style: decimal; }
.tiptap-content li { margin-bottom: 0.25em; }

.tiptap-content strong {
    font-weight: 700;
    color: var(--palette-heading, inherit);
}
.tiptap-content em { font-style: italic; }

/* ── Links ──────────────────────────────────────────────────────────── */
.tiptap-content a {
    color: var(--palette-button-bg, currentColor);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tiptap-content a:hover {
    text-decoration: none;
}

/* ── Quotes / code ──────────────────────────────────────────────────── */
.tiptap-content blockquote {
    color: var(--palette-body, var(--text-color, inherit));
    border-inline-start: 3px solid var(--palette-border, currentColor);
    padding-inline-start: 0.75rem;
    margin: 0.75em 0;
    font-style: italic;
}
.tiptap-content code {
    background: var(--palette-surface-bg, color-mix(in srgb, var(--text-color) 8%, transparent));
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.85em;
}
.tiptap-content pre {
    background: var(--palette-surface-bg, color-mix(in srgb, var(--text-color) 8%, transparent));
    padding: 0.75em 1em;
    border-radius: 0.5rem;
    margin: 0.75em 0;
    overflow-x: auto;
}
.tiptap-content pre code {
    background: transparent;
    padding: 0;
}

/* ── Native <hr> (rare; styledDivider is the usual one) ─────────────── */
.tiptap-content hr {
    border: 0;
    border-top: 1px solid var(--palette-divider, currentColor);
    margin: 1.5rem auto;
}

/* ── Card block ─────────────────────────────────────────────────────── */
/* The wrapper inline-styles all colours/border/box-shadow via theme CSS
   vars; this file only owns layout + the spacing of card children. */
.tiptap-content [data-card-block] {
    /* Block-level so it stacks naturally with paragraphs above/below. The
       inline `max-width: N%` set by CardBlock.js still wins. */
    margin-block: 0.75rem;
}

.tiptap-content [data-card-block] h1,
.tiptap-content [data-card-block] h2,
.tiptap-content [data-card-block] h3,
.tiptap-content [data-card-block] h4,
.tiptap-content [data-card-block] h5,
.tiptap-content [data-card-block] h6,
.tiptap-content [data-card-block] p,
.tiptap-content [data-card-block] ul,
.tiptap-content [data-card-block] ol,
.tiptap-content [data-card-block] blockquote {
    color: inherit;
    margin-top: 0;
    margin-bottom: 0.35em;
}
.tiptap-content [data-card-block] *:last-child {
    margin-bottom: 0;
}

/* ── Styled divider ─────────────────────────────────────────────────── */
/* The element renders width/border/color inline (StyledDivider.js
   renderHTML), so this just makes sure it has consistent block flow
   around it across all renderers. */
.tiptap-content [data-type='styledDivider'] {
    margin-block: 0.5rem;
}

/* ── Image block ────────────────────────────────────────────────────── */
.tiptap-content [data-type='imageBlock'] {
    display: block;
    margin-block: 0.75rem;
}
.tiptap-content [data-type='imageBlock'] img {
    display: block;
    max-width: 100%;
    height: auto;
}
.tiptap-content [data-type='imageBlock'].mx-auto { margin-left: auto; margin-right: auto; }
.tiptap-content [data-type='imageBlock'].me-auto { margin-right: auto; margin-left: 0; }
.tiptap-content [data-type='imageBlock'].ms-auto { margin-left: auto; margin-right: 0; }

/* ── Columns ────────────────────────────────────────────────────────── */
.tiptap-content [data-type='columns'].layout-sidebar-left {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 1rem;
}
.tiptap-content [data-type='columns'].layout-sidebar-right {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 1rem;
}
.tiptap-content [data-type='columns'].layout-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}