/* RTL overlay for the frozen template (i18n Phase 2, admin/I18N.md).
   Loaded ONLY by RTL pages (Arabic /ar/, Kurdish /ku/) AFTER style-light.css —
   English pages never load this file. Scoped entirely to [dir="rtl"], and the
   load order lets equal-specificity rules here win ties.

   Most of the template survives direction flipping for free (flex layouts,
   centered titles, fixed overlays, translateY animations). This file handles
   what does not:
     1. typography — Arabic-script font and NO letter-spacing (spacing breaks
        connected script; the template tracks labels +2px),
     2. the handful of hard-coded left/right paddings, floats and offsets. */

/* --- 1. Typography --------------------------------------------------------- */

/* Substitute the Latin families. The fallback chain keeps Poppins/Josefin for
   embedded Latin runs (brand names, SKUs, emails) — the Arabic subset woff2
   carries no Latin glyphs, so browsers fall through per glyph. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] div,
[dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] input,
[dir="rtl"] textarea, [dir="rtl"] button {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', 'Josefin Sans', sans-serif;
}

/* Connected script must never be tracked. Ties with the template's
   .mry-label/.mry-subtitle (letter-spacing: 2px) and .mry-border-text
   (-1px) resolve to this file by load order. */
[dir="rtl"] *,
[dir="rtl"] .mry-label,
[dir="rtl"] .mry-subtitle,
[dir="rtl"] .mry-border-text,
[dir="rtl"] .mry-h1 .mry-border-text, [dir="rtl"] h1 .mry-border-text,
[dir="rtl"] .mry-h2 .mry-border-text, [dir="rtl"] h2 .mry-border-text,
[dir="rtl"] .mry-h3 .mry-border-text, [dir="rtl"] h3 .mry-border-text,
[dir="rtl"] .mry-h4 .mry-border-text, [dir="rtl"] h4 .mry-border-text,
[dir="rtl"] .mry-menu nav ul .menu-item .sub-menu .menu-item a {
    letter-spacing: 0;
}

/* Arabic script sits lower on the line; give the dense text a touch more
   breathing room than the Latin design assumed. */
[dir="rtl"] .mry-text { line-height: 1.9; }

/* Font Awesome icons must keep their own font. The `:lang(ar)/:lang(ckb)` and
   `[dir="rtl"]` substitutions above (specificity 0,1,0) load after the Font
   Awesome stylesheet, so on RTL pages they tie-and-win over `.fas`/`.fab`
   (also 0,1,0) and reassign every icon <i> to the Arabic family — hiding the
   glyph. Re-assert the icon families here (0,2,0 beats the substitution). */
[dir="rtl"] .fa,
[dir="rtl"] .fas,
[dir="rtl"] .far,
[dir="rtl"] .fal,
[dir="rtl"] .fad { font-family: "Font Awesome 5 Free"; }
[dir="rtl"] .fab { font-family: "Font Awesome 5 Brands"; }

/* --- 2. Directional flips --------------------------------------------------- */

/* Base text direction. bootstrap.min.css sets `body { text-align: left }` — a
   PHYSICAL value, so it inherits into every element and never flips to the start
   edge under dir="rtl". Without this, all default-aligned copy (slider titles,
   body text, buttons) stays glued to the left in RTL — most visibly the hero
   slider, where the text then lands on top of the mirrored cover image instead
   of the empty side. Re-assert the start edge; explicit `center`/`right` rules
   in the theme are more specific and still win. */
[dir="rtl"] body { text-align: right; }

/* Subtitles: the small dash sits before the text (left in LTR → right in RTL). */
[dir="rtl"] .mry-subtitle { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .mry-subtitle:before { left: auto; right: 0; }
/* … except the centered variants, which stay centered. */
[dir="rtl"] .mry-title-center .mry-subtitle,
[dir="rtl"] .mry-numbering .mry-subtitle { padding-right: 0; }
[dir="rtl"] .mry-title-center .mry-subtitle:before,
[dir="rtl"] .mry-numbering .mry-subtitle:before {
    left: auto;
    right: 50%;
    margin-left: 0;
    margin-right: -15px;
}

/* Form fields + the left-aligned-by-design form labels. */
[dir="rtl"] .mry-form input,
[dir="rtl"] .mry-form textarea { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .mry-title-center form .mry-label { text-align: right !important; }

/* Buttons/links: trailing gap moves to the other side. */
[dir="rtl"] .mry-btn,
[dir="rtl"] .mry-btn-text,
[dir="rtl"] .mry-link,
[dir="rtl"] .mry-filter .mry-card-category { margin-right: 0; margin-left: 10px; }

/* Menu internals. */
[dir="rtl"] .mry-menu-button-frame { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .mry-menu nav ul .menu-item .sub-menu { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .mry-menu nav ul .menu-item.menu-item-has-children:after { right: auto; left: 0; }

/* Newsletter form (footer on other pages). */
[dir="rtl"] .mry-form.mry-form-subscribe button {
    right: auto;
    left: -10px;
    margin-left: 0;
    margin-right: 30px;
}

/* Slider chrome + cards (products/showroom pages, phases 3-4). */
[dir="rtl"] .mry-slider-arrows .mry-label { margin-right: 0; margin-left: 20px; }
[dir="rtl"] .mry-star-rate li { margin-right: 0; margin-left: 5px; }
[dir="rtl"] .mry-masonry-grid-item { float: right; }

/* The template's own utility keeps its meaning mirrored. */
[dir="rtl"] .mry-text-right { text-align: left !important; }

/* LTR islands inside RTL text: phone numbers, emails, SKUs. Markup opts in
   with dir="ltr"; bidi isolation stops neighbouring punctuation jumping. */
[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; display: inline-block; }

/* Contact links carry no dir attribute in the markup; isolate them so the
   leading "+" and digit groups of a phone number never reorder in RTL flow. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; }

/* Directional floats from style-light.css that the RTL layout must mirror. */
[dir="rtl"] .mry-project-slider-item .mry-project-frame .mry-cover-frame,
[dir="rtl"] .mry-project-slider-item .mry-project-frame.mry-project-half .mry-cover-frame { float: left; }
[dir="rtl"] .mry-magnetic-link { float: right; }

/* Card badge sits in the trailing corner of the cover image — bottom-left in
   RTL, not bottom-right. (style-light.css .mry-badge { right: 0 }.) */
[dir="rtl"] .mry-card-item .mry-card-cover-frame .mry-badge { right: auto; left: 0; }

/* --- 3. Product & showroom pages (products-style.css overlay) --------------- */

/* products-style.css loads AFTER this file, so these mirror its hard-coded
   left/right rules; the [dir="rtl"] prefix wins the tie on specificity
   regardless of load order. Breakpoints follow products-style.css (768px):
   the desktop-only rules live in a min-width block so the mobile layout —
   centered filter, stacked full-width info column — is left untouched. */

/* Single-product info column: drop the left gutter at every width. */
[dir="rtl"] .product-info { padding-left: 0; }

@media (min-width: 769px) {
    /* Category sidebar list aligns to the start (right). Scoped to
       .category-title so the centered showroom portfolio filter is untouched. */
    [dir="rtl"] .category-title .mry-filter { text-align: right; }
    /* Active category indents toward the start, not the physical right.
       Scoped to .category-title: the +20px only exists on the products page. */
    [dir="rtl"] .category-title .mry-filter .mry-card-category.mry-current { transform: translateX(-20px); }
    /* Gutter moves to the side facing the (now right-hand) product image. */
    [dir="rtl"] .product-info { padding-right: 40px; }
}

@media (max-width: 768px) {
    /* Project-slider title card: mirror the 15px nudge to the other side. */
    [dir="rtl"] .mry-project-slider-item .mry-project-frame .mry-main-title-frame .mry-main-title {
        margin-left: 0;
        margin-right: -15px;
    }
}