/*
 * Blog CMS v2: the post form looks like the interfy.ai article
 * (components/blog/BlockRenderer.tsx on the site). Plain CSS, registered as
 * a Filament asset (AppServiceProvider); publish with `php artisan filament:assets`.
 */
.blog-article {
    --blog-text: #1f2937;
    --blog-muted: #6b7280;
    --blog-blue: #2563eb;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--blog-text);
    max-width: 52rem;
    margin-inline: auto;
}
.dark .blog-article { --blog-text: #e5e7eb; --blog-muted: #9ca3af; --blog-blue: #60a5fa; }
.blog-article > * + * { margin-top: 1.25rem; }
.blog-article h1,
.blog-article h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; margin-top: 2rem; }
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; margin-top: 1.5rem; }
.blog-article p { margin: 0; }
.blog-article p + p { margin-top: 1.25rem; }
.blog-article strong { font-weight: 700; }
.blog-article a { color: var(--blog-blue); text-decoration: underline; text-underline-offset: 2px; }
.blog-article ul,
.blog-article ol { padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.blog-article ul { list-style: disc; }
.blog-article ol { list-style: decimal; }
.blog-article li::marker { color: var(--blog-blue); }
.blog-article blockquote { border-left: 4px solid var(--blog-blue); padding-left: 1.25rem; font-size: 1.125rem; font-style: italic; }
.blog-article img { display: block; max-width: 100%; height: auto; border-radius: 0.75rem; margin: 0.5rem 0; }
.blog-article img.ProseMirror-selectednode { outline: 3px solid var(--blog-blue); }

.blog-block { border-radius: 0.75rem; padding: 1rem 1.25rem; font-style: normal; }
.blog-callout { border: 1px solid; }
.blog-callout--info { border-color: rgb(37 99 235 / 0.3); background: #eff6ff; }
.blog-callout--tip { border-color: rgb(12 212 169 / 0.4); background: #f1fbf8; }
.blog-callout--warning { border-color: rgb(245 165 36 / 0.5); background: #fff8eb; }
.dark .blog-callout--info,
.dark .blog-callout--tip,
.dark .blog-callout--warning { background: rgb(255 255 255 / 0.05); }
.blog-callout__title { font-weight: 700; margin-bottom: 0.25rem; }
.blog-cta { background: #eef2ff; border: 1px solid rgb(37 99 235 / 0.2); }
.dark .blog-cta { background: rgb(255 255 255 / 0.05); }
.blog-cta__heading { font-size: 1.25rem; font-weight: 700; }
.blog-cta__text { margin-top: 0.25rem; }
.blog-cta__button { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; background: #2563eb; color: #fff; font-weight: 700; }
.blog-cta__href { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: #6b7280; }
.blog-table { padding: 0; overflow-x: auto; }
.blog-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.blog-table caption { caption-side: bottom; padding-top: 0.5rem; font-size: 0.875rem; color: #6b7280; text-align: left; }
.blog-table th,
.blog-table td { border: 1px solid rgb(0 0 0 / 0.1); padding: 0.5rem 0.75rem; text-align: left; }
.blog-table th { background: rgb(0 0 0 / 0.04); font-weight: 700; }

/* Room to write: a tall editor with a toolbar that stays in view, and a
   full-screen mode laid out like the site's article column. */
.tiptap-wrapper:has(.blog-article) .tiptap-toolbar { position: sticky; top: 0; z-index: 2; }
.tiptap-wrapper:has(.blog-article):not(.tiptap-fullscreen) .tiptap-prosemirror-wrapper { min-height: 32rem; max-height: calc(100vh - 14rem); }
.tiptap-wrapper:has(.blog-article) .blog-article { min-height: 30rem; padding-block: 1.5rem; }
.tiptap-fullscreen:has(.blog-article) { background: #f9fafb; }
.dark .tiptap-fullscreen:has(.blog-article) { background: rgb(3 7 18); }
.tiptap-fullscreen:has(.blog-article) .tiptap-prosemirror-wrapper { flex: 1; padding-inline: 1.5rem; }
.tiptap-fullscreen .blog-article { min-height: calc(100vh - 8rem); padding: 3rem 3.5rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); margin-block: 1.5rem; }
.dark .tiptap-fullscreen .blog-article { background: rgb(17 24 39); }

/* Google result preview */
.blog-serp { font-family: Arial, sans-serif; max-width: 36rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: #fff; border: 1px solid rgb(0 0 0 / 0.1); }
.blog-serp__site { display: flex; gap: 0.625rem; align-items: center; font-size: 0.875rem; color: #202124; }
.blog-serp__favicon { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #e8f0fe; color: #1a0dab; display: grid; place-content: center; font-weight: 700; }
.blog-serp__name { display: block; }
.blog-serp__url { display: block; font-size: 0.75rem; color: #4d5156; }
.blog-serp__title { margin-top: 0.25rem; font-size: 1.25rem; line-height: 1.3; color: #1a0dab; }
.blog-serp__description { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.58; color: #4d5156; }

/* Link card preview (LinkedIn / WhatsApp / X) */
.blog-social { max-width: 32rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgb(0 0 0 / 0.12); background: #fff; }
.blog-social__image { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: #e5e7eb; }
.blog-social__image--empty { display: grid; place-content: center; padding: 1rem; text-align: center; color: #6b7280; font-size: 0.875rem; }
.blog-social__body { padding: 0.625rem 0.875rem; background: #f3f4f6; }
.blog-social__host { font-size: 0.75rem; text-transform: uppercase; color: #6b7280; }
.blog-social__title { font-weight: 600; color: #111827; line-height: 1.3; }
.blog-social__description { margin-top: 0.125rem; font-size: 0.8125rem; color: #4b5563; }