/* =========================
   0) Reset & Base Typography
   ========================= */
body, main, section, .site-content, .page-content { margin-top:0; padding-top:0; }
body { font-family: Arial, sans-serif; margin:0; padding:0; }
*, *::before, *::after { box-sizing: border-box; transition: none; }

h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:.5rem; font-weight:600; line-height:1.2; color:#222; }
p { margin-top:0; margin-bottom:1rem; }

a { color:#17488A; text-decoration:none; }
a:hover { color:#0e2d5c; text-decoration:underline; }

ul, ol { margin-top:0; margin-bottom:1rem; padding-left:2rem; }
ul ul, ol ul, ul ol, ol ol { margin-bottom:0; }

img { vertical-align: middle; max-width:100%; height:auto; }

/* =========================
   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;
}

/* Sidebar */
.mega-dropdown-sidebar {
  width:30vw; background:#F2F2F2;
  padding-left:calc((100vw - 1345px) / 2);
  padding-right:20px; padding-top:10px; padding-bottom:30px;
  height:600px; overflow-y:auto;
}
.mega-dropdown-sidebar h4 { margin:0 0 15px 0; font-size:18px; color:#333; background:#F2F2F2; 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 */
.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; }
.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; }

.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); }
.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; }

/* =========================
   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; }
}
@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 */
.insights-page-container { display:flex; flex-direction:column; padding:20px; }
.insights-category { margin-bottom:40px; }
.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 أو الكروت داخلها */
#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; }
}