/*
 * Maslamani Energy — RTL overrides.
 *
 * WordPress loads this automatically instead of nothing when
 * is_rtl() is true (Arabic, Hebrew). Only the rules that are
 * genuinely direction-bound live here — everything in style.css
 * that could use logical properties already does.
 *
 * @package Maslamani_Energy
 */

/* ---------- Typography ---------- */
body{
	letter-spacing: 0; /* Latin tracking hurts Arabic/Hebrew shaping */
}
h1, h2, h3, h4{
	letter-spacing: 0;
}

/*
 * Headings throughout style.css use a tight 1.12-1.15 line-height,
 * tuned for Quicksand (the Latin face). Cairo, the Arabic face loaded
 * in inc/enqueue.php, needs more vertical room per line at the same
 * ratio - diacritics and taller letterforms crowd the line above at
 * that ratio. Scoped to Arabic specifically (not all of rtl.css, which
 * also covers Hebrew/Assistant, an unrelated font this has not been
 * checked against). Same specificity as the h1/h2-scoped rules it
 * needs to beat (one class-or-pseudo-class plus one element each), so
 * this wins on source order - rtl.css always prints after style.css.
 */
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4{
	line-height: 1.4;
}
.eyebrow,
.footer-grid h5,
.brand-tag,
.filter-rail h4,
.pdp-info .brand-tag{
	letter-spacing: 0;
}

/* ---------- Header ---------- */
.header-actions .btn-navy{
	margin-left: 0;
	margin-right: 2px;
}

/* The mega menu needs no RTL override: it is anchored with
   inset-inline-start, which already flips to the right edge here. */

/* ---------- Mobile nav drawer (slides from the right in RTL) ---------- */
.mnav-drawer{
	left: auto;
	right: 0;
	transform: translateX(100%);
	box-shadow: -20px 0 60px rgba(0, 0, 0, .2);
}
.mnav-drawer.open{
	transform: translateX(0);
}
.mnav-sub{
	padding: 0 20px 10px 12px;
}

/* ---------- Quote / cart drawer (slides from the left in RTL) ---------- */
.drawer{
	right: auto;
	left: 0;
	transform: translateX(-100%);
	box-shadow: 20px 0 60px rgba(0, 0, 0, .2);
}
.drawer.open{
	transform: translateX(0);
}

/* ---------- Badges ---------- */
.badge{
	right: auto;
	left: 0;
}
.mobile-bar .mbadge{
	right: auto;
	left: 22%;
}

/* ---------- About page: company timeline ----------
   The odd cards already read text-align:right unconditionally; only the
   even ones (which lean text toward the spine from the opposite side, a
   flourish that does not carry over to Arabic) and the mobile view
   (which forces every card the same way regardless of odd/even) need
   correcting here - see the equivalent unscoped rules in style.css. */
.timeline-item:nth-child(even) .timeline-card{
	text-align: right;
}
@media (max-width: 760px){
	.timeline-card,
	.timeline-item:nth-child(even) .timeline-card{
		text-align: right;
	}
}

/* ---------- Hero ---------- */
.hero-media .diagonal{
	transform: rotate(3deg); /* mirror the tilt so it leans into the page */
}
.hero-media .float-card.f1{
	left: auto;
	right: -22px;
}
.hero-media .float-card.f2{
	right: auto;
	left: -18px;
}

/* ---------- Proof grid ---------- */
.proof-grid .proof-item .tag{
	left: auto;
	right: 14px;
}

/* ---------- Product / editorial content ---------- */
.alignleft{
	float: right;
	margin: 6px 0 18px 24px;
}
.alignright{
	float: left;
	margin: 6px 24px 18px 0;
}

/* ---------- Tabs ---------- */
.tab-btn{
	margin-right: 0;
	margin-left: 26px;
}

/* ---------- Toast ---------- */
.toast{
	transform: translate(50%, 12px);
	left: auto;
	right: 50%;
}
.toast.show{
	transform: translate(50%, 0);
}

/* ---------- WooCommerce ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
	border-left: none;
	border-right: 4px solid var(--green);
}
.woocommerce-error{
	border-right-color: #c0403f;
}
.woocommerce ul.order_details li{
	border-left: none;
	border-right: 1px solid var(--line);
}
.woocommerce ul.order_details li:last-child{
	border-right: none;
}

/* ---------- Quote form rows ---------- */
/* The grid is direction-aware already; only the remove button's
   position needs no change because grid follows the writing mode. */

/* ---------- Pagination ---------- */
/* Woo prints literal arrow glyphs, which point the wrong way in RTL. */
.woocommerce-pagination li > .prev,
.woocommerce-pagination li > .next{
	display: inline-grid;
	transform: scaleX(-1);
}