@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
:root{
  --brand-navy:#304060;
  --brand-red:#F03030;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --line:rgba(15,23,42,.10);
  --shadow:0 14px 40px rgba(15,23,42,.10);

  --radius:18px;
  --container:1180px;
  --pad:clamp(14px, 2vw, 22px);
}

*{box-sizing:border-box}
body{margin:0; color:var(--text); background:var(--bg); font-family:system-ui, -apple-system, "Cairo", "Tajawal", Arial, sans-serif;}
html, body{
  width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after{
  box-sizing: border-box;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

.container{
  width:min(var(--container), calc(100% - (var(--pad) * 2)));
  margin-inline:auto;
}

.site-header{
  position:relative;
  z-index:50;
}

/* Topbar */
.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}
.topbar__area{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.topbar__actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:14px;
  background:#fff;
}
.topbar__link:hover{border-color:rgba(15,23,42,.22)}

/* Mainbar */
.mainbar{
  background:#fff;
}
.mainbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:5px 0;
}

/* Sticky behavior */
.site-header.is-sticky .mainbar{
  position:sticky;
  top:0;
  box-shadow:var(--shadow);
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 135px;
  height: 65px;
}

.brand img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}


/* Nav toggle (mobile) */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.nav-toggle__lines{
  display:block;
  width:18px; height:12px;
  margin:0 auto;
  background:
    linear-gradient(var(--text),var(--text)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 50%/100% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 100%/100% 2px no-repeat;
}

/* Nav desktop */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav__list{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__list > li{position:relative}
.nav__list > li > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-size:15px;
  color:var(--text);
}
.nav__list > li > a:hover{
  background:rgba(48,64,96,.06);
}

/* Active link style (WP adds current-menu-item) */
.nav__list .current-menu-item > a,
.nav__list .current-menu-ancestor > a{
  background:rgba(48,64,96,.10);
  color:var(--brand-navy);
}

/* Submenu (dropdown) */
.nav__list li.menu-item-has-children > a::after{
  content:"▾";
  font-size:12px;
  opacity:.8;
}
.nav__list .sub-menu{
  position:absolute;
  inset-inline-start:0;
  top:calc(100% + 10px);
  min-width:320px;
  padding:10px;
  margin:0;
  list-style:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.nav__list .sub-menu a{
  display:flex;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
}
.nav__list .sub-menu a:hover{
  background:rgba(48,64,96,.06);
}

/* Show dropdown on hover AND when JS adds .is-open */
.nav__list li.menu-item-has-children:hover > .sub-menu,
.nav__list li.menu-item-has-children.is-open > .sub-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* CTA buttons */
.nav__cta{display:flex; align-items:center; gap:10px; margin-inline-start:6px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
}
.btn--ghost{
  background:#fff;
  border-color:var(--line);
}
.btn--ghost:hover{border-color:rgba(15,23,42,.22)}
.btn--primary{
  background:var(--brand-red);
  color:#fff;
}
.btn--primary:hover{filter:brightness(.95)}

/* Mobile drawer */
@media (max-width: 980px){
  .topbar{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}

  .nav{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.35);
    display:block;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .nav.is-open{
    opacity:1;
    pointer-events:auto;
  }
  .nav__list{
    position:absolute;
    top:0; inset-inline-end:0;
    width:min(92vw, 380px);
    height:100%;
    background:#fff;
    padding:18px;
    border-inline-start:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    transform:translateX(10px);
    transition:transform .18s ease;
  }
  .nav.is-open .nav__list{transform:translateX(0)}
  .nav__list > li > a{
    border-radius:14px;
    padding:12px 12px;
    justify-content:space-between;
  }

  .nav__list .sub-menu{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    box-shadow:none;
    border:none;
    padding:0;
    margin:6px 0 0;
    display:none; /* accordion */
  }
  .nav__list li.menu-item-has-children.is-open > .sub-menu{
    display:block;
  }

  .nav__cta{
    margin-top:12px;
    flex-direction:column;
    align-items:stretch;
  }
  .btn{width:100%}

  /* sticky bottom bar */
  .sticky-bar{display:flex}
}

/* Desktop sticky bar hidden */
.sticky-bar{
  display:none;
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:60;
  background:#fff;
  border-top:1px solid var(--line);
}
.sticky-bar__btn{
  flex:1;
  padding:14px 12px;
  text-align:center;
  font-weight:700;
}
.sticky-bar__btn--wa{
  background:rgba(48,64,96,.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav, .nav__list .sub-menu, .nav__list{transition:none}
}