/*
 * Mixed Urdu / English (bidirectional) content styling.
 *
 * Shared by the CKEditor writing area (.ck-content) and the published post
 * body (.post-content) so that what an author sees while writing is what a
 * reader gets. Direction is decided per block, not per page: bidi_html() in
 * app/Helpers/functions.php stamps the published markup and urdu-bidi.js does
 * the same inside the editor.
 */

:root {
    --bidi-urdu-font: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Nafees Nastaleeq', serif;
    --bidi-urdu-line-height: 2.15;
}

/* ---------------------------------------------------------------------------
   Urdu blocks
   Nastaliq needs far more leading than a Latin face or the descenders of one
   line collide with the next.
   --------------------------------------------------------------------------- */

.post-content [dir="rtl"],
.ck-content [dir="rtl"] {
    font-family: var(--bidi-urdu-font);
    line-height: var(--bidi-urdu-line-height);
    text-align: start;
}

.post-content p[dir="rtl"],
.post-content li[dir="rtl"],
.post-content td[dir="rtl"],
.post-content th[dir="rtl"],
.post-content blockquote[dir="rtl"],
.ck-content p[dir="rtl"],
.ck-content li[dir="rtl"],
.ck-content td[dir="rtl"],
.ck-content th[dir="rtl"],
.ck-content blockquote[dir="rtl"] {
    font-size: 1.15rem;
}

.post-content h1[dir="rtl"],
.post-content h2[dir="rtl"],
.post-content h3[dir="rtl"],
.ck-content h1[dir="rtl"],
.ck-content h2[dir="rtl"],
.ck-content h3[dir="rtl"] {
    line-height: 1.9;
}

/* English blocks inside an Urdu post keep the site font and normal leading. */
.post-content [dir="ltr"],
.ck-content [dir="ltr"] {
    text-align: start;
}

/* ---------------------------------------------------------------------------
   Block furniture that has to mirror with the text
   --------------------------------------------------------------------------- */

.post-content ul[dir="rtl"],
.post-content ol[dir="rtl"] {
    padding-right: 1.75rem;
    padding-left: 0;
}

/*
 * CKEditor generates the ul/ol itself, so there is no model element to hang a
 * dir on. Flip the list when it holds Urdu items instead.
 */
.ck-content ul:has(> li[dir="rtl"]),
.ck-content ol:has(> li[dir="rtl"]) {
    direction: rtl;
    padding-right: 1.75rem;
    padding-left: 0;
}

.post-content blockquote[dir="rtl"],
.ck-content blockquote[dir="rtl"] {
    border-right: 4px solid #ced4da;
    border-left: 0;
    padding-right: 1rem;
    padding-left: 0;
}

.ck-content table:has(td[dir="rtl"]),
.ck-content table:has(th[dir="rtl"]) {
    direction: rtl;
}

/* ---------------------------------------------------------------------------
   Standalone bits of post text outside the body: headings, card titles,
   excerpts. They carry dir="auto" or a server calculated dir.
   --------------------------------------------------------------------------- */

.bidi-text[dir="rtl"] {
    font-family: var(--bidi-urdu-font);
    line-height: 1.9;
    text-align: start;
}

/* Kept separate: a browser without :dir() would throw away the rule above. */
.bidi-text:dir(rtl) {
    font-family: var(--bidi-urdu-font);
    line-height: 1.9;
    text-align: start;
}

/* ---------------------------------------------------------------------------
   Single line fields (title, meta title, meta description)
   dir="auto" on the input lets the browser flip the field as soon as the first
   Urdu or English letter is typed.
   --------------------------------------------------------------------------- */

.bidi-input:dir(rtl) {
    font-family: var(--bidi-urdu-font);
    line-height: 2;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* ---------------------------------------------------------------------------
   Editor chrome
   --------------------------------------------------------------------------- */

.bidi-direction-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.bidi-direction-bar .bidi-direction-label {
    color: #6c757d;
}

.bidi-direction-bar button[aria-pressed="true"] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.ck-editor__editable {
    min-height: 320px;
}