/*!
 * rtl.css — RTL / Farsi overrides for the Audicast theme (style.css is LTR-only).
 * Loaded LAST, after bootstrap.rtl.min.css and style.css.
 * Bootstrap's own RTL build already flips the grid / spacing utilities / me-*/ms-* —
 * this file only corrects the theme's hand-written directional rules.
 * Built up by visually checking each page; keep changes grouped by area.
 */

/* ============================================================
 * 1. Typography — swap Barlow (LTR) for the self-hosted Farsi face
 * NOTE: the :root variable overrides for this used to live here, but some
 * browser extensions (ad blockers / privacy tools rewriting stylesheet
 * network responses) strip a :root rule from a *linked* CSS file while
 * leaving inline <style> blocks alone. Moved to an inline registerCss()
 * call in views/layouts/_head.php so the override can't be silently
 * dropped. Keep this file to the non-:root directional/RTL rules.
 * ============================================================ */

body {
  text-align: right;
}

/* Farsi glyphs sit taller than Latin — a touch more leading reads better */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.4;
}

/* Latin technical terms (BGP, MPLS, CCNP…) inside RTL text: keep them intact */
.ltr,
bdi.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ============================================================
 * 2. Directional Font Awesome glyphs used as "next / prev / back / more"
 *    Mirror them so arrows point the RTL-correct way.
 * ============================================================ */
.vs-btn i.fa-arrow-right,
.vs-btn i.fa-long-arrow-right,
.vs-btn i.fa-angle-right,
.vs-btn i.fa-chevron-right,
.link-btn i.fa-arrow-right,
.link-btn i.fa-long-arrow-right,
.breadcumb-menu .fa-chevron-right,
.vs-pagination .fa-chevron-left,
.vs-pagination .fa-chevron-right,
.slick-arrow .fa-chevron-left,
.slick-arrow .fa-chevron-right,
.slick-arrow .fa-arrow-left,
.slick-arrow .fa-arrow-right,
.slick-arrow .fa-long-arrow-left,
.slick-arrow .fa-long-arrow-right {
  transform: scaleX(-1);
}

/* ============================================================
 * 3. Off-canvas panels — enter from the correct edge.
 *    main.js only toggles the visibility class, so re-anchor here.
 * ============================================================ */
.vs-menu-wrapper {
  right: -110%;
  left: auto;
  transition: right 0.4s ease, opacity 0.4s ease;
}
.vs-menu-wrapper.vs-menu-visible,
.vs-menu-wrapper.vs-body-visible {
  right: 0;
  left: auto;
}
.vs-menu-wrapper .vs-menu-toggle {
  right: auto;
  left: 0;
}

.sidemenu-wrapper {
  left: 0;
  right: auto;
}
.sidemenu-wrapper .sidemenu-content {
  margin-left: 0;
  margin-right: auto;
  left: -500px;
  right: auto;
  transition: left 0.4s ease 0s;
}
.sidemenu-wrapper.show .sidemenu-content {
  left: 0;
  right: auto;
}
.sidemenu-wrapper .closeButton {
  right: auto;
  left: 20px;
}

.popup-search-box .searchClose {
  right: auto;
  left: 25px;
}
.popup-search-box form {
  direction: rtl;
}

/* ============================================================
 * 4. Desktop dropdown / sub-menu alignment
 * ============================================================ */
.main-menu ul.sub-menu {
  left: auto;
  right: 0;
  text-align: right;
}
.main-menu ul.sub-menu ul.sub-menu {
  right: 100%;
  left: auto;
}
.main-menu .menu-item-has-children > a::before {
  right: auto;
  left: 0;
}

/* ============================================================
 * 5. Header top bar — inline lists switch float / gap sides
 * ============================================================ */
.header-info ul li,
.header-links ul li,
.header-social ul li {
  margin-right: 0;
  margin-left: 25px;
}
.header-info ul li:last-child,
.header-links ul li:last-child,
.header-social ul li:last-child {
  margin-left: 0;
}
.header-info ul li i,
.footer-info i,
.footer-address img {
  margin-right: 0;
  margin-left: 8px;
}

/* ============================================================
 * 6. Buttons / links with a leading icon
 * ============================================================ */
.vs-btn i {
  margin-right: 0;
  margin-left: 8px;
}
.link-btn i,
.audio-btn i {
  margin-right: 0;
  margin-left: 6px;
}
.play-btn.style2,
.podcast-icon {
  right: auto;
  left: 40px;
}

/* ============================================================
 * 7. Cards — media/body sides + meta icon gaps
 * ============================================================ */
.recent-post .media-img,
.podcast-style7 .podcast-img {
  margin-right: 0;
  margin-left: 20px;
}
.recent-post .media-body {
  padding-left: 0;
  padding-right: 0;
}
.podcast-meta span i,
.blog-meta a i,
.recent-post-meta a i {
  margin-right: 0;
  margin-left: 6px;
}

/* ============================================================
 * 8. Lists / blockquote / comments
 * ============================================================ */
blockquote {
  border-left: none;
  border-right: 3px solid var(--theme-color, #266867);
}
.checklist ul li,
.list-style li {
  padding-left: 0;
  padding-right: 1.5em;
}
.checklist ul li::before,
.list-style li::before {
  left: auto;
  right: 0;
}
.list-style2 li {
  padding-left: 0;
  padding-right: 43px;
}
.list-style2 li::before {
  left: auto;
  right: 0;
}
@media (max-width: 1399px) {
  .list-style2 li {
    padding-right: 35px;
  }
}

.vs-comment-item .comment-avater {
  margin-right: 0;
  margin-left: 25px;
}
.vs-comment-item .vs-comment-item {
  margin-left: 0;
  margin-inline-start: 50px;
}
.reply_and_edit .replay-btn i {
  margin-right: 0;
  margin-left: 6px;
}

/* ============================================================
 * 9. Breadcrumb separator
 * ============================================================ */
.breadcumb-menu li {
  padding-right: 0;
  padding-left: 15px;
  margin-right: 0;
  margin-left: 15px;
}
.breadcumb-menu li::before,
.breadcumb-menu li::after {
  right: auto;
  left: -4px;
  transform: translateY(-50%) scaleX(-1);
}
.breadcumb-menu li:last-child {
  padding-left: 0;
  margin-left: 0;
}

/* ============================================================
 * 10. Forms (theme .form-group icon; input alignment inherits from BS-RTL)
 * ============================================================ */
.form-group > i,
.form-icon {
  right: auto;
  left: 25px;
}
.form-control,
.form-select,
textarea.form-control {
  text-align: right;
}

/* Search overlay: text starts on the right in RTL, so the submit icon
 * (theme hardcodes it at the LTR "end", right: 13px) must move to the left,
 * and the input needs its clear space on the right instead of the left —
 * otherwise the icon sits directly under the placeholder's first glyph. */
.popup-search-box form input {
  padding-left: 0;
  padding-right: 30px;
}
.popup-search-box form button {
  right: auto;
  left: 13px;
}

/* ============================================================
 * 11. Main nav item icons — shared by the desktop .main-menu and the
 *     off-canvas mobile menu (both render the same _menu.php partial, just
 *     without a common wrapper class, hence targeting .main-nav-list
 *     directly). Icon markup precedes the label so it lands rightmost of
 *     the two in RTL; gap goes on its left, toward the label.
 * ============================================================ */
.main-nav-list li a i {
  margin-right: 0;
  margin-left: 6px;
  font-size: 0.9em;
}

/* ============================================================
 * 12a. Floating homepage header — theme anchors the social pill to the
 *      right (right: gutter/2) to sit under the LTR donate-button side.
 *      Mirror it to the left, under our search-icon side. Also hardcodes
 *      the pill's background to the theme's original teal (#266867)
 *      instead of var(--secondary-color) — override to our blue palette.
 * ============================================================ */
.header-layout3 .menu-bottom {
  right: auto;
  left: calc(var(--container-gutters) / 2);
  background-color: var(--secondary-color);
}

/* ============================================================
 * 12. Footer watermark illustration — theme anchors it left:6% to sit
 *     under the About column, which is the FIRST column in the row and so
 *     (via Bootstrap's RTL flip) renders on the right here. Mirror it.
 * ============================================================ */
.footer-layout1 .shape-1 {
  left: auto;
  right: 6%;
}
@media (max-width: 1500px) {
  .footer-layout1 .shape-1 {
    left: auto;
    right: 0;
  }
}

/* ============================================================
 * 14. "Why this podcast" section — eyebrow icon gap and the img-box3
 *     decorative cluster (floating note/clef/waveform icons around the
 *     featured photo). Theme positions everything with left/right, so it
 *     needs a full mirror; base (desktop) breakpoint only — this is a
 *     decorative flourish, not core content, so the deeper responsive
 *     tiers are left as-is rather than mirrored one by one.
 * ============================================================ */
.sec-subtitle2 .icon:nth-child(1),
.sec-subtitle .icon:nth-child(1) {
  margin-right: 0;
  margin-left: 10px;
}
.img-box3 .img-2 {
  right: -38%;
  left: auto;
}
.img-box3 .img-3 {
  left: 7%;
  right: auto;
}
.img-box3 .img-4 {
  left: 8%;
  right: auto;
}
.img-box3 .img-5 {
  right: -15%;
  left: auto;
}
.img-box3 .img-6 {
  right: -8%;
  left: auto;
}

/* ============================================================
 * 15. Interviews "feature episodes" cards (.podcast-style4) — badge gap,
 *     meta-item gaps, meta icon gap, and the decorative waveform shape
 *     that hangs off the card's edge all use physical left/right.
 * ============================================================ */
.podcast-style4 .podcast-episode {
  margin-right: 0;
  margin-left: 20px;
}
.podcast-style4 .podcast-meta a {
  margin-right: 0;
  margin-left: 15px;
}
.podcast-style4 .podcast-meta a:last-child {
  margin-left: 0;
}
.podcast-style4 .podcast-meta a i {
  margin-right: 0;
  margin-left: 7px;
}
.podcast-style4 .vs-btn {
  margin-left: 0;
  margin-right: -20px;
}
.podcast-style4 .podcast-shape {
  right: auto;
  left: -37px;
}
.podcast-style4.layout2 .podcast-shape {
  right: auto;
  left: 0;
}

/* ============================================================
 * 16. Home "interviews" teaser (.vs-blog.blog-style2) — theme hardcodes
 *     .blog-meta text to its original teal (#266867) instead of a CSS
 *     variable; override to our blue palette. Icon gap is also physical.
 * ============================================================ */
.blog-meta span,
.blog-meta a {
  color: var(--secondary-color);
  margin-right: 0;
  margin-left: 15px;
}
.blog-meta span:last-child,
.blog-meta a:last-child {
  margin-left: 0;
}
.blog-meta span i,
.blog-meta a i {
  margin-right: 0;
  margin-left: 10px;
}

/* ============================================================
 * 13. Misc — keep the page from scrolling sideways after flips
 * ============================================================ */
body {
  overflow-x: hidden;
}
.footer-social a i,
.sidemenu-content .footer-social a {
  margin-right: 0;
  margin-left: 10px;
}

/* ============================================================
 * 17. Home audio player (.audio-style2) — .audio-icon's margin-right
 *     is physical, so in RTL it pushed space to the outer edge instead
 *     of between the icon and the title, leaving them touching.
 * ============================================================ */
.audio-style2 .audio-icon {
  margin-right: 0;
  margin-left: 25px;
}