/*
 * KLG Header — Scoped, tidy, and collision-free
 * يعمل فقط داخل الهيدر والميجا/الدروَر بدون التأثير على بقية الصفحة
 */

/* =========================
   0) Kurdish font (NRT)
   ========================= */
@font-face{
  font-family:"NRT";
  src:url("/fonts/NRT-Reg.ttf") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NRT";
  src:url("/fonts/NRT-Bd.ttf") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* =========================
   1) Header-scoped variables
   ========================= */
.modern-header,
.mega-menu-container,
.mobile-drawer{
  /* Palette */
  --primary-gold:#d4af37;
  --secondary-gold:#b8941f;
  --accent-gold:#f4d03f;

  --surface:#fff;
  --surface-2:#fafafa;
  --text-strong:#2b2b2b;
  --text:#555;
  --text-muted:#888;
  --border:rgba(0,0,0,.12);
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.95);

  /* Effects */
  --gold-gradient:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));
  --glass-gradient:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74));

  /* Motion */
  --t-fast:.18s ease;
  --t:.28s ease;
  --t-slow:.45s ease;

  /* Layout */
  --header-h:90px;

  /* Typography */
  --font:"Tajawal","NRT","Noto Sans Arabic",system-ui,Arial,sans-serif;
  --w-400:400; --w-600:600; --w-700:700;
}

/* لا Reset عام — فقط داخل مكوّن الهيدر */
.modern-header *{ box-sizing:border-box }

/* =========================
   2) Modern Header
   ========================= */
.modern-header{
  position:fixed; inset-block-start:0; inset-inline:0;
  height:var(--header-h);
  background:var(--glass);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  z-index:1050;
  transition:all var(--t);
  font-family:var(--font);
  direction:rtl; text-align:right;
}
.modern-header.scrolled{
  background:rgba(255,255,255,.98);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  height:80px;
}
.header-container{
  max-width:var(--content-max, 1400px);
  margin-inline:auto;
  padding-inline:var(--container-padding, 2rem);
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}

/* =========================
   3) Logo
   ========================= */
.logo-section{ display:flex; align-items:center; position:relative; z-index:2 }
.brand-logo{ display:flex; align-items:center; gap:1rem; text-decoration:none; transition:transform var(--t) }
.brand-logo:hover{ transform:translateY(-2px) }

.logo-wrapper{ position:relative; display:grid; place-items:center }
.logo-frame{
  inline-size:60px; block-size:60px; border-radius:50%;
  background:var(--gold-gradient); display:grid; place-items:center;
  padding:3px; box-shadow:0 0 20px rgba(212,175,55,.28);
  transition:all var(--t);
}
.logo-frame:hover{ transform:scale(1.06); box-shadow:0 0 26px rgba(212,175,55,.45) }
.main-logo{ inline-size:100%; block-size:100%; border-radius:50%; object-fit:cover; background:#fff }

.brand-text{ display:flex; flex-direction:column; gap:.2rem }
.company-name{ font-weight:var(--w-700); color:var(--text-strong); font-size:1.45rem; margin:0; transition:color var(--t) }
.company-tagline{ font-weight:var(--w-400); color:var(--text); font-size:.82rem; opacity:.9 }
.brand-logo:hover .company-name{ color:var(--primary-gold) }

/* =========================
   4) Navigation (desktop)
   ========================= */
.main-navigation{ flex:1; display:flex; justify-content:center }
.nav-menu{ display:flex; list-style:none; gap:1.2rem; align-items:center; margin:0; padding:0 }
.nav-item{ position:relative }

.nav-link{
  display:flex; align-items:center; gap:.55rem;
  padding:.9rem 1.25rem; border-radius:40px;
  text-decoration:none; color:var(--text-strong); font-weight:var(--w-600);
  position:relative; overflow:hidden; transition:all var(--t);
}
.nav-link::before{
  content:""; position:absolute; inset:0; inline-size:0;
  background:var(--gold-gradient); z-index:-1; transition:inline-size var(--t);
}
.nav-link:hover::before,
.nav-link.active::before{ inline-size:100% }
.nav-link:hover,
.nav-link.active{ color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(212,175,55,.28) }

.dropdown-arrow{ font-size:.85rem; transition:transform var(--t) }
.nav-item.has-mega-menu:hover .dropdown-arrow{ transform:rotate(180deg) }

/* =========================
   5) Mega Menu (desktop)
   ========================= */
.mega-menu-container{
  position:fixed;
  inset-block-start:var(--header-h);                /* أسفل الهيدر مباشرة */
  inset-inline-start:50%;
  transform:translateX(-50%);
  inline-size:min(92vw,1180px);
  max-inline-size:min(92vw,1180px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
  z-index:1100; overflow:hidden;
}
.nav-item.has-mega-menu:hover .mega-menu-container{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%);
}
.mega-menu-content{ display:flex; min-block-size:380px }
.mega-menu-grid{ flex:1; display:grid; grid-template-columns:repeat(4,1fr) }
.mega-column{ padding:1.5rem; border-inline-start:1px solid var(--border) }
.mega-column:first-child{ border-inline-start:none }
.mega-column:hover{ background:rgba(212,175,55,.03) }

.column-header{
  display:flex; align-items:center; gap:.7rem;
  margin-block-end:1rem; padding-block-end:.8rem;
  border-block-end:2px solid var(--primary-gold);
}
.column-header i{ color:var(--primary-gold); font-size:1.1rem }
.column-header h4{ margin:0; font-size:1.02rem; font-weight:var(--w-700); color:var(--text-strong) }

.parent-project{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .8rem; margin-block:.25rem;
  text-decoration:none; color:var(--text-strong);
  background:rgba(212,175,55,.06);
  border:1px solid transparent; border-radius:10px; transition:all var(--t);
  font-weight:var(--w-600);
}
.parent-project:hover{ background:var(--gold-gradient); color:#fff; transform:translateX(-4px); border-color:var(--primary-gold) }

.sub-projects{ list-style:none; padding:0; margin:.6rem 1.2rem 0 0; display:grid; gap:.45rem }
.sub-projects a{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.55rem .7rem; border-radius:8px;
  color:var(--text); border-inline-start:3px solid transparent;
  transition:all var(--t);
}
.sub-projects a:hover{ background:rgba(212,175,55,.12); color:var(--text-strong); border-inline-start-color:var(--primary-gold) }

/* Showcase (اختياري) */
.mega-showcase{
  inline-size:300px; background:linear-gradient(135deg,#f7f8fa,#eceff3);
  display:grid; place-items:center; border-inline-end:1px solid var(--border)
}
.showcase-content{ text-align:center; padding:1.6rem }
.showcase-image{
  inline-size:240px; block-size:240px; object-fit:cover;
  border-radius:14px; margin-block-end:1rem; transition:transform var(--t)
}
.showcase-image:hover{ transform:scale(1.04) }
.showcase-btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--gold-gradient); color:#fff; padding:.75rem 1.3rem; border-radius:24px;
  box-shadow:0 6px 18px rgba(212,175,55,.28); transition:transform var(--t)
}
.showcase-btn:hover{ transform:translateY(-2px) }

/* =========================
   6) Controls — language & search
   ========================= */
.header-controls{ display:flex; align-items:center; gap:.8rem }

.language-selector{ position:relative }
.lang-toggle{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem 1rem; border-radius:24px;
  background:transparent; border:2px solid var(--border); color:var(--text-strong);
  font-family:var(--font); font-weight:var(--w-600); cursor:pointer; transition:all var(--t)
}
.lang-toggle:hover{ border-color:var(--primary-gold); color:var(--primary-gold); background:rgba(212,175,55,.06) }
.language-selector.active .lang-arrow{ transform:rotate(180deg) }

.language-menu{
  position:absolute; inset-block-start:calc(100% + 10px); inset-inline-end:0;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  min-inline-size:150px; overflow:hidden;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t), transform var(--t);
  z-index:1001;
}
.language-selector.active .language-menu{ opacity:1; transform:translateY(0); pointer-events:auto }
.lang-option{
  display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem;
  color:var(--text-strong); text-decoration:none; border-block-end:1px solid var(--border);
  transition:background var(--t), color var(--t)
}
.lang-option:last-child{ border-bottom:0 }
.lang-option:hover{ background:var(--gold-gradient); color:#fff }

.search-toggle{
  inline-size:48px; block-size:48px; border-radius:50%;
  background:var(--gold-gradient); color:#fff; border:0; cursor:pointer;
  display:grid; place-items:center; transition:transform var(--t), box-shadow var(--t);
  box-shadow:0 6px 18px rgba(212,175,55,.28)
}
.search-toggle:hover{ transform:translateY(-2px) scale(1.04) }

/* Search overlay (خاص بالهيدر) */
.search-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all var(--t); z-index:2000
}
.search-overlay.active{ opacity:1; visibility:visible }
.search-container{ position:relative; inline-size:min(92vw,600px) }
.search-box{
  display:flex; background:var(--surface); border-radius:50px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.32)
}
.search-input{ flex:1; padding:1.3rem 1.6rem; border:0; font:inherit; font-size:1.05rem; outline:none; background:transparent }
.search-btn{ inline-size:80px; background:var(--gold-gradient); border:0; color:#fff; font-size:1.1rem; cursor:pointer; transition:opacity var(--t) }
.search-btn:hover{ opacity:.9 }
.search-close{
  position:absolute; inset-block-start:-56px; inset-inline-start:50%; transform:translateX(-50%);
  inline-size:48px; block-size:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.22); border:2px solid #fff; color:#fff; cursor:pointer; transition:all var(--t)
}
.search-close:hover{ background:#fff; color:#222 }

/* =========================
   7) Mobile Drawer (≤1200px)
   ========================= */
@media (max-width:1200px){
  .main-navigation{ display:none }
  .header-container{ padding-inline:1rem }
  .brand-text,.lang-text{ display:none }

  .mobile-toggle{
    display:flex; flex-direction:column; justify-content:space-between;
    inline-size:30px; block-size:20px; background:transparent; border:0; cursor:pointer; padding:0
  }
  .hamburger-line{ inline-size:100%; block-size:2px; background:var(--text-strong); transition:all var(--t); transform-origin:center }
  .mobile-toggle.active .hamburger-line:nth-child(1){ transform:translateY(9px) rotate(45deg) }
  .mobile-toggle.active .hamburger-line:nth-child(2){ opacity:0 }
  .mobile-toggle.active .hamburger-line:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

  .mobile-drawer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t);
    z-index:1998
  }
  .mobile-drawer-backdrop.show{ opacity:1; visibility:visible }

  .mobile-drawer{
    position:fixed; inset-block:0; inset-inline-end:0;
    inline-size:min(92vw,420px); background:var(--surface);
    transform:translateX(110%); transition:transform var(--t);
    z-index:1999; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,.2);
    direction:rtl; text-align:right; font-family:var(--font)
  }
  html[dir="ltr"] .mobile-drawer{ inset-inline-start:0; inset-inline-end:auto; transform:translateX(-110%) }
  .mobile-drawer.open{ transform:translateX(0) }

  .mobile-drawer__header{
    position:sticky; inset-block-start:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.1rem; border-bottom:1px solid var(--border); background:var(--surface)
  }
  .mobile-drawer__title{ font-weight:var(--w-700); color:var(--text-strong); font-size:1.05rem }
  .mobile-drawer__close{ background:transparent; border:0; font-size:1.7rem; cursor:pointer; line-height:1; padding:.25rem .5rem }

  .mobile-drawer__body{
    padding:12px; overflow:auto; -webkit-overflow-scrolling:touch;
    display:grid; gap:.6rem; background:linear-gradient(180deg,#f7f7f8,#fff)
  }

  .mobile-link,.acc-parent{
    display:flex; align-items:center; gap:.6rem;
    padding:.95rem 1rem; border-radius:14px; text-decoration:none; color:var(--text-strong);
    background:#fff; border:1px solid var(--border);
    transition:transform var(--t), box-shadow var(--t), border-color var(--t)
  }
  .mobile-link:hover,.acc-parent:hover{ transform:translateY(-1px); border-color:var(--primary-gold); box-shadow:0 8px 18px rgba(0,0,0,.06) }

  .mobile-acc__btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    padding:1rem; border-radius:14px; background:#fff; border:1px solid var(--border);
    cursor:pointer; font:inherit; color:var(--text-strong)
  }
  .mobile-acc__btn .acc-caret{ transition:transform var(--t) }
  .mobile-acc__btn[aria-expanded="true"] .acc-caret{ transform:rotate(180deg) }

  .mobile-acc__panel{
    margin-top:.45rem; padding:.5rem; border:1px dashed var(--border);
    border-radius:12px; background:var(--surface-2)
  }
  .mobile-acc__panel[hidden]{ display:none }

  .acc-group{
    background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:.6rem; margin-bottom:.55rem
  }
  .acc-group__head{ display:flex; align-items:center; gap:.55rem; color:var(--text-strong); margin:.2rem 0 .4rem }
  .acc-group__head i{ color:var(--primary-gold) }
  .acc-group__head h4{ margin:0; font-size:.96rem; font-weight:var(--w-700) }

  .acc-sub{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem }
  .acc-sub a{
    display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border-radius:8px;
    color:var(--text); text-decoration:none; transition:background var(--t), color var(--t), transform var(--t)
  }
  .acc-sub a:hover{ background:rgba(212,175,55,.13); color:var(--text-strong); transform:translateY(-1px) }
}

/* =========================
   8) Responsive tweaks
   ========================= */
@media (max-width:576px){
  .modern-header{ height:70px }
  .header-container{ padding-inline:1rem }
  .logo-frame{ inline-size:50px; block-size:50px }
  .search-toggle{ inline-size:42px; block-size:42px }
}

/* =========================
   9) Reduced motion
   ========================= */
@media (prefers-reduced-motion:reduce){
  .modern-header, .modern-header *{ transition:none !important; animation:none !important }
}