/* ============================================================================
   AbuJudom — Header RTL alignment
   ----------------------------------------------------------------------------
   Loaded only when the document is RTL (Arabic). Establishes the natural
   flex direction so the brand logo sits on the RIGHT edge of the header,
   the primary navigation fills the middle, and the unified action cluster
   (`.aj-header-actions`) is pinned to the LEFT edge.

   The shared `abujudom-header-actions.css` already assigns the cluster
   `order: 9` and the menu `order: 5`. Under `dir="rtl"` with the natural
   `flex-direction: row`, the higher order value is rendered on the LEFT.
   This file only needs to neutralise the legacy `row-reverse` direction
   (set by `abujudom-enhancements.css`) and the leftover float rules from
   the original template.
   ============================================================================ */

html[dir="rtl"] header.main-header {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] header.main-header > * {
    float: none !important;
}

html[dir="rtl"] header.main-header .logo-holder {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    order: 1 !important;
    /* RTL only: pull the brand mark inward (toward the page center) so the
       enlarged logo no longer sits flush against the right viewport edge.
       In RTL, padding-inline-start adds room on the RIGHT, pushing the
       inner anchor + image leftward. The logo keeps order: 1 (rightmost),
       it just gains a comfortable right-side inset. */
    padding-inline-start: clamp(24px, 4vw, 64px) !important;
    padding-inline-end: 0 !important;
}

@media (max-width: 600px) {
    html[dir="rtl"] header.main-header .logo-holder {
        padding-inline-start: clamp(12px, 3vw, 24px) !important;
    }
}

html[dir="rtl"] header.main-header .nav-holder.main-menu {
    flex: 1 1 auto !important;
    order: 5 !important;
}

html[dir="rtl"] header.main-header .aj-header-actions {
    order: 9 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

html[dir="rtl"] header.main-header .nav-button-wrap {
    order: 10 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] header.main-header .nav-button-wrap {
        order: 10 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
}