/* =============================================================================
   LANGUAGE TOGGLE - moved out of the Webflow site FOOTER field on 2026-09-07.

   WHY IT MOVED. The footer field had reached 49,047 of its 50,000-character cap
   and nothing else could be added to it. These two blocks were 8,225 of those
   characters and are pure CSS, which this project serves from the asset host
   anyway - and hosted CSS ships on a `vercel deploy` with NO Webflow publish.

   WHY ITS OWN FILE, and not appended to v4skin-fix.css. Cascade position is
   load-bearing here. v4skin-fix.css loads BEFORE v4.css, faq.css and
   compliance.css, and all three carry their own .ctl-lang / .header-social
   rules that these blocks currently override by sitting last. Appending to
   v4skin-fix.css would silently hand those pages back to the older rules.
   This file is linked from the same place in the footer the <style> blocks
   occupied, so it still loads last and the cascade is unchanged.

   The two blocks below are VERBATIM from the footer field. Their own comments
   explain the design. Edit here now - the footer no longer has a copy.
   ============================================================================= */

/* ---- was <style id="v4lang-globe"> ---- */
/* ── Language toggle: globe + label ───────────────────────────────────────────
   Chosen from the six-option review (option 04). One control, every page that
   has one.

   TWO CLASSES, because two different headers build the control and neither
   knows about the other:
     .ctl-lang    injected into .hdr on the four .mtc equipment pages, and
                  already in the markup on home-v2
     .v4bar-lang  built by the v4 skin's header on the ~14 skinned nav pages
   Both are styled here or the "one design" would still be two.

   WHAT WAS WRONG. Measured: .ctl-lang 50x21, .v4bar-lang 49x22 - a 2.3:1
   ellipse around two capitals. The chip was written for the DARK home-v2
   header at font-size:12px/line-height:28px, where padding:0 14px is right.
   The skin's button rule then forces 15px/1.33, collapsing the height to 21px
   and leaving the padding alone; its contrast sweep also swaps the fill for a
   hairline outline, which is the treatment that makes an oversized box
   obvious. Removing the box removes the whole class of problem, and the globe
   carries the meaning so two letters no longer have to do it alone.

   The glyph is a mask, not an <img> or a background-image, so it takes
   currentColor and follows the label into any header - which matters because
   home-v2's header is navy and everything else is cream.

   Specificity note: an existing rule sets font-family:"Open Sans" !important
   via `html:lang(ar) .ctl-lang` (0,2,1). `html[lang] body` (0,2,2) is what
   clears it - `html body` alone (0,1,2) loses on Arabic pages. */

:root{
  --v4-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E");
}

html.v4skin body :is(.ctl-lang, .v4bar-lang){
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  text-transform:none !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto !important;
  height:auto !important;
  min-width:0;
  padding:4px 2px !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#000;
  text-decoration:none;
  cursor:pointer;
  transition:color .16s ease;
}

html.v4skin body :is(.ctl-lang, .v4bar-lang)::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background-color:currentColor;
  -webkit-mask:var(--v4-globe) center / contain no-repeat;
  mask:var(--v4-globe) center / contain no-repeat;
  opacity:.75;
  transition:opacity .16s ease;
}

html.v4skin body :is(.ctl-lang, .v4bar-lang):hover{color:#e65d00}
html.v4skin body :is(.ctl-lang, .v4bar-lang):hover::before{opacity:1}
html.v4skin body :is(.ctl-lang, .v4bar-lang):focus-visible{
  outline:2px solid #e65d00;
  outline-offset:3px;
  border-radius:3px !important;
}

/* SCOPE: html.v4skin, which is exactly "the pages related to home-v4".

   Not a hand-written page list - the skin's own gate already maintains one, and
   duplicating it would mean two lists to keep in step:

     var a=[18 page ids];
     var p=document.documentElement.getAttribute("data-wf-page");
     if(p!=="6a72435d95f076739f80e7f6" && a.indexOf(p)>-1)
       document.documentElement.classList.add("v4skin");

   So html.v4skin resolves to those 18 pages and nothing else. Two consequences
   worth knowing:

   - home-v2 is EXCLUDED already, by that gate's explicit p!== test. It shares
     the .ctl-lang class but it is the old landing page with a navy header, and
     its chip was never the broken one anyway (45x32, a sane 1.4:1 - it is the
     design the chip was originally drawn for). Nothing here reaches it.
   - home-v4 itself is NOT in the allow-list, because it is the source design
     rather than a page the skin is applied to. It also has no language control
     of any kind in its header, so there is nothing on it for this to style. If
     one is ever wanted there it has to be added to that header first. */

/* Reduced motion: the only motion here is a colour/opacity fade, but honour it. */
@media (prefers-reduced-motion: reduce){
  html.v4skin body :is(.ctl-lang, .v4bar-lang),
  html.v4skin body :is(.ctl-lang, .v4bar-lang)::before{transition:none}
}

/* ---- was <style id="v4lang-globe-hv4"> ---- */
/* Appended after v4lang-globe, which already defines --v4-globe.
   Kept as a separate block so the 970-line footer did not need a
   select-all replace to add one page. */

/* ── home-v4, the landing page ────────────────────────────────────────────────
   A THIRD implementation, and the reason the landing page did not change when
   the two classes above were styled. home-v4 carries neither .ctl-lang nor
   .v4bar-lang, and no .v4skin either - it is the source design, not a page the
   skin is applied to. Its control is:

     .header-social > .mt-lang > a[hreflang="en"] + a[hreflang="ar"]

   i.e. TWO 44px circles - the current language filled, the other outlined -
   sitting as the fourth item in a row of circular social buttons (Instagram,
   LinkedIn, TikTok). The ring is on .mt-lang itself, not on the anchors, so
   both have to be cleared.

   COLOUR MUST BE INHERITED, NOT SET. This header re-inks itself by state: the
   nav links and social icons measured rgb(255,255,255) on one read and
   rgb(16,17,18) on another, at the same scroll position. A hardcoded #fff
   shipped a toggle that was invisible against the cream state - caught in
   testing. Inheriting means it resolves to whatever ink the rest of the header
   is using, verified matching its neighbouring social icon in both states, and
   the globe follows for free because the mask paints in currentColor.

   The label is rewritten to AR / EN so it reads the same as every other page.
   The original Arabic glyph was a nicer touch and is one line to restore:
   delete the two ::after rules and un-hide the span. */
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  padding:0 !important;
  width:auto !important;
  min-width:0 !important;
  gap:0;
  margin-inline-start:8px;
}
/* every other page shows only the way OUT of the current language; match that */
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a[aria-current="true"]{
  display:none !important;
}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a{
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:4px 2px !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:inherit !important;
  text-decoration:none;
  transition:opacity .16s ease;
}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background-color:currentColor;
  -webkit-mask:var(--v4-globe) center / contain no-repeat;
  mask:var(--v4-globe) center / contain no-repeat;
  opacity:.75;
}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a > span{display:none}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a[hreflang="ar"]::after{content:"AR"}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a[hreflang="en"]::after{content:"EN"}
html[data-wf-page="6a86d456f2cdcfd9b3dd82a4"] body .mt-lang a:hover{opacity:.7}