/* =========================================================
   MONÈRA CONSULTING — RTL (ARABIC) OVERRIDES
   Loaded only when html[dir="rtl"] (Arabic UI culture).
   Bootstrap's own utility classes (me-*, ms-*, ps-*, pe-*,
   text-start/end, float-start/end...) are already mirrored
   by swapping to bootstrap.rtl.min.css in _Layout.cshtml.
   This file only patches this project's custom CSS, which
   uses physical left/right properties in a few places.
========================================================= */

html[dir="rtl"] body {
    text-align: right;
    font-family: 'Cairo', var(--body-font, 'Inter'), sans-serif;
}

/* Cormorant Garamond has no Arabic glyphs — fall back to Cairo for headings */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-heading,
html[dir="rtl"] .cv-title,
html[dir="rtl"] .statement-quote {
    font-family: 'Cairo', var(--body-font, 'Inter'), sans-serif;
}

html[dir="rtl"] .hero-why,
html[dir="rtl"] .cv-eyebrow,
html[dir="rtl"] .statement-label,
html[dir="rtl"] .cta-book-label {
    letter-spacing: 0;
}

/* Nav brand descriptive text rule */
html[dir="rtl"] .nav-brand-text p {
    border-left: none;
    border-right: 2px solid var(--gold);
    padding-left: 0;
    padding-right: 12px;
    margin-left: 0;
    margin-right: 8px;
}

/* ============================================================
   HERO SECTION — <section class="hero-section" dir="ltr"> in the
   markup keeps the two-column grid order (text | portrait) and the
   CTA arrow (→) from mirroring in Arabic (client requirement). Column
   order is controlled by that ancestor's direction, not by anything
   below — so it's safe (and necessary for readability) to put the
   actual Arabic copy inside the text column back into normal RTL
   flow here, instead of letting it inherit the forced ltr.
============================================================ */
html[dir="rtl"] .hero-content {
    direction: rtl;
    text-align: right;
}

/* Hero "Why" underline follows the now right-aligned text */
html[dir="rtl"] .hero-why::after {
    left: auto;
    right: 0;
}

/* Hero trust bar dividers (section currently commented out in markup) */
html[dir="rtl"] .hero-trust-item {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
html[dir="rtl"] .hero-trust-last {
    border-left: none;
}

/* Hero CTA arrow is plain text (→) set in Index.cshtml, not the mirrored bi-arrow-right icon */

/* ============================================================
   HIDDEN DIAMOND HERO — <section class="hd-hero" dir="ltr"> in the
   markup keeps the grid column order (text | quote) from mirroring
   in Arabic (client requirement). Column order is controlled by
   that ancestor's direction alone, so the translated Arabic copy
   inside each column must be put back into normal RTL flow —
   otherwise it inherits the forced ltr and becomes unreadable
   (same bug as the homepage hero).
============================================================ */
html[dir="rtl"] .hd-hero__text,
html[dir="rtl"] .hd-hero__quote-col {
    direction: rtl;
}
html[dir="rtl"] .hd-hero__text,
html[dir="rtl"] .hd-hero__desc,
html[dir="rtl"] .hd-hero__quote,
html[dir="rtl"] .hd-hero__quote-mark {
    text-align: right;
}

/* Arabic only: drop the left padding so the text hugs the left edge
   (the base 6% left padding was authored for the English layout and
   left an oversized empty gap once the Arabic text became right-aligned). */
html[dir="rtl"] .hd-hero__text {
    padding-left: 0;
}

/* Language switcher */
html[dir="rtl"] .language-switch {
    margin-left: 0;
    margin-right: 10px;
}
html[dir="rtl"] .language-switch a.active::after {
    left: auto;
    right: 0;
}

/* Cart badge + toast */
html[dir="rtl"] .cart-badge {
    right: auto;
    left: 2px;
}
html[dir="rtl"] .monera-cart-toast {
    right: auto;
    left: 24px;
}

/* Forward-pointing arrows (CTA buttons, links) should point toward reading-start, i.e. left in RTL */
html[dir="rtl"] .bi-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Footer legal links + separators read naturally right-to-left already; just fix text alignment */
html[dir="rtl"] .footer-legal,
html[dir="rtl"] .footer-copy,
html[dir="rtl"] .text-lg-end {
    text-align: right !important;
}

/* Form controls / floating labels */
html[dir="rtl"] .form-floating > label {
    left: auto;
    right: 0;
}

/* Generic helper for content authored with text-align:left in page-specific stylesheets */
html[dir="rtl"] .text-align-left-rtl-fix {
    text-align: right;
}

/* ============================================================
   RESOURCE DETAILS — meta row & trust badges dividers
   These items are a plain flexbox (not Bootstrap columns), so
   the browser's own RTL flow reverses the visual item order while
   the physical border-right/margin-right/padding-right divider
   stayed pinned to the same side — putting the divider on the
   wrong side of the wrong item. Flip the divider to the left.
============================================================ */
html[dir="rtl"] .rh-meta-item {
    padding-right: 0;
    padding-left: 18px;
    margin-right: 0;
    margin-left: 18px;
    border-right: none;
    border-left: 1px solid var(--border);
}
html[dir="rtl"] .rh-meta-item:last-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

html[dir="rtl"] .rh-trust-item {
    padding-right: 0;
    padding-left: 16px;
    margin-right: 0;
    margin-left: 16px;
    border-right: none;
    border-left: 1px solid var(--border);
}
html[dir="rtl"] .rh-trust-item:last-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .rh-meta-item,
    html[dir="rtl"] .rh-trust-item {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}

/* ============================================================
   RESOURCE DETAILS — preview-gallery carousel arrows
   .preview-carousel-wrap is [prevBtn, carousel, nextBtn] in DOM
   order; the browser's own RTL flow mirrors that whole row, so
   prevBtn visually lands on the right and nextBtn on the left —
   but each still shows its original LTR chevron (prev pointing
   left, next pointing right), which now points away from the
   carousel instead of toward it. Mirror the icons, and swap the
   physical gap margin to match the new visual side.
============================================================ */
html[dir="rtl"] .carousel-arrow.prev,
html[dir="rtl"] .carousel-arrow.next {
    transform: scaleX(-1);
}
html[dir="rtl"] .carousel-arrow.prev {
    margin-right: 0;
    margin-left: 12px;
}
html[dir="rtl"] .carousel-arrow.next {
    margin-left: 0;
    margin-right: 12px;
}

/* ============================================================
   RESOURCES — pagination prev/next arrows
   .res-pagination is [prevBtn, pages, nextBtn] in DOM order; the
   browser's own RTL flow mirrors the row (prevBtn lands on the
   right, nextBtn on the left), but each button still shows its
   original LTR chevron. Mirror the icons so they point outward
   from their new visual position, same fix as the carousel arrows.
   Uses flex `gap` (not margins), so no spacing swap is needed.
============================================================ */
html[dir="rtl"] .rp-arrow {
    transform: scaleX(-1);
}