/*
 * First Choice - right-to-left corrections for the Arabic site (/ar/).
 *
 * Loaded after main.css, and only on Arabic pages (inc/enqueue.php), where
 * <html> carries dir="rtl". Every rule is scoped to [dir="rtl"] as well, so
 * this file can never restyle the English site even if it were loaded there.
 *
 * WHAT IS - AND IS NOT - HANDLED HERE
 *
 * Grid and flex layouts follow the document direction on their own: the hero's
 * copy moves to the right and its picture to the left, the services list and
 * its preview swap sides, and so on, without a rule here. This file is for
 * what main.css pins to a physical side - a left padding, a right offset, an
 * arrow that points right - and for the few things that must NOT turn round:
 *
 *   - photographs keep their order and are never mirrored
 *   - logos, the social icons, the tick marks and the phone icon keep their shape
 *   - phone numbers, emails and figures read left to right inside Arabic text
 *
 * Arrows that mean "forward" are turned to point left, because in Arabic
 * forward is to the left.
 *
 * Sections are in page order, with the main.css block each one answers.
 *
 * @package FirstChoice
 */

/* =========================================================================
   01  TYPE
   ====================================================================== */

/* Inter has no Arabic letters, so Noto Sans Arabic (loaded alongside this
   file) sets the Arabic. It has every weight from 300 to 900, so each
   font-weight in main.css - the 800 and 900 headings included - comes out as
   bold as it does in English, rather than being capped at a lighter face.
   It carries no Latin letters, so ERP, IFRS or an email address inside
   Arabic text falls through to Inter: the English site's own face. */
[dir="rtl"] {
	--fc-font: "Noto Sans Arabic", "Inter", system-ui, "Segoe UI", Tahoma, sans-serif;
	--fc-font-sans: var(--fc-font);
	--fc-font-heading: var(--fc-font);
	--fc-font-display: var(--fc-font);
	--fc-font-mono: var(--fc-font);
}

/* Several labels were written in Inter by name rather than through the
   variables - those are brought into line here. */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
	font-family: var(--fc-font);
}

/* Arabic is a joined script: letter-spacing pulls the letters of a word apart
   and breaks the joins between them, positive or negative. main.css tracks
   most of its labels and headings, so it is switched off across the board -
   the one place in this file where !important is the right tool. Uppercase
   has no meaning in Arabic and is left alone. */
[dir="rtl"] body,
[dir="rtl"] body * {
	letter-spacing: normal !important;
}

/* Arabic letters rise and fall further than Latin ones; the tight line-height
   the English display headings use clips the dots above and below a line. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
	line-height: 1.35;
}

/* The brand line is set at display size (main.css: line-height .84). Arabic
   needs room for the descenders of ي and و, but not a body text's worth. */
[dir="rtl"] .hero-ed__title {
	line-height: 1.15;
}

/* Phone numbers, email addresses and figures keep their own left-to-right
   order inside a right-to-left line - otherwise "+968 76061234" is printed as
   "76061234 968+". */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .footer-contact a,
[dir="rtl"] .fsmenu__contact-link,
[dir="rtl"] .hero-fc__stat-value,
[dir="rtl"] .hero-metric__value,
[dir="rtl"] .industries__counter {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Wording that has not been supplied in Arabic yet is still English. Laid out
   by its own direction, an English sentence in a right-to-left block keeps its
   words - and its full stop - in the right order. */
[dir="rtl"] .site-footer__copy,
[dir="rtl"] .footer-contact__hours,
[dir="rtl"] .footer-col__text,
[dir="rtl"] .header-tagline {
	unicode-bidi: plaintext;
}

/* =========================================================================
   02  BUTTONS  (main.css 05 - .btn__icon)
   ====================================================================== */

/* The arrow inside a button points the way the page reads. */
[dir="rtl"] .btn__icon {
	transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn__icon {
	transform: translateX(-4px) scaleX(-1);
}

/* =========================================================================
   03  HEADER + FULL-SCREEN MENU
   ====================================================================== */

[dir="rtl"] .menu--primary .sub-menu {
	left: auto;
	right: 0;
}

[dir="rtl"] .menu--primary .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

[dir="rtl"] .menu--primary .menu-item-has-children > a::after {
	margin-left: 0;
	margin-right: 8px;
}

/* The menu's right-hand column is anchored to the outside edge - on the
   Arabic site that edge is the left one. */
[dir="rtl"] .fsmenu__aside {
	text-align: left;
}

@media (max-width: 860px) {
	[dir="rtl"] .fsmenu__aside {
		text-align: right;
	}
}

[dir="rtl"] .skip-link {
	left: auto;
	right: 16px;
}

/* =========================================================================
   04  HERO - ACT ONE  (main.css: the strip and the brand type)
   ====================================================================== */

/* The photographs keep the English order and the same tall / wide / tall
   rhythm - the strip is a composition, not a sentence. */
[dir="rtl"] .hero-fc__frames {
	direction: ltr;
}

/* The slash after each service sits after it in reading order. */
[dir="rtl"] .hero-ed__service::after {
	margin-left: 0;
	margin-right: .35em;
}

/* =========================================================================
   05  HERO - ACT TWO  (main.css: .hero-fc__inner, panels)
   ====================================================================== */

/* The copy column's narrower gutter belongs on its own side - now the right.
   Desktop only: below 992px main.css sets an even gutter on both sides. */
@media (min-width: 992px) {
	[dir="rtl"] .hero-act--split .hero-fc__inner,
	[dir="rtl"] .hero-fc__inner {
		margin-left: auto;
		margin-right: 0;
		padding-left: clamp(20px, 4vw, 64px);
		padding-right: 50px;
	}
}

[dir="rtl"] .hero-fc__eyebrow-dash {
	margin-right: 0;
	margin-left: 2px;
}

/* The two panels sit on the picture's outer edge, away from the copy. */
[dir="rtl"] .hero-panel--checks {
	right: auto;
	left: 0;
}

[dir="rtl"] .hero-panel--metrics {
	right: auto;
	left: 20px;
}

[dir="rtl"] .hero-metric + .hero-metric {
	border-left: 0;
	padding-left: 0;
	border-right: 1px solid #f1f5f9;
	padding-right: 18px;
}

/* The "book" arrow points up and forward - up and to the left. */
[dir="rtl"] .btn--hero .btn__icon {
	transform: scaleX(-1);
}

[dir="rtl"] .btn--hero:hover .btn__icon {
	transform: translate(-2px, -2px) scaleX(-1);
}

[dir="rtl"] .hero-fc__link:hover .hero-fc__link-arrow {
	transform: translateX(-4px);
}

/* =========================================================================
   06  KEY SERVICES  (main.css: .svc)
   ====================================================================== */

[dir="rtl"] .svc__listwrap {
	padding-right: 0;
	padding-left: 4px;
}

[dir="rtl"] .svc__title {
	text-align: right;
}

[dir="rtl"] .svc__arrow-svg {
	transform: scaleX(-1);
}

[dir="rtl"] .svc__row:not(.is-active) .svc__link:hover {
	transform: translateX(-3px);
}

[dir="rtl"] .svc__row:not(.is-active) .svc__link:hover .svc__arrow,
[dir="rtl"] .svc__row.is-active .svc__arrow {
	transform: translateX(-2px);
}

@media (max-width: 991px) {
	[dir="rtl"] .svc__num {
		padding-left: 0;
		padding-right: 18px;
	}

	[dir="rtl"] .svc__arrow {
		margin-right: 0;
		margin-left: 18px;
	}

	[dir="rtl"] .svc__row:hover .svc__arrow {
		transform: translateX(-2px);
	}
}

/* =========================================================================
   07  WHY FIRST CHOICE  (main.css: .why)

   The pictures are a composition: a red plate under the first picture, a
   dotted dark panel behind the second, a ring behind both. Each is offset
   towards the copy, so on the Arabic site each is offset the other way.
   ====================================================================== */

/* Desktop only: below 992px main.css sets an even gutter on both sides. */
@media (min-width: 992px) {
	[dir="rtl"] .why .why__inner,
	[dir="rtl"] .why__inner {
		padding-left: 70px;
		padding-right: clamp(20px, 4vw, 50px);
	}
}

[dir="rtl"] .why__panel {
	left: clamp(-22px, -1.4vw, -12px);
	right: clamp(28px, 3.4vw, 56px);
}

[dir="rtl"] .why__plate {
	left: clamp(-22px, -1.5vw, -12px);
	right: var(--why-plate-x);
	border-radius: 0 0 clamp(36px, 4.4vw, 68px) 0;
}

[dir="rtl"] .why__shot--b .why__img {
	border-radius: clamp(34px, 4vw, 62px) clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px);
}

[dir="rtl"] .why__badge {
	padding-left: clamp(14px, 1.6vw, 20px);
	padding-right: calc(var(--why-plate-x) + clamp(18px, 2vw, 30px));
}

[dir="rtl"] .why__ring {
	right: auto;
	left: -14%;
}

@media (max-width: 991px) {
	[dir="rtl"] .why__point {
		text-align: right;
	}
}

@media (max-width: 767px) {
	[dir="rtl"] .why__ring {
		left: -2%;
	}
}

/* =========================================================================
   08  REVIEWS  (main.css 08f: .reviews)
   The drift runs the other way on the Arabic site - see initReviews() in
   inc/theme-script.php.
   ====================================================================== */

[dir="rtl"] .reviews__controls {
	margin-left: 0;
	margin-right: auto;
}

/* =========================================================================
   09  INDUSTRIES  (main.css: .industries)
   ====================================================================== */

/* "Previous" sits on the right now, so its arrow points right. */
[dir="rtl"] .industries__btn svg {
	transform: scaleX(-1);
}

/* =========================================================================
   10  LATEST BLOG  (main.css: .blog, .blog-card)
   ====================================================================== */

[dir="rtl"] .blog-card--lead .blog-card__bar {
	left: auto;
	right: clamp(12px, 1.2vw, 18px);
}

[dir="rtl"] .blog-card__more svg {
	transform: scaleX(-1);
}

[dir="rtl"] .blog-card__more:hover svg {
	transform: translateX(-4px) scaleX(-1);
}

/* =========================================================================
   10b  ABOUT - LEADERSHIP  (main.css: .lead-fc)
   ====================================================================== */

/* The hairline between the founder's facts goes before each fact after the
   first - on its right, now that the row reads from the right. */
[dir="rtl"] .lead-fc__fact + .lead-fc__fact {
	padding-left: 0;
	border-left: 0;
	padding-right: clamp(16px, 2vw, 30px);
	border-right: 1px solid var(--fc-border);
}

/* On a phone the facts stack and the hairline goes, as in English. */
@media (max-width: 767px) {
	[dir="rtl"] .lead-fc__fact + .lead-fc__fact {
		padding-right: 0;
		border-right: 0;
	}
}

/* =========================================================================
   10c  SERVICES - CATALOGUE COUNTS  (main.css: .catalogue__count)
        CONTACT - OFFICES            (main.css: .office)
   The hairline between two items goes before the second one: on its right.
   ====================================================================== */

[dir="rtl"] .catalogue__count-item + .catalogue__count-item {
	padding-left: 0;
	border-left: 0;
	padding-right: clamp(24px, 4vw, 48px);
	border-right: 1px solid rgba(255, 255, 255, .22);
}

[dir="rtl"] .office + .office {
	padding-left: 0;
	border-left: 0;
	padding-right: clamp(16px, 2.2vw, 32px);
	border-right: 1px solid var(--fc-border);
}

/* An office's numbers: "+968 92009586" reads left to right, but a line that
   opens with an Arabic label - "هاتف: +968 24218118" - must keep the label on
   the right. Each line takes its direction from its own first letter, which
   the general phone rule (section 01) would otherwise force to left-to-right. */
[dir="rtl"] .offices a.office__phone {
	direction: rtl;
	unicode-bidi: plaintext;
}

/* Breathing room for the offices. Arabic letters are taller and denser than
   Latin ones, so the English spacing - an address at 1.45 line-height 6px
   under the name, the number chips 10px under that - packs the Arabic
   tight. These open it up on the Arabic page only. */
[dir="rtl"] .offices__grid {
	gap: clamp(24px, 3vw, 48px);
	margin-top: clamp(24px, 3vh, 40px);
}

[dir="rtl"] .office__name {
	line-height: 1.5;
}

[dir="rtl"] .office__address {
	margin-top: 10px;
	font-size: .92rem;
	line-height: 1.85;
}

[dir="rtl"] .office__phones {
	gap: 10px;
	margin-top: 16px;
}

[dir="rtl"] .office__phone {
	padding: 8px 16px;
}

[dir="rtl"] .offices__locator {
	margin-top: clamp(32px, 4vh, 48px);
}

[dir="rtl"] .offices__tab {
	padding: 10px 28px;
	line-height: 1.5;
}

/* The same for the enquiry form and the "ابقَ على اتصال" card beside it. */
[dir="rtl"] .connect__form label {
	line-height: 1.7;
}

[dir="rtl"] .connect__social-lead,
[dir="rtl"] .connect__form .wpcf7-list-item-label {
	line-height: 1.8;
}

/* Two offices to a row: the first in each row has no hairline before it. */
@media (max-width: 991px) {
	[dir="rtl"] .office:nth-child(odd) {
		padding-right: 0;
		border-right: 0;
	}
}

/* Phones: the counts and the offices stack, and the hairlines go - as in English. */
@media (max-width: 767px) {
	[dir="rtl"] .catalogue__count-item + .catalogue__count-item,
	[dir="rtl"] .office + .office {
		padding-right: 0;
		border-right: 0;
	}
}

/* =========================================================================
   10d  FAQ  (main.css: .faqbox, .faqcta)
   ====================================================================== */

/* main.css caps the question list at 52ch - the width of 52 zeros in the
   current face. Noto Sans Arabic's zero is narrower than Inter's, so the same
   cap made the Arabic list ~50px narrower than the English one in the same
   box. The box's own padding already sets the measure. */
[dir="rtl"] .faqbox__list {
	max-width: none;
}

/* The email link under "هل لا يزال لديك سؤال؟": the address itself still
   reads left to right (section 01), but the link sits in the Arabic flow, so
   its arrow comes after it - on the left - and points left. */
[dir="rtl"] a.faqcta__mail {
	direction: rtl;
}

[dir="rtl"] .faqcta__go {
	transform: scaleX(-1);
}

[dir="rtl"] .faqcta__mail:hover .faqcta__go {
	transform: translateX(-3px) scaleX(-1);
}

[dir="rtl"] .faqcta__btn {
	text-align: right;
}

/* =========================================================================
   10e  BLOG INDEX  (main.css: .bwide, .bsearch)
   ====================================================================== */

/* The red arrow tile sits in the card's leading top corner - the right one. */
[dir="rtl"] .bwide__go {
	right: auto;
	left: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: clamp(12px, 1.2vw, 18px);
	border-top-left-radius: clamp(14px, 1.4vw, 22px);
}

[dir="rtl"] .bwide__go svg,
[dir="rtl"] .bwide__go .icon {
	transform: scaleX(-1);
}

/* The text keeps clear of that tile: room on the left now. */
[dir="rtl"] .bwide__body {
	padding: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) clamp(60px, 5vw, 88px);
}

@media (max-width: 767px) {
	[dir="rtl"] .bwide__body {
		padding-right: clamp(20px, 2.4vw, 36px);
		padding-left: clamp(20px, 5vw, 36px);
	}
}

/* The search button sits at the end of the box. */
[dir="rtl"] .bsearch__go {
	right: auto;
	left: 10px;
}

[dir="rtl"] .bsearch__input {
	padding-right: clamp(20px, 2vw, 28px);
	padding-left: 62px;
}

/* =========================================================================
   10f  ARTICLES  (main.css: .entry-content, .art-*, .post-nav)
   ====================================================================== */

[dir="rtl"] .entry-content ul,
[dir="rtl"] .entry-content ol {
	padding-left: 0;
	padding-right: 1.4em;
}

/* Tick and flag lists: the mark before each line, on the right. */
[dir="rtl"] .entry-content .art-check li {
	padding-left: 0;
	padding-right: 30px;
}

[dir="rtl"] .entry-content .art-check li::before {
	left: auto;
	right: 0;
}

/* The note's accent rule is on its leading edge. */
[dir="rtl"] .entry-content .art-note {
	border-left: 0;
	border-right: 3px solid var(--fc-accent-mark);
	border-radius: var(--fc-radius) 0 0 var(--fc-radius);
}

[dir="rtl"] .entry-content .art-table td {
	text-align: right;
}

[dir="rtl"] .entry-content .art-table tbody th {
	border-right: 0;
	border-left: 1px solid var(--fc-border);
}

[dir="rtl"] .entry-content .alignleft {
	float: right;
}

[dir="rtl"] .entry-content .alignright {
	float: left;
}

[dir="rtl"] .entry-tags__label {
	margin-right: 0;
	margin-left: 6px;
}

/* "Next" closes the row - on the left in Arabic. */
[dir="rtl"] .post-nav .nav-next {
	text-align: left;
}

@media (max-width: 767px) {
	[dir="rtl"] .post-nav .nav-next {
		text-align: right;
	}
}

[dir="rtl"] .comments__list .children {
	padding-left: 0;
	padding-right: clamp(16px, 4vw, 48px);
}

/* =========================================================================
   11  BREADCRUMBS
   ====================================================================== */

[dir="rtl"] .breadcrumbs__list li + li::before {
	margin-right: 0;
	margin-left: 8px;
}

/* =========================================================================
   12  FORMS - the enquiry pop-up and the contact page form
   The select's arrow and the room kept for it move to the left edge.
   ====================================================================== */

[dir="rtl"] .enquiry-modal__close {
	right: auto;
	left: clamp(16px, 1.8vw, 22px);
}

[dir="rtl"] .enquiry-modal__title {
	padding-right: 0;
	padding-left: 44px;
}

[dir="rtl"] .enquiry-modal__form select {
	padding-right: 14px;
	padding-left: 38px;
	background-position: left 12px center;
}

[dir="rtl"] .enquiry-modal__form form > p:last-of-type {
	text-align: right;
}

[dir="rtl"] .connect__form select {
	padding-right: 16px;
	padding-left: 46px;
	background-position: left 16px center;
}

/* The send button sits at the end of the form - the left edge, in Arabic. */
[dir="rtl"] .connect__form form > p:last-of-type,
[dir="rtl"] .connect__form form > p:last-child {
	text-align: left;
}

/* Its arrow is painted in as a background (main.css explains why), so the
   Arabic one is a mirrored drawing on the other side: up and to the left. */
[dir="rtl"] .connect__form input[type="submit"],
[dir="rtl"] .connect__form button[type="submit"] {
	padding-right: 34px;
	padding-left: 62px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17 7 7'/%3E%3Cpath d='M16 7H7v9'/%3E%3C/svg%3E");
	background-position: left 28px center;
}

[dir="rtl"] .connect__form .wpcf7-spinner {
	margin: 0 14px 0 0;
}

/* The social rows' arrows point up and forward. */
[dir="rtl"] .connect__social-arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .connect__social-link:hover .connect__social-arrow {
	transform: translate(-2px, -2px);
}

/* Email and phone fields hold left-to-right text whatever the page direction. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
	direction: ltr;
	text-align: right;
}

/* =========================================================================
   13  FOOTER + FLOATING BUTTONS
   ====================================================================== */

/* The floating buttons move to the left corner, where they stay clear of the
   start of each line of text. */
[dir="rtl"] .to-top,
[dir="rtl"] .wa-float {
	right: auto;
	left: 22px;
}

@media (max-width: 767px) {
	[dir="rtl"] .to-top,
	[dir="rtl"] .wa-float {
		left: 12px;
	}
}