/*
 * RTL overrides for the Euphrates Post theme.
 * Loaded automatically when is_rtl() is true (Arabic language active).
 * Physical CSS properties (left/right, padding-left/right, etc.) do NOT
 * flip automatically with direction:rtl — only logical properties do.
 * We override every physical directional property here.
 */

/* ─────────────────────────────────────────
   ARABIC FONT — replaces Manrope for Arabic text
───────────────────────────────────────── */
body,
.la-card-title, .la-card-excerpt, .la-btn,
.wwr-card-title, .wwr-card-excerpt,
.mv-card-body, .article-title, .article-body-main,
.category-card-title, .category-card-excerpt,
.nl-title, .nl-subtitle, .ticker-item,
.hero-body, .wsm-title, .wsm-subtitle,
.wwr-banner-title, .wwr-banner-sub,
.te-title, .te-subtitle, .fgi-title, .fgi-subtitle {
    font-family: 'Manrope', sans-serif;
}

img { contain-intrinsic-size: unset !important; }

/* ─────────────────────────────────────────
   TICKER BAR
───────────────────────────────────────── */
.ticker-label {
    padding-right: 0;
    padding-left: 14px;
}

/* Item text: indent from the right instead of left */
.ticker-item {
    padding-left: 0;
    padding-right: 20px;
}

.ticker-divider {
    margin-left: 0;
    margin-right: 8px;
}

.ticker-social {
    padding-left: 0;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 12px;
}

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */
.nav-right {
    margin-left: 0;
}

.nav-search-btn{
    margin-right: auto;
    margin-left: unset;
}

/* Mobile open nav — align links to the right */
@media (max-width: 1023px) {
    .navbar.is-open .nav-links {
        align-items: flex-end;
    }
}

/* ─────────────────────────────────────────
   HERO — STATIC (homepage)
───────────────────────────────────────── */
.hero-content {
    padding-left: 0;
    padding-right: 56px;
}

/* Animation stick: flip left → right */
.hero-anim-stick {
    left: auto;
    right: -10%;
}
@media (min-width: 1200px) {
    .hero-anim-stick {
        left: auto;
        right: 0;
    }
}
@media (min-width: 2200px) {
    .hero-anim-stick {
        left: auto;
        right: 15%;
    }
}
@media (min-width: 3200px) {
    .hero-anim-stick {
        left: auto;
        right: 35%;
    }
}
@media (max-width: 500px) {
    .hero-anim-stick {
        left: auto;
        right: -50px;
    }
}

/* Re-define keyframes with negated translateX for RTL direction */
@keyframes stick-move {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-110%); }
    100% { transform: translateX(0); }
}
@keyframes stick-move-v {
    0%   { transform: translateX(30%); }
    50%  { transform: translateX(-70%); }
    100% { transform: translateX(30%); }
}
@keyframes stick-move-mobile {
    0%   { transform: translateX(20%); }
    50%  { transform: translateX(-30%); }
    100% { transform: translateX(20%); }
}

/* Dot grids */
.hero-dots {
    left: auto;
    right: 52px;
}

/*
 * main.css sets `.hero-dots { left: 0 }` inside @media (max-width: 1023px).
 * That overrides the base rule above, so we need a matching media query here.
 */
@media (max-width: 1023px) {
    .hero-inner {
        /* main.css: padding: 56px 0 60px 20px — flip left/right */
        padding: 56px 20px 60px 0;
    }
    .hero-dots {
        left: auto;
        right: 0;
    }
}

@media (max-width: 600px) {
    .hero-dots {
        left: auto;
        right: 0;
    }
}

/* Mic: flip right → left */
.hero-media {
    right: auto;
    left: -16px;
    transform: rotateY(180deg);
    top: 20%;
}

.rule-lower img{
    right: unset !important;
    left: 0;
    float: unset !important;
}

/* ─────────────────────────────────────────
   HERO — VIDEO (category / single pages)
───────────────────────────────────────── */
.hero-category-content {
    padding-left: 0;
    padding-right: 56px;
}
@media (max-width: 600px) {
    .hero-category-content {
        padding-right: 0;
    }
}

/* ─────────────────────────────────────────
   ARTICLE — tags border separator
───────────────────────────────────────── */
.article-tags span:not(:last-child) {
    border-right: none;
    padding-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
}
@media (max-width: 600px) {
    .article-tags span {
        border-left: none;
        padding-left: 0;
    }
}

/* ─────────────────────────────────────────
   ACTIVE CARD — glow pseudo-element
   main.css anchors the glow at left: 0; in RTL it must be at right: 0
───────────────────────────────────────── */
.active-card::after {
    left: auto;
    right: 0;
}

/* ─────────────────────────────────────────
   CATEGORY CARDS — post-tags separator
───────────────────────────────────────── */
.post-tags span {
    padding-right: 0;
    padding-left: 16px;
}
.post-tags span:not(:last-child) {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────
   BANNER SECTIONS (wsm / wwr / te / fgi)
───────────────────────────────────────── */

/* WSM — padding-left on container flips to padding-right */
.wsm-container {
    padding: 32px 32px 32px 0;
}
@media (max-width: 600px) {
    .wsm-container {
        padding: 32px 16px 32px 0;
    }
}

/* WSM — camera icon floated right → left */
.wsm-icon img {
    float: left;
    rotate: 180deg;
    transform: rotateX(180deg);
}

/* WWR — newspaper image floated right → left */
.wwr-newspaper {
    float: left;
}

/* WWR — right panel padding on mobile */
@media (max-width: 600px) {
    .wwr-banner-right {
        padding: 47px 0 0 22px;
    }
}



/* FGI — mic icon padding flip */
.fgi-icon {
    padding: 32px 0 0 32px;
}
@media (min-width: 1200px){
    .fgi-icon{
        padding: 32px 32px 0 64px;
    }
}

/* ─────────────────────────────────────────
   NEWSLETTER — mobile text alignment
───────────────────────────────────────── */

.cat-arrow--next,
.cat-arrow--prev{
    transform: rotate(180deg);
}

.te-icon{
    padding: 32px 0 0 32px;
}


@media (max-width: 992px){
    .wsm-icon{
        padding-bottom: unset;
    }
}

@media (max-width: 992px) {
    .te-icon img {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .te-icon img {
        width: 85%;
    }
}

@media (max-width: 992px) {
    .te-icon {
        padding: unset;
    }
}