/*
Theme Name: AuraBricks
Description: RTL styles for AuraBricks WordPress theme.
Version: 1.0.7
*/

/* -------------------------------------------------------------------------- */
/* 1. Core Direction & Typography Defaults
/* -------------------------------------------------------------------------- */
body.rtl {
    direction: rtl;
    unicode-bidi: embed;
}

/* -------------------------------------------------------------------------- */
/* 2. Directional Icons & Indicators Flipping
/* -------------------------------------------------------------------------- */
body.rtl .fa-angle-right,
body.rtl .fa-chevron-right,
body.rtl .fa-arrow-right,
body.rtl .fa-long-arrow-right,
body.rtl .fa-caret-right,
body.rtl .fa-angle-left,
body.rtl .fa-chevron-left,
body.rtl .fa-arrow-left,
body.rtl .fa-long-arrow-left,
body.rtl .fa-caret-left,
body.rtl .breadcrumb-separator,
body.rtl .nav-previous a::before,
body.rtl .nav-next a::after {
    display: inline-block;
    transform: scaleX(-1);
}

/* PHP already resolves these icons to the appropriate writing direction. */
body.rtl .abr-directional-icon--resolved {
    transform: none;
}

/* -------------------------------------------------------------------------- */
/* 3. Navigation & Submenus Positioning
/* -------------------------------------------------------------------------- */
body.rtl .main-navigation ul ul {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

body.rtl .main-navigation ul ul ul {
    inset-inline-start: 100%;
    inset-inline-end: auto;
}

/* Mobile Off-Canvas Drawer (Slides from Right in RTL) */
body.rtl .mobile-nav-overlay {
    left: auto;
    right: -100%;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.rtl .mobile-nav-overlay.active {
    right: 0;
    left: auto;
}

/* -------------------------------------------------------------------------- */
/* 4. Form & Input Caret & Placeholder Alignment
/* -------------------------------------------------------------------------- */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: start;
}