/* ============================================================
   iH4xz Onyx — assets/css/arabic-content.css
   Arabic content rendering on an English (LTR) WordPress site.

   Strategy: JS detects Arabic Unicode in each element and adds
   .is-arabic class. These rules then apply the correct font,
   direction, line-height and layout — all scoped tightly so
   English UI (nav, badges, buttons, code) is NEVER affected.
   ============================================================ */

/* ── Arabic font variables (always available) ── */
:root {
    --font-arabic:      'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-arabic-ui:   'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --arabic-lh:        2.0;
    --arabic-size-body: 1.12rem;
    --arabic-size-h1:   2.4rem;
    --arabic-size-h2:   1.75rem;
    --arabic-size-h3:   1.35rem;
    --arabic-size-h4:   1.1rem;
}

/* ════════════════════════════════════════════════
   1. CONTENT AREA — Arabic paragraphs & headings
      Applied by JS when Arabic chars are detected.
   ════════════════════════════════════════════════ */

/* Any element tagged .is-arabic by JS */
.is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
    word-spacing: 0.04em;
    unicode-bidi: isolate;
}

/* Headings — use Cairo for that angular techy feel */
h1.is-arabic,
h2.is-arabic,
h3.is-arabic,
h4.is-arabic,
h5.is-arabic,
h6.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    font-weight: 700;
    letter-spacing: 0 !important;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════
   2. WP CONTENT BODY — .wp-content paragraphs, lists, etc.
   ════════════════════════════════════════════════ */

.wp-content p.is-arabic,
.wp-content li.is-arabic {
    font-family: var(--font-arabic) !important;
    font-size: var(--arabic-size-body);
    direction: rtl;
    text-align: right;
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
}

/* Arabic headings inside wp-content */
.wp-content h2.is-arabic,
.wp-content h3.is-arabic,
.wp-content h4.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.5;
}

/* Blockquote — flip border to right side */
.wp-content blockquote.is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    border-left: none;
    border-right: 4px solid var(--accent-purple);
    padding-left: 0;
    padding-right: 1.5rem;
    font-style: normal; /* Arabic doesn't use italic */
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
}

/* Lists — flip bullet to right, flip padding */
.wp-content ul.is-arabic,
.wp-content ol.is-arabic {
    direction: rtl;
    text-align: right;
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Remove LTR bullet ▸ pseudo for Arabic lists */
.wp-content ul.is-arabic > li::before {
    content: none;
}
/* Add RTL bullet on right side */
.wp-content ul.is-arabic > li {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
    padding-right: 1.2em;
    position: relative;
}
.wp-content ul.is-arabic > li::after {
    content: '◂';
    position: absolute;
    right: 0;
    top: 0.45em;
    color: var(--accent-cyan);
    font-size: 0.65em;
    line-height: 1;
}

.wp-content ol.is-arabic > li {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
}

/* Tables */
.wp-content table.is-arabic th,
.wp-content table.is-arabic td {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
}

/* Code blocks — ALWAYS stay LTR, never inherit Arabic direction */
.wp-content pre,
.wp-content pre.is-arabic,
.wp-content code,
.wp-content code.is-arabic {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
    font-family: var(--font-mono) !important;
    letter-spacing: normal !important;
}

/* ════════════════════════════════════════════════
   3. POST TITLE & PROJECT TITLE — Arabic detection
   ════════════════════════════════════════════════ */

.post-title.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.4;
    /* Keep the gradient text effect */
    background: var(--grad-logo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.project-page-title.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════
   4. BLOG LIST — Arabic post titles & excerpts
   ════════════════════════════════════════════════ */

/* Arabic title inside blog-row */
.blog-row-content h2.is-arabic,
.blog-row-content h3.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.6;
    unicode-bidi: isolate;
}

/* Arabic excerpt inside blog-row */
.blog-row-content p.is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.8;
}

/* When the whole blog-row has an Arabic title: flip layout so
   date stays on the correct side and arrow mirrors */
.blog-row.has-arabic-title {
    direction: rtl;
}
.blog-row.has-arabic-title .blog-date {
    /* date stays mono / LTR — force isolate */
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-mono);
    text-align: left;
}
.blog-row.has-arabic-title .blog-arrow {
    transform: scaleX(-1);
}
.blog-row.has-arabic-title:hover .blog-arrow {
    transform: scaleX(-1) translateX(-3px);
}
/* Hover accent border flips to right */
.blog-row.has-arabic-title {
    border-left: var(--border);
    border-right: 3px solid transparent;
}
.blog-row.has-arabic-title:hover {
    border-right-color: var(--accent-magenta);
    border-left-color: rgba(255,255,255,0.06);
    transform: translateX(-4px);
}

/* ════════════════════════════════════════════════
   5. PROJECT CARDS — Arabic titles & descriptions
   ════════════════════════════════════════════════ */

.project-card .project-title.is-arabic,
.project-card .project-title a.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.5;
    display: block;
}

.project-card .project-desc.is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: var(--arabic-lh);
}

/* When a project card has Arabic title — flip card header icons */
.project-card.has-arabic-title .project-card-header {
    flex-direction: row-reverse;
}
.project-card.has-arabic-title .project-links {
    flex-direction: row-reverse;
}

/* ════════════════════════════════════════════════
   6. RELATED POSTS — Arabic titles
   ════════════════════════════════════════════════ */

.related-title.is-arabic {
    font-family: var(--font-arabic-ui) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════
   7. COMMENTS — Arabic comment text
   ════════════════════════════════════════════════ */

.comment-content p.is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: var(--arabic-lh);
}

.comment-content .is-arabic {
    font-family: var(--font-arabic) !important;
    direction: rtl;
    text-align: right;
    letter-spacing: 0 !important;
}

/* ════════════════════════════════════════════════
   8. CHANGELOG BOX — stays LTR always
   ════════════════════════════════════════════════ */

.changelog-box,
.changelog-box.is-arabic {
    direction: ltr !important;
    text-align: left !important;
    font-family: var(--font-mono) !important;
    unicode-bidi: isolate !important;
}

/* ════════════════════════════════════════════════
   9. GUTENBERG EDITOR — auto-direction per block
      unicode-bidi: plaintext lets the browser decide
      direction from the first strong character written.
      This means Arabic typing → auto RTL, English → LTR.
   ════════════════════════════════════════════════ */

.editor-styles-wrapper .wp-block-paragraph {
    font-family: var(--font-sans);
    unicode-bidi: plaintext; /* key: auto-detect direction per paragraph */
}

/* When a paragraph is detected as Arabic by the editor */
.editor-styles-wrapper .wp-block-paragraph[dir="rtl"] {
    font-family: var(--font-arabic) !important;
    font-size: var(--arabic-size-body);
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
    text-align: right;
}

/* Headings auto-direction */
.editor-styles-wrapper .wp-block-heading {
    unicode-bidi: plaintext;
}
.editor-styles-wrapper .wp-block-heading[dir="rtl"] {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
    text-align: right;
    line-height: 1.5;
}

/* Lists auto-direction */
.editor-styles-wrapper .wp-block-list {
    unicode-bidi: plaintext;
}
.editor-styles-wrapper .wp-block-list[dir="rtl"],
.editor-styles-wrapper .wp-block-list[dir="rtl"] li {
    font-family: var(--font-arabic) !important;
    text-align: right;
    letter-spacing: 0 !important;
    line-height: var(--arabic-lh);
}
.editor-styles-wrapper .wp-block-list[dir="rtl"] {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Blockquote auto-direction */
.editor-styles-wrapper .wp-block-quote[dir="rtl"] {
    font-family: var(--font-arabic) !important;
    border-left: none;
    border-right: 4px solid var(--accent-purple);
    padding-left: 0;
    padding-right: 1.5rem;
    text-align: right;
    font-style: normal;
    line-height: var(--arabic-lh);
    letter-spacing: 0 !important;
}

/* Code always LTR */
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-code[dir="rtl"],
.editor-styles-wrapper pre[dir="rtl"] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
    font-family: var(--font-mono) !important;
}

/* Post title in editor — auto-direction */
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
    unicode-bidi: plaintext;
}
.editor-styles-wrapper .editor-post-title__input[dir="rtl"],
.editor-styles-wrapper .wp-block-post-title[dir="rtl"] {
    font-family: var(--font-arabic-ui) !important;
    text-align: right;
    letter-spacing: 0 !important;
}

/* ─────────────────────────────────────────────
   GUTENBERG BLOCK STYLES — ARABIC OVERRIDES
   ───────────────────────────────────────────── */

/* --- Font presets overrides for Arabic/RTL to scale text appropriately --- */
.is-arabic,
.editor-styles-wrapper .wp-block-paragraph[dir="rtl"],
.editor-styles-wrapper .wp-block-heading[dir="rtl"],
.editor-styles-wrapper .wp-block-list[dir="rtl"],
.editor-styles-wrapper[dir="rtl"] {
    --wp--preset--font-size--small:   0.95rem !important;
    --wp--preset--font-size--normal:  1.12rem !important;
    --wp--preset--font-size--medium:  1.35rem !important;
    --wp--preset--font-size--large:   1.75rem !important;
    --wp--preset--font-size--x-large: 2.40rem !important;
    --wp--preset--font-size--xx-large:3.20rem !important;
}

/* --- Button Block overrides --- */
.wp-block-button__link.is-arabic,
.editor-styles-wrapper .wp-block-button__link[dir="rtl"],
.editor-styles-wrapper[dir="rtl"] .wp-block-button__link {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

/* --- Separator Block overrides --- */
.wp-block-separator.is-style-dots.is-arabic::before,
.editor-styles-wrapper .wp-block-separator.is-style-dots[dir="rtl"]::before,
.editor-styles-wrapper[dir="rtl"] .wp-block-separator.is-style-dots::before {
    letter-spacing: 0 !important;
    content: "•••" !important;
}

/* --- File Block overrides --- */
.wp-block-file.is-arabic,
.editor-styles-wrapper .wp-block-file[dir="rtl"],
.editor-styles-wrapper[dir="rtl"] .wp-block-file {
    direction: rtl !important;
}
.wp-block-file.is-arabic a:not(.wp-block-file__button),
.editor-styles-wrapper .wp-block-file[dir="rtl"] a:not(.wp-block-file__button),
.editor-styles-wrapper[dir="rtl"] .wp-block-file a:not(.wp-block-file__button) {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
}
.wp-block-file.is-arabic .wp-block-file__button,
.editor-styles-wrapper .wp-block-file[dir="rtl"] .wp-block-file__button,
.editor-styles-wrapper[dir="rtl"] .wp-block-file .wp-block-file__button {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
}

/* --- Details Block overrides --- */
details.wp-block-details.is-arabic summary,
.editor-styles-wrapper details.wp-block-details[dir="rtl"] summary,
.editor-styles-wrapper[dir="rtl"] details.wp-block-details summary {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
    text-align: right !important;
}

/* --- Search Block overrides --- */
.wp-block-search.is-arabic,
.editor-styles-wrapper .wp-block-search[dir="rtl"],
.editor-styles-wrapper[dir="rtl"] .wp-block-search {
    direction: rtl !important;
}
.wp-block-search.is-arabic .wp-block-search__label,
.editor-styles-wrapper .wp-block-search[dir="rtl"] .wp-block-search__label,
.editor-styles-wrapper[dir="rtl"] .wp-block-search .wp-block-search__label {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
    text-align: right !important;
}
.wp-block-search.is-arabic .wp-block-search__button,
.editor-styles-wrapper .wp-block-search[dir="rtl"] .wp-block-search__button,
.editor-styles-wrapper[dir="rtl"] .wp-block-search .wp-block-search__button {
    font-family: var(--font-arabic-ui) !important;
    letter-spacing: 0 !important;
}

/* --- Image & Media Caption overrides --- */
.wp-block-image.is-arabic figcaption,
.wp-block-gallery.is-arabic figcaption,
.wp-block-audio.is-arabic figcaption,
.wp-block-video.is-arabic figcaption,
.editor-styles-wrapper .wp-block-image[dir="rtl"] figcaption,
.editor-styles-wrapper[dir="rtl"] .wp-block-image figcaption {
    font-family: var(--font-arabic) !important;
    direction: rtl !important;
    letter-spacing: 0 !important;
}
.wp-block-image.is-arabic figcaption::before,
.wp-block-gallery.is-arabic figcaption::before,
.wp-block-audio.is-arabic figcaption::before,
.wp-block-video.is-arabic figcaption::before,
.editor-styles-wrapper .wp-block-image[dir="rtl"] figcaption::before,
.editor-styles-wrapper[dir="rtl"] .wp-block-image figcaption::before {
    content: "// " !important;
}

/* --- Widget Blocks overrides --- */
.wp-block-latest-posts.is-arabic li,
.wp-block-latest-comments.is-arabic li,
.wp-block-categories.is-arabic li,
.wp-block-archives.is-arabic li,
.editor-styles-wrapper .wp-block-latest-posts[dir="rtl"] li,
.editor-styles-wrapper[dir="rtl"] .wp-block-latest-posts li {
    font-family: var(--font-arabic) !important;
    direction: rtl !important;
    text-align: right !important;
}