/* Direction-aware overrides for Arabic (RTL) and English (LTR) layouts.
   Loaded after bulma.css / app.css / core_deep-blue.css.

   The vendor theme (Bulkit by CSS Ninja) was authored LTR-first, so its
   defaults already match what we want for html[dir="ltr"]. This file makes
   that explicit (rather than relying on cascade order / omission) and adds
   the mirrored rules needed for html[dir="rtl"]. */

html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

/* Bulma's navbar-burger is absolutely positioned to the right for LTR; mirror it for RTL. */
html[dir="rtl"] .navbar-brand .custom-burger,
html[dir="rtl"] .navbar-burger {
    margin-right: auto;
    margin-left: 0;
}

html[dir="ltr"] .navbar-brand .custom-burger,
html[dir="ltr"] .navbar-burger {
    margin-left: auto;
    margin-right: 0;
}

/* Bulma pushes .navbar-end to the far side via a physical margin-left: auto,
   which in RTL leaves it stuck near the middle instead of the far (left) edge.
   Our navbar-end holds both the login link and the CTA button (navbar-start
   was removed), so this single rule is all that's needed per direction. */
html[dir="rtl"] .navbar-end {
    margin-left: 0;
    margin-right: auto;
}

html[dir="ltr"] .navbar-end {
    margin-right: 0;
    margin-left: auto;
}

/* The wavy hero/footer background shape is a fixed, asymmetric PNG that doesn't
   mirror on its own. The theme's default (unmirrored) orientation is correct
   for LTR; flip it horizontally for RTL so the curve matches the RTL layout. */
html[dir="rtl"] .hero-wavy:before,
html[dir="rtl"] .footer-wavy:before {
    transform: scaleX(-1);
}

html[dir="ltr"] .hero-wavy:before,
html[dir="ltr"] .footer-wavy:before {
    transform: none;
}

/* Hero caption (heading/subtitle/CTA column) is hardcoded to text-align: left
   in the theme CSS; that's correct for LTR, flip it for RTL so it matches the
   RTL column order. */
html[dir="rtl"] .hero-caption {
    text-align: right;
}

html[dir="ltr"] .hero-caption {
    text-align: left;
}

/* "This isn't everything" mini feature blocks (chat / live data / custom
   features): icon + text side by side. The original markup hardcoded
   has-text-right + mr-30 (RTL-only). We use a direction-agnostic class
   (mini-feature-text) here instead and drive alignment/spacing per-direction,
   so both directions render correctly without fighting Bulma's
   `.has-text-right { text-align: right !important }` utility. */
html[dir="rtl"] .content-flex .mini-feature-text {
    text-align: right;
    margin-right: 30px;
    margin-left: 0;
}

html[dir="ltr"] .content-flex .mini-feature-text {
    text-align: left;
    margin-left: 30px;
    margin-right: 0;
}