/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Mohamed Raied
Description: White Art Group – child theme with the 2026 dark-luxury design system.
Version: 3.0.0
*/

/* ==========================================================================
   WHITE ART GROUP · DESIGN SYSTEM 2026  (dark luxury)
   Design & Development: Mohamed Raied
   ========================================================================== */

:root{
  --wa-bg:#0a0a0b;
  --wa-surface:#111113;
  --wa-surface-2:#17171a;
  --wa-line:rgba(255,255,255,.08);
  --wa-line-2:rgba(255,255,255,.14);
  --wa-text:#eceae4;
  --wa-muted:#a7a49d;
  --wa-gold:#c9a46a;
  --wa-gold-2:#e4cb98;
  --wa-gold-grad:linear-gradient(135deg,#e4cb98 0%,#c9a46a 45%,#9c7a43 100%);
  --wa-radius:6px;
  --wa-ease:cubic-bezier(.2,.7,.2,1);
  --wa-font-en:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wa-font-ar:"IBM Plex Sans Arabic","Manrope",system-ui,Tahoma,Arial,sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  background:var(--wa-bg)!important;
  color:var(--wa-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body,
body :is(h1,h2,h3,h4,h5,h6,p,a,li,label,input,textarea,select,button,blockquote,figcaption,td,th,
         .elementor-heading-title,.elementor-button,.elementor-counter,.elementor-nav-menu a,
         .elementor-icon-list-text,.elementor-divider__text,.elementor-widget-text-editor){
  font-family:var(--wa-font-en)!important;
}
body.rtl,
body.rtl :is(h1,h2,h3,h4,h5,h6,p,a,li,label,input,textarea,select,button,blockquote,figcaption,td,th,
         .elementor-heading-title,.elementor-button,.elementor-counter,.elementor-nav-menu a,
         .elementor-icon-list-text,.elementor-divider__text,.elementor-widget-text-editor){
  font-family:var(--wa-font-ar)!important;
}
/* catch-all for legacy per-widget fonts (icons excluded) */
body *:not(i):not(svg):not(svg *):not(code):not(pre):not([class*="icon"]):not([class*="eicon"]):not([class^="fa"]):not([class*=" fa-"]){font-family:var(--wa-font-en)!important}
body.rtl *:not(i):not(svg):not(svg *):not(code):not(pre):not([class*="icon"]):not([class*="eicon"]):not([class^="fa"]):not([class*=" fa-"]){font-family:var(--wa-font-ar)!important}
::selection{background:var(--wa-gold);color:#0a0a0b}
a{transition:color .25s var(--wa-ease)}
a:hover{color:var(--wa-gold-2)}

/* scrollbar */
html{scrollbar-color:#3a3631 var(--wa-bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--wa-bg)}
::-webkit-scrollbar-thumb{background:#2c2925;border-radius:10px;border:2px solid var(--wa-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--wa-gold)}

/* ---------- Typography ---------- */
.elementor-heading-title{
  letter-spacing:-.02em;
}
body.rtl .elementor-heading-title{letter-spacing:0}
.elementor-element-155c9e9 h1.elementor-heading-title{
  font-size:clamp(40px,6.2vw,88px)!important;
  font-weight:800!important;
  letter-spacing:-.035em;
  line-height:1.02!important;
}

/* hero supporting line */
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child .elementor-widget-heading:has(h1) ~ .elementor-widget-heading ~ .elementor-widget-heading .elementor-heading-title{
  font-size:clamp(17px,1.5vw,22px)!important;font-weight:400!important;color:var(--wa-muted)!important;letter-spacing:0;line-height:1.6!important;max-width:620px;
}
/* header & footer brand text keeps its own scale */
[data-elementor-type="header"] .elementor-heading-title{letter-spacing:0}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-icon-list-text{
  color:var(--wa-muted)!important;
  line-height:1.85;
  font-size:clamp(15px,1.05vw,17px);
}
.elementor-widget-text-editor strong{color:var(--wa-text)}
.elementor-widget-text-editor a{color:var(--wa-gold)!important}

/* Section titles with line (divider with text) */
.elementor-divider-separator{border-color:transparent!important}
.elementor-divider__text{
  color:#fff!important;
  font-weight:700!important;
  font-size:clamp(26px,3vw,44px)!important;
  letter-spacing:-.02em;
}
.elementor-widget-divider .elementor-divider-separator::before,
.elementor-widget-divider .elementor-divider-separator::after{
  border-block-start:1px solid transparent!important;
  border-image:linear-gradient(90deg,transparent,var(--wa-gold) 60%,var(--wa-gold-2)) 1!important;
}
body.rtl .elementor-widget-divider .elementor-divider-separator::before,
body.rtl .elementor-widget-divider .elementor-divider-separator::after{
  border-image:linear-gradient(270deg,transparent,var(--wa-gold) 60%,var(--wa-gold-2)) 1!important;
}
.elementor-widget-divider:not(.elementor-widget-divider--view-line_text) .elementor-divider-separator{
  border-block-start:1px solid var(--wa-line-2)!important;
}

/* ---------- Header ---------- */
[data-elementor-type="header"]{
  position:sticky;top:0;z-index:999;
  transition:background .35s var(--wa-ease),box-shadow .35s var(--wa-ease),backdrop-filter .35s;
}
body.admin-bar [data-elementor-type="header"]{top:32px}
@media (max-width:782px){body.admin-bar [data-elementor-type="header"]{top:46px}}
[data-elementor-type="header"] > .elementor-section,
[data-elementor-type="header"] > .e-con,
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .e-con{
  background-color:transparent!important;
  transition:padding .35s var(--wa-ease);
}
[data-elementor-type="header"]{background:rgba(10,10,11,.92)}
body.wa-scrolled [data-elementor-type="header"]{
  background:rgba(10,10,11,.72);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--wa-line),0 18px 40px -24px rgba(0,0,0,.8);
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item{
  color:var(--wa-text)!important;
  font-weight:500!important;
  font-size:13.5px!important;
  white-space:nowrap;
  letter-spacing:.02em;
  position:relative;
  padding-inline:11px!important;
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item::after{
  content:"";position:absolute;inset-inline:11px;bottom:6px;height:1px;
  background:var(--wa-gold-grad);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--wa-ease);
  opacity:1!important;
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item:hover,
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:var(--wa-gold-2)!important;
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item:hover::after,
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item.elementor-item-active::after{
  transform:scaleX(1);
}
/* Staff Mail – pill */
.elementor-nav-menu a[href*="outlook.office.com"]{
  border:1px solid rgba(201,164,106,.55)!important;
  border-radius:999px;
  color:var(--wa-gold-2)!important;
  margin-inline:6px;
  padding-block:7px!important;
  padding-inline:16px!important;
}
.elementor-nav-menu a[href*="outlook.office.com"]::before{
  content:"";display:inline-block;width:14px;height:14px;margin-inline-end:8px;vertical-align:-2px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>") center/contain no-repeat;
}
.elementor-nav-menu--main a[href*="outlook.office.com"]::after{display:none!important}
.elementor-nav-menu a[href*="outlook.office.com"]:hover{background:rgba(201,164,106,.12)!important}
/* dropdown / mobile menu */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown .elementor-nav-menu{background:var(--wa-surface)!important}
.elementor-nav-menu--dropdown a{color:var(--wa-text)!important;border-bottom:1px solid var(--wa-line)}
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a.elementor-item-active{background:var(--wa-surface-2)!important;color:var(--wa-gold-2)!important}
.elementor-menu-toggle{color:var(--wa-text)!important;background:transparent!important}
.elementor-menu-toggle svg{fill:var(--wa-text)!important}

/* ---------- Buttons ---------- */
.elementor-button,
.elementor-widget-form .elementor-button,
.elementor-field-type-submit .elementor-button{
  background:var(--wa-gold-grad)!important;
  color:#0a0a0b!important;
  border:0!important;
  border-radius:2px!important;
  padding:16px 30px!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  min-width:max-content;
  box-shadow:0 10px 30px -12px rgba(201,164,106,.55);
  transition:transform .35s var(--wa-ease),box-shadow .35s var(--wa-ease),filter .35s;
}
body.rtl .elementor-button{letter-spacing:0;font-size:15px!important}
.elementor-button:hover,.elementor-button:focus{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 18px 40px -14px rgba(201,164,106,.7);
  color:#0a0a0b!important;
}
.elementor-button .elementor-button-text{color:inherit!important}
/* second button in a row → outline */
.elementor-widget-button + .elementor-widget-button .elementor-button,
.elementor-column + .elementor-column .elementor-widget-button .elementor-button.wa-outline,
.elementor-button.wa-outline{
  background:transparent!important;
  color:var(--wa-text)!important;
  box-shadow:inset 0 0 0 1px var(--wa-line-2)!important;
}
.elementor-widget-button + .elementor-widget-button .elementor-button:hover,
.elementor-button.wa-outline:hover{
  box-shadow:inset 0 0 0 1px var(--wa-gold)!important;
  color:var(--wa-gold-2)!important;
}
.elementor-button .elementor-button-content-wrapper::after{
  content:"→";display:inline-block;margin-inline-start:10px;transition:transform .35s var(--wa-ease)
}
body.rtl .elementor-button .elementor-button-content-wrapper::after{content:"←"}
.elementor-button:hover .elementor-button-content-wrapper::after{transform:translateX(4px)}
body.rtl .elementor-button:hover .elementor-button-content-wrapper::after{transform:translateX(-4px)}

/* ---------- Sections & surfaces ---------- */
.elementor-location-single .elementor-section,
.elementor-section,.e-con{border-color:var(--wa-line)}
/* white / grey legacy backgrounds → dark luxury surfaces */
.elementor-section[style*="background"],.wa-surface{background-color:var(--wa-surface)}

/* Hero (first section of every page) */
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child,
.elementor[data-elementor-type="wp-page"] > .e-con:first-child{
  position:relative;
}
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child > .elementor-background-overlay,
.elementor[data-elementor-type="wp-page"] > .e-con:first-child > .elementor-background-overlay{
  background:linear-gradient(100deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.55) 45%,rgba(10,10,11,.15) 100%)!important;
  opacity:1!important;
}
body.rtl .elementor[data-elementor-type="wp-page"] > .elementor-section:first-child > .elementor-background-overlay{
  background:linear-gradient(260deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.55) 45%,rgba(10,10,11,.15) 100%)!important;
}
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--wa-bg));
}
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child .elementor-widget-heading:has(h1) + .elementor-widget-heading .elementor-heading-title{
  color:var(--wa-gold-2)!important;
  font-size:clamp(14px,1.1vw,16px)!important;
  font-weight:600!important;
  letter-spacing:.28em!important;
  text-transform:uppercase;
}
body.rtl .elementor[data-elementor-type="wp-page"] > .elementor-section:first-child .elementor-widget-heading:has(h1) + .elementor-widget-heading .elementor-heading-title{letter-spacing:0!important}
.elementor[data-elementor-type="wp-page"] > .elementor-section:first-child .elementor-widget-heading:has(h1)::before{
  content:"";display:block;width:64px;height:2px;margin-bottom:28px;background:var(--wa-gold-grad);
}

/* Service cards (image columns) */
.elementor-inner-section .elementor-inner-column > .elementor-widget-wrap[style*="background"],
.elementor-inner-column > .elementor-widget-wrap{
  border-radius:var(--wa-radius);
}
.elementor-inner-section .elementor-inner-column > .elementor-widget-wrap{
  transition:transform .5s var(--wa-ease),box-shadow .5s var(--wa-ease);
}
.elementor-inner-section .elementor-inner-column:hover > .elementor-widget-wrap{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(201,164,106,.45);
}
.elementor-inner-section .elementor-inner-column > .elementor-widget-wrap > .elementor-background-overlay{
  background:linear-gradient(to top,rgba(10,10,11,.92) 0%,rgba(10,10,11,.25) 60%,rgba(10,10,11,.05) 100%)!important;
  opacity:1!important;border-radius:var(--wa-radius);
}

/* Loop grid / project cards */
.e-loop-item{
  border-radius:var(--wa-radius);
  overflow:hidden;
  background:var(--wa-surface);
  box-shadow:0 0 0 1px var(--wa-line);
  transition:transform .5s var(--wa-ease),box-shadow .5s var(--wa-ease);
}
.e-loop-item:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(201,164,106,.5),0 30px 60px -30px rgba(0,0,0,.95)}
.e-loop-item img{transition:transform 1.2s var(--wa-ease),filter .6s}
.e-loop-item:hover img{transform:scale(1.06)}
[data-elementor-type] .e-loop-item .elementor-heading-title{font-size:16px!important;font-weight:600!important;color:var(--wa-text)!important;transition:color .3s}
[data-elementor-type] .e-loop-item:hover .elementor-heading-title{color:var(--wa-gold-2)!important}

/* small eyebrow headings written as <p> */
[data-elementor-type="wp-page"] p.elementor-heading-title.wa-eyebrow{
  color:var(--wa-gold-2)!important;font-size:13px!important;font-weight:600!important;letter-spacing:.24em;text-transform:uppercase;line-height:1.6!important;
}
body.rtl [data-elementor-type="wp-page"] p.elementor-heading-title.wa-eyebrow{letter-spacing:0;font-size:15px!important}

/* Images */
.elementor-widget-image img{border-radius:var(--wa-radius)}
.elementor-widget-image:not(.elementor-widget-image *) a img{transition:transform .8s var(--wa-ease)}

/* Counters */
.elementor-counter .elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number-wrapper *{
  font-weight:800!important;
  font-size:clamp(48px,5.5vw,84px)!important;
  letter-spacing:-.04em;
  background:var(--wa-gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
}
.elementor-counter .elementor-counter-number-wrapper *{color:inherit!important;-webkit-text-fill-color:transparent}
.elementor-counter .elementor-counter-title{
  color:var(--wa-muted)!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.2em;text-transform:uppercase;
}
body.rtl .elementor-counter .elementor-counter-title{letter-spacing:0;font-size:16px!important}

/* Icon boxes / icon lists */
.elementor-icon-box-title,.elementor-icon-box-title a{color:#fff!important}
.elementor-icon-box-description{color:var(--wa-muted)!important}
.elementor-icon,.elementor-icon-list-icon i,.elementor-icon-list-icon svg{color:var(--wa-gold)!important;fill:var(--wa-gold)!important}
.elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--wa-gold-2)!important}

/* Clients carousel → logos on light chips over dark */
.elementor-widget-image-carousel .swiper-slide{padding:10px}
.elementor-widget-image-carousel .swiper-slide-image{
  background:#f4f2ee;
  border-radius:var(--wa-radius);
  padding:12px 18px;
  height:120px!important;width:100%!important;object-fit:contain;
  filter:grayscale(.35);opacity:.95;
  transition:filter .5s,opacity .5s,transform .5s var(--wa-ease);
}
.elementor-widget-image-carousel .swiper-slide:hover .swiper-slide-image{filter:none;opacity:1;transform:translateY(-3px)}
.elementor-swiper-button{color:var(--wa-gold)!important}
.elementor-swiper-button svg{fill:var(--wa-gold)!important}
.swiper-pagination-bullet{background:var(--wa-line-2)!important;opacity:1!important}
.swiper-pagination-bullet-active{background:var(--wa-gold)!important}

/* Sections that used plain white / grey backgrounds */
.wa-sec-light{background:var(--wa-surface)!important}
.wa-sec-light .elementor-heading-title{color:#fff!important}
.wa-sec-cta .elementor-widget-heading ~ .elementor-widget-heading .elementor-heading-title{
  font-size:clamp(16px,1.25vw,19px)!important;font-weight:400!important;color:var(--wa-muted)!important;line-height:1.7!important;letter-spacing:0;max-width:760px;margin-inline:auto;
}
.wa-sec-cta{
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(201,164,106,.22) 0%,transparent 55%),
    radial-gradient(120% 140% at 100% 100%,rgba(201,164,106,.12) 0%,transparent 55%),
    var(--wa-surface)!important;
  border-block:1px solid var(--wa-line);
}

/* contrast helpers (set by JS) */
.wa-pattern{background-color:var(--wa-bg)!important;background-blend-mode:overlay!important}
.wa-card-dark{background-color:var(--wa-surface-2)!important;box-shadow:inset 0 0 0 1px var(--wa-line);border-radius:var(--wa-radius)}
.wa-card-accent{background:linear-gradient(160deg,rgba(201,164,106,.16),rgba(201,164,106,.02) 60%),var(--wa-surface)!important;box-shadow:inset 0 0 0 1px rgba(201,164,106,.25);border-radius:var(--wa-radius)}
.wa-card-dark .elementor-icon,.wa-card-dark .elementor-icon i,.wa-card-dark svg,.wa-card-dark svg *{color:var(--wa-gold)!important;fill:var(--wa-gold)!important}
.wa-on-dark{color:var(--wa-text)!important}
p.wa-on-dark,li.wa-on-dark,.elementor-widget-text-editor.wa-on-dark{color:var(--wa-muted)!important}
.elementor-heading-title.wa-on-dark{color:#fff!important}
.wa-ghost{color:transparent!important;-webkit-text-stroke:1px rgba(228,203,152,.22)!important}

/* ---------- Forms ---------- */
.elementor-field-group .elementor-field,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select{
  background:var(--wa-surface-2)!important;
  border:1px solid var(--wa-line-2)!important;
  border-radius:2px!important;
  color:var(--wa-text)!important;
  padding:14px 16px!important;
  transition:border-color .25s,box-shadow .25s;
}
.elementor-field-group .elementor-field::placeholder{color:#6f6c66!important}
.elementor-field-group .elementor-field:focus{
  border-color:var(--wa-gold)!important;
  box-shadow:0 0 0 3px rgba(201,164,106,.18)!important;
  outline:none!important;
}
.elementor-field-label{color:var(--wa-muted)!important;font-size:13px!important}

/* Maps → dark */
.elementor-widget-google_maps iframe{
  filter:grayscale(1) invert(.92) contrast(.88) brightness(.95);
  border-radius:var(--wa-radius);
}

/* ---------- Footer ---------- */
[data-elementor-type="footer"]{
  background:linear-gradient(to bottom,var(--wa-surface),#080809)!important;
  border-top:1px solid var(--wa-line);
  position:relative;
}
[data-elementor-type="footer"]::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--wa-gold),transparent);
}
[data-elementor-type="footer"] .elementor-section,
[data-elementor-type="footer"] .e-con{background-color:transparent!important}
[data-elementor-type="footer"] .elementor-widget-text-editor,
[data-elementor-type="footer"] .elementor-widget-text-editor p,
[data-elementor-type="footer"] .elementor-icon-list-text{color:var(--wa-muted)!important;font-size:14px}
[data-elementor-type="footer"] .elementor-icon-list-item:hover .elementor-icon-list-text{color:var(--wa-gold-2)!important}
.elementor-social-icon{
  background:transparent!important;
  box-shadow:inset 0 0 0 1px var(--wa-line-2);
  border-radius:50%!important;
  transition:background .3s,box-shadow .3s,transform .3s var(--wa-ease);
}
.elementor-social-icon svg,.elementor-social-icon i{fill:var(--wa-text)!important;color:var(--wa-text)!important}
.elementor-social-icon:hover{background:var(--wa-gold)!important;box-shadow:none;transform:translateY(-2px)}
.elementor-social-icon:hover svg,.elementor-social-icon:hover i{fill:#0a0a0b!important;color:#0a0a0b!important}

/* ---------- Motion ---------- */
.wa-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--wa-ease),transform .9s var(--wa-ease)}
.wa-reveal.wa-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wa-reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Back-to-top */
.wa-top{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:998;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(17,17,19,.85);color:var(--wa-gold-2);
  box-shadow:inset 0 0 0 1px rgba(201,164,106,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .35s,transform .35s var(--wa-ease),background .3s;
  cursor:pointer;border:0;
}
.wa-top.wa-show{opacity:1;transform:none;pointer-events:auto}
.wa-top:hover{background:var(--wa-gold);color:#0a0a0b}

/* Mobile */
@media (max-width:767px){
  .elementor-button{padding:14px 22px!important}
  .elementor-widget-image-carousel .swiper-slide-image{height:96px!important;padding:16px}
  [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item{padding-inline:10px!important}
}
