/* -----------------------------------------------------------
   RTL overrides — loaded only when animalife_is_arabic() (?lang=ar).
   Scope for this pass: site chrome (header/footer) + homepage.

   IMPORTANT: flexbox and grid already auto-mirror their item order for
   `direction: rtl` (flex-direction: row / grid's default flow both treat
   "start" as the right edge in RTL) — that happens for free once `dir`
   is set on <html>. Do NOT add flex-direction: row-reverse or
   justify-content: flex-end on top of that; it double-reverses things
   back to an LTR-looking order with Arabic text, which is the bug this
   file previously had. Only two kinds of things need explicit rules
   here: (1) graphical icons that don't know about text direction, and
   (2) elements positioned with physical `left`/`right` (not flex/grid
   flow), which CSS never mirrors automatically.
----------------------------------------------------------- */
html[dir="rtl"] body {
	font-family: 'Cairo', var(--font-body);
}

/* Forward-pointing "caret" icons inside pill buttons/links should point
   toward reading-start (left) in RTL instead of right. */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .link-arrow svg,
html[dir="rtl"] .carousel-arrow svg {
	transform: scaleX(-1);
}

html[dir="rtl"] .language-switch svg:last-child {
	transform: scaleX(-1);
}

/* About — the text box, decorative shape and background photo are all
   absolutely/physically positioned (not flex/grid flow), so none of them
   auto-mirror. The photo and shape are swapped for pre-flipped assets in
   front-page.php; here we just move their boxes to the opposite side and
   mirror the shape's rotation to match.

   Scoped to desktop only: below the 900px breakpoint main.css turns
   .about__content into a normal-flow relative box and gives .about__shape
   a different left-anchored position and rotation for the stacked mobile
   layout — a leftover right/rotate here would fight those mobile-specific
   values instead of leaving them alone. */
@media (min-width: 901px) {
	html[dir="rtl"] .about__content {
		left: auto;
		right: 7.9%;
	}

	html[dir="rtl"] .about__shape {
		left: auto;
		right: -62.53%;
		transform: rotate(-14.98deg);
	}
}

/* Shop (Dogs/Cats archive) hero — same story as About: the pet photo and
   decorative blobs are baked into the background raster (mirrored copy
   swapped in via archive-product.php), and the text box is physically
   positioned (absolute left/right), so it needs its own flip to hug the
   opposite edge instead of relying on flex auto-mirroring.

   Scoped to desktop only: below the 640px breakpoint shop.css switches
   this box to position:relative with no offsets (a simple top-to-bottom
   flow), so a leftover left/right here would shift it sideways instead
   of leaving it centered in normal flow. */
@media (min-width: 641px) {
	html[dir="rtl"] .shop-hero__inner {
		left: 10%;
		right: 5.43%;
	}
}

/* Discover AnimaLife hero — the cat/dog photo and the decorative accent
   blob are both absolutely positioned overlays (not flex/grid flow), so
   they need an explicit flip. Both were only anchored via one physical
   side (right or left) plus a width, so mirroring is just swapping which
   side holds the same offset value — the box ends up in the exact
   horizontal mirror of its LTR position. */
html[dir="rtl"] .discover-hero__photo {
	right: auto;
	left: 0;
}

html[dir="rtl"] .discover-hero__accent {
	left: auto;
	right: 40%;
}

/* Ingredient benefit lists use a physical padding-left to make room for
   the bullet marker; in RTL the marker sits on the right, so the padding
   needs to move with it or the bullets get clipped against the card edge. */
html[dir="rtl"] .ingredient-card__benefits ul {
	padding-left: 0;
	padding-right: 18px;
}

/* Gallery — badges and the lightbox close button are absolutely positioned
   overlays on top of photos/video thumbnails, so none of them auto-mirror. */
html[dir="rtl"] .featured-card__badge {
	left: auto;
	right: 16px;
}

html[dir="rtl"] .gallery-card__type-badge {
	right: auto;
	left: 12px;
}

html[dir="rtl"] .gallery-card__label-badge {
	left: auto;
	right: 8px;
}

html[dir="rtl"] .gallery-card {
	text-align: right;
}

html[dir="rtl"] .gallery-modal__close {
	right: auto;
	left: 16px;
}

/* The badge's shorthand padding is asymmetric (more room on the trailing
   side, after the icon) to match its icon-then-text flex order — mirror
   the left/right values so the extra space stays on the trailing side
   once that order flips. */
html[dir="rtl"] .gallery-modal__badge {
	padding: 5px 10px 5px 14px;
}

/* The chevron is pushed to the end of the filter button via a physical
   margin-left: auto, which doesn't flip with direction on its own. */
html[dir="rtl"] .gallery-filter__chevron {
	margin-left: 0;
	margin-right: auto;
}

/* Academy — hero text box is absolutely positioned (not flex/grid flow),
   so it needs the same left/right swap used for the other hero sections.
   Scoped to desktop only — see the .shop-hero__inner note above; the same
   position:relative-with-no-offsets mobile layout applies here. */
@media (min-width: 641px) {
	html[dir="rtl"] .academy-hero__inner {
		left: 5%;
		right: 11.74%;
	}
}

/* Academy mobile hero photo: mirror with a transform (flip + inset from
   the right / bleed off the left) instead of a separate mirrored file —
   it's a plain non-text image. */
@media (max-width: 640px) {
	html[dir="rtl"] .academy-hero__photo-wrap {
		margin: -44px 12% 0 -70px;
		transform: scaleX(-1);
	}
}

/* The "AnimaLife Approved" seal overlaps the top corner of the single-post
   header; it's absolutely positioned so it doesn't move with the title. */
html[dir="rtl"] .academy-single__seal {
	right: auto;
	left: 0;
}

html[dir="rtl"] .header-cart__count {
	right: auto;
	left: -6px;
}

/* Blockquotes use a physical left border + padding to draw the accent
   rule before the quoted text; in RTL that rule belongs on the right. */
html[dir="rtl"] .academy-single__content blockquote {
	padding-left: 0;
	padding-right: 20px;
	border-left: none;
	border-right: 3px solid rgba(0, 0, 0, 0.1);
}

/* Bullet lists indent from the reading-start edge — physical left padding
   would sit on the wrong side once the content mirrors to RTL. */
html[dir="rtl"] .academy-single__content ul {
	padding-left: 0;
	padding-right: 20px;
}

/* Mobile nav flyout (node 1070:1965) is physically right: 0 in LTR; in
   RTL the panel opens from reading-start, so mirror it to the left, and
   its text/list padding along with it. */
@media (max-width: 900px) {
	html[dir="rtl"] .primary-navigation {
		right: auto;
		left: 0;
		box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
	}

	html[dir="rtl"] .primary-navigation ul {
		padding: 34px 38px 24px 20px;
	}
}