/*
 * blog_content.css
 * CSS classes produced by Quill that must be present when rendering saved
 * blog post HTML outside the editor (i.e. in the public view page).
 */

/* ── Text alignment ──────────────────────────────────────────────────────── */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ── Text direction (RTL for Dhivehi / Arabic script) ───────────────────── */
.ql-direction-rtl { direction: rtl; text-align: right; }

/* ── Indentation ─────────────────────────────────────────────────────────── */
.ql-indent-1  { padding-left: 3em; }
.ql-indent-2  { padding-left: 6em; }
.ql-indent-3  { padding-left: 9em; }
.ql-indent-4  { padding-left: 12em; }
.ql-indent-5  { padding-left: 15em; }
.ql-indent-6  { padding-left: 18em; }
.ql-indent-7  { padding-left: 21em; }
.ql-indent-8  { padding-left: 24em; }

/* RTL indentation */
.ql-direction-rtl.ql-indent-1  { padding-right: 3em;  padding-left: 0; }
.ql-direction-rtl.ql-indent-2  { padding-right: 6em;  padding-left: 0; }
.ql-direction-rtl.ql-indent-3  { padding-right: 9em;  padding-left: 0; }
.ql-direction-rtl.ql-indent-4  { padding-right: 12em; padding-left: 0; }
.ql-direction-rtl.ql-indent-5  { padding-right: 15em; padding-left: 0; }
.ql-direction-rtl.ql-indent-6  { padding-right: 18em; padding-left: 0; }
.ql-direction-rtl.ql-indent-7  { padding-right: 21em; padding-left: 0; }
.ql-direction-rtl.ql-indent-8  { padding-right: 24em; padding-left: 0; }

/* ── Fonts available in the blog editor ─────────────────────────────────── */
.ql-font-arial           { font-family: Arial, Helvetica, sans-serif; }
.ql-font-times-new-roman { font-family: "Times New Roman", Times, serif; }
.ql-font-calibri         { font-family: Calibri, "Gill Sans", "Trebuchet MS", sans-serif; }
/* Faruma — Dhivehi (name must match @font-face in tailwind-only.css) */
.ql-font-faruma          { font-family: "Faruma", serif; }

/* ── Bilingual rendering helpers ─────────────────────────────────────────── */
.blog-content-body {
    word-break: break-word;
}

.blog-dhivehi-field {
    font-family: "Faruma", "Mv Faseyha", "Mv Iyyu Normal", "Noto Sans Thaana", "Arial Unicode MS", Tahoma, Arial, sans-serif !important;
}

.blog-dhivehi-field::placeholder {
    font-family: "Faruma", "Mv Faseyha", "Mv Iyyu Normal", "Noto Sans Thaana", "Arial Unicode MS", Tahoma, Arial, sans-serif !important;
}

.blog-dhivehi-summary {
    font-size: 13px !important;
}

.blog-content-dhivehi {
    font-family: "Faruma", "Mv Faseyha", "Mv Iyyu Normal", "Noto Sans Thaana", "Arial Unicode MS", Tahoma, Arial, sans-serif;
    font-size: 13px;
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
    line-height: 1.9;
}

.blog-content-dhivehi * {
    font-family: "Faruma", "Mv Faseyha", "Mv Iyyu Normal", "Noto Sans Thaana", "Arial Unicode MS", Tahoma, Arial, sans-serif !important;
}

.blog-content-dhivehi p,
.blog-content-dhivehi h1,
.blog-content-dhivehi h2,
.blog-content-dhivehi h3,
.blog-content-dhivehi h4,
.blog-content-dhivehi h5,
.blog-content-dhivehi h6,
.blog-content-dhivehi li,
.blog-content-dhivehi blockquote,
.blog-content-dhivehi td,
.blog-content-dhivehi th {
    direction: rtl;
    text-align: right;
}

.blog-content-dhivehi ul,
.blog-content-dhivehi ol {
    padding-right: 1.25rem;
    padding-left: 0;
}

.ql-editor[lang="dv"],
.ql-editor[lang="dv"] * {
    font-family: "Faruma", "Mv Faseyha", "Mv Iyyu Normal", "Noto Sans Thaana", "Arial Unicode MS", Tahoma, Arial, sans-serif !important;
}

.ql-editor[lang="dv"] {
    font-size: 13px;
}

.blog-post-title {
    line-height: 1.3;
}

/* ── Block-level formatting ──────────────────────────────────────────────── */
.ql-editor blockquote,
.prose blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1em;
    color: #6b7280;
    font-style: italic;
    margin: 1em 0;
}

/* RTL blockquote */
.ql-direction-rtl blockquote {
    border-left: none;
    border-right: 4px solid #d1d5db;
    padding-left: 0;
    padding-right: 1em;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
.ql-code-block-container,
pre.ql-syntax {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 6px;
    padding: 1em 1.25em;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
    margin: 1em 0;
    white-space: pre-wrap;
}

/* ── Links and media ─────────────────────────────────────────────────────── */
.blog-content-body a {
    color: #2563eb;
    text-decoration: underline;
}

.blog-content-body img {
    margin: 1rem auto;
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
}

.blog-content-body iframe.ql-video,
.blog-content-body iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.blog-content-body video {
    width: 100%;
    border-radius: 0.5rem;
    margin: 1rem 0;
    background: #000;
}

.blog-content-body hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.5rem 0;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.prose table,
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
.prose th, .prose td,
th, td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    text-align: left;
}
.prose th, th {
    background: #f3f4f6;
    font-weight: 600;
}
.ql-direction-rtl th,
.ql-direction-rtl td {
    text-align: right;
}