/*!
 * rtl.css — right-to-left overrides, loaded only on pages whose language is
 * written right to left. Today that is Arabic; Hebrew, Persian or Urdu would
 * pick it up for free by setting 'dir' => 'rtl' in avs_languages().
 *
 * WHY A SEPARATE FILE
 *
 * styles.css is a compiled Tailwind v4 build and there is no build config in
 * the repo, so utilities cannot be regenerated: whatever a page needs has to
 * already exist in that file. Tailwind's own RTL story is the logical-property
 * utilities (ms-*, me-*, ps-*, pe-*, start-*, end-*) plus the rtl: variant, and
 * none of those were compiled in because no page used them. Rewriting 40 Arabic
 * pages to classes that do not exist would produce markup that silently styles
 * as nothing. Overriding the physical utilities the pages already use is the
 * only route that works against a fixed stylesheet, and it has the side benefit
 * that the Arabic markup stays byte-comparable with the other seven trees.
 *
 * This file is deliberately NOT layered. styles.css opens with
 *
 *     @layer theme, base, components, clients, utilities;
 *
 * and unlayered CSS outranks every layer regardless of specificity, so these
 * rules win without !important and without specificity games. The two places
 * !important does appear are marked, and both are fighting an inline style.
 *
 * WHAT ALREADY FLIPS BY ITSELF, so do not add rules for it:
 *
 *   space-x-*    Tailwind v4 emits margin-inline-start/end, which are logical.
 *   gap-*        no direction.
 *   px-*, mx-*   symmetric.
 *   flex, grid   row direction follows the inherited 'direction' already.
 *   text-align   the default is 'start', so untouched text right-aligns.
 *   ( ) [ ] < >  the bidi algorithm mirrors these glyphs on its own.
 *
 * Adding a redundant override here is worse than adding none: it pins a
 * physical value onto something that was already correct.
 *
 * WHAT IS DELIBERATELY LEFT ALONE:
 *
 *   left-1/2 + -translate-x-1/2   the centring idiom. Flipping both would
 *                                 centre it again, so the pair is a no-op that
 *                                 only adds a way to get it half-right.
 */

/* ---------------------------------------------------------------------------
 * Margins
 *
 * ml-* and mr-* compile to margin-left and margin-right. Each override zeroes the
 * physical side the utility set before setting the mirrored one, because the
 * original declaration is still in the cascade and would otherwise survive
 * alongside its replacement, indenting the element from both sides.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: calc(var(--spacing) * 1); }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: calc(var(--spacing) * 2); }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: calc(var(--spacing) * 3); }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: calc(var(--spacing) * 4); }
[dir="rtl"] .ml-6 { margin-left: 0; margin-right: calc(var(--spacing) * 6); }

[dir="rtl"] .mr-2 { margin-right: 0; margin-left: calc(var(--spacing) * 2); }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: calc(var(--spacing) * 3); }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: calc(var(--spacing) * 4); }

/* ---------------------------------------------------------------------------
 * Absolutely positioned panels
 *
 * Every nav dropdown is "absolute left-0" under a hover group, and the mobile
 * menu and language list are "absolute right-0". Both anchor a panel to the
 * edge of its trigger, and in RTL the trigger has moved to the other side of
 * the bar: without this the mobile menu opens off the right edge of a viewport
 * whose hamburger is now on the left.
 *
 * 'auto' rather than 'unset' on the side being released: these panels have no
 * width set on the released axis, so leaving both offsets at 0 would stretch
 * them across the full width of the positioning context.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .left-0  { left: auto; right: calc(var(--spacing) * 0); }
[dir="rtl"] .right-0 { right: auto; left: calc(var(--spacing) * 0); }

/* Decorative background orbs. Mirroring them keeps the page's light sources on
 * the same side as the content they were composed around. */
[dir="rtl"] .-left-48  { left: auto; right: calc(var(--spacing) * -48); }
[dir="rtl"] .left-1\/3 { left: auto; right: calc(1 / 3 * 100%); }

/* ---------------------------------------------------------------------------
 * Explicit alignment
 *
 * text-left is used where a block of prose sits inside a centred card and has
 * to opt out of the centring. It means "reading order", not "the left", so in
 * RTL it has to become right.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* ---------------------------------------------------------------------------
 * The footer link nudge
 *
 * hover:translate-x-1 slides a link one step in the reading direction on hover.
 * Only the custom property is overridden; the 'translate' declaration that
 * consumes it still comes from styles.css. The (hover: hover) query is repeated
 * from the original so a touch device, where :hover can latch after a tap, is
 * left out of both rules rather than only one.
 * ------------------------------------------------------------------------ */
@media (hover: hover) {
  [dir="rtl"] .hover\:translate-x-1:hover           { --tw-translate-x: calc(var(--spacing) * -1); }
  [dir="rtl"] .group:hover .group-hover\:translate-x-1 { --tw-translate-x: calc(var(--spacing) * -1); }
}

/* ---------------------------------------------------------------------------
 * Directional icons
 *
 * Chevrons and arrows are the one kind of glyph that has to be redrawn rather
 * than repositioned. The bidi algorithm reorders text, and the rules above
 * move boxes, but an SVG path is geometry: it points wherever it was authored.
 * A "next page" chevron therefore still points right on an Arabic page, where
 * it reads as "previous".
 *
 * These are matched on their path data because the markup offers nothing else
 * to hold on to. Breadcrumb separators and article back-links are styled
 * inline with no class, so expressing a purely presentational rule any other
 * way would mean editing forty files to add hooks. Every occurrence of these
 * three paths in the Arabic tree is a direction indicator: breadcrumb
 * separators, pagination, article back-links, and the arrow that trails a
 * call-to-action link or card.
 *
 * Deliberately absent, because they are glyphs rather than directions and
 * mirroring them would be wrong:
 *   M19 9l-7 7-7-7           the dropdown caret, which points down
 *   M5 13l4 4L19 7           a checkmark, not mirrored in any locale
 *   M8 9l3 3-3 3m5 0h3 ...   a terminal prompt, which is LTR everywhere
 *   M10 20l4-16m4 4l4 4 ...  the </> code icon, whose brackets are its meaning
 *
 * transform-box makes the origin the path's own bounding box. The SVG default
 * is the viewport, which would swing the glyph out of frame instead of
 * flipping it in place.
 * ------------------------------------------------------------------------ */
[dir="rtl"] path[d="M9 5l7 7-7 7"],
[dir="rtl"] path[d="M15 19l-7-7 7-7"],
[dir="rtl"] path[d="M5 12h14M12 5l7 7-7 7"] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
 * Long-form article body
 *
 * .prose is hand-written in styles.css rather than the Tailwind plugin, and
 * indents lists and aligns table headers with physical properties.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .prose th { text-align: right; }

/* ---------------------------------------------------------------------------
 * Inline styles
 *
 * The blog search box is styled inline, so its divider cannot be reached by
 * specificity alone; an inline declaration outranks any selector. !important is
 * the documented escape hatch for exactly this and is confined to these two
 * declarations.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .avs-search-submit {
  border-left: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---------------------------------------------------------------------------
 * Bidirectional text
 *
 * Latin runs inside Arabic are the part CSS mostly cannot fix, because the
 * damage happens in the Unicode bidi algorithm before styling is involved.
 * "Email: support@avsisp.com" in an RTL paragraph resolves the colon to the
 * paragraph direction and displays as "support@avsisp.com :Email"; "ASN: 210464"
 * becomes "210464 :ASN". The fix is per-run isolation in the markup, which HTML
 * gives for free: dir="ltr" on an element carries unicode-bidi: isolate from the
 * UA stylesheet, so the run is measured as one opaque neutral by the surrounding
 * Arabic and reorders internally as English.
 *
 * .ltr is here for the cases where an author wants that without also wanting to
 * think about which element to hang the attribute on. Prefer dir="ltr" in the
 * markup: it is what assistive technology and the isolation both key off.
 *
 * A pure Latin run with no punctuation, "VPS ألبانيا" or a bare "Looking Glass",
 * needs nothing. It is already a single directional run and the algorithm
 * places it correctly.
 * ------------------------------------------------------------------------ */
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ltr { text-align: right; }

/* An island of dir="ltr" is a statement about the order of what is inside it,
 * not about where it sits: the wordmark reads AVS then ISP in any language, but
 * on a mirrored page the block itself still belongs on the right with the rest
 * of the column. Left to itself the island gets that wrong twice over, because
 * direction drives placement as well as order, so a flex island packs its
 * children to its own left edge and a block island resolves text-align:start to
 * the left. The footer wordmark hit the first case: its box filled the grid
 * cell, so the badge sat at the far left of a column whose every other line was
 * flush right.
 *
 * The nav wordmark is unaffected either way, being a flex item that is already
 * shrink-wrapped to its contents, but the rules are written for the general
 * case so the next dir="ltr" island does not have to rediscover this. */
[dir="rtl"] [dir="ltr"].flex,
[dir="rtl"] [dir="ltr"].inline-flex { justify-content: flex-end; }
[dir="rtl"] [dir="ltr"]:not(.flex):not(.inline-flex) { text-align: right; }

/* Tabular technical values, IP addresses and ASNs among them, read as LTR even
 * inside Arabic prose. bdi already isolates; this only fixes the direction so a
 * value starting with a digit does not inherit RTL from its surroundings. */
[dir="rtl"] bdi.tech,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] samp,
[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; text-align: left; }