/* =====================================================================
   RTL & Arabic Stylesheet for the Source theme — النسخة العربية
   ---------------------------------------------------------------------
   This file overrides the LTR-specific rules of `built/screen.css`
   so the layout flows from right to left and reads properly in Arabic.
   It is loaded AFTER `built/screen.css` in `default.hbs`.
   ===================================================================== */


/* 1. Arabic font stack
/* ---------------------------------------------------------- */

/* Override the font variables to add Arabic fonts as the FIRST option in the stack.
   Latin fallbacks remain for any non-Arabic content like English brand names. */
:root {
    --font-sans: "Cairo", "Tajawal", "Noto Kufi Arabic", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Tahoma", "Arial", sans-serif;
    --font-serif: "Amiri", "Cairo", "EB Garamond", Georgia, Times, serif;
    --font-serif-alt: "Amiri", Georgia, Times, serif;
    --font-mono: "Noto Kufi Arabic", "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
}

/* Make body text feel natural with Arabic. */
html[dir="rtl"] body {
    font-family: var(--gh-font-body, var(--font-sans));
    line-height: 1.8;          /* Arabic looks better with a bit more leading */
    letter-spacing: 0;         /* No negative tracking on Arabic */
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    letter-spacing: 0 !important;
    line-height: 1.4;
}


/* 2. Global direction
/* ---------------------------------------------------------- */

html[dir="rtl"],
html[dir="rtl"] body,
.is-rtl {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

/* Make sure code, terminal output and English-language snippets stay LTR. */
html[dir="rtl"] :is(pre, code, kbd, samp, var, .gh-table table),
html[dir="rtl"] [dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}


/* 3. Search field (forms)
/* ---------------------------------------------------------- */

html[dir="rtl"] button.gh-form-input {
    text-align: right;
}

html[dir="rtl"] .gh-form .gh-button {
    right: auto;
    left: 6px;
}

html[dir="rtl"] .gh-form > svg {
    left: auto;
    right: 22px;
}

html[dir="rtl"] :is(.has-serif-title, .has-mono-title):not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-form > svg {
    left: auto;
    right: 16px;
}


/* 4. Icon buttons (search / burger)
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-search {
    margin-right: -2px;
    margin-left: -2px;
}

html[dir="rtl"] .gh-burger {
    margin-right: 4px;
    margin-left: -7px;
}


/* 5. Navigation layouts
/* ---------------------------------------------------------- */

@media (min-width: 992px) {
    html[dir="rtl"] .gh-navigation.is-left-logo .gh-navigation-menu {
        margin-right: 16px;
        margin-left: 100px;
    }

    html[dir="rtl"] .gh-navigation.is-middle-logo .gh-navigation-menu {
        margin-right: 0;
        margin-left: 64px;
    }
}


/* 6. Stacked navigation borders
/* ---------------------------------------------------------- */

@media (min-width: 768px) {
    html[dir="rtl"] .gh-navigation.is-stacked .gh-navigation-menu::before,
    html[dir="rtl"] .gh-navigation.is-stacked .gh-navigation-menu::after {
        left: auto;
        right: 0;
    }
}


/* 7. Dropdown menus
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-dropdown {
    right: auto;
    left: -16px;
    text-align: right;
}

html[dir="rtl"] .gh-dropdown.is-left {
    left: auto;
    right: -16px;
}


/* 8. Magazine header layout
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-header.is-magazine .gh-header-inner > .gh-card::after {
    left: auto;
    right: calc(var(--grid-gap) / -2);
}

html[dir="rtl"] .gh-header.is-magazine .gh-header-inner > .gh-card::after {
    right: auto;
    left: calc(var(--grid-gap) / -2);
}

html[dir="rtl"] .gh-header.is-magazine .gh-header-inner > div .gh-card + .gh-card::before {
    left: auto;
    right: 0;
}

@media (max-width: 1199px) {
    html[dir="rtl"] .gh-header.is-magazine .gh-header-right::before {
        left: auto;
        right: 0;
    }

    html[dir="rtl"] .gh-header.is-magazine .gh-header-right .gh-card::after {
        right: auto;
        left: calc(var(--grid-gap) / -2);
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .gh-header.is-magazine .gh-card::before {
        left: auto;
        right: 0;
    }
}


/* 9. Highlight header layout
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-header.is-highlight .gh-header-left::after,
html[dir="rtl"] .gh-header.is-highlight .gh-header-middle::after {
    right: auto;
    left: calc(var(--grid-gap) / -2);
}

html[dir="rtl"] .gh-header.is-highlight .gh-card::before {
    left: auto;
    right: 0;
}

@media (max-width: 1199px) {
    html[dir="rtl"] .gh-header.is-highlight .gh-featured-feed .gh-card::after {
        left: auto;
        right: calc(var(--grid-gap) / -2);
    }
}


/* 10. Featured posts vertical separator
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-featured-feed .gh-card::before {
    left: auto;
    right: calc(var(--grid-gap) / -2);
}


/* 11. Main container with sidebar
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-container.has-sidebar .gh-main::after {
    right: auto;
    left: calc(var(--grid-gap) / -2);
}


/* 12. Post-list separators
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-container.is-list .gh-card + .gh-card::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .gh-container.is-grid .gh-card::before {
    /* unchanged — uses both right & left, already symmetrical */
}

html[dir="rtl"] .gh-container.is-grid .gh-card::after {
    left: auto;
    right: calc(var(--grid-gap) / -2);
}


/* 13. Post content (blockquote, lists, drop cap)
/* ---------------------------------------------------------- */

/* Drop cap: float right (instead of left) for RTL paragraphs */
html[dir="rtl"] .post-template .gh-content.drop-cap > p:first-of-type:first-letter {
    margin: 0 0 0 0.2em;
    float: right;
    margin-right: -1px;
    margin-left: 0;
}

/* Blockquote: border on the right side for RTL */
html[dir="rtl"] blockquote:not([class]) {
    padding-left: 0;
    padding-right: 2rem;
    border-left: 0;
    border-right: 4px solid var(--ghost-accent-color);
}

/* Lists: indent on the right side */
html[dir="rtl"] .gh-content :is(ul, ol) {
    padding-left: 0;
    padding-right: 28px;
}

/* Tables: align headers and edges to the right */
html[dir="rtl"] .gh-content .gh-table table th {
    text-align: right;
}

html[dir="rtl"] .gh-content .gh-table table :is(th, td):first-child {
    padding-left: 12px;
    padding-right: 0;
}

html[dir="rtl"] .gh-content .gh-table table :is(th, td):last-child {
    padding-right: 12px;
    padding-left: 0;
}


/* 14. File card
/* ---------------------------------------------------------- */

html[dir="rtl"] .kg-file-card.kg-card .kg-file-card-filesize::before {
    margin-right: 6px;
    margin-left: 6px;
}


/* 15. Bookmark card thumbnail (image is on the OPPOSITE side in RTL)
/* ---------------------------------------------------------- */

html[dir="rtl"] .kg-bookmark-card .kg-bookmark-thumbnail img {
    border-radius: 0.2em 0 0 0.2em;
}


/* 16. Footer
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-footer-copyright {
    text-align: left;
}


/* 17. Lightbox arrow buttons (swap left/right)
/* ---------------------------------------------------------- */

html[dir="rtl"] .pswp__button--arrow--left {
    left: auto;
    right: 0;
}

html[dir="rtl"] .pswp__button--arrow--right {
    right: auto;
    left: 0;
}

html[dir="rtl"] .pswp__button--arrow--left::before {
    left: auto;
    right: 6px;
    /* swap arrow sprite so "previous" button (now on right) shows a right-pointing arrow */
    background-position: -94px -44px;
}

html[dir="rtl"] .pswp__button--arrow--right::before {
    right: auto;
    left: 6px;
    /* swap arrow sprite so "next" button (now on left) shows a left-pointing arrow */
    background-position: -138px -44px;
}


/* 18. Directional SVG icons (arrows)
/* ---------------------------------------------------------- */

/* The theme's arrow icon points right (→). In RTL, "forward" is leftward,
   so we mirror these arrows visually with a horizontal flip. */
html[dir="rtl"] .gh-more svg,
html[dir="rtl"] .gh-button svg,
html[dir="rtl"] .gh-recommendations button svg {
    transform: scaleX(-1);
}

/* Exception: Burger / close / search / social icons are symmetrical
   and should NOT be flipped. */
html[dir="rtl"] :is(.gh-burger, .gh-search, .gh-icon-button) svg {
    transform: none;
}


/* 19. Pagination arrows in lightbox / lists (positioning)
/* ---------------------------------------------------------- */

/* The preloader spinner uses absolute positioning — flip it. */
html[dir="rtl"] .pswp__preloader {
    left: auto;
    right: 50%;
    margin-left: 0;
    margin-right: -22px;
}

html[dir="rtl"] .pswp--css_animation .pswp__preloader__icn {
    left: auto;
    right: 15px;
}

html[dir="rtl"] .pswp--css_animation .pswp__preloader__donut {
    left: auto;
    right: 0;
}

@media screen and (max-width: 1024px) {
    html[dir="rtl"] .pswp__preloader {
        float: left;
        right: auto;
    }
}


/* 20. Lightbox counter (top-bar info, mirror to the right)
/* ---------------------------------------------------------- */

html[dir="rtl"] .pswp__counter {
    left: auto;
    right: 0;
}


/* 21. Article meta and author avatar alignment
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-article-meta,
html[dir="rtl"] .gh-meta-share {
    text-align: right;
}

html[dir="rtl"] .gh-article-author-image {
    margin-right: 0;
}


/* 22. Post card meta
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-card-meta {
    text-align: right;
}


/* 23. Number / digit handling in Arabic text
/* ---------------------------------------------------------- */

/* Keep Arabic-Indic numerals readable by default, but allow numbers
   inside posts (prices, dates) to remain LTR for clarity. */
html[dir="rtl"] .gh-card-date,
html[dir="rtl"] time {
    unicode-bidi: isolate;
}


/* 24. Author social icons spacing
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-author-social {
    direction: ltr;          /* keep social icons in their natural row order */
}


/* 25. Comments alignment
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-comments {
    direction: rtl;
    text-align: right;
}


/* 26. Word-wrap & justification for Arabic prose
/* ---------------------------------------------------------- */

html[dir="rtl"] :is(.gh-content, .gh-article-excerpt, .gh-card-excerpt) {
    text-align: start;            /* logical-property friendly */
    word-spacing: 0.02em;
}


/* 27. Mobile menu (when burger is open)
/* ---------------------------------------------------------- */

@media (max-width: 767px) {
    html[dir="rtl"] .is-open .gh-navigation-menu {
        text-align: right;
    }
}


/* 28. Misc: read-more / next-post arrows pointing the correct way
/* ---------------------------------------------------------- */

/* The "See all →" links use both text and an SVG icon. The arrow
   character inside the JSON is already flipped (←), and the SVG
   gets flipped via the rule in section 18. Nothing further to do. */


/* 29. Recommendations sidebar
/* ---------------------------------------------------------- */

html[dir="rtl"] .gh-recommendations {
    text-align: right;
}


/* 30. Final defensive resets for any hard-coded English-style spacing
/* ---------------------------------------------------------- */

/* If you add custom HTML in posts that uses `float: left/right` or
   `text-align: left/right`, the post editor allows that, and we
   want those to keep working. We do NOT override `.gh-content`-level
   inline alignment, only the THEME's own layout rules. */