/* SafeLagoon blog: right-to-left (he). Loaded only when TEXT_DIRECTION == 'rtl'
   (blog/base_blog.html), after the blog stylesheets. Mirrors the physical
   left/right rules of blog-c.css (post) and blog-index.css (index/category);
   grids, flex rows and text alignment already follow dir="rtl". */

/* Post hero: art on the left, so the gradient glow and the orange circles
   move left with it; the art tilts the other way. */
[dir="rtl"] .slb-hero{background:radial-gradient(120% 140% at 15% 10%,var(--slb-blue-500) 0%,var(--slb-navy-700) 45%,var(--slb-navy-900) 100%)}
[dir="rtl"] .slb-hero:before{right:auto;left:-110px}
[dir="rtl"] .slb-hero:after{right:auto;left:-50px}
[dir="rtl"] .slb-hero--plain:before{left:-140px}
[dir="rtl"] .slb-hero--plain:after{left:-80px}
[dir="rtl"] .slb-hero__art{transform:rotate(-1.2deg)}
@media (max-width:1099px){[dir="rtl"] .slb-hero__art{transform:none}}

/* Prose lists: marker gutter on the right. */
[dir="rtl"] .slb-main :is(ul,ol):not([class]){padding-left:0;padding-right:1.3em}
[dir="rtl"] .slb-main :is(ul,ol):not([class]) li{padding-left:0;padding-right:.15em}

/* TOC (desktop aside): rail + active marker on the right edge. */
[dir="rtl"] .slb-toc ol{border-left:0;border-right:2px solid var(--slb-line)}
[dir="rtl"] .slb-toc a,[dir="rtl"] .slb-toc a:visited{padding:7px 14px 7px 0;margin-left:0;margin-right:-2px;border-left:0;border-right:2px solid transparent}
[dir="rtl"] .slb-toc a.is-active{border-right-color:var(--slb-orange-500)}
/* TOC (tablet/mobile details): chevron on the left. */
[dir="rtl"] .slb-toc-m summary{padding:14px 0 14px 28px}
[dir="rtl"] .slb-toc-m summary:after{right:auto;left:4px}
[dir="rtl"] .slb-toc-m ol{padding-left:0;padding-right:1.3em}

/* Step list: numbers + connector line on the right. */
[dir="rtl"] .slb-steps>li{padding:0 56px 22px 0}
[dir="rtl"] .slb-steps>li:before{left:auto;right:0}
[dir="rtl"] .slb-steps>li:after{left:auto;right:17px}
[dir="rtl"] .slb-main .slb-steps ul{padding-left:0;padding-right:1.1em}

/* Callouts: accent bar on the right, rounded corners on the left. */
[dir="rtl"] .slb-callout{border-left-width:0;border-right:4px solid;border-radius:var(--slb-r-md) 0 0 var(--slb-r-md)}
[dir="rtl"] .slb-callout--tip{border-color:var(--slb-orange-500)}
[dir="rtl"] .slb-callout--warn{border-color:#D9A400}
[dir="rtl"] .slb-callout--note{border-color:var(--slb-navy-700)}

/* UI screenshot + app cards. */
[dir="rtl"] .slb-shot__bar span{margin-left:0;margin-right:6px}
[dir="rtl"] .slb-shot figcaption ol{padding-left:0;padding-right:1.2em}
[dir="rtl"] .slb-app ul{padding-left:0;padding-right:1.1em}

/* Tables: header cells start-aligned. */
[dir="rtl"] .slb-table th{text-align:right}

/* Inline CTA: orange circle bottom-left. */
[dir="rtl"] .slb-cta:after{right:auto;left:-50px}
@media (max-width:759px){[dir="rtl"] .slb-cta:after{left:-44px}}

/* FAQ: +/– on the left. */
[dir="rtl"] .slb-faq summary{padding:18px 0 18px 40px}
[dir="rtl"] .slb-faq summary:after{right:auto;left:4px}

/* Chat launcher + reading progress. */
[dir="rtl"] .slb-launcher{right:auto;left:20px}
@media (max-width:759px){[dir="rtl"] .slb-launcher{left:14px}}
[dir="rtl"] .slb-progress{left:auto;right:0}

/* Index / category: search button corners, category pills fade on the left
   (the overflow side when the row scrolls on mobile). */
[dir="rtl"] .sbi-search button{border-radius:var(--sbi-r-ui) 0 0 var(--sbi-r-ui)}
@media (max-width:767px){
  [dir="rtl"] .sbi-pills{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent)}
}

/* Footer, tablet 768-1024 (blog-footer.css): the socials hug the left edge. */
@media (min-width:768px) and (max-width:1024px){
  [dir="rtl"] .blog-main ~ .footer .footer-tools__social-list{margin:0 auto 0 0}
}

/* Footer gaps that the landing styles set on the physical right/left
   (style.css: .language__item margin-right, .footer-copyright__links-item
   margin-left with the first item at 0 below 1280px). In RTL that put
   "Deutsch" and "Русский" edge to edge and glued the first two legal links
   together. Mirrored here for the blog only; the landing he pages have the
   same two gaps (separate fix). */
[dir="rtl"] .blog-main ~ .footer .language__item:not(:last-child){margin-right:0;margin-left:20px}
@media (max-width:1023px){[dir="rtl"] .blog-main ~ .footer .language__item:not(:last-child){margin-left:21px}}
@media (min-width:768px) and (max-width:1279px){
  [dir="rtl"] .blog-main ~ .footer .footer-copyright__links-item{margin:0 36px 0 0}
  [dir="rtl"] .blog-main ~ .footer .footer-copyright__links-item:first-child{margin:0}
}
@media (min-width:768px) and (max-width:1023px){
  [dir="rtl"] .blog-main ~ .footer .footer-copyright__links-item{margin:0 18px 0 0}
}