/*
  ANYSRV Journal — Arabic RTL layer. Loaded ONLY on /blog/ar/ pages
  (linked after article.css / blog.css so these overrides win). This is
  a real RTL layout pass, not a text-align:right simulation: it mirrors
  borders, list/quote indentation, the TOC+sidebar column, the
  prev/next pager, and the reading-progress bar's growth direction, on
  top of the <html dir="rtl"> the generator already sets.

  English pages never load this file, so none of this affects them.
*/

/*
  Corporate shell (utility bar, header, footer) is INTENTIONALLY left
  to inherit dir="rtl" rather than being forced back to LTR: this was
  verified component-by-component, not assumed —
    - .toolbarmain and .headermain-inner are plain flexbox
      (display:flex; justify-content:space-between), no floats or
      physical absolute positioning, so DOM order (logo, then nav,
      then Order as the last item) maps correctly to "logo at the
      RTL-start (right), Order at the RTL-end (left)" automatically,
      with the SAME relative sequence as the English site — not a
      random reversal.
    - .footermain-inner is also plain flexbox; its 4 columns keep
      their same DOM-order priority (Hosting Services first/right ...
      About Company last/left) under RTL for the same reason.
    - .navmain-subcontainer (mega-menu panel) is width:100% anchored
      at left:0 on hover — a full-bleed panel, so that physical anchor
      doesn't create a visible RTL misalignment (verified visually).
  Text content inside the shell is localized separately, per-locale,
  in the generator (see locales.js / shell-ar-translations.js) — this
  file only handles layout, never hardcodes Arabic strings.
*/

/*
  The frozen main-site header hides its mega-menu dropdown panels via a
  large negative `left` offset (an off-canvas technique, not
  display:none) — harmless under the site's native LTR layout, but
  under dir="rtl" that far-off-screen-left content gets counted as
  horizontal scroll content (a known RTL/overflow interaction), which
  is what the validation pass here actually caught. This does not
  touch the header's own markup or CSS — it only clips the resulting
  overflow at the document level, same way any RTL site guards against
  a legacy LTR-only off-canvas pattern it can't rewrite.
*/
html[dir="rtl"], html[dir="rtl"] body {
  overflow-x: hidden;
}

/* ---- Typography ---- */
/* System Arabic stack — deliberately NOT a downloaded webfont: this
   project's fonts.css already self-hosts English type specifically to
   avoid runtime requests to fonts.googleapis.com/fonts.gstatic.com,
   and a well-chosen system stack (Segoe UI's Arabic glyphs are strong
   on Windows; Tahoma/Noto Sans Arabic cover other platforms) is both
   "professional" and "readable" without adding a new network request
   or a new font asset to maintain. */
html[lang="ar"] body {
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif;
}
/* Headings use the same Arabic stack too — the English heading
   typeface (Roboto Condensed) has no Arabic glyphs to fall back on.
   Covers h1-h3 plus the non-heading-tag elements styled as headings
   (mega-menu card titles, footer <h6> headings) that the frozen CSS
   points at var(--font-heading) specifically, which is more specific
   than the body-level rule above and would otherwise win. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .navmain-link-heading,
html[lang="ar"] .navmain-columns-col2,
html[lang="ar"] .footermain-heading {
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif;
}
/* Arabic script reads comfortably a touch larger / more open than Latin. */
[dir="rtl"] .article-body { font-size: 1.08rem; line-height: 1.9; }

/*
  ---- Mega-menu: real root cause, found by reading the frozen CSS
  (navmain-original.css), not guessed ----

  .navmain-columns-col1 (the card grid, 70% wide) carries
  `padding: 0 35px 0 0` and .navmain-columns-col2 (the description
  sidebar, 30% wide) carries `padding: 15px 0 15px 35px` plus a
  `border-left` divider. In LTR, col1 sits left of col2, so col1's
  right-padding and col2's left-padding together form the 70px gutter
  BETWEEN them, and col2's border-left sits on the seam.

  Both values are physical, not logical, so dir="rtl" doesn't move
  them. DOM order is unchanged (col1 then col2), and plain flexbox
  auto-places col1 at the RTL-start (now the right) and col2 at the
  RTL-end (now the left) — exactly like the header/footer elsewhere in
  this file. But because the padding stayed physically right/left,
  col1's gutter-padding and the divider now land on the OUTER edges of
  the dropdown instead of the seam between the two columns — so the
  card grid and the description text end up touching directly, with
  wasted blank padding on the far right and far left instead. That
  false "zero gap" is the real cause of "cards feel compressed" /
  "columns not balanced" / "descriptions cramped against the cards" —
  not font size, not line-height on their own.

  Fix: flip which side carries the gutter padding and the divider.
  Also — per the brief's explicit allowance for Arabic-specific
  proportions — the description column is widened (30% -> 35%) since
  Arabic sentences of the same meaning typically run longer than their
  English originals, and narrow text columns force more wrapping than
  comfortable ("avoid narrow columns that force awkward wrapping").

  Fixes below are written against the EXACT same selector chains as
  the frozen rules they override (prefixed with html[dir="rtl"]), not
  shorter/lazier selectors — a first attempt at this using short
  selectors silently lost to the originals' higher specificity and
  produced no visible change at all; verified via computed-style
  inspection (getComputedStyle) before and after, not assumed.
*/
html[dir="rtl"] .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col1 {
  width: 64%;
  padding: 0 0 0 30px;
}
html[dir="rtl"] .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 {
  width: 36%;
  padding: 15px 30px 15px 0;
  border-left: none;
  border-right: var(--navmain-headerdesign1-megamenu-background-divider) 1px solid;
}
/* Comfortable Arabic line-height for the description sidebar text,
   and for the card title/blurb inside each link — tighter LTR
   line-height (no explicit value set by the frozen CSS, so it's
   inheriting the base body value tuned for Latin text) reads as
   cramped for Arabic, especially once titles wrap to two lines. */
html[dir="rtl"] .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 {
  line-height: 1.85;
}
html[dir="rtl"] .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-heading {
  line-height: 1.5;
  padding-bottom: 8px;
}
html[dir="rtl"] .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-text {
  line-height: 1.6;
}
/* A little extra vertical breathing room inside each card so a
   two-line Arabic title doesn't sit flush against the card's edge or
   the description line below it — no fixed height anywhere in the
   frozen CSS, so this only adds comfortable space, it can't clip. */
html[dir="rtl"] .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a {
  padding-top: 14px;
  padding-bottom: 14px;
}
/* Mobile mega-menu (<=1260px, hamburger nav): card text is hardcoded
   `text-align: left` in the frozen CSS — physical again, needs an
   explicit flip since the mobile layout doesn't reuse col1/col2 at
   all (single-column stacked cards), so the fixes above don't reach
   it. */
html[dir="rtl"] .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a {
  text-align: right;
}

/* Technical terms embedded in Arabic prose (kept LTR via <bdi dir="ltr">
   in the article body) — isolate them cleanly from the surrounding
   RTL run and keep normal (non-mirrored) number/slash punctuation. */
[dir="rtl"] bdi[dir="ltr"] {
  unicode-bidi: isolate;
  font-family: "Open Sans", Arial, sans-serif;
}

/* ---- Breadcrumbs ---- */
[dir="rtl"] .breadcrumbs li:not(:last-child)::after {
  margin-left: 0;
  margin-right: 0.4em;
}

/* ---- TOC ---- */
[dir="rtl"] .toc-summary,
[dir="rtl"] .toc {
  border-left: none;
  border-right: 3px solid var(--color-brand);
}
[dir="rtl"] .toc-summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
[dir="rtl"] .article-toc-rail:not([open]) .toc-summary { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .toc { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
[dir="rtl"] .toc-summary::after { float: left; }
[dir="rtl"] .toc li::before { margin-right: 0; margin-left: 0.4em; }

/* ---- Sidebar / TOC rail column mirrors to the visual left in RTL ---- */
[dir="rtl"] .article-layout {
  grid-template-areas: "toc primary" "sidebar primary";
  grid-template-columns: 260px minmax(0, 1fr);
}
@media (max-width: 980px) {
  [dir="rtl"] .article-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Blockquote / callouts / service CTA accent border ---- */
[dir="rtl"] .article-body blockquote {
  padding-left: 0;
  padding-right: 1.2em;
  border-left: none;
  border-right: 3px solid var(--color-brand);
}
[dir="rtl"] .service-note,
[dir="rtl"] .callout {
  border-left: 1px solid var(--color-border);
  border-right: 4px solid var(--color-brand);
}
[dir="rtl"] .callout--tip { border-right-color: var(--color-accent); }
[dir="rtl"] .callout--mistake { border-right-color: #b3401f; }
[dir="rtl"] .callout--note { border-right-color: var(--color-text-muted); }

/* ---- Lists ---- */
[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol {
  padding-left: 0;
  padding-right: 1.3em;
}

/* ---- Tables ---- */
[dir="rtl"] .article-body th,
[dir="rtl"] .article-body td {
  text-align: right;
}

/*
  ---- Footer: the frozen footer CSS positions several things with
  physical left/right values that assume LTR and don't respond to
  dir="rtl" at all — found by actually looking at the rendered Arabic
  footer, not by inspecting the CSS in isolation:

  1. HOT/NEW badges (.footermain-highlight::after) are pinned to
     `right: 10px`. In LTR that's the empty trailing side; in RTL it's
     exactly where the Arabic text STARTS, so the badge was sitting on
     top of the link text (visibly clipping "خوادم مخصصة" and
     "360Monitoring"). Flipped to the left (now the trailing side).
  2. Every icon — footer link chevrons, the 4 contact-box icons, the
     "more" button icon — uses `margin-right` to create a gap before
     the text that follows it. That gap needs to flip to
     `margin-left`, otherwise it lands on the icon's outer edge
     (against the box border) instead of between the icon and text,
     which is exactly the "icon too close to text / floating" effect
     reported.
  3. .footermain-heading is hardcoded `text-align: left` — physical,
     not logical — so Arabic headings sat flush against the LEFT edge
     of their column while the links below them (no explicit
     text-align, so correctly right-aligned by inheritance) sat flush
     right. That mismatch between a heading and its own link list is
     the "rows look off-center" / "inconsistent spacing" effect.
  4. The legal-bar link separators use `border-right` with the LAST
     dom child exempted — correct for LTR's left-to-right divider
     pattern, but under RTL's reversed visual order that leaves a
     stray border on the outer edge and a missing divider between the
     first two (now-adjacent) visual items.
*/
[dir="rtl"] .footermain-highlight::after {
  right: auto;
  left: 10px;
}
[dir="rtl"] .footermain-highlight a {
  /* reserve clearance so the (now left-side) badge never sits flush
     against right-aligned Arabic text, regardless of label length */
  padding-left: 48px;
}
[dir="rtl"] .footermain-link-icon {
  margin-right: 0;
  margin-left: 10px;
}
[dir="rtl"] .linkblocks-linkblock-icon {
  margin-right: 0;
  margin-left: 15px;
}
[dir="rtl"] .button1-more-icon {
  margin-right: 0;
  margin-left: 4px;
}
[dir="rtl"] .footermain-heading {
  text-align: right;
}
[dir="rtl"] .copyrightmain-links ul li a {
  border-right: none;
  border-left: #000000 1px solid;
}
[dir="rtl"] .copyrightmain-links ul li:last-child a {
  border-left: none;
}

/* ---- Share row label spacing ---- */
[dir="rtl"] .share-row__label { margin-right: 0; margin-left: 0.2em; }

/* ---- Prev/next pager: Grid auto-mirrors column order under dir=rtl;
   only the text alignment of the "next" cell needs flipping so it
   still aligns toward its own (now left-side) edge. ---- */
[dir="rtl"] .article-pager--next { text-align: left; }

/* ---- Reading progress grows from the right in RTL ---- */
[dir="rtl"] .reading-progress__bar { left: auto; right: 0; }

/* ---- Back to top mirrors to the bottom-left ---- */
[dir="rtl"] .back-to-top { right: auto; left: var(--space-4); }
@media (max-width: 620px) {
  [dir="rtl"] .back-to-top { left: var(--space-3); }
}

/* ---- Language switcher flows RTL naturally, like the rest of the
   blog's own chrome (not the corporate shell) — items keep their DOM
   order (EN, then Arabic, then ES) and the container's flex-end
   alignment maps to the visual left under RTL automatically. ---- */

/*
  ---- Featured article card: adapt the approved component for Arabic,
  don't redesign it. Arabic words tend to run longer per character
  count than their English equivalents, and RTL mirrors the grid so
  the text column becomes the second (visually left) track — giving it
  slightly more width than the English 0.9fr avoids the cramped
  3-line-title-vs-wide-image imbalance the English 1.1/0.9 split can
  otherwise produce for Arabic headlines.

  Bug found by visual inspection at 390px (not caught by the earlier
  1440/1024/768 checks): this rule had no max-width guard, so it kept
  forcing a 2-column 1fr/1fr split even on mobile, overriding blog.css's
  own `@media (max-width: 900px) { .featured-article { grid-template-
  columns: minmax(0,1fr); } }` single-column collapse. That squeezed
  the title into a ~136px-wide column on a 390px screen, which is the
  actual cause of the title looking "clipped" — the box itself was
  never overflow-clipped, it was just absurdly narrow. Scoping this
  rule to the same >900px range the English layout uses fixes it.
*/
@media (min-width: 901px) {
  [dir="rtl"] .featured-article {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}