/* Net Connect IT Services - RTL overrides for the Arabic site (/ar/)
   Loaded only on Arabic pages, after nc.css. Flexbox and CSS Grid already
   mirror automatically under dir="rtl"; these rules cover the physical
   (non-logical) properties that do not: absolute positions, list/border
   indents and text alignment. */

html[dir="rtl"] body{
  font-family:"Segoe UI","Tahoma","Noto Naskh Arabic","Noto Kufi Arabic",var(--font);
  line-height:1.8;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0}

/* lists */
html[dir="rtl"] ul{padding-left:0;padding-right:1.2em}
html[dir="rtl"] .prose ul{padding-right:1.3em}

/* eyebrow dash sits before the heading text */
html[dir="rtl"] .eyebrow::before{margin-right:0;margin-left:10px}

/* skip-to-content link */
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{left:auto;right:8px}

/* submenu alignment under its parent link */
html[dir="rtl"] .sub{left:auto;right:0}

/* decorative circles / blobs - flip side for polish */
html[dir="rtl"] .page-hero::after{right:auto;left:-90px}
html[dir="rtl"] .page-hero::before{-webkit-mask-image:linear-gradient(-90deg,transparent 30%,#000);mask-image:linear-gradient(-90deg,transparent 30%,#000)}
html[dir="rtl"] .cta-band::before{right:auto;left:-120px}
html[dir="rtl"] .dark::before{right:auto;left:-180px}

/* callout / note box accent border */
html[dir="rtl"] .note{border-left:0;border-right:3px solid var(--maroon);border-radius:12px 0 0 12px}

/* pricing badge ribbon */
html[dir="rtl"] .plan .badge{left:auto;right:30px}
html[dir="rtl"] .price small{margin-left:0;margin-right:4px}

/* FAQ expand/collapse marker moves to the far side from the text start */
html[dir="rtl"] .faq summary{padding:16px 20px 16px 52px}
html[dir="rtl"] .faq summary::after{right:auto;left:20px}

/* tables: first column is the "start" (now right), last stays "end" (now left) */
html[dir="rtl"] .tbl th,html[dir="rtl"] .tbl td{text-align:right}
html[dir="rtl"] .tbl td:last-child,html[dir="rtl"] .tbl th:last-child{text-align:left}
html[dir="rtl"] .seo-tbl th[scope=row]{text-align:right}
html[dir="rtl"] .legal-tbl td{text-align:right!important}
html[dir="rtl"] .legal-tbl td.grp{text-align:right!important}

/* breadcrumb separators read correctly either way, just tidy the chevron rotation */
html[dir="rtl"] .crumbs .ico,html[dir="rtl"] .card .more .ico,html[dir="rtl"] a.card:hover .more .ico{transform:scaleX(-1)}
html[dir="rtl"] a.card:hover .more .ico{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .post .more .ico,html[dir="rtl"] .chips a .ico:last-child{transform:scaleX(-1)}

/* hero art illustration is purely decorative - mirror it so the "flow" reads right-to-left */
html[dir="rtl"] .hero-art{transform:scaleX(-1)}
html[dir="rtl"] .hero-art text,html[dir="rtl"] .hero-art tspan{transform:scaleX(-1)}

/* form grids and selects already mirror via logical flex/grid; just fix caret-free selects */
html[dir="rtl"] select{background-position:left .9rem center}