/*
 * Golden Chemicals Atrium — right-to-left overrides.
 *
 * Loaded only on Arabic pages, on top of style.css.
 *
 * The layout itself needs almost nothing: style.css uses logical
 * properties (padding-inline, border-inline-end, text-align: start),
 * so the grid, cards and footer mirror themselves. What does need
 * saying is everything below:
 *
 *   1. Arabic typefaces, with the Latin faces kept in front so that
 *      "Golden Chemicals" and "200 L" still render in Archivo.
 *   2. letter-spacing has to go. In Arabic it pulls joined letters
 *      apart and the word stops being a word.
 *   3. Arabic sits taller than Latin, so line-height goes up.
 *   4. The three places that are genuinely hard-coded to a side:
 *      the hero wash, the production band wash, and the skip link.
 */

/* ============================================================
   1. TYPE
   ============================================================ */
:root {
  /* Latin first: Archivo and Cormorant have no Arabic glyphs, so
     Arabic falls through to Almarai and Amiri automatically. */
  --serif: "Cormorant Garamond", "Amiri", Georgia, serif;
  --sans:  "Archivo", "Almarai", system-ui, sans-serif;
}

/* ============================================================
   2. LETTER-SPACING
   ============================================================ */
.gc-topbar,
.gc-brand__sub,
.gc-eyebrow,
.gc-kicker,
.gc-spec__k,
.gc-foot__h,
.gc-card__meta,
.gc-range__no,
.gc-btn,
.gc-lang,
.gc-hero__h1,
.gc-h2,
.gc-proof__h,
.gc-cta__h,
.gc-point__h,
.gc-prose h1,
.gc-prose h2,
.gc-prose h3,
.gc-page__title {
  letter-spacing: normal;
}

/* Small caps lettering loses its spacing, so give it weight instead. */
.gc-eyebrow,
.gc-kicker,
.gc-spec__k,
.gc-foot__h,
.gc-brand__sub {
  font-weight: 700;
}

/* Arabic has no italic. Synthetic slanting just smears it. */
.gc-hero__h1 em,
.gc-prose em,
em {
  font-style: normal;
}

/* ============================================================
   3. VERTICAL RHYTHM
   ============================================================ */
.gc-hero__h1 { line-height: 1.3; max-width: 20ch; }
.gc-h2,
.gc-proof__h,
.gc-cta__h { line-height: 1.35; max-width: 22ch; }
.gc-point__h { line-height: 1.5; }

.gc-hero__lede,
.gc-sec__note,
.gc-range__body,
.gc-seg__body,
.gc-split__body,
.gc-proof__p,
.gc-point__p,
.gc-ticks,
.gc-foot__blurb,
.gc-cta__p {
  line-height: 1.95;
}

.gc-prose p,
.gc-prose li { line-height: 2; }

/* Arabic numerals and Latin pack sizes read small beside Arabic text. */
.gc-spec__v { line-height: 1.4; }

/* ============================================================
   4. THE SIDES THAT ARE HARD-CODED
   ============================================================ */

/* Hero: the headline moves to the right, so the ink wash follows it
   and the photograph slides the other way to stay uncovered. */
.gc-hero__bg { background-position: 28% center; }
.gc-hero__bg::after {
  background:
    linear-gradient(270deg,
      rgba(12, 12, 11, 0.97) 0%,
      rgba(12, 12, 11, 0.92) 34%,
      rgba(12, 12, 11, 0.62) 58%,
      rgba(12, 12, 11, 0.30) 100%),
    linear-gradient(180deg,
      rgba(12, 12, 11, 0.55) 0%,
      rgba(12, 12, 11, 0) 28%,
      rgba(12, 12, 11, 0) 72%,
      rgba(12, 12, 11, 0.55) 100%);
}

/* Production band: same reasoning. */
.gc-proof__bg { background-position: 30% center; }
.gc-proof__bg::after {
  background: linear-gradient(270deg,
    rgba(12, 12, 11, 0.96) 0%,
    rgba(12, 12, 11, 0.90) 38%,
    rgba(12, 12, 11, 0.55) 68%,
    rgba(12, 12, 11, 0.25) 100%);
}

/* Skip link parks off the right edge instead of the left. */
.gc-skip { left: auto; right: -9999px; }
.gc-skip:focus { left: auto; right: 0; }

/* Arrows point the way the language runs. */
.gc-arrow { display: inline-block; transform: scaleX(-1); }

/* ------------------------------------------------------------
   Latin inside Arabic
   ------------------------------------------------------------
   A phone number or "500 ml – 200 L" dropped into a right-to-left
   line gets taken apart and reassembled by the browser: the digits
   run one way, the units the other, and "500 ml – 200 L" arrives as
   "ml – 200 L 500". Each of these holds text the owner typed, so
   each needs its own direction.

   plaintext  — take the direction from the first real letter, so an
                Arabic value still reads right-to-left.
   isolate    — keep this run out of the surrounding sentence's
                ordering, for values that are always Latin.
   ------------------------------------------------------------ */
.gc-spec__v,
.gc-range__sizes,
.gc-foot__col li {
  unicode-bidi: plaintext;
  text-align: right;
}

.gc-topbar__accent a,
.gc-foot__col a[href^="tel"],
.gc-foot__col a[href^="mailto"],
.gc-cta__btns a[href^="tel"],
.gc-lang[lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ============================================================
   5. NARROW SCREENS
   ============================================================ */
@media (max-width: 720px) {
  .gc-hero__bg { background-position: 22% center; }
  .gc-hero__h1 { line-height: 1.35; }
}