/* ==========================================================================
   Naval Orientation: Arabic typography
   ==========================================================================

   Loaded only when the page is in Arabic. It sets type, not layout — the
   right-to-left work lives in rtl.css beside it.

   The whole switch happens through three tokens. Every component in this theme
   resolves its typeface from --no-font-display, --no-font-body or
   --no-font-mono, so redefining those three under [lang="ar"] changes the
   typography of the entire site without touching a single component rule.

   Note what the stacks do NOT say: they do not drop the Latin faces. The
   Arabic faces are subset to Arabic ranges only, so inside an Arabic sentence
   a Latin word or a digit — IMO 0039842, ISO 9001, marine@navalorientation.com,
   +968 9882 4434 — resolves to Inter or JetBrains Mono exactly as it does on
   the English side. The two languages share their numerals, which is both the
   Gulf maritime convention and the client's decision.
   ========================================================================== */

[lang="ar"],
[lang^="ar-"] {
  --no-font-display: "IBM Plex Sans Arabic", "Sora", "Segoe UI", system-ui, sans-serif;
  --no-font-body:    "IBM Plex Sans Arabic", "Inter", "Segoe UI", system-ui, sans-serif;
  --no-font-mono:    "IBM Plex Sans Arabic", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /*
   * Arabic script sits on a baseline with deeper descenders and no ascender
   * gap to borrow from, so the Latin line-heights read as cramped. Each step
   * gains roughly 0.1, which is the smallest move that stops the diacritics of
   * one line touching the letters of the next.
   */
  --no-lh-tight:   1.32;
  --no-lh-snug:    1.45;
  --no-lh-normal:  1.85;
  --no-lh-relaxed: 2;

  /*
   * Letter-spacing is a Latin device. Arabic letters join, and spacing them
   * apart breaks the joins — it is not a style choice there, it is a spelling
   * error. Every tracking token resolves to zero.
   */
  --no-tr-tight: 0;
  --no-tr-snug:  0;
  --no-tr-wide:  0;
  --no-tr-wider: 0;

  /*
   * And the tracking that was written as a literal rather than as a token.
   * Thirty-two declarations across the component sheets set .06em, .1em,
   * -.025em and the like directly — on buttons, kickers, tags, stat labels,
   * breadcrumbs and captions. Each one now reads var(--no-tr-latin, .06em),
   * so English resolves to exactly the value it always had and Arabic
   * resolves to zero, here, once. A custom property inherits, so this single
   * declaration reaches all thirty-two without a specificity fight.
   */
  --no-tr-latin: 0;
}

/* ---------- Headlines ----------------------------------------------------
   Sora is set tight and negative-tracked; Plex Arabic at the same size reads
   smaller and needs the extra leading declared above. Weight also carries
   differently: 700 in Arabic is about as emphatic as 600 in Sora, so display
   headings step down one notch rather than shouting.
   ---------------------------------------------------------------------- */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] .no-hero__title,
[lang="ar"] .no-phero__title,
[lang="ar"] .no-shead__title,
[lang="ar"] .no-cta__title {
  letter-spacing: 0;
  line-height: var(--no-lh-snug);
  text-wrap: balance;
}
[lang="ar"] .no-hero__title,
[lang="ar"] .no-phero__title { font-weight: 700; }

/* ---------- The eyebrow --------------------------------------------------
   The site's signature is an uppercase mono label over a short accent rule:
   "24/7 OPERATIONS DESK", "OUR CORE MARITIME SERVICES". Arabic has no
   uppercase, and there is no maritime monospace Arabic to borrow the
   instrument feel from, so the two Latin devices carrying that gesture —
   capitals and wide tracking — cannot come across.

   What survives is the part that was doing the real work: the rule, the
   colour, the size, and the position. The Arabic eyebrow is the same size and
   the same colour in the same place, set at 600 so it holds its own against
   the body copy, with no transformation and no tracking.
   ---------------------------------------------------------------------- */
[lang="ar"] .no-kicker,
[lang="ar"] .no-topbar__item,
[lang="ar"] .no-fcol__title,
[lang="ar"] .no-cinfo__label,
[lang="ar"] .no-svcbar__label,
[lang="ar"] .no-svccovers__label,
[lang="ar"] .no-map__legend {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  /* The Latin sizes are set for capitals; Arabic lowercase-equivalent forms
     need a touch more to match their optical weight. */
  font-size: calc(var(--no-fs-2xs) * 1.08);
}

/* A code stays Latin and stays mono: OMSLL is read as an identifier in every
   language, and the mono face is what marks it as one.

   This list was longer. Measuring the Arabic build is what shortened it: three
   of the four elements on it turned out to hold prose rather than codes once
   the page was in Arabic. .no-svcnav__text small reads "Previous service",
   .no-cert__meta reads "Quality Management System", and .no-topbar__imo is a
   sentence with a number at the end of it. Setting those in a Latin monospace
   with tracking was wrong on all three counts — face, spacing, and the idea
   that they were identifiers at all. */
[lang="ar"] .no-port__code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
}

/* ---------- Running copy ------------------------------------------------- */
[lang="ar"] .no-lead,
[lang="ar"] .no-prose p,
[lang="ar"] .no-hero__lead,
[lang="ar"] .no-phero__lead {
  line-height: var(--no-lh-relaxed);
}

/* A justified Arabic paragraph without hyphenation opens rivers of whitespace;
   the script's own elongation is not available to a browser. Left ragged. */
[lang="ar"] p,
[lang="ar"] li { text-align: start; }

/* Latin fragments inside Arabic text — an address, a port code, a URL — keep
   their own direction so the punctuation lands on the correct side.
   -------------------------------------------------------------------------
   Two things this rule must not do, both learned the hard way in the pilot:

   It must not match any element carrying lang="en". The language switcher's
   English option is an <a lang="en">, and this rule was setting display on it,
   which blockified it out of its own flex layout and stacked the flag on top
   of the word. Inline elements only.

   And it must not set display at all. unicode-bidi: isolate does the whole
   job on an inline box; the display was never load-bearing. */
[lang="ar"] span[lang="en"],
[lang="ar"] bdi,
[lang="ar"] .no-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- The utility bar --------------------------------------------
   Arabic runs longer than English here, not shorter: "24/7 Operations Desk"
   is three words and "مكتب العمليات على مدار الساعة" is five. At 1280px the
   strip ran out of room and wrapped onto a second line, which pushed the
   language switcher down across the masthead. The IMO registration is the
   least urgent thing in the bar and the first to go. */
@media (max-width: 1360px) {
  [lang="ar"] .no-topbar__imo { display: none; }
}

/* ==========================================================================
   Phase 2: the things a token cannot reach
   ==========================================================================

   The block at the top of this file switches the whole site's typography
   through three tokens, and for type that is the right lever: every component
   resolves its face, its leading and its tracking from them, so redefining
   them redefines the site.

   What follows is the residue — the places where a component wrote a literal
   instead of a token, or where a Latin measurement is simply wrong for Arabic
   and no amount of token work will fix it. Each of the four below was found by
   measuring the Arabic build, not by reading the stylesheets.
   ========================================================================== */

/* ---------- 1. Tracking ---------------------------------------------------
   Handled entirely by --no-tr-latin at the top of this file. It is recorded
   here because this is where someone will look for it: every literal
   letter-spacing in the component sheets was rewritten as
   var(--no-tr-latin, <the original value>), so the Arabic zero arrives through
   inheritance rather than through a rule that has to outrank thirty-two
   others. The first attempt did use a rule — [lang="ar"] * — and it lost to
   every selector shaped like .no-field label, which is most of them.

   The chart labels are the one place a token cannot reach, because the value
   is on an SVG element inside a class. */
[lang="ar"] .no-map__pin text { letter-spacing: 0; }

/* ---------- 2. A floor under the line box ---------------------------------
   Compact components set line-height: 1 — a button, the language switcher, a
   tag. In Latin that is fine, because at those sizes Inter's ink fits inside
   its own em box.

   Arabic does not. Measured at the button's own size, a label reading
   "اطلب عرض سعر" draws 15px of ink into a 13px line box, and the button hides
   its overflow, so the descenders of ج ح خ ع and the final ي are cut off
   cleanly enough that nothing looks broken — it just quietly says something
   slightly different.

   1.35 is the smallest value that clears the descender at every size this
   theme uses, with enough left over that a diacritic does not touch the edge.
   The button grows about 4px. That is the correct height for the text in it. */
[lang="ar"] .no-btn,
[lang="ar"] .no-lang__opt,
[lang="ar"] .no-svc__tag,
[lang="ar"] .no-chip,
[lang="ar"] .no-badge,
[lang="ar"] button,
[lang="ar"] input,
[lang="ar"] select,
[lang="ar"] textarea,
[lang="ar"] .no-coverage__countries span,
[lang="ar"] .no-fcerts span { line-height: 1.35; }

/* ---------- 3. Where a word may break ------------------------------------
   Nine components carry word-break: break-word beside overflow-wrap, to stop
   a long English compound blowing out a narrow card.

   Arabic letters join, so a break inside a word does not merely hyphenate it —
   it re-forms the letters on both sides of the break into their isolated
   shapes, and the word becomes unreadable rather than merely split. Arabic
   words are also short enough that the case these rules were written for does
   not arise. overflow-wrap stays as the last resort; word-break goes. */
[lang="ar"] * { word-break: normal; }

/* ---------- 4. The service facts strip at phone width ---------------------
   Four facts in two columns, each column about 90px wide once the icon is
   taken out. The English values are two or three short words — "Port Agency",
   "Salalah · Duqm · Sohar" — and they fit.

   The Arabic ones are not. "الوكالة الملاحية وخدمات السفن" in 90px sets to
   five lines of two words, and the strip stops being a strip. One column is
   the honest answer: the same four facts, each on its own line, legible. */
@media (max-width: 620px) {
  [lang="ar"] .no-svcfacts__list { grid-template-columns: minmax(0, 1fr); }
  [lang="ar"] .no-svcfact:nth-child(even) { border-inline-start: 0; padding-inline-start: 0; }
}