/*
 * Arabic layer for volanteus.com/ar/ (docs/arabic-locale.md).
 *
 * Loaded ONLY by the Arabic layout, AFTER the unchanged English theme
 * stylesheets, so it wins the cascade. Every rule is scoped to html[lang="ar"],
 * so even if it were ever loaded on an English page (lang="en-GB") it would be
 * inert (Rule 1: English cannot change).
 *
 * LAYOUT IS NOT MIRRORED (Volanteus, 2026-10-29). The Arabic page keeps the
 * English layout exactly: nav on the right, button arrows on the right, images
 * and columns where English has them. Only the TEXT reads right to left:
 *  - text blocks (paragraphs, headings, list items, quotes, captions, cells,
 *    form fields) get `direction: rtl`, so Arabic lines run and wrap right to
 *    left and align to the right edge of their own box. Centred text stays
 *    centred. The box itself does not move.
 *  - `direction` is NEVER set on a layout container: it reverses flex rows and
 *    moves floats' static positions, which is exactly the mirroring Volanteus
 *    asked us to remove.
 *  - controls (buttons, nav links, pagination, the language selector) keep the
 *    English direction so their icons and arrows stay on the English side. An
 *    all-Arabic label still reads correctly inside a left-to-right box.
 *
 * Sections:
 *  1. Typography: Poppins first, then the Arabic font (Tajawal via next/font,
 *     exposed as --font-arabic), so Latin words stay in Poppins and Arabic glyphs
 *     fall through to Tajawal. Arabic body text about 10% larger, line-height
 *     about 1.7; headings at least 1.4. No letter-spacing, no uppercase, no italic
 *     on Arabic (they break joined letters).
 *  2. Text direction (the rules above).
 *  3. Text alignment: the few theme rules that force `text-align: left` on text.
 *  4. Bidi helpers for Latin/number runs and LTR inputs.
 *  5. Component fixes found by the checks (listed with the reason).
 *
 * Proof: `node scripts/arabic/check-pages.mjs --layout` compares every image,
 * button, nav item and column with the English page, and every Arabic text
 * element's direction and alignment.
 */

/* ── 1. Typography ──────────────────────────────────────────────────────── */

/* Every element, not a list: the theme sets `font-family: 'Poppins', sans-serif`
   on dozens of widget selectors (accordion titles, form controls, sliders...), and
   any one missing from a list rendered its Arabic in the system face (Geeza Pro,
   found by the 2026-10-24 design audit). Icon fonts are restored just below by
   higher-specificity exceptions; icons drawn on ::before/::after set their own
   family and are not touched by an element rule. */
html[lang="ar"] body *,
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] ul,
html[lang="ar"] ul li,
html[lang="ar"] ol,
html[lang="ar"] ol li,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .title,
html[lang="ar"] p.titletext,
html[lang="ar"] .btn,
html[lang="ar"] a.btn,
html[lang="ar"] .btn-theme,
html[lang="ar"] a.btn-theme,
html[lang="ar"] .btn-transparent,
html[lang="ar"] .btn-brown,
html[lang="ar"] button.backbtn,
html[lang="ar"] ul.top-contact li,
html[lang="ar"] .navbar-default .navbar-nav > li > a,
html[lang="ar"] .mobmenu-content li a,
html[lang="ar"] .slider-caption,
html[lang="ar"] .slider-caption p,
html[lang="ar"] .slider-caption h1,
html[lang="ar"] .copyright_info,
html[lang="ar"] .copyright_info a,
html[lang="ar"] .gform_wrapper,
html[lang="ar"] .gform_wrapper input,
html[lang="ar"] .gform_wrapper textarea,
html[lang="ar"] .gform_wrapper select,
html[lang="ar"] .gform_wrapper label,
html[lang="ar"] .gform_wrapper .gform_button,
html[lang="ar"] .sow-entry-title,
html[lang="ar"] .blog-content h2.sow-entry-title,
html[lang="ar"] .sow-entry-content p,
html[lang="ar"] .page-numbers,
html[lang="ar"] .wpm_6310_team_style_1_title,
html[lang="ar"] .wpm_6310_team_style_1_designation,
html[lang="ar"] .wpm_6310_modal_title,
html[lang="ar"] .wpm_6310_modal_designation,
html[lang="ar"] .wpm_6310_modal_description,
html[lang="ar"] .sow-accordion-panel-title,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
  font-family: 'Poppins', var(--font-arabic), 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Icon fonts must keep their own families (the rule above is broad). */
html[lang="ar"] .fa,
html[lang="ar"] [class^="fa-"],
html[lang="ar"] [class*=" fa-"] {
  font-family: 'FontAwesome' !important;
}
html[lang="ar"] [class^="mob-icon-"],
html[lang="ar"] [class*=" mob-icon-"] {
  font-family: 'mobmenu' !important;
}
html[lang="ar"] [class^="sow-sld-icon-"],
html[lang="ar"] [class*=" sow-sld-icon-"] {
  font-family: 'so-slider-pointers' !important; /* the real family name (slider.css) */
}
html[lang="ar"] .sow-icon-ionicons,
html[lang="ar"] [class^="ion-"],
html[lang="ar"] [class*=" ion-"] {
  font-family: 'sow-ionicons' !important; /* the real family name (ionicons/style.css) */
}

/* Body copy: ~10% larger, line-height ~1.7 (theme: 16px / 30px). Body copy only:
   the top bar, header, menus and footer keep their English 12-14px sizes, so the
   chrome looks and fits exactly as in English. */
html[lang="ar"] :is(p, ul li, ol li):not(:is(.top, .header, .mobmenu-panel, .mobmenu-content, .footer, .copyright_info) *) {
  font-size: 17.5px;
  line-height: 1.75 !important;
}
/* Headings: line-height at least 1.4 (theme 42/52, 36/46 etc. are ~1.25). */
html[lang="ar"] h1,
html[lang="ar"] .title,
html[lang="ar"] p.titletext { line-height: 1.4 !important; }
html[lang="ar"] h2 { line-height: 1.4 !important; }
html[lang="ar"] h3 { line-height: 1.45 !important; }
html[lang="ar"] h4 { line-height: 1.45 !important; }
html[lang="ar"] h5 { line-height: 1.5 !important; }
html[lang="ar"] h6 { line-height: 1.5 !important; }

/* Hero copy on the home + sow-hero pages keeps its scale but gets room to breathe. */
html[lang="ar"] .slider-caption .container h1.bannertitle,
html[lang="ar"] .sow-slider-image-wrapper h1 { line-height: 1.35 !important; }
html[lang="ar"] .slider-caption .container p.bannertext,
html[lang="ar"] .sow-slider-image-wrapper p { line-height: 1.7 !important; }

/* Desktop nav labels. From 1249px the theme switches to padded inline labels and the
   Arabic labels fit on one line: keep them there. Between 889px and 1248px the theme
   gives each item a fixed 70 to 120px box and English wraps its labels to two lines
   inside it; Arabic must wrap the same way, or long labels spill into the next item
   (seen 2026-10-24 at 1024 and 1100). No ellipsis, ever. */
html[lang="ar"] .navbar-default .navbar-nav > li > a {
  letter-spacing: 0 !important;
}
@media (min-width: 1249px) {
  html[lang="ar"] .navbar-default .navbar-nav > li > a {
    white-space: nowrap;
  }
}
/* In the same 889-1248px range the theme drops items 5 and 7 by 15px so the English
   one-line labels centre against the two-line ones. Arabic wraps a different set of
   labels, so give every label the same 68px box and centre it instead. */
@media (min-width: 889px) and (max-width: 1248px) {
  html[lang="ar"] .navbar-default .navbar-nav > li > a {
    min-height: 68px;
    align-items: center;
    margin-top: 0 !important;
  }
}

/* ── 2. Text direction ──────────────────────────────────────────────────── */

/* Text blocks read right to left inside their own (unmoved) box. A list item is
   text only when it holds no layout: the hero slider, cards and blog lists are
   built from <li>s that contain columns and images, and `direction` on those
   would reverse their rows (found by the layout check, 2026-10-29). */
html[lang="ar"] :is(p, h1, h2, h3, h4, h5, h6, blockquote, figcaption, caption,
  dt, dd, td, th, label, legend, address, input, textarea),
html[lang="ar"] li:not(:has(div, figure, section, article, img, picture, video, iframe)),
/* Text held directly in a <div> by the ported widgets (no <p> inside). */
html[lang="ar"] :is(.wpm_6310_team_style_1_title, .wpm_6310_team_style_1_designation,
  .wpm_6310_modal_title, .wpm_6310_modal_designation, .wpm_6310_modal_description,
  .gfield_description, .gfieldhtml, .gform_confirmation_message, .validation_message,
  .gform_validation_errors) {
  direction: rtl;
}

/* Inline text inside a left-to-right line (dates in post meta, footer legal
   links): reads right to left without moving the line. */
html[lang="ar"] :is(time, .copyright_info a, .sow-entry-meta span, .sow-entry-meta a) {
  direction: rtl;
  unicode-bidi: isolate;
}

/* Flex rows that hold an icon and text: accordion titles (icon, then question)
   and the inline-styled detail rows in posts (date / location / time icons).
   Right to left for the text, row-reverse so the icon stays on the English side.
   An inline `flex-direction` in the content still wins over this. */
html[lang="ar"] .sow-accordion-title,
html[lang="ar"] :is(p, li, h1, h2, h3, h4, h5, h6):is([style*="display: flex"], [style*="display:flex"]) {
  direction: rtl;
  flex-direction: row-reverse;
}

/* Testimonial quote set straight in a <div> (aircraft sales): its quote marks are
   absolutely positioned, so only the text direction changes. Never a flex row:
   the same slot holds the logo row on the New Air Club page. */
html[lang="ar"] .flying-section .col-md-10 > div[style]:not([style*="display: flex"], [style*="display:flex"]) {
  direction: rtl;
}

/* Controls and navigation keep the English direction: their arrows, chevrons and
   icons stay on the English side, and list-based menus keep their item order.
   A paragraph that only holds a button is a control row, not text: it keeps the
   English alignment so the button does not jump to the other side. */
html[lang="ar"] :is(.btn, .btn-theme, .btn-transparent, .btn-brown, .backbtn,
  .blog-backbtn, .blog-readmorebtn, button, input[type="submit"], input[type="button"],
  input[type="image"], .page-numbers, .sow-nav-links),
html[lang="ar"] p:has(> :is(.btn, .btn-theme, .btn-transparent, .btn-brown, .backbtn,
  .blog-backbtn, .blog-readmorebtn, input[type="submit"], button):only-child),
html[lang="ar"] :is(.navbar-nav, .dropdown-menu, .top-contact, .pull-left, .pull-right,
  .mobmenu-content, .mobmenu-panel, .sow-slider-pagination, .carou-direction-nav,
  .social-icons, .gfield_radio, .gfield_checkbox, [class*="locale-menu-module"]) li {
  direction: ltr;
}

/* A button inside a paragraph of text (the vacancies' "job description" links,
   after the copy): the text reads right to left, the button stays at the English
   (left) edge on its own line. */
html[lang="ar"] p:not(:has(> :is(.btn, .btn-theme, .btn-transparent, .btn-brown):only-child))
  > :is(.btn, .btn-theme, .btn-transparent, .btn-brown) {
  display: table;
  margin-right: auto !important; /* the theme zeroes button margins with !important */
}

/* ── 3. Text alignment ──────────────────────────────────────────────────── */

/* With `direction: rtl` a text block's default alignment (start) is the right
   edge. These theme rules force `text-align: left` on text instead (audited
   2026-10-29): bootstrap `.text-left` and `th`, WordPress `.has-text-align-left`,
   the blog post body, the home/pillar alternating rows (`div.parent`,
   `div.parent2`, left below 768px), the footer office block (`!important`) and
   the form headings (`!important`). Turn each to the reading start. Centred
   English text is never touched; the layout check compares every text
   element's alignment with English. */
html[lang="ar"] :is(.text-left, .has-text-align-left, th),
html[lang="ar"] :is(.text-left, .has-text-align-left) :is(p, h1, h2, h3, h4, h5, h6, li),
html[lang="ar"] .blog-item .blog-content .post-content,
html[lang="ar"] :is(div.parent, div.parent2) :is(p, h1, h2, h3, h4, h5, h6, li):not(:has(> :is(.btn,
  .btn-theme, .btn-transparent, .btn-brown, .backbtn, .blog-backbtn, .blog-readmorebtn, button))) {
  text-align: right;
}
html[lang="ar"] .bottomquotebg-section :is(h2, h6, p.tstext),
html[lang="ar"] .form-section .gform_heading :is(.gform_title, .gform_description) {
  text-align: right !important;
}

/* ── 4. Bidi helpers ────────────────────────────────────────────────────── */

/* Latin/number runs the import wraps in <bdi>: isolate, keep inline. */
html[lang="ar"] bdi { unicode-bidi: isolate; }

/* Email, phone and URL fields are LTR data (set on the inputs by the form; this
   covers migrated HTML inputs too). Aligned with the Arabic fields around them. */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"] {
  direction: ltr;
  text-align: right;
}

/* Controls with a built-in icon keep the English direction AND alignment so the
   icon stays on the English side and the value never runs into it: the select
   chevron (in RTL the Arabic label ran over it; Chrome draws the label in the
   selected <option>'s direction, so options stay LTR too), the number spinner
   and the date picker (both moved left in RTL). Numbers and dates are
   left-to-right data. */
html[lang="ar"] :is(select, option, input[type="number"], input[type="date"], input[type="time"]) {
  direction: ltr;
  text-align: left;
}

/* Phone numbers in the chrome. */
html[lang="ar"] ul.top-contact li.contact a,
html[lang="ar"] .main-heading a.contact,
html[lang="ar"] .main-heading a.footer-phone,
html[lang="ar"] .menu-contactn a {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* ── 5. Component fixes ─────────────────────────────────────────────────── */

/* Buttons grow with their label (Arabic labels run longer than English). The theme
   sets white-space: nowrap on several button styles; in Arabic a long label could then
   overflow its column at narrow widths (seen at 320px on the quote pages). Let a label
   wrap inside its own container only when it genuinely does not fit; the inline arrow
   (::after) flows with the text, so the icon never overlaps it. */
html[lang="ar"] .btn,
html[lang="ar"] a.btn,
html[lang="ar"] .btn-theme,
html[lang="ar"] .btn-brown,
html[lang="ar"] a.btn-transparent,
html[lang="ar"] .blog-backbtn,
html[lang="ar"] .blog-readmorebtn {
  max-inline-size: 100%;
  white-space: normal !important;
  text-wrap: balance;
}

/* Home hero headline on small phones: the Arabic line is longer than the English one
   and ran to 6 lines at 40px (English: 4), pushing the CTA below the fold. Step the
   size down and balance the lines; 481px and up keep the theme size. */
@media (max-width: 480px) {
  html[lang="ar"] .slider-caption .container h1.bannertitle {
    font-size: 32px !important;
    text-wrap: balance;
  }
}