/* =========================================================
   global-skin.css — CLEANED & ALIGNED WITH NEW HEADER SPEC
   Date: 2025-09-20
   Scope:
   - Uses EXACT header class names provided (.main-header, .container-header, .main-nav, .nav-menu, ...)
   - Removes legacy header namespaces (.edu-header, .site-header, etc.)
   - Keeps site-wide tokens/components minimal & non-conflicting
   ========================================================= */

/* =========================
   0) Reset & Base Typography (as provided)
   ========================= */
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) Tokens (safe, header-agnostic)
   ========================= */
:root{
  --primary-color:#17488a; --secondary-color:#08915e;
  --surface-bg:#ffffff; --surface-muted:#f7f9fc; --border-color:#e5e7eb;
  --heading-color:#0f172a; --default-color:#111827;
  --shadow-sm:0 2px 6px rgba(0,0,0,.06);
  --container-max:1345px; --content-max:1345px;
}


/* =========================
   UNIFIED HEADER (Global)
   ========================= */

/* --- Tokens --- */
:root{
  --header-h: 90px;
  --container-max: 1345px;
  --brand: #17488A;
  --brand-dark:#0e2d5c;
}

/* --- Skeleton --- */
.main-header {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--header-h);
  width: 100%;
  border-bottom: 1px solid #ddd;
  z-index: 1000;
}
.spacer-header{ margin:0; padding:0; }

/* --- Container & layout --- */
.container-header{
  max-width: var(--container-max);
  width:100%;
  margin:0 auto;
  padding:10px 20px;
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* منطقة يسار الهيدر: زر القائمة + أيقونات سريعة (إن وجدت) */
.header-left{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* الشعار */
.logo{ flex-shrink:0; }
.logo img{ height:40px; width:auto; display:block; }

/* --- Primary Nav --- */
.main-nav{ flex-grow:1; margin-left:10px; }
.nav-menu{ list-style:none; display:flex; gap:5px; margin:0; padding:0; }
.nav-menu li a{
  color: var(--brand);
  font-weight:600;
  line-height:1.2;
  font-size:16px;
  text-decoration:none;
  padding:8px;
  display:inline-block;
}
.nav-menu li a:hover{ color: var(--brand-dark); }

/* --- Icons cluster (3 أيقونات) --- */
.header-icons{
  /* يدفع مجموعة الأيقونات إلى أقصى اليمين */
  margin-left:auto;
  display:flex; align-items:center; gap:15px;
}
.navbar-icon{ height:28px; width:auto; cursor:pointer; display:block; }

/* أزرار أيقونات دلالية (للهيدر المُحدَّث الذي يعتمد <button>/<a>) */
.icon-button{
  appearance:none; border:0; background:transparent;
  padding:6px; line-height:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon{ width:24px; height:24px; display:block; }

/* حاوية الأيقونات السريعة بجانب زر القائمة (إن استُخدمت) */
.quick-icons{ display:inline-flex; align-items:center; gap:12px; }

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

/* --- Accessibility (تركيز لوحة المفاتيح) --- */
.main-header a:focus-visible,
.main-header button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* =========================
   Mega Dropdown (عام)
   ========================= */
.main-header .mega-dropdown{
  display:none; position:absolute; top:var(--header-h); left:0;
  width:100%; z-index:999; background:transparent;
}
.mega-dropdown.show,
.main-header .mega-dropdown.open{ display:block; }

.mega-dropdown-content{
  display:flex; width:100vw; position:relative;
  left:50%; transform:translateX(-50%);
}

/* Sidebar */
.mega-dropdown-sidebar{
  width:30vw; background-color:#F2F2F2;
  padding-left:calc((100vw - var(--container-max))/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; font-size:16px; font-weight:600;
  margin:2px 0 5px 0; line-height:1.2; cursor:default; transition:all .2s ease;
  background:transparent;
}
.sidebar-link:hover,
.sidebar-link.active{
  background-color:#ffffff;
  color:#17448a; font-weight:600; padding-left:20px;
}
.sidebar-link i.bi-chevron-right{ font-size:1.2em; font-weight:bold; }

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

.title-audit{ 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:-0.05em; hyphens:auto; transition:all .3s ease;
}
.service-description:hover{ color:#333; }
.audit-link{ display:inline-flex; align-items:center; font-size:1.2em; color:#333; text-decoration:none; transition:color .3s ease; }
.audit-link:hover{ text-decoration:underline; }
.audit-arrow{ display:inline-block; font-size:1.2em; margin-left:8px; transition: transform .3s ease, opacity .3s ease; cursor:pointer; }
.audit-arrow::before{ content:'→'; display:inline-block; transition: transform .3s ease; }
.audit-link:hover .audit-arrow::before{ transform: translateX(5px) rotate(360deg); }

/* Insights */
.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-color:#f0f0f0; transform: translateY(-3px); box-shadow:0 4px 12px rgba(0,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-color:#f2f2f2; border-radius:25px; padding:15px; box-shadow:0 4px 8px rgba(0,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; }

/* =========================
   Search Modal
   ========================= */
.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 auto;
  background:#fff; padding:20px; box-shadow:0 4px 8px rgba(0,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; }
.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%; }

/* =========================
   Responsive
   ========================= */
@media (max-width:768px){
  .container-header{ gap:10px; padding:10px 15px; height:70px; overflow:hidden; }

  /* ترتيب العناصر: زر - شعار - أيقونات */
  .mobile-menu-toggle{ display:block; order:1; flex:0 0 40px; }
  .logo{ order:2; flex:1; text-align:center; }
  .header-icons{ order:3; flex:0 0 auto; gap:8px; }
  .header-icons img{ height:20px; width:auto; }
  .logo img{ max-width:120px; }

  /* القائمة (تفتح/تغلق بالـJS) */
  .main-nav{
    display:none; /* مخفية افتراضياً على الموبايل */
    position:absolute; top:70px; right:20px; left:20px;
    background:#fff; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.1);
    border-radius:12px;
  }
  .main-nav.active{ display:block; }
  .nav-menu{ flex-direction:column; justify-content:flex-start; gap:15px; }
}

@media (min-width:769px){
  .container-header{ flex-wrap:nowrap; }
  .main-nav{ position:static; border-bottom:none; }
  .nav-menu{ justify-content:center; gap:20px; }
}

/* =========================
   Optional: RTL tweaks
   ========================= */
[dir="rtl"] .main-nav{ margin-left:0; margin-right:10px; }
[dir="rtl"] .header-icons{ margin-left:0; margin-right:auto; }















/* =========================
   3) Global Components (kept minimal, no header conflicts)
   ========================= */
.edu-page{ background: var(--surface-bg); color: var(--default-color); }

/* Grids/Cards (no .row usage) */
.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); }

/* Sections */
.edu-section{ padding-block: clamp(40px, 6vw, 80px); }
.edu-section--alt{ background: var(--surface-muted); }

/* 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:#17488A; --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; }

/* ===== Footer base ===== */
.imdtec-footer{
  background:#17488a;
  color:#fff;
  font-family:'Segoe UI',sans-serif;
  padding-top:40px;
}
/* =========================
   Footer — IMDTEC (CSS جديد)
   ========================= */

/* — الأساس — */
.imdtec-footer{
  background:#17488a;
  color:#fff;
  font-family:'Segoe UI',sans-serif;
  padding-top:40px;
}

/* — تقسيم علوي: Grid ثابت 50/50 — */
.footer-top{
  max-width: var(--container-max);
  margin:0 auto;
  padding:0 20px 40px;
  display:grid !important;                         /* إلغاء أي flex سابق */
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 أعمدة متساوية */
  gap:24px;
  align-items:start;
  box-sizing:border-box;
}
.footer-top .footer-column{ min-width:0; }         /* منع تمدد محتوى العمود */

/* يسار = العمود الأول يشغل عمودين (نصف الفوتر) */
.footer-top .footer-column:first-child{
  grid-column: 1 / span 2;
}

/* يمين = العمودان 2 و3 (ربع + ربع) + فاصل عمودي */
.footer-top .footer-column:nth-child(2){
  grid-column: 3;
  border-left:1px solid rgba(255,255,255,.35);
  padding-left:24px;
  align-self:stretch;                               /* يمتد بطول الكتلة */
}
.footer-top .footer-column:nth-child(3){
  grid-column: 4;
}

/* — عناوين وقوائم الروابط — */
.footer-column h4{
  font-size:16px;
  margin:0 0 12px;
  color:#fff;
}
.footer-column ul,
.footer-company-menu,
.footer-column-list{
  list-style:none; padding:0; margin:0;
}
.footer-column ul li,
.footer-company-menu li,
.footer-column-list li{ margin-bottom:8px; }
.footer-column a,
.footer-company-menu li a,
.footer-column-list a{
  color:#d9deef; text-decoration:none; font-size:14px;
}
.footer-column a:hover,
.footer-company-menu li a:hover,
.footer-column-list a:hover{ color:#fff; }

/* — لوحة العروض اليسرى (CTA + Newsletter + Logos) — */
.offer-line{
  display:grid;
  grid-template-columns:22px 1fr;   /* أيقونة صغيرة + نص/نموذج */
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.offer-line i{
  width:22px; text-align:center;
  font-size:18px; line-height:1; color:#fff;
}
/* fallback للأيقونات في حال عدم تحميل Font Awesome */
.offer-line:first-of-type i::before{
  content:"🎁";
}
.offer-line:nth-of-type(2) i::before{
  content:"📰";
}

.offer-texts{ display:grid; gap:6px; }
.offer-title{ font-size:15px; color:#fff; }
.offer-cta{
  font-size:14px; color:#fff;
  text-decoration:underline; text-underline-offset:2px;
}
.offer-cta:hover{ opacity:.85; }

/* نموذج النشرة */
.newsletter-form{ display:flex; gap:10px; }
.newsletter-form input[type="email"]{
  flex:1; min-width:0; width:100%;
  padding:10px 12px;
  border:none; border-radius:6px; outline:none;
  box-sizing:border-box;
}
.newsletter-form button{
  padding:10px 14px; border:none; border-radius:6px;
  background:#fff; color:#17488a; font-weight:600; cursor:pointer;
}
.newsletter-form button:hover{ opacity:.9; }

/* شعارات الجهات (يسار) — حجم مضبوط وعدم تمدد */
.offer-logos{
  /* من Flex إلى Grid لملء العرض بالتساوي */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 أعمدة متساوية */
  gap: 16px;                            /* مسافة متوازنة بين الشعارات */
  align-items: center;
  justify-items: start;                 /* محاذاة يسار داخل كل خلية */
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}

/* تكبير ذكي حسب العرض مع سقف آمن */
.offer-logos img{
  width: 100%;           /* كل شعار يملأ عموده أفقياً */
  height: auto;
  max-height: none;      /* إلغاء القيود القديمة (32px/36px) */
  object-fit: contain;   /* يحافظ على النسبة */
  display: block;
}



.offer-logos .logo-link{ display:inline-flex; }

/* — إخفاء شريط الشهادات القديم لمنع تكرار الصور — */
.footer-certwrap{ display:none !important; }

/* — شريط سفلي للفوتر — */
.footer-bottom-bar{
  background:#ffffff;
  border-top:1px solid rgba(0,0,0,.08);
  padding:15px 20px;
}
.footer-bottom-content{
  max-width: var(--container-max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand__logo{ height:34px; width:auto; object-fit:contain; display:block; }
.footer-brand__tagline{ font-size:14px; line-height:1.2; color:#1f2937; font-weight:500; margin-left:2px; }
.footer-social{ display:flex; align-items:center; gap:12px; margin-left:6px; }
.footer-social a{ font-size:18px; line-height:1; color:#17488a; text-decoration:none; }
.footer-social a:hover{ opacity:.8; }
.footer-right{ display:flex; align-items:center; gap:15px; margin-left:auto; flex-wrap:wrap; }
.footer-right .language{ color:#1f2937; font-size:14px; font-weight:500; }

/* — وصولية — */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* — Responsive — */
@media (max-width: 980px){
  .footer-top{
    grid-template-columns:1fr;
    gap:20px;
  }
  .footer-top .footer-column:first-child{ grid-column:auto; }
  .footer-top .footer-column:nth-child(2){
    grid-column:auto;
    border-left:0; padding-left:0;
    border-top:1px solid rgba(255,255,255,.35);  /* فاصل أفقي */
    padding-top:16px;
  }
}



/* =========================
   END — Page-specific CSS should load AFTER this file.
   ========================= */