/* WeData brand overrides.
   Scoped to pages built by the pipeline (body.wd-brand).

   HISTORY — read before adding anything here:
   v1.1.0 tried to re-point the theme's demo gradient by force-setting
   `background-image` on `.heading-text`, `.img-icon`, `.icon` and `.button`.
   That broke two things on the live pages:
     * footer headings use the gradient as TEXT (background-clip:text). Forcing a
       background-image on elements that lack the clip painted a solid purple block
       behind the words.
     * `.img-icon` / `.icon` are the wrappers that CONTAIN the icon image, so a
       forced background hid the icon until hover.
   Rule: never set background on a shared theme class from here. Colour belongs in
   the Elementor data (spec `replace_text` / per-widget colour keys), which only
   affects the page being built. This file stays empty unless something genuinely
   cannot be reached from Elementor settings — and then it must be verified in the
   browser on both a built page and the footer before shipping. */

/* Footer newsletter (CF7 replaces the unconfigured Mailchimp widget). Scoped to our own class only. */
.wd-newsletter{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wd-newsletter p{margin:0;flex:1 1 100%;display:flex;gap:10px;align-items:center}
.wd-newsletter .wpcf7-form-control-wrap{flex:1 1 220px;display:block}
.wd-newsletter input[type=email]{width:100%;height:50px;border-radius:30px;border:1px solid #DCEBFB;padding:0 20px;background:#fff;color:#0D0430;font-size:15px;outline:none}
.wd-newsletter input[type=email]:focus{border-color:#0A63C7}
.wd-newsletter input[type=submit]{height:50px;border-radius:30px;background:#0A63C7;color:#fff;border:0;padding:0 26px;font-weight:600;cursor:pointer;transition:background .2s}
.wd-newsletter input[type=submit]:hover{background:#0084FF}
.wd-newsletter .wpcf7-spinner{margin:0 6px}
.wd-newsletter .wpcf7-not-valid-tip{flex:1 1 100%;font-size:13px;color:#C0392B;padding:0 12px}
.wpcf7 form .wpcf7-response-output{margin:10px 0 0;padding:8px 14px;border-radius:12px;font-size:14px}

/* Linked service cards (hub pages, activity -> systems cards): whole card clickable, visible CTA. */
.elementor-widget-service.wd-card-link { cursor: pointer; }
.elementor-widget-service.wd-card-link .wd-card-title-link { color: inherit; text-decoration: none; }
.elementor-widget-service.wd-card-link:hover .wd-card-title-link { color: #0A63C7; }
.elementor-widget-service.wd-card-link:hover > .elementor-widget-container { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(50,39,175,.12); transition: transform .2s ease, box-shadow .2s ease; border-radius: 20px; }
.elementor-widget-service.wd-card-link a[href]:not(.wd-card-title-link) { font-weight: 700; color: #0A63C7; font-size: 15px; opacity: 1; }

/* The theme paints the page body BLACK under the sections. Whenever a section's CSS is late (Elementor
   regenerating a stylesheet, slow network) the whole page flashes dark. Keep the canvas light. */
html, body { background-color: #FFFFFF !important; }
body.wd-brand, body.home { background-color: #FFFFFF !important; }

/* Header breakpoint: the wide bar carries logo + 5 menu items + 2 buttons + 2 icons, which only fits
   comfortably from ~1200px up. Below that use the compact (hamburger) bar the theme already ships,
   instead of letting the menu run into the logo. Scoped to the header only. */
@media (min-width: 1025px) and (max-width: 1199px) {
  #tahefobu-header #header-bar { display: none !important; }
  #tahefobu-header .elementor-hidden-desktop { display: flex !important; }
}

/* Mega panel on phones/tablets: the quick list (and the two CTA buttons that live with it) come first,
   the chosen group opens underneath it. On desktop the list stays as the side column. */
@media (max-width: 1024px) {
  .elementor-popup-modal .wd-panel-nav { order: -1; width: 100% !important; }
  /* on a phone the list is the whole sheet: its grey block used to stop mid screen with white under it */
  .elementor-popup-modal .wd-panel-nav { background: transparent !important; }
  .elementor-popup-modal .wd-panel-nav .elementor-nav-menu li a { padding-block: 12px; }
}

/* Panel sub-view on phones: list first, chosen group opens as its own screen with a back bar. */
@media (max-width: 1024px) {
  .wd-back-bar {
    display: none; order: -2; width: 100%; align-items: center; gap: 10px; cursor: pointer;
    background: #F4F9FF; border: 0; border-bottom: 1px solid #DCEBFB; padding: 14px 18px;
    font-family: inherit; font-size: 15px; font-weight: 600; color: #0A63C7; text-align: start;
  }
  /* a chevron that points back: right in Arabic, left in English. Built from two physical borders,
     because the logical ones rotated into an up-arrow. */
  .wd-back-bar .wd-back-arrow {
    width: 9px; height: 9px; display: inline-block; flex: 0 0 auto;
    border-top: 2px solid #0A63C7; border-right: 2px solid #0A63C7; transform: rotate(45deg);
  }
  html:not([dir="rtl"]) .wd-back-bar .wd-back-arrow {
    border-right: 0; border-left: 2px solid #0A63C7; transform: rotate(-45deg);
  }
  /* the two CTA buttons belong to the list screen; hiding only the buttons left their container
     behind as an empty grey box */
  .elementor-popup-modal.wd-sub-open .wd-cta-wrap { display: none !important; }
  /* "تصفّح WEDATA" is decorative and costs a screenful on a phone; the back bar names the group */
  .elementor-popup-modal .wd-panel-title { display: none !important; }
  .elementor-popup-modal.wd-sub-open .wd-back-bar { display: flex; }
  /* the panel should read as a screen of its own, not a card with the page showing under it
     (:has keeps this to the menu panel; browsers without it just skip the rule) */
  .elementor-popup-modal:has(.wd-panel-nav) .dialog-widget-content { min-height: 100vh; }
  /* the group show/hide rules live in menu.css - it owns the tab display rules and loads after this file */
}

/* The theme paints a few chrome pieces with its own hard-coded purple (#6766FF), which no data-level
   recolour can reach. Client 06/09: the logo colour everywhere, no purple. */
.widget-top, #scrollUp { background: #0A63C7 !important; }
.widget-top:hover, #scrollUp:hover { background: #0084FF !important; }

/* Button hover overlays (client 07/09: "في الهوفر مش بشوف حاجة").
   The button widget paints a sweep over itself on hover: white on style 5 (the header buttons) and
   #6766FF - the theme purple we removed everywhere - on style 9 (the page CTAs). With our white hover
   label the first one hid the text completely, and the second brought the purple back on hover.
   The sweep now uses the logo blue, and the header buttons drop it for a plain colour change. */
.dreamit-button a.button::before,
.dreamit-button a.button::after { background: #0A63C7 !important; }
.dreamit-button a.button:hover { color: #FFFFFF !important; }
.dreamit-button a.button:hover i { color: #FFFFFF !important; }
#tahefobu-header .dreamit-button a.button::before,
#tahefobu-header .dreamit-button a.button::after { display: none !important; content: none !important; }
#tahefobu-header .dreamit-button a.button {
  overflow: visible !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
/* the arrow inside the header buttons follows the reading direction */
#tahefobu-header .dreamit-button a.button i { margin-left: 0 !important; margin-inline-start: 8px !important; }
/* Spacing in the action group. The container gap alone did not land (Elementor applies it to the inner
   wrapper, and the widgets sit at different depths depending on the container type), so the gap is zeroed
   and the distance comes from a margin on every item after the first - deterministic in both shapes. */
#tahefobu-header .elementor-element-ef4b143,
#tahefobu-header .elementor-element-ef4b143 > .e-con-inner,
#tahefobu-header .elementor-element-cc9df3d,
#tahefobu-header .elementor-element-cc9df3d > .e-con-inner {
  --gap: 0px !important; --column-gap: 0px !important; column-gap: 0 !important;
}
#tahefobu-header .elementor-element-ef4b143 > .elementor-element + .elementor-element,
#tahefobu-header .elementor-element-ef4b143 > .e-con-inner > .elementor-element + .elementor-element,
#tahefobu-header .elementor-element-cc9df3d > .elementor-element + .elementor-element,
#tahefobu-header .elementor-element-cc9df3d > .e-con-inner > .elementor-element + .elementor-element {
  margin-inline-start: 28px !important;   /* this selector outranks the per-id rules below, so it carries
                                             the real value - keep the two in step */
}
/* The real cause of the "stuck together" buttons: the action container hands its widgets
   `--container-widget-flex-grow:1` and a computed width of 0, so each widget box came out NARROWER than
   its own pill (112px box holding a 172px button). The pills then overflowed their boxes and overlapped
   each other by ~32px however big the gap between the boxes was. Sizing every item to its content makes
   the gap real. */
#tahefobu-header .elementor-element-ef4b143 > .elementor-element,
#tahefobu-header .elementor-element-ef4b143 > .e-con-inner > .elementor-element,
#tahefobu-header .elementor-element-cc9df3d > .elementor-element,
#tahefobu-header .elementor-element-cc9df3d > .e-con-inner > .elementor-element {
  --container-widget-width: auto !important;
  --container-widget-flex-grow: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Belt and braces: the same spacing addressed on each widget by id, so it does not depend on the
   container's gap or on where Elementor nests the widgets (the two buttons still read as one blob
   otherwise - client 07/09 sent a zoom of them touching). */
#tahefobu-header .elementor-element-1c666bc { margin-inline-start: 28px !important; }
#tahefobu-header .elementor-element-wdlangd,
#tahefobu-header .elementor-element-wdlangm,
#tahefobu-header .elementor-element-22c9db8b,
#tahefobu-header .elementor-element-9208693 { margin-inline-start: 28px !important; }
#tahefobu-header .elementor-element-ef4b143 { padding-inline-start: 24px !important; }

/* Header bar polish (client 07/09). Layout only - every colour lives in the widget data.
   The three action items (two buttons, language pill, menu button) are put on one baseline with one
   height, so nothing looks stuck to anything else. */
#tahefobu-header .elementor-element-ef4b143,
#tahefobu-header .elementor-element-cc9df3d { align-items: center; }
#tahefobu-header .elementor-element-ef4b143 > .e-con-inner,
#tahefobu-header .elementor-element-cc9df3d > .e-con-inner { align-items: center; }
#tahefobu-header .elementor-widget-dit-button a,
#tahefobu-header .elementor-widget-dit-button .dit-btn {
  display: inline-flex !important; align-items: center; gap: 8px;
  min-height: 40px; white-space: nowrap; line-height: 1;
}
/* the menu button reads as a button, not a stray glyph, and matches the language pill next to it */
#tahefobu-header .open-mega-menu .elementor-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid #CFE4FA; background: #FFFFFF;
  transition: border-color .15s ease, background-color .15s ease;
}
#tahefobu-header .open-mega-menu .elementor-icon:hover { border-color: #0A63C7; background: #F4F9FF; }
#tahefobu-header .open-mega-menu .elementor-icon svg,
#tahefobu-header .open-mega-menu .elementor-icon i { width: 20px; height: 20px; font-size: 18px; line-height: 1; }

/* Language switcher pill (client 07/09): flag of the language you are reading + its code. */
#tahefobu-header .wd-lang-icon a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
  height: 40px; padding: 0 12px; border: 1px solid #CFE4FA; border-radius: 999px;
  background: #FFFFFF; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
#tahefobu-header .wd-lang-icon a:hover { border-color: #0A63C7; background: #F4F9FF; }
#tahefobu-header .wd-lang-icon .wd-flag {
  width: 20px; height: 14px; display: block; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: 0 0 auto;
}
#tahefobu-header .wd-lang-icon .wd-flag svg { display: block; width: 100%; height: 100%; }
#tahefobu-header .wd-lang-icon .wd-lang-code {
  font-size: 12px; font-weight: 700; color: #0A63C7; text-transform: uppercase; letter-spacing: .04em;
}

/* 404 and search results are the theme's own templates, and they still carried its dark purple demo
   banner behind the header (client 07/09: "لما بنحط لينك خطأ الهيدر بيطلع بايظ"). */
body.error404 .breadcumb-area,
body.search .breadcumb-area {
  background-image: none !important;
  background-color: #F4F9FF !important;
  border-bottom: 1px solid #E6F2FF;
}
body.error404 .breadcumb-area *,
body.search .breadcumb-area * { color: #0D0430 !important; }
body.error404 .not-found-area,
body.search .blog-area { background: #FFFFFF; }
body.error404 .not-found h2 { color: #0A63C7 !important; font-weight: 800; }
body.error404 .not-found p { color: #3A4A66 !important; }
body.error404 .not-found .nf a {
  display: inline-block; background: #0A63C7; color: #fff; border-radius: 30px;
  padding: 12px 28px; font-weight: 700; text-decoration: none;
}
body.error404 .not-found .nf a:hover { background: #0084FF; }

/* Phone bar, second pass (client 07/09 "زرار اللغة نازل مش على نفس الصف"): the theme adds a 4px top
   padding to those two widgets below 768px, which pushed the language pill down, and the phone menu icon
   was a bare 20px glyph while the pill is a 40px chip - their centres were 6px apart. Same padding, same
   round button, same height. */
/* the first item in each group must not carry the leading margin - on a phone the row is only 165px wide
   and that stray 28px at the edge was enough to wrap the menu button onto a second line */
#tahefobu-header .elementor-element-ef4b143 > .elementor-element:first-child,
#tahefobu-header .elementor-element-ef4b143 > .e-con-inner > .elementor-element:first-child,
#tahefobu-header .elementor-element-cc9df3d > .elementor-element:first-child,
#tahefobu-header .elementor-element-cc9df3d > .e-con-inner > .elementor-element:first-child {
  margin-inline-start: 0 !important;
}
@media (max-width: 1199px) {
  /* two icons on a phone do not need the desktop rhythm */
  #tahefobu-header .elementor-element-wdlangm,
  #tahefobu-header .elementor-element-9208693,
  #tahefobu-header .elementor-element-cc9df3d > .elementor-element + .elementor-element,
  #tahefobu-header .elementor-element-cc9df3d > .e-con-inner > .elementor-element + .elementor-element {
    margin-inline-start: 14px !important;
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 1199px) {
  #tahefobu-header .elementor-element-wdlangm,
  #tahefobu-header .elementor-element-9208693,
  #tahefobu-header .elementor-element-wdlangd,
  #tahefobu-header .elementor-element-22c9db8b { padding: 0 !important; }
  #tahefobu-header .elementor-element-9208693 .elementor-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid #CFE4FA; background: #FFFFFF;
  }
  #tahefobu-header .elementor-element-9208693 .elementor-icon svg,
  #tahefobu-header .elementor-element-9208693 .elementor-icon i { width: 20px; height: 20px; font-size: 18px; line-height: 1; }
}

/* Phone and tablet bar: the logo block was top-aligned while the language pill was centred, so the two
   read as different rows (client 07/09 "الحاجات اللي في الهيدر تبقى على صف واحد"). */
@media (max-width: 1199px) {
  #tahefobu-header .elementor-element-82debb5,
  #tahefobu-header .elementor-element-820ce5b,
  #tahefobu-header .elementor-element-ea2ddb5,
  #tahefobu-header .elementor-element-cc9df3d { align-items: center !important; }
  #tahefobu-header .elementor-element-ea2ddb5,
  #tahefobu-header .elementor-element-cc9df3d,
  #tahefobu-header .elementor-element-1c473af { align-self: center !important; }
  #tahefobu-header .elementor-element-a33e86f > .e-con-inner,
  #tahefobu-header .elementor-element-a33e86f { align-items: center !important; }
}

/* Desktop bar geometry (client 07/09). Two things were still off once the pills stopped overlapping:
   the three blocks were locked to 16/50/34 percent, so the action group - now sized to its real content -
   ran off the edge below 1440px; and the logo sat 33px above the buttons' centre line. */
@media (min-width: 1200px) {
  #tahefobu-header .elementor-element-4ad1eee9,
  #tahefobu-header .elementor-element-4ad1eee9 > .e-con-inner { align-items: center !important; }
  #tahefobu-header .elementor-element-189d723e,
  #tahefobu-header .elementor-element-ef4b143 { width: auto !important; flex: 0 0 auto !important; }
  #tahefobu-header .elementor-element-3255a83a { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
  /* with auto widths the logo would render at its native 619x108 and swallow the menu column */
  #tahefobu-header .elementor-element-2e0fa07f img { height: 34px !important; width: auto !important; max-width: none !important; }
  #tahefobu-header .elementor-element-189d723e,
  #tahefobu-header .elementor-element-2e0fa07f,
  #tahefobu-header .elementor-element-3255a83a { align-self: center !important; }
}
/* the bar was boxed to 1140px, which left the five menu items 446px and pushed the last one over the
   logo. The header row uses the full window instead - it is a bar, not body copy. */
@media (min-width: 1200px) {
  #tahefobu-header .e-con > .e-con-inner,
  #tahefobu-header .elementor-element-4ad1eee9 { max-width: none !important; width: 100% !important; }
  /* Elementor drives container padding through custom properties, so a plain padding-inline was ignored
     and the bar sat flush against both edges (client 07/09 "لازقة في الشاشة"). */
  #tahefobu-header .elementor-element-462da48f {
    --padding-left: 40px !important; --padding-right: 40px !important;
    --padding-inline-start: 40px !important; --padding-inline-end: 40px !important;
    padding-left: 40px !important; padding-right: 40px !important;
  }
  #tahefobu-header .elementor-element-4ad1eee9 {
    --padding-left: 0px !important; --padding-right: 0px !important;
    padding-left: 0 !important; padding-right: 0 !important;   /* the section above already indents the bar */
  }
}
/* between 1200 and 1440 the bar is tight: slightly smaller pills and gaps keep everything on screen */
@media (min-width: 1200px) and (max-width: 1440px) {
  #tahefobu-header .elementor-element-1c666bc,
  #tahefobu-header .elementor-element-wdlangd,
  #tahefobu-header .elementor-element-22c9db8b,
  #tahefobu-header .elementor-element-ef4b143 > .elementor-element + .elementor-element,
  #tahefobu-header .elementor-element-ef4b143 > .e-con-inner > .elementor-element + .elementor-element {
    margin-inline-start: 20px !important;
  }
  #tahefobu-header .dreamit-button a.button { padding: 10px 16px !important; font-size: 13px !important; }
  #tahefobu-header .elementor-element-ef4b143 { padding-inline-start: 16px !important; }
  #tahefobu-header .tahefobu-nav-menu > li { margin-left: 6px !important; margin-right: 6px !important; }
  #tahefobu-header .tahefobu-nav-menu > li > a { font-size: 15px !important; }
}