/*
 * MBRSC DDA Theme — RTL Stylesheet
 * Loaded only when current language is Arabic (dir="rtl")
 * Overrides LTR-specific directional properties.
 *
 * RULE: Only put directional overrides here.
 * Non-directional styles go in style.css or component CSS files.
 *
 * @package MBRSC_DDA_Theme
 */


/* =============================================================================
   BASE RTL DIRECTION
============================================================================= */

[dir="rtl"] body {
    font-family:    var(--mbrsc-font-arabic);
    letter-spacing: 0;
}

/* Flip all margin-left → margin-right and vice versa */
[dir="rtl"] .alignleft  {
    float:  right;
    margin: 0 0 var(--mbrsc-space-4) var(--mbrsc-space-6);
}

[dir="rtl"] .alignright {
    float:  left;
    margin: 0 var(--mbrsc-space-6) var(--mbrsc-space-4) 0;
}


/* =============================================================================
   SKIP LINK
============================================================================= */

[dir="rtl"] .mbrsc-skip-link {
    left:  auto;
    right: var(--mbrsc-space-4);
}


/* =============================================================================
   HEADER RTL
============================================================================= */

[dir="rtl"] .mbrsc-site-header {
    direction: rtl;
}


/* =============================================================================
   FOOTER RTL
============================================================================= */

[dir="rtl"] .mbrsc-site-footer {
    direction:  rtl;
    text-align: right;
}

[dir="rtl"] .mbrsc-footer__top {
    direction: rtl;
}

[dir="rtl"] .mbrsc-footer__logo {
    margin-right: 0;
    margin-left:  auto;
}

[dir="rtl"] .mbrsc-footer__social ul {
    justify-content: flex-start;
}

[dir="rtl"] .mbrsc-footer__col-title {
    letter-spacing: 0;
    text-align:     right;
}

[dir="rtl"] .mbrsc-footer__links {
    text-align: right;
}

[dir="rtl"] .mbrsc-footer__contact-item {
    flex-direction: row;
    text-align:     right;
}

[dir="rtl"] .mbrsc-footer__contact-item .material-icons {
    margin-left:  var(--mbrsc-space-2);
    margin-right: 0;
}

[dir="rtl"] .mbrsc-footer__bottom {
    flex-direction: row-reverse;
}

[dir="rtl"] .mbrsc-footer__legal-links {
    flex-direction: row-reverse;
}


/* =============================================================================
   CARDS RTL
============================================================================= */

[dir="rtl"] .mbrsc-mission-card__image .mbrsc-badge {
    right: auto;
    left:  var(--mbrsc-space-3);
}

[dir="rtl"] .mbrsc-mission-card__meta {
    flex-direction: row-reverse;
    text-align:     right;
}

[dir="rtl"] .mbrsc-mission-card__body {
    text-align: right;
}


/* =============================================================================
   STATS RTL
============================================================================= */

[dir="rtl"] .mbrsc-stats-grid {
    direction: rtl;
}

[dir="rtl"] .mbrsc-stat-item {
    text-align: center; /* Keep centered for stats */
}


/* =============================================================================
   NEWS GRID RTL
============================================================================= */

[dir="rtl"] .mbrsc-news-grid {
    direction: rtl;
}


/* =============================================================================
   LANGUAGE SWITCHER RTL
============================================================================= */

[dir="rtl"] .mbrsc-lang-switcher--toggle ul {
    flex-direction: row-reverse;
}


/* =============================================================================
   FORM ELEMENTS RTL
============================================================================= */

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction:  rtl;
}

[dir="rtl"] label {
    text-align: right;
    display:    block;
}


/* =============================================================================
   WORDPRESS CORE CLASSES RTL
============================================================================= */

[dir="rtl"] .wp-caption-text {
    text-align: right;
}

[dir="rtl"] .search-form {
    flex-direction: row-reverse;
}

/* Pagination */
[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}


/* =============================================================================
   ELEMENTOR RTL FIXES
============================================================================= */

/* Elementor reverses some flex containers — fix them */
[dir="rtl"] .elementor-widget-container {
    text-align: right;
}

[dir="rtl"] .elementor-icon-list-items {
    padding-right: 0;
}

[dir="rtl"] .elementor-icon-list-item {
    flex-direction: row-reverse;
}

/* Elementor column gap fix for RTL */
[dir="rtl"] .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 10px 10px 10px 10px;
}


/* =============================================================================
   DDA COMPONENT RTL HINTS
   Some DDA components need explicit dir attribute passed.
   These are fallback styles in case the component
   doesn't fully respect dir="rtl" from the parent.
============================================================================= */

[dir="rtl"] dda-card,
[dir="rtl"] dda-button,
[dir="rtl"] dda-alert,
[dir="rtl"] dda-badge,
[dir="rtl"] dda-accordion {
    direction:  rtl;
    text-align: right;
}

[dir="rtl"] dda-header,
[dir="rtl"] dda-sticky-footer {
    direction: rtl;
}


/* =============================================================================
   BREADCRUMBS RTL
============================================================================= */

[dir="rtl"] .mbrsc-breadcrumbs {
    flex-direction: row-reverse;
}

[dir="rtl"] .mbrsc-breadcrumbs__separator {
    transform: scaleX(-1);
}


/* =============================================================================
   MATERIAL ICONS RTL
   Some directional icons need to be flipped for RTL
============================================================================= */

[dir="rtl"] .material-icons.rtl-flip,
[dir="rtl"] .mbrsc-icon--directional {
    transform: scaleX(-1);
}

/* Arrow icons that should flip */
[dir="rtl"] .mbrsc-arrow-icon {
    transform: rotate(180deg);
}