/* Impulse Rogue — RTL overrides
   Load after the main style.css
   Scope: only when the root HTML has dir="rtl"
*/

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

    /* ---------- helpers ---------- */
    html[dir="rtl"] .text-left {
        text-align: right;
    }

    html[dir="rtl"] .text-right {
        text-align: left;
    }

    html[dir="rtl"] .floated-left {
        float: right;
    }

    html[dir="rtl"] .floated-right {
        float: left;
    }

    html[dir="rtl"] .short-hr-left::after {
        margin-left: auto;
        margin-right: 0;
    }

    html[dir="rtl"] .short-hr-right::after {
        margin-right: auto;
        margin-left: 0;
    }

    html[dir="rtl"] .ml-2 {
        margin-right: .5rem !important;
        margin-left: 0 !important;
    }

    html[dir="rtl"] .mr-2 {
        margin-left: .5rem !important;
        margin-right: 0 !important;
    }

    /* ---------- cookies bar ---------- */
    html[dir="rtl"] #cookies .cookies-bar {
        direction: rtl;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    html[dir="rtl"] #cookies .cookies-wrapper p {
        text-align: right;
        margin: 0;
    }

    html[dir="rtl"] #cookies #cookies-close {
        order: -1;
        left: 16px;
        right: auto;
        margin-inline-end: 16px;
    }

    /* ---------- navbar ---------- */

    /* Bootstrap's .ml-auto pushes menus right in LTR;
   in RTL we want the opposite. */
    html[dir="rtl"] .navbar .ml-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    html[dir="rtl"] .navbar .navbar-nav .nav-item + .nav-item {
        margin-right: 1rem; /* gap between items */
        margin-left: 0;
    }

    html[dir="rtl"] .navbar .navbar-brand {
        margin-left: 1rem;
        margin-right: 0;
    }

    /* ---------- hero / about / features ---------- */
    /* (intentionally NOT forcing #hero-section .hero-caption text-align) */
    /* Titles that use the short-hr-left motif */
    html[dir="rtl"] h1.short-hr-left,
    html[dir="rtl"] h2.short-hr-left {
        text-align: right;
    }

    /* Extra-features paddings mirror */
    html[dir="rtl"] .extra-features .col-xl-8 {
        padding: 30vh 10px 25vh 10%;
    }

    html[dir="rtl"] .extra-features.right {
        text-align: left;
    }

        html[dir="rtl"] .extra-features.right .col-xl-8 {
            padding: 30vh 10% 25vh 10px;
        }

    /* ---------- CTA section only ---------- */
    html[dir="rtl"] #cta-section .cta-card h1 {
        text-align: right;
    }

    /* Ensure the text column in CTA aligns to the right and the button
   sits under the text (without drifting). */
    html[dir="rtl"] #cta-section .cta-card .col-md-6:last-child {
        text-align: right;
    }

    html[dir="rtl"] #cta-section .cta-card .button {
        display: inline-block;
        float: none;
    }

    /* Mirror layout paddings in CTA columns */
    html[dir="rtl"] #cta-section .cta-card .col-md-6:first-child {
        padding-right: 15px;
        padding-left: 0;
    }

    html[dir="rtl"] #cta-section .cta-card .col-md-6:last-child {
        padding-left: 15px;
        padding-right: 0;
    }

    /* Game box image */
    html[dir="rtl"] .game-box {
        float: left;
    }

@media (max-width: 767px) {
    html[dir="rtl"] .game-box {
        float: none;
    }
}

/* ---------- modal ---------- */
html[dir="rtl"] .modal-body ul {
    margin: 10px 25px 0 0;
}

    html[dir="rtl"] .modal-body ul li:before {
        margin-right: -10px;
        margin-left: 0;
    }

html[dir="rtl"] .modal-header .close {
    float: left;
    margin-right: auto;
    margin-left: 0;
}

/* ---------- image mirroring ---------- */
/* Opt-in utility: add class="flip-rtl" to art you want mirrored */
html[dir="rtl"] img.flip-rtl {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Auto-mirror the hero background & character renders (no text) */
html[dir="rtl"] #hero-section > img[src$="/hero.png"],
html[dir="rtl"] img[src$="/rena3.png"],
html[dir="rtl"] img[src$="/noctua3.png"] {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
    display: block;
    margin: 0 auto;
}

/* Never mirror logos/wordmarks/box art/platform badges */
html[dir="rtl"] img.headline,
html[dir="rtl"] img[src$="/game.png"],
html[dir="rtl"] img[src*="logo"],
html[dir="rtl"] img[src*="platforms"] {
    transform: none !important;
}

/* ---------- chevrons / arrows ---------- */
html[dir="rtl"] .chevron-left,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .icon-left,
html[dir="rtl"] .chevron-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .icon-right {
    transform: scaleX(-1);
}


html[dir="rtl"] .cta-text-rtl {
    text-align: right;
}