/* ============================================================
   Rooya - KSA-English (en_SA) overrides
   Scoped to html[lang="en-SA"], printed by language_attributes() for the en_SA Polylang locale, so
   nothing here reaches the UK (en_GB) or Arabic pages. Enqueued after rooya-style (functions.php).

   Why this file exists: en_SA borrows the Arabic images and videos (steps 06 to 09 on the MSEC
   clone, 9 Oct 2026). Those are composed for right-aligned Arabic copy: artwork on the left,
   breathing space on the right. English copy is left-to-right, so where a section keys its layout
   on [dir="rtl"] this file gives en_SA the same geometry with the text still reading LTR.
   Plain CSS, not SCSS, so it can be edited on the server; fold into src/scss as pages/ksa-en.scss
   when the gulp build next runs.
   ============================================================ */

/* ---- Home masthead: copy column moves to the right, where the Arabic cut leaves room ---- */
html[lang="en-SA"] .masthead-home .container {
  justify-content: flex-end;   /* same flex row as the base; the 520px copy column just docks right */
  padding-top: 140px;
  padding-bottom: 110px;
}
html[lang="en-SA"] .masthead-home {
  --mh-ar-pad-top: 170px;
  --mh-ar-pad-bottom: 140px;
  --mh-ar-clip-inset: 18%;
}
@media screen and (min-width: 901px) {
  html[lang="en-SA"] .masthead-home .container {
    padding-top: var(--mh-ar-pad-top);
    padding-bottom: var(--mh-ar-pad-bottom);
  }
}
@media screen and (min-width: 1201px) {
  /* narrows the clip from the right (physical, same as the Arabic rule): the gap lands under the copy */
  html[lang="en-SA"] .masthead-home__map video {
    padding-right: var(--mh-ar-clip-inset);
  }
}
@media screen and (max-width: 900px) {
  /* below 900 the video is dropped for a static artwork; use the Arabic cut, matching the desktop clip */
  html[lang="en-SA"] .masthead-home__map {
    background-image: url(../images/home/rooya-home-masthead-mobile-ar.jpg);
  }
}

/* ============================================================
   Step 12 (9 Oct 2026): the rest of the Arabic-keyed geometry and backdrops that follow the
   Saudi media en_SA now borrows. Each block is the [dir="rtl"] rule from rtl.scss re-scoped to
   html[lang="en-SA"], minus anything that is about text direction. Comments name the source line.
   ============================================================ */

/* ---- Backdrops chosen by CSS (rtl.scss 557, 986, 1082, 1103, 470): the asset audit cannot see these ---- */
html[lang="en-SA"] .company-hero::before {
  background-image: url(../images/company/rooya-company-masthead-ar-v3.jpg);
}
@media screen and (max-width: 900px) {
  html[lang="en-SA"] .company-hero::before {
    background-size: contain;
    background-position: bottom center;
    background-color: #fbfbfb;
  }
}
html[lang="en-SA"] .hardware-hero::before {
  background-image: url(../images/hardware/rooya-hardware-masthead-bg-v3-ar.jpg);
}
@media screen and (max-width: 900px) {
  html[lang="en-SA"] .hardware-hero::before { background-position: bottom right; }
}
html[lang="en-SA"] .contact-hero { background: #f4f9f5; }
html[lang="en-SA"] .contact-hero::before {
  background-image: url(../images/contact/rooya-contact-masthead-ar-v2.jpg);
}
html[lang="en-SA"] .terms { background: #F7F7F7; }
html[lang="en-SA"] .terms::before {
  background-image: url(../images/contact/rooya-contact-policies-ar.png);
}
html[lang="en-SA"] .home-s10--terms { background-color: #F7F7F7; }
html[lang="en-SA"] .solutions-s4__card::before {
  transform-origin: top right;
  background-image: url(../images/solutions/rooya-solutions-s5-shape1-ar.png);
}
html[lang="en-SA"] .solutions-s4__card::after {
  transform-origin: bottom left;
  background-image: url(../images/solutions/rooya-solutions-s5-shape2-ar.png);
}

/* ---- Home CTA surround (rtl.scss 806): white, because the section above it differs once the UK cards go ---- */
html[lang="en-SA"] .home-s10--home { background-color: var(--white); }

/* ---- Company and Contact offices: connector lines lifted to the shorter, London-less layout (rtl.scss 842, 865) ---- */
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) { --s3-line-lift: 238px; }
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) .company-s3__line--1 { top: calc(492px  - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) .company-s3__line--2 { top: calc(525px  - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) .company-s3__line--3 { top: calc(948px  - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) .company-s3__line--4 { top: calc(1044px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--staged:not(.company-s3--contact) .company-s3__line--5 { top: calc(1012px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--contact { --s3-line-lift: 25px; }
html[lang="en-SA"] .company-s3--contact .company-s3__line--1 { top: calc(307px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--contact .company-s3__line--2 { top: calc(340px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--contact .company-s3__line--3 { top: calc(763px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--contact .company-s3__line--4 { top: calc(859px - var(--s3-line-lift)); }
html[lang="en-SA"] .company-s3--contact .company-s3__line--5 { top: calc(827px - var(--s3-line-lift)); }

/* ---- Platform trip map, sized to the Arabic export (rtl.scss 1055) ---- */
html[lang="en-SA"] .platform-s5__map { width: 49.85%; top: 5.47%; }

/* ---- Solutions cards: room for the whole Saudi photo (rtl.scss 1134) ---- */
@media (hover: hover) {
  html[lang="en-SA"] .solutions-cbox__card:hover .solutions-cbox__card-media { height: 256px; }
}
@media (hover: none) {
  html[lang="en-SA"] .solutions-cbox__card-media { height: 256px; }
}

/* ---- Home S2 stage: not ported (Arabic quadrant geometry assumes right-aligned text) ---- */

/* ---- Step 12b: heroes and grids ----------------------------------------------------------
   The Company, Hardware and Contact heroes now carry the Arabic backdrops (maps on the left, room
   on the right), so the copy column docks right as it does on Arabic: the same flex row, reversed,
   text still LTR. Desktop only; below 900 the base stacks everything.
   Grids: Arabic runs the home solutions deck four across (rtl.scss, nested in the masthead media
   block) because the UK cards are gone; en_SA has the same four. Solutions keeps the calculator
   card that Arabic drops, so its grid needs four columns too. */
@media screen and (min-width: 901px) {
  html[lang="en-SA"] .company-hero__inner,
  html[lang="en-SA"] .hardware-hero__inner,
  html[lang="en-SA"] .contact-hero__inner { flex-direction: row-reverse; }
  html[lang="en-SA"] .company-hero__media img { margin-inline-start: 0; margin-inline-end: auto; }
  html[lang="en-SA"] .hardware-hero__media { justify-content: flex-start; }
}

/* ---- Step 16: mobile hero. The Arabic mobile artwork has its pins where right-aligned Arabic copy leaves
   room; LTR English copy runs over them, so below 900 the copy block gets a soft backdrop. ---- */
@media screen and (max-width: 900px) {
  html[lang="en-SA"] .masthead-home__hero-copy {
    background: rgba(255, 255, 255, 0.86);
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55);
  }
}