/* =========================
   0) Reset & Base Typography
   ========================= */
body, main, section, .site-content, .page-content { margin-top:0; padding-top:0; }
body { margin:0; padding:0; } /* ✅ لا تفرض font-family هنا */
*, *::before, *::after { box-sizing: border-box; transition: none; }


/* =========================
   1) Header Base
   ========================= */
.main-header {
  position:relative; z-index:1000; background:#fff;
  min-height:90px; border-bottom:1px solid #ddd; width:100%;
  display:flex; flex-direction:column;
}
.spacer-header { margin:0; padding:0; }

.container-header {
  max-width:1345px; width:100%; margin:0 auto;
  padding:10px 20px; display:flex; align-items:center; height:90px;
  justify-content:flex-start;            /* كان space-between */
  column-gap:24px;
}

.logo { flex-shrink:0; }
.logo img { height:40px; width:auto; max-height:56px; display:block; }

/* اجعل القائمة ملاصقة للشعار بدون تمدد */
.main-nav { flex:0 0 auto; margin-inline-start:12px; } /* كان flex-grow:1; */
.nav-menu { list-style:none; display:flex; gap:5px; margin:0; padding:0; }
.nav-menu li a {
  color:#17488A; font-weight:600; line-height:1.2; font-size:16px;
  text-decoration:none; padding:8px; display:inline-block;
}
.nav-menu li a:hover { color:#0e2d5c; }

/* ادفع الأيقونات للطرف المقابل */
.header-icons { display:flex; align-items:center; gap:15px; margin-inline-start:auto; }
.navbar-icon { height:28px; width:22px; cursor:pointer; }

/* Mobile menu button */
.mobile-menu-toggle {
  display:none; background:none; border:none; font-size:28px; cursor:pointer; width:40px; height:40px;
}

/* Force arrow to point up whenever the LI is open (generic) */
.nav-menu li.is-open > a::after { transform: rotate(-135deg); } /* ▲ */

/* ضم زرّ الموبايل + الشعار + الأيقونات مع بعض ومحاذاتهم */
.brand-cluster{ display:flex; align-items:center; gap:12px; }

/* =========================
   2) Mega Dropdown
   ========================= */
.main-header .mega-dropdown {
  display:none; position:absolute; top:90px; left:0; width:100%;
  z-index:999; background:transparent;
}
.mega-dropdown.show, .main-header .mega-dropdown.open { display:block; }

/* (عام) اجعل العرض 100% لتفادي سكرول أفقي */
.mega-dropdown-content {
  display:flex; width:100%; position:relative; left:auto; transform:none;
  align-items: stretch;
  
  /* --- FIX: Shadow & Border to separate from page content --- */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ظل قوي للفصل */
  border-bottom: 1px solid #e5e7eb; /* حد سفلي خفيف */
}

/* Sidebar */
.mega-dropdown-sidebar {
  width:30vw; 
  /* --- FIX: New Background Color --- */
  background:#F2F5FC; 
  
  padding-left:calc((100vw - 1345px) / 2);
  padding-right:20px; padding-top:10px; padding-bottom:30px;
  height: auto; 
}
.mega-dropdown-sidebar h4 { margin:0 0 15px 0; font-size:18px; color:#333; background:transparent; padding:0; }
.sidebar-link {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 15px; color:#17488a !important; font-size:16px; font-weight:600;
  margin:2px 0 5px 0; line-height:1.2; cursor:default; transition:all .2s ease; background:transparent !important;
}
.sidebar-link:hover, .sidebar-link.active { background:#fff !important; color:#17448a !important; font-weight:600; padding-left:20px; }
.sidebar-link i.bi-chevron-right { font-size:1.2em; font-weight:bold; }

/* Main content */
.mega-dropdown-main {
  width:70vw; background:#ffffff;
  padding-right:calc((100vw - 1345px) / 2);
  padding-left:20px; padding-top:30px; padding-bottom:30px;
}
.content-item { display:none; background:#ffffff; }
.content-item.active { display:block; }

.title-mage { font-size:2rem; font-weight:500; color:#17488a; margin:0 0 10px 0; }

.service-description {
  font-size:18px; line-height:1.6; color:#555; margin:12px 0; padding-right:10px; text-align:justify;
  word-spacing:-.05em; hyphens:auto; transition:all .3s ease;
}
.service-description:hover { color:#333; }

.mage-link { display:inline-flex; align-items:center; font-size:1.2em; color:#333; text-decoration:none; transition:color .3s ease; }
.mage-link:hover { text-decoration:underline; }
.mage-arrow { display:inline-block; font-size:1.2em; margin-left:8px; transition:transform .3s ease, opacity .3s ease; cursor:pointer; }
.mage-arrow::before { content:'→'; display:inline-block; transition:transform .3s ease; }
.mage-link:hover .mage-arrow::before { transform:translateX(5px) rotate(360deg); }

/* =========================================================
   Insight area: (ORIGINAL - STRICTLY RESTORED FOR SITE 1)
   ========================================================= */
.insight-section { width:100%; margin-top:10px; }
.insight-content { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:30px; }
.insight-text { flex:1 1 70%; }

.insight-cards { display:flex; flex-wrap:wrap; gap:10px; }
/* Original Card Style with background and hover effects */
.insight-card { flex:1 1 calc(50% - 15px); padding:20px; transition:all .3s ease; }
.insight-card:hover { background:#f0f0f0; transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.insight-card h3 { font-size:18px; color:#17488A; margin:0 0 12px 0; line-height:1.3; }
.insight-card h3 a { text-decoration:none; }
.insight-card h3 a:hover { text-decoration:underline; }
.insight-card p { font-size:15px; color:#555; margin:0; line-height:1.6; letter-spacing:.01em; }

/* Shared Image Class */
.insight-image { position:relative; width:288px; height:300px; flex:1 1 30%; margin-left:20px; }
.insight-image img { width:100%; height:auto; border-radius:25px; transition:transform .3s ease; }
.insight-image:hover img { transform:scale(1); }

/* Original Overlay (Site 1 Style: Bottom -20px) */
.overlay-cards { position:absolute; bottom:-20px; left:0; width:288px; transform:translateY(0); transition:transform .3s ease; }
.overlay-card { background:#f2f2f2; border-radius:25px; padding:15px; box-shadow:0 4px 8px rgba(0,0,0,.2); }
.overlay-card h3 { font-size:18px; color:#17488a; margin-bottom:5px; }
.overlay-card p { font-size:14px; color:#17488a; margin:0; }

/* =========================================================
   NEW EDU Classes (For Education Site - Custom Design)
   ========================================================= */
.edu-programs-section { width:100%; margin-top:10px; }
.edu-programs-content { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:30px; }
.edu-programs-text { flex:1 1 70%; }

/* Grid: Two columns, names only */
.edu-programs-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 5px;
}

/* Item: No box, no background */
.edu-program-item {
  flex: 0 0 calc(50% - 10px);
  width: calc(50% - 10px);
  padding: 5px 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  transition: none;
}
.edu-program-item:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
.edu-program-item h3 {
  font-size: 16px;
  color: #17488A;
  margin: 0;
  line-height: 1.4;
}
.edu-program-item h3 a {
  text-decoration: none;
  font-weight: 600;
}
.edu-program-item h3 a:hover {
  text-decoration: underline;
}
.edu-program-item p {
  display: none !important; /* Hide excerpt */
}

/* Caption: Overlapping the image (Bottom 10%) */
/* Note: Parent is still .insight-image */
.edu-highlight-caption {
  position: absolute;
  bottom: 10% !important; /* The Overlap Fix */
  left: 0;
  width: 288px;
  transform: translateY(0);
  transition: transform .3s ease;
  z-index: 2;
}
.edu-caption-card {
  background: #ffffff;
  border-radius: 25px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  width: 90%;
  margin: 0 auto;
}
.edu-caption-card h3.overlay-title {
  font-size: 18px;
  color: #17488a;
  margin-bottom: 5px;
}
.edu-caption-card p.overlay-excerpt {
  font-size: 14px;
  color: #17488a;
  margin: 0;
}


/* =========================
   3) Search Modal / Overlay
   ========================= */
.search-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(255,255,255,.95); transform:translateY(-100%);
  transition:transform .4s ease-in-out; z-index:10000; padding:20px;
}
.search-modal.open { transform:translateY(0%); }

.modal-content { max-width:1300px; margin:0 auto; }

.search-input-btn {
  display:flex; justify-content:space-between; border-bottom:1px solid #ddd; background:#fff; padding:15px;
}
.search-input-btn input { width:100%; font-size:18px; padding:10px; border:none; outline:none; }

.close { font-size:24px; cursor:pointer; }

.search-history {
  display:none; max-width:1300px; margin:20px auto 0; background:#fff; padding:20px; box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.search-history.show { display:block; }

.search-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(255,255,255,.95); z-index:10000; display:none; justify-content:center; align-items:flex-start; padding-top:100px;
}
.search-overlay.active { display:flex; }

/* =========================
   4) Utilities
   ========================= */
.close-btn { position:absolute; right:30px; top:20px; font-size:24px; font-weight:bold; cursor:pointer; color:#333; z-index:1000; }
.mega-dropdown-sidebar, .mega-dropdown-main { min-height:100%; }

/* =========================
   5) Responsive
   ========================= */
@media (max-width:768px) {
  .main-nav { display:none; }
  .mobile-menu-toggle { display:block; }
  .main-nav.active {
    display:block; position:absolute; top:70px; right:20px; background:#fff; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  .nav-menu { flex-direction:column; justify-content:flex-start; gap:15px; }
  .container-header { gap:10px; padding:10px 15px; height:70px; overflow:hidden; }
  .header-icons { gap:8px; flex-shrink:0; }
  .header-icons img { height:20px; width:auto; }
  .logo img { max-width:120px; }
  .mobile-menu-toggle { order:1; flex:0 0 40px; }
  .logo { order:2; flex:1; text-align:center; }
  .header-icons { order:3; flex:0 0 auto; }

  /* Hide WP submenus in the main panel (opened via drill-down) */
  .main-nav.active .nav-menu .sub-menu{ display:none !important; }

  /* Mobile submenu drill-down (ECEID-style) */
  .main-nav.active .imd-mobile-viewport{ overflow:hidden; }
  .main-nav.active .imd-mobile-slider{
    display:flex;
    width:200%;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .main-nav.active .imd-mobile-slider.slide-left{ transform: translateX(-50%); }
  .main-nav.active .imd-mobile-panel{ width:50%; }
  .main-nav.active .imd-mobile-subheader{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .main-nav.active .imd-mobile-back{
    background:none;
    border:0;
    padding:0;
    margin:0;
    color:#17488A;
    font-weight:600;
    cursor:pointer;
  }
  .main-nav.active .imd-mobile-title{ color:#17488A; font-weight:600; }
}
@media (min-width:769px) {
  .container-header { flex-wrap:nowrap; }
  .main-nav { position:static; border-bottom:none; }
  .nav-menu { justify-content:flex-start; gap:20px; }
}

/* =========================
   6) EDU Global Components (non-header)
   ========================= */
.edu-page { background:var(--surface-bg); color:var(--default-color); }
.edu-grid { display:flex; flex-wrap:wrap; gap:24px; }
.edu-grid--3 > * { flex:0 0 calc((100% - 48px)/3); max-width:calc((100% - 48px)/3); }
.edu-grid--2 > * { flex:0 0 calc((100% - 24px)/2); max-width:calc((100% - 24px)/2); }
@media (max-width:992px) {
  .edu-grid--3 > *, .edu-grid--2 > * { flex:0 0 100%; max-width:100%; }
}
.edu-card { background:#fff; border:1px solid var(--border-color); border-radius:8px; box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; min-height:100%; transition:transform .2s ease, box-shadow .2s ease; }
.edu-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.edu-card__media img { width:100%; height:auto; display:block; }
.edu-card__body { padding:16px; }
.edu-card__title { font-size:clamp(16px,1.6vw,20px); color:var(--heading-color); margin-bottom:8px; }
.edu-card__meta { font-size:.875rem; color:#6b7280; margin-bottom:12px; }
.edu-card__actions { margin-top:auto; padding:16px; border-top:1px solid var(--border-color); }

/* Breadcrumbs */
.imd-bc { position:relative; margin:12px auto 0; max-width:var(--content-max); padding:0 16px; z-index:100; pointer-events:none; --bc-link:#003192; --bc-sep:#111827; }
.imd-bc .imd-bc-list { display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; font-size:14px; line-height:1; }
.imd-bc .imd-bc-item a { color:var(--bc-link); font-weight:600; text-decoration:none; pointer-events:auto; }
.imd-bc .imd-bc-item a:hover { text-decoration:underline; }
.imd-bc .imd-bc-current span { color:#0f172a; font-weight:700; }
.imd-bc .imd-bc-home svg, .imd-bc .imd-bc-sep svg { width:20px; height:20px; display:block; }

/* =========================
   7) Submenu Arrows (Triggers & Children)
   ========================= */
/* Base arrow (down) */
.nav-menu li.js-submenu1-trigger > a,
.nav-menu li.js-submenu2-trigger > a,
.nav-menu li.js-submenu3-trigger > a,
.nav-menu .menu-item-has-children > a {
  position:relative; padding-right:1.25rem;
}
.nav-menu li.js-submenu1-trigger > a::after,
.nav-menu li.js-submenu2-trigger > a::after,
.nav-menu li.js-submenu3-trigger > a::after,
.nav-menu .menu-item-has-children > a::after {
  content:""; position:absolute; right:.25rem; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);  /* ▼ */
  transition:transform .2s ease;
}
/* Up arrow when open or hover */
.nav-menu li.js-submenu1-trigger.is-open > a::after,
.nav-menu li.js-submenu2-trigger.is-open > a::after,
.nav-menu li.js-submenu3-trigger.is-open > a::after,
.nav-menu .menu-item-has-children.is-open > a::after { transform:rotate(-135deg); } /* ▲ */
@media (hover:hover) {
  .nav-menu .menu-item-has-children:hover > a::after,
  .nav-menu .menu-item-has-children:focus-within > a::after { transform:rotate(-135deg); }
}

.container-header{display:flex;align-items:center;gap:16px}
.main-nav{flex:1}
.header-icons{margin-left:auto;display:flex;align-items:center;gap:14px}
.navbar-icon{display:block;width:22px;height:22px}

/* Insights page bits (RESTORED for Site 1) */
.insights-page-container { display:flex; flex-direction:column; padding:20px; }
.insights-category { margin-bottom:40px; }

/* Important: This restores the WHITE background and borders for Site 1 cards */
.insight-card { border:1px solid #ddd; border-radius:8px; margin-bottom:20px; padding:15px; background:#fff; transition:box-shadow .3s ease; }
.insight-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); }

.insight-image img { max-width:100%; height:auto; border-radius:5px; }
.insight-card h3 { font-size:18px; margin-top:10px; color:#17488A; }
.insight-card p { font-size:14px; color:#555; }
.insight-cards { display:flex; gap:20px; flex-wrap:wrap; }

/* شبكة 4 أعمدة متساوية */
.mega-dropdown .content-grid.four-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
.mega-dropdown .grid-col{min-width:0}
.mega-dropdown .menu-bulleted{margin:0;padding-left:1rem}
.mega-dropdown .menu-bulleted .menu-item-line{list-style:disc;margin:0.25rem 0}
.mega-dropdown .chip-icon{vertical-align:middle;margin-inline-end:.4rem}
.mega-dropdown .media-placeholder img{ width:100%; height:auto; border-radius:12px; display:block; }

/* ========== تخصيصات القائمة الثالثة فقط ========== */
/* اعرضها بعرض كامل بدون Sidebar */
#submenu3Dropdown .mega-dropdown-content{ display:block; width:100%; left:auto; transform:none; }
#submenu3Dropdown .mega-dropdown-main{
  width:100%;
  padding-left:calc((100vw - 1345px)/2);
  padding-right:calc((100vw - 1345px)/2);
}
/* لا ترث عناصر insights أو الكروت داخلها (Old Submenu3 Logic) */
#submenu3Dropdown .insight-section,
#submenu3Dropdown .insight-image,
#submenu3Dropdown .insight-cards { display:none !important; }
/* إزالة ارتفاع إجباري غير لازم */
#submenu3Dropdown .mega-dropdown-sidebar{ height:auto; }


/* ====== A) إزالة النقاط من قائمة المحاور ====== */
.mega-dropdown .menu-bulleted,
.mega-dropdown .menu-bulleted .menu-item-line{
  list-style: none !important;
  margin: 0;
  padding-left: 0; /* شيل مساحة النقاط */
}
.mega-dropdown .menu-bulleted .menu-item-line::marker{ content: '' }

/* مسافات وروح عامة للعناصر */
.mega-dropdown .menu-bulleted .menu-item-line a{
  display: inline-block;
  padding: 6px 22px 6px 0; /* مساحة للسهم على اليمين */
  text-decoration: none;
}

/* ====== B) سهم أنيمشن يمين العنصر عند الهوفر ====== */
.mega-dropdown .menu-bulleted .menu-item-line a::after{
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mega-dropdown .menu-bulleted .menu-item-line a:hover::after{
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* ====== C) أيقونة 39×36 بجوار عناوين الأعمدة ====== */
.col-head{
  display: flex;
  align-items: center;
  gap: 10px;
}
.head-icon--sm{
  width: 39px;
  height: 36px;
  object-fit: contain;
}

/* === Fix: icons should sit inline, not above === */
.mega-dropdown .col-head img.head-icon,
.mega-dropdown .col-head .head-icon--xl,
.mega-dropdown .menu-bulleted img.chip-icon {
  display: inline-block !important;   /* override global img {display:block} */
  vertical-align: middle;
}

/* أيقونة العنوان (39x36) */
.mega-dropdown .col-head img.head-icon,
.mega-dropdown .col-head .head-icon--xl {
  width: 39px;
  height: 36px;
  max-width: none;
  margin: 0 10px 0 0; /* مسافة يمين العنوان */
  object-fit: contain;
}

/* عنوان العمود نفسه جنب الأيقونة */
.mega-dropdown .col-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* أيقونات البنود الصغيرة داخل القوائم */
.mega-dropdown .menu-bulleted img.chip-icon {
  width: 18px;
  height: 18px;
  max-width: none;
  margin-inline-end: .4rem;
}

/* إزالة النقاط نهائيًا + ضبط السهم */
.mega-dropdown .menu-bulleted,
.mega-dropdown .menu-bulleted .menu-item-line {
  list-style: none !important;
  margin: 0;
  padding-left: 0;
}
.mega-dropdown .menu-bulleted .menu-item-line::marker { content: '' }

.mega-dropdown .menu-bulleted .menu-item-line a{
  position: relative;             /* مهم للسهم */
  display: inline-block;
  padding: 6px 22px 6px 0;        /* مساحة للسهم على اليمين */
  text-decoration: none;
}

/* سهم أنيميشن يطلع من داخل إلى خارج البند عند الهوفر */
.mega-dropdown .menu-bulleted .menu-item-line a::after{
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mega-dropdown .menu-bulleted .menu-item-line a:hover::after{
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* شبكة 4 أعمدة للقائمة الثالثة — الأول أعرض قليلاً */
.submenu3-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr; /* عمود 1 أكبر */
  gap:24px;
  align-items:start;
}

/* بلوك Formation (بدون أيقونة عنوان) */
.promo-formation{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:20px;
}
.promo-formation .col-head.no-icon{ display:block; }
.promo-formation .col-title{ margin:0 0 8px; }
.promo-formation .promo-text{
  margin:8px 0 12px;
  font-size:16px; line-height:1.7; color:#333;
}
.promo-formation .promo-cta{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; text-decoration:none;
}
.promo-formation .promo-cta::after{ content:'→'; transition:transform .2s ease; }
.promo-formation .promo-cta:hover::after{ transform:translateX(3px); }

 /* أيقونة العنوان لبقية الأعمدة (39×36) */
.mega-dropdown .col-head{
  display:flex; align-items:center; gap:10px;
}
.mega-dropdown .col-head img.head-icon{
  display:inline-block !important; /* لا تجعلها block حتى لا تقفز فوق العنوان */
  vertical-align:middle; width:39px; height:36px; object-fit:contain; max-width:none;
}

/* ===== إعادة أيقونة "الدورات التدريبية" بجوار البنود ===== */
.mega-dropdown .menu-bulleted{ margin:0; padding-left:0; list-style:none; }
.mega-dropdown .menu-bulleted .menu-item-line{
  display:flex; align-items:center; gap:8px;
  margin:4px 0;
}
.mega-dropdown .menu-bulleted .menu-item-line .chip-icon{
  width:18px; height:18px; display:inline-block; vertical-align:middle;
  flex:0 0 18px;
}

/* سهم أنيميشن على الروابط (يظهر بعد النص وليس بدل الأيقونة) */
.mega-dropdown .menu-bulleted .menu-item-line a{
  position:relative; display:inline-block; padding-right:20px; text-decoration:none;
}
.mega-dropdown .menu-bulleted .menu-item-line a::after{
  content:'→'; position:absolute; right:0; top:50%;
  transform:translateY(-50%) translateX(-6px); opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
.mega-dropdown .menu-bulleted .menu-item-line a:hover::after{
  transform:translateY(-50%) translateX(0); opacity:1;
}

/* استجابة */
@media (max-width: 1100px){
  .submenu3-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .submenu3-grid{ grid-template-columns: 1fr; }
}

/* ================================
   === Overrides (additive only) ===
   ================================ */

/* A) خط فاصل الهيدر يبقى ظاهر دائمًا فوق الميجا منيو */
.main-header { position: relative; z-index: 1000; }
.main-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:#ddd; pointer-events:none;
  z-index:1001; /* أعلى من .mega-dropdown (999) */
}

/* B) توحيد نهايات الـ sidebar/main ومنع سالب padding تحت 1345px */
.mega-dropdown-sidebar{
  padding-left: clamp(0px, calc((100vw - 1345px)/2), 200px);
}
.mega-dropdown-main{
  padding-right: clamp(0px, calc((100vw - 1345px)/2), 200px);
}

/* C) منع التداخل عند التصغير – تحوّل إلى عمودي */
@media (max-width: 1200px){
  .mega-dropdown-content{ flex-direction: column; }

  .mega-dropdown-sidebar{
    width: 100%;
    padding-left: 20px;  /* ألغِ الحساب لتفادي قيم سالبة */
    padding-right: 20px;
    height: auto;
    border: 0;
  }

  .mega-dropdown-main{
    width: 100%;
    border-left: 0;
    border-top: 1px solid #E5E7EB;  /* فاصل أفقي بدل العمودي */
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* D) تحسين بصري: فاصل أعلى لوحة الميجا منيو نفسها */
.main-header .mega-dropdown-content{
  border-top:1px solid #E5E7EB;
  background:#fff;
}


/* ===== Mobile Header Layout (icons + logo + menu) ===== */
@media (max-width: 768px) {
  /* ألغِ الخط السفلي في الموبايل */
  nav.main-header { border-bottom: 0; min-height: 70px; }
  nav.main-header::after { content: none; }

  /* حاوية الهيدر: شبكة عمود واحد مع تمركز */
  nav.main-header .container-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    height: 70px;
    min-height: 70px;
    padding-left: 48px;   /* مساحة لأيقونة القائمة يسار */
    padding-right: 72px;  /* مساحة لأيقونات اليمين */
    column-gap: 0;
  }

  /* الكتلة التي تضم زر الموبايل + الشعار */
  .brand-cluster {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* الشعار بالمنتصف تمامًا */
    gap: 8px;
  }
  .brand-cluster .logo { text-align: center; }
  .brand-cluster .logo img { height: 36px; width: auto; max-height: 36px; }

  /* زر القائمة يسار */
  .brand-cluster .mobile-menu-toggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
  }

  /* أيقونات (بحث، قائمة، حساب) يمين */
  .header-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 0; /* لا تدفعها Auto في الموبايل */
  }
  .header-icons .navbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .header-icons .navbar-icon img { width: 22px; height: 22px; }

  /* إخفاء القائمة الأفقية في الموبايل */
  .main-nav { display: none; }
}

/* IMDTEC Mobile Submenu Patch v3 */
@media (max-width:768px){
  /* Keep submenu styling consistent (no bullets, slight indent) */
  .main-nav.active .nav-menu > li > ul.sub-menu,
  .main-nav.active .nav-menu > li > ul.imd-generated-submenu{
    display:none !important;
    list-style:none;
    margin:6px 0 0;
    padding:0 0 0 14px;
  }

  /* Show only when parent is-open (overrides any previous display:none !important) */
  .main-nav.active .nav-menu > li.is-open > ul.sub-menu,
  .main-nav.active .nav-menu > li.is-open > ul.imd-generated-submenu{
    display:block !important;
  }
}



/* =========================================================
   ECEID-Style Mobile Menu Overlay (Drill-Down)
   ========================================================= */

/* The Container Overlay */
.mobile-menu-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background: #fff; z-index: 1000005; /* أعلى من أي شيء آخر */
  transform: translateX(100%); /* مخفية لليمين */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex; flex-direction: column;
}
.mobile-menu-overlay.is-open { transform: translateX(0); /* تظهر عند الفتح */ }

/* Prevent body scroll when menu is open */
body.imd-menu-open { overflow: hidden; }

/* Header inside Mobile Menu */
.mobile-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid #e5e7eb;
  height: 70px; flex: 0 0 70px; background: #fff;
}

/* Close Button (X) */
.mobile-menu__header .header__hamburger-cta {
  display: block; width: 30px; height: 30px; position: relative;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.mobile-menu__header .header__hamburger-cta span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #1f2937; transform-origin: center;
}
.mobile-menu__header .header__hamburger-cta.is-open span:nth-child(1) { top: 14px; transform: rotate(45deg); }
.mobile-menu__header .header__hamburger-cta.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu__header .header__hamburger-cta.is-open span:nth-child(3) { top: 14px; transform: rotate(-45deg); }

/* Slider Logic (200% width for two panels) */
.mobile-menu__viewport { position: relative; flex: 1; overflow: hidden; width: 100%; }
.mobile-menu__slider { 
  display: flex; width: 200%; height: 100%; 
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); 
}
.mobile-menu__slider.slide-left { transform: translateX(-50%); /* حركة الانزلاق لليسار */ }

/* Panels Style */
.mobile-panel { width: 50%; height: 100%; overflow-y: auto; background: #fff; padding-bottom: 40px; }
.mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.mobile-nav-list li { border-bottom: 1px solid #f3f4f6; }

/* Links Style */
.mobile-nav-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; text-decoration: none; color: #1f2937;
  font-size: 16px; font-weight: 600; transition: background 0.2s;
}
.mobile-nav-link:hover { background: #f9fafb; color: #003b95; }

/* Arrow for items with children */
.mobile-nav-link.has-children::after {
  content: ''; display: block; width: 8px; height: 8px;
  border-right: 2px solid #9ca3af; border-top: 2px solid #9ca3af; transform: rotate(45deg);
}

/* Sub-panel Header (Back button + Title) */
.sub-panel-header { padding: 15px 20px 10px; border-bottom: 1px solid #f3f4f6; background: #fff; }
.btn-back {
  background: none; border: none; padding: 0; margin-bottom: 10px;
  color: #D66D00; /* Orange Accent */
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.sub-panel-title { font-size: 18px; color: #003B5C; font-weight: 800; margin: 0; }

/* Utilities at bottom */
.mobile-utility { margin-top: 20px; padding: 20px; background: #f9fafb; border-top: 1px solid #eee; }
.mobile-utility a {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  color: #4b5563; font-weight: 600; text-decoration: none;
}

/* FORCE HIDE the old mobile menu logic */
@media (max-width: 768px) {
    .main-nav, .main-nav.active { display: none !important; }
}

/* =========================================================
   Hotfix: Microsoft-style Mobile Menu (Header stays visible)
   ========================================================= */


:root{ --imd-header-h: 90px; }
@media (max-width:768px){
  :root{ --imd-header-h: 70px; }
}

/* Keep header above the overlay */
.main-header{
  z-index: 99999 !important;
  background: #ffffff !important;
}

/* Hamburger (3 lines) -> X animation */
.mobile-menu-toggle.header__hamburger-cta{
  display: none; /* desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 100000; /* above overlay */
}

@media (max-width:768px){
  .mobile-menu-toggle.header__hamburger-cta{ display: flex; }
}

.mobile-menu-toggle.header__hamburger-cta span{
  display: block;
  width: 24px;
  height: 2px;
  background-color: #17488A;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.mobile-menu-toggle.header__hamburger-cta.is-open span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.header__hamburger-cta.is-open span:nth-child(2){
  opacity: 0;
}
.mobile-menu-toggle.header__hamburger-cta.is-open span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay should start under header (Microsoft-style) */
.mobile-menu-overlay{
  top: var(--imd-header-h) !important;
  height: calc(100vh - var(--imd-header-h)) !important;
  z-index: 99990 !important; /* under header */
  border-top: 1px solid #eee;
}

/* Hide inner overlay header (we use the main header button as X) */
.mobile-menu__header{ display:none !important; }

/* Make arrows visible */
.mobile-nav-link.has-children::after{
  border-right-color: #17488A;
  border-top-color: #17488A;
}



/* =========================================================
   Submenu3 (Formations) — Google-like layout (DESKTOP ONLY)
   Scope: #submenu3Dropdown فقط
   ========================================================= */
@media (min-width: 769px){

  /* Fix negative padding under 1345px (submenu3 only) */
  #submenu3Dropdown .mega-dropdown-main{
    padding-left: clamp(20px, calc((100vw - 1345px)/2), 200px);
    padding-right: clamp(20px, calc((100vw - 1345px)/2), 200px);
  }

  #submenu3Dropdown .submenu3-layout{
    display:block;
    width:100%;
  }

  #submenu3Dropdown .submenu3-head{
    margin-bottom: 12px;
  }

  #submenu3Dropdown .submenu3-body{
    margin-top: 10px;
  }

  /* UL printed by imd_render_course_categories_list() */
  #submenu3Dropdown .imd-submenu3-solutions{
    display: grid;
    grid-auto-flow: column;                       /* كل 3 تحت بعض ثم عمود جديد */
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-auto-columns: minmax(260px, 1fr);
    column-gap: 40px;
    row-gap: 22px;

    list-style: none !important;
    margin: 0;
    padding: 0;

    align-content: start;
    justify-content: start;
  }

  #submenu3Dropdown .imd-submenu3-solutions .imd-solution-item{
    display:flex;
    gap:12px;
    align-items:flex-start;  /* عشان الأيقونة ما تبقاش فوق */
    margin:0;
  }

  #submenu3Dropdown .imd-submenu3-solutions img.chip-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top: 2px;
    display:inline-block !important;
  }

  #submenu3Dropdown .imd-solution-text{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }

  #submenu3Dropdown a.imd-solution-title{
    font-weight:700;
    padding:0 !important;      /* يلغي padding الخاص بالسهم العام */
    text-decoration:none;
  }

  /* Cancel global arrow (→) on submenu3 items (Google-like) */
  #submenu3Dropdown a.imd-solution-title::after{
    content: none !important;
  }

  #submenu3Dropdown .imd-solution-summary{
    font-size:14px;
    line-height:1.45;
    color:#5f6368;
    margin:0;
  }
}


/* =========================================================
   1. إصلاح المحاذاة (Alignment Fix)
   ========================================================= */

@media (min-width: 992px) {
  
  /* القائمة الجانبية (Sidebar) */
  .mega-dropdown-sidebar {
    /* 
       التصحيح:
       1. (100vw - 1345px) / 2  -> المسافة البيضاء خارج الموقع
       2. + 20px                -> إضافة هامش اللوجو الداخلي لضبط المحاذاة تماماً
       3. max(20px, ...)        -> يمنع القائمة من الالتصاق بالحافة عند تصغير الشاشة
    */
    padding-left: max(20px, calc( (100vw - 1345px) / 2 + 20px )) !important;
    
    /* الحفاظ على العرض المناسب */
    width: 30vw !important; 
    min-width: 250px !important; 
  }

  /* المحتوى الرئيسي (Main Content) */
  .mega-dropdown-main {
    /* نفس التعديل للجهة اليمنى للحفاظ على التناسق */
    padding-right: max(20px, calc( (100vw - 1345px) / 2 + 20px )) !important;
    
    /* مسافة داخلية لفصل المحتوى عن القائمة */
    padding-left: 40px !important; 
  }

  /* القائمة الثالثة (Formations) - عرض كامل */
  #submenu3Dropdown .mega-dropdown-main {
    padding-left: max(20px, calc( (100vw - 1345px) / 2 + 20px )) !important;
    padding-right: max(20px, calc( (100vw - 1345px) / 2 + 20px )) !important;
  }
}

/* =========================================================
   2. إصلاح خروج العناصر عن الشاشة عند التصغير (Responsive Grid)
   ========================================================= */

/* عندما تكون الشاشة بين 992px و 1380px */
@media (min-width: 992px) and (max-width: 1380px) {
  
  /* إجبار العناصر على الترتيب في صفوف للأسفل بدلاً من التمدد أفقياً */
  #submenu2Dropdown .imd-submenu3-solutions,
  #submenu3Dropdown .imd-submenu3-solutions {
    display: grid !important;
    grid-auto-flow: row !important; /* تحويل إلى صفوف */
    grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة متساوية */
    
    column-gap: 15px !important;
    row-gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: start !important;
  }
  
  /* تصغير الخط قليلاً ليتناسب مع المساحة */
  .imd-solution-title {
    font-size: 14px !important; 
  }
}

/* للشاشات الأصغر قليلاً (قبل التابلت) */
@media (min-width: 992px) and (max-width: 1100px) {
  #submenu2Dropdown .imd-submenu3-solutions,
  #submenu3Dropdown .imd-submenu3-solutions {
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين فقط */
  }
}

/* ============================================================
   IMDTEC — Mega Dropdown Normalization Layer (SAFE APPEND)
   Paste at the very end of assets/css/global-skin.css
   - No deletion of existing rules
   - Fixes alignment under logo (no extra offsets)
   - Fixes resize overlap (992–1200 collisions)
   - Unifies submenu solutions grids (no overflow)
   ============================================================ */

/* 0) Container edge math (matches header container) */
:root{
  --imd-container-max: var(--container-max, 1345px);
  --imd-container-pad: var(--container-pad, 20px);

  /* edge = outer whitespace + container padding */
  --imd-container-edge: clamp(
    var(--imd-container-pad),
    calc((100vw - var(--imd-container-max)) / 2 + var(--imd-container-pad)),
    9999px
  );

  --imd-mega-x: 20px;
  --imd-mega-y: 22px;
  --imd-mega-col-min: 260px;
}

/* 1) Bullet-list reset داخل الميجا منيو (يمنع هوامش غير متوقعة) */
.mega-dropdown .menu-bulleted,
.mega-dropdown .menu-bulleted li{
  list-style: none !important;
}
.mega-dropdown .menu-bulleted{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Desktop alignment — Sidebar + Main */
@media (min-width: 992px){

  /* Sidebar must start exactly at container edge (logo alignment baseline) */
  .mega-dropdown-sidebar{
    padding-left: var(--imd-container-edge) !important;
    padding-right: var(--imd-mega-x) !important;
  }

  /* Main area should end at container edge (right alignment) */
  .mega-dropdown-main{
    padding-right: var(--imd-container-edge) !important;
  }

  /* FULL-WIDTH dropdown (no sidebar): content must start under logo exactly */
  .mega-dropdown-content > .mega-dropdown-main:only-child{
    padding-left: var(--imd-container-edge) !important;
    padding-right: var(--imd-container-edge) !important;
  }
}

/* 3) Critical fix: prevent layout collision on resize (992–1200)
   Existing theme rules often force sidebar width/min-width with !important.
   This block forces a clean stacked layout to avoid overlap. */
@media (max-width: 1200px){
  .mega-dropdown-content{
    flex-direction: column !important;
  }

  .mega-dropdown-sidebar,
  .mega-dropdown-main{
    width: 100% !important;
    min-width: 0 !important; /* beats min-width:250px !important */
  }

  /* Both sections align to container edge in stacked mode */
  .mega-dropdown-sidebar,
  .mega-dropdown-main{
    padding-left: var(--imd-container-edge) !important;
    padding-right: var(--imd-container-edge) !important;
  }
}

/* 4) Smart grid for “solutions” lists (Submenu1/2/3)
   - replaces grid-auto-flow: column layouts that cause overflow on shrink
   - auto-fit ensures no overlap at any width */
@media (min-width: 769px){

  /* Covers your current classing pattern:
     ul.menu-bulleted imd-submenu3-solutions imd-submenu2-solutions
     and other variants across sites */
  #submenu1Dropdown .imd-submenu1-solutions,
  #submenu2Dropdown .imd-submenu2-solutions,
  #submenu2Dropdown .imd-submenu3-solutions,
  #submenu3Dropdown .imd-submenu3-solutions{
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--imd-mega-col-min), 1fr)) !important;

    column-gap: 40px !important;
    row-gap: var(--imd-mega-y) !important;

    align-content: start !important;
    justify-content: start !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 5) Extra safety: if any legacy rule adds left padding to main in full-width menus */
@media (min-width: 769px){
  #submenu2Dropdown .mega-dropdown-content > .mega-dropdown-main:only-child,
  #submenu3Dropdown .mega-dropdown-content > .mega-dropdown-main:only-child{
    padding-left: var(--imd-container-edge) !important;
    padding-right: var(--imd-container-edge) !important;
  }
}