/* Language switcher — English <-> Arabic.

   One component, three placements: the desktop header bar (black), the mobile
   off-canvas panel (white), and the footer copyright band (#E8F6F1). The site
   is bilingual, not multilingual, so this is a direct toggle rather than a
   dropdown — the label always names the language you would switch TO, written
   in its own script, which is the one convention users recognise without
   having to read anything first.

   Colours come from tokens set on the element, so each placement re-points the
   same three variables instead of restating the rule. Default is the light
   treatment; only the desktop navbar overrides to the dark one. */

.reg-lang {
  --reg-lang-accent: #ff1e00;   /* --e-global-color-secondary; focus ring only */
  --reg-lang-fg:     #111;
  --reg-lang-bd:     #b0b8c1;
  --reg-lang-bg:     #fff;
  /* Hover fills with ink, not the brand red: white on #ff1e00 is 3.9:1, and at
     14.5px/600 this label is not large text, so red would fail AA. Ink also
     keeps the switcher from reading as a second CALL US NOW. */
  --reg-lang-fg-on:  #fff;
  --reg-lang-bd-on:  #111;
  --reg-lang-bg-on:  #111;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--reg-lang-bd);
  border-radius: 999px;
  background: var(--reg-lang-bg);
  color: var(--reg-lang-fg);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.reg-lang:hover,
.reg-lang:focus-visible {
  color: var(--reg-lang-fg-on);
  border-color: var(--reg-lang-bd-on);
  background: var(--reg-lang-bg-on);
  text-decoration: none;
}

/* Colour has to be restated per placement, because a bare .reg-lang (0,1,0) is
   outranked wherever this component lands: .elementor-kit-88 a (0,2,1) paints
   every footer link brand red, and the nav widget's
   .elementor-106 … .elementskit-navbar-nav > li > a (0,4,2) owns the header
   ones. Naming the three known placements clears both without !important,
   which would otherwise have to hose every property to win the same argument. */
#ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang,
.reg-lang-footer > a.reg-lang,
.nav > a.reg-lang {
  color: var(--reg-lang-fg);
  background: var(--reg-lang-bg);
  border-color: var(--reg-lang-bd);
  text-decoration: none;
}

#ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang:hover,
#ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang:focus-visible,
.reg-lang-footer > a.reg-lang:hover,
.reg-lang-footer > a.reg-lang:focus-visible,
.nav > a.reg-lang:hover,
.nav > a.reg-lang:focus-visible {
  color: var(--reg-lang-fg-on);
  background: var(--reg-lang-bg-on);
  border-color: var(--reg-lang-bd-on);
}

.reg-lang:focus-visible {
  outline: 3px solid var(--reg-lang-accent);
  outline-offset: 2px;
}

.reg-lang svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}

/* The label is the page's only run of the opposite script. Isolating it stops
   the bidi algorithm from reordering the anchor's contents around it. The
   anchor itself inherits the page's direction, so the globe lands on the
   leading edge either way: left of "العربية" on the English pages, right of
   "English" on the Arabic ones. */
.reg-lang__label {
  unicode-bidi: isolate;
}

/* The English pages load no Arabic webfont, and the theme's Latin stack falls
   back to whatever the OS picks. Name the system Arabic faces instead — one
   word does not justify a font request — and size up slightly, since Arabic
   reads small next to Latin at the same px. */
.reg-lang__label:lang(ar) {
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", sans-serif;
  font-size: 1.06em;
}

/* ------------------------------------------------------- header (Elementor) */
/* Elementor styles these links with
     .elementor-106 .elementor-element.elementor-element-f4d51f8
       .elementskit-navbar-nav > li > a            (0,4,2)
   which sets height:100% and padding:0 20px 0 0 — enough to flatten the pill.
   Scoping to the menu container's id clears it without !important, and names
   exactly the one nav this component is injected into. */

#ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item {
  display: flex;
  align-items: center;
}

#ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang {
  height: auto;
  padding: 6px 13px;
  margin: 4px 0 4px 6px;
  font-size: 14px;
}

@media (min-width: 1025px) {
  /* The nav widget and the CALL US NOW button divide a single column edge to
     edge, with no slack between them — dropping the pill in as-is pushed it
     onto a second row. Giving back half of each link's 20px trailing gap frees
     ~60px, which seats the switcher on one line down to roughly a 1340px
     viewport. Below that the nav wraps, which it already did without us. */
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li:not(.reg-lang-item) > a {
    padding-right: 10px;
  }

  /* The header bar is --e-global-color-primary (#000), so the pill inverts:
     an outlined chip on black that fills white on hover. Below 1025px the same
     markup sits in the white off-canvas panel and keeps the light default. */
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang {
    --reg-lang-fg: #fff;
    --reg-lang-bd: rgba(255, 255, 255, .42);
    --reg-lang-bg: transparent;
    --reg-lang-fg-on: #000;
    --reg-lang-bd-on: #fff;
    --reg-lang-bg-on: #fff;
  }
}

/* 1025-1200px is the tight band: the off-canvas has not taken over yet, the nav
   is still six items wide, and the column has shrunk with the viewport. Without
   this tier the pill dropped to a second row from about 1150px down. Trimming
   both sides a little further holds it on one line to 1050px; the 25px left
   before the off-canvas takes over is allowed to wrap. */
@media (min-width: 1025px) and (max-width: 1200px) {
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li:not(.reg-lang-item) > a {
    padding-right: 6px;
  }
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang {
    gap: 5px;
    padding: 5px 10px;
    margin-left: 2px;
    font-size: 13px;
  }
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 1024px) {
  /* Off-canvas panel. The links sit on padding:10px 15px, so the chip's edge
     lines up with their text column. The rule above it separates a utility
     control from the navigation proper. */
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item {
    margin-top: 10px;
    padding: 14px 15px 6px;
    border-top: 1px solid #e6e8ec;
  }
  #ekit-megamenu-main-menu-mega .elementskit-navbar-nav > li.reg-lang-item > a.reg-lang {
    margin: 0;
  }
}

/* ------------------------------------------------------------------ footer */

/* The copyright band's .elementor-widget-wrap is a flex container, so a plain
   <p> shrinks to its content and has nothing to centre. Claim the full row. */
.reg-lang-footer {
  width: 100%;
  margin: 0 0 14px;
  text-align: center;
}

/* ------------------------------------------------------- Arabic side (/ar/) */
/* ar.css is a standalone stylesheet with its own red; match it rather than
   pulling the Elementor palette across. */

html[dir="rtl"] .reg-lang {
  --reg-lang-accent: #e92627;
  --reg-lang-fg: #1d1a1a;
  --reg-lang-bd: #e6e0df;
}

html[dir="rtl"] .nav .reg-lang {
  margin-inline-start: 4px;
}

html[dir="rtl"] .reg-lang-footer {
  margin: 0 0 20px;
  text-align: start;
}

html[dir="rtl"] footer .reg-lang {
  --reg-lang-fg: #fff;
  --reg-lang-bd: #4a4444;
  --reg-lang-bg: transparent;
  --reg-lang-fg-on: #1d1a1a;
  --reg-lang-bd-on: #fff;
  --reg-lang-bg-on: #fff;
}