/*
 * Right-to-left layer for pixelsqa.com.
 * Loaded only when is_rtl() is true, i.e. on the Arabic side of the site.
 * The logik theme ships no rtl.css, so this file carries the direction work.
 */

/* ---------------------------------------------------------------
 * 1. Typography
 *
 * Elementor writes a font-family into a per-page stylesheet (post-<id>.css) and
 * the theme sets one on the navigation, so a plain declaration here loses to
 * both: measured on the Arabic home page, 88 elements holding Arabic text were
 * rendering in Noto Sans JP, Roboto or Poppins. None of those carry Arabic
 * glyphs, so the browser substitutes character by character and the result is
 * uneven letterforms and wrong metrics.
 *
 * The override is therefore !important, but it is listed element by element
 * rather than applied to *, so icon elements (<i>, and the spans Font Awesome,
 * Ionicons, eicons and dashicons use) keep the family their glyphs live in.
 * ------------------------------------------------------------- */
html[lang^="ar"] body,
body.rtl,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl p,
body.rtl li,
body.rtl td,
body.rtl th,
body.rtl dt,
body.rtl dd,
body.rtl blockquote,
body.rtl label,
body.rtl figcaption,
body.rtl a,
body.rtl button,
body.rtl input,
body.rtl textarea,
body.rtl select,
body.rtl .elementor-heading-title,
body.rtl .elementor-widget-text-editor,
body.rtl .elementor-button-text,
body.rtl .elementor-icon-list-text,
body.rtl .elementor-tab-title,
body.rtl .elementor-tab-content,
body.rtl .elementor-accordion-title,
body.rtl .elementor-counter-title,
body.rtl .elementor-testimonial-content,
body.rtl .elementor-testimonial-name,
body.rtl .navbar-nav a,
body.rtl .qodef-m-title,
body.rtl .qodef-m-subtitle,
body.rtl .logik-tab-title,
body.rtl .logik-tab-details,
body.rtl .logik-button {
	font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
}

/* Latin letter-spacing pulls Arabic letters apart and breaks the joins. */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl .elementor-heading-title,
body.rtl .navbar-nav a {
	letter-spacing: 0 !important;
}

/* Only weight 400 of the Arabic face is self-hosted, so anything asking for a
 * heavier weight gets a synthesised bold. Headings keep it because a faux bold
 * on a large heading is acceptable; body copy is pinned to the real weight. */
body.rtl p,
body.rtl li,
body.rtl td,
body.rtl .elementor-widget-text-editor {
	font-weight: 400 !important;
}

/* Arabic reads better with a little more line height than the Latin default. */
body.rtl p,
body.rtl li {
	line-height: 1.9;
}

/* ---------------------------------------------------------------
 * 2. Direction and alignment
 * ------------------------------------------------------------- */
body.rtl {
	direction: rtl;
	text-align: right;
}

body.rtl .elementor-widget-text-editor,
body.rtl .elementor-widget-heading,
body.rtl .qodef-m-content {
	text-align: right;
}

body.rtl ul,
body.rtl ol {
	padding-right: 1.5em;
	padding-left: 0;
}

body.rtl .elementor-widget-text-editor ul,
body.rtl .elementor-widget-text-editor ol {
	margin-right: 0;
}

/* Keep the centred blocks centred rather than flipping them right. */
body.rtl .elementor-widget-container[style*="text-align: center"],
body.rtl .qodef--center,
body.rtl .elementor-align-center {
	text-align: center;
}

/* ---------------------------------------------------------------
 * 3. Bidirectional isolation
 * Phone numbers, model codes, emails and Latin acronyms must not be
 * reordered by the RTL paragraph they sit inside. Without this,
 * "44212322 - 66240400" renders with the numbers swapped.
 * ------------------------------------------------------------- */
body.rtl .ltr,
body.rtl [dir="ltr"],
body.rtl a[href^="tel:"],
body.rtl a[href^="mailto:"],
body.rtl code,
body.rtl kbd {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

body.rtl bdi {
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------
 * 4. Header, menu and footer
 * ------------------------------------------------------------- */
body.rtl .qodef-header-navigation > ul,
body.rtl .qodef-header-navigation > ul > li {
	direction: rtl;
}

body.rtl .qodef-header-navigation ul li ul {
	right: 0;
	left: auto;
	text-align: right;
}

body.rtl .qodef-widget-holder,
body.rtl .widget {
	text-align: right;
}

body.rtl .menu-item a {
	text-align: right;
}

/* ---------------------------------------------------------------
 * 5. Components that carry a left-hand icon or border
 * ------------------------------------------------------------- */
body.rtl .qodef-icon-with-text .qodef-m-icon-wrapper {
	margin-left: 15px;
	margin-right: 0;
}

body.rtl .elementor-icon-list-item .elementor-icon-list-icon {
	margin-left: 8px;
	margin-right: 0;
}

body.rtl blockquote {
	border-right: 3px solid currentColor;
	border-left: 0;
	padding-right: 1em;
	padding-left: 0;
}

/* ---------------------------------------------------------------
 * 6. Forms
 * ------------------------------------------------------------- */
body.rtl input[type="text"],
body.rtl input[type="email"],
body.rtl input[type="tel"],
body.rtl textarea,
body.rtl select {
	direction: rtl;
	text-align: right;
}

/* Email and phone fields stay left-to-right, because the value is Latin. */
body.rtl input[type="email"],
body.rtl input[type="tel"],
body.rtl input[type="url"] {
	direction: ltr;
	text-align: right;
}

body.rtl .wpcf7 label {
	display: block;
	text-align: right;
}

/* ---------------------------------------------------------------
 * 7. Language switcher
 * ------------------------------------------------------------- */
.pixels-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pixels-lang-switch a {
	text-decoration: none;
}