/* أنماط الهيدر والتذييل — تُحمَّل مستقلة ومستثناة من تقليم UCSS
   لأن عناصر القائمة (الحجاب وأزرار القوائم الفرعية) تُحقَن بجافاسكربت. */

/* =========================================================
   الهيدر
   ملاحظة: لا تضع backdrop-filter ولا filter ولا transform على
   .site-header — كلها تنشئ حاوية تموضع تحبس لوحة القائمة
   ذات position:fixed داخل شريط الهيدر.
   ========================================================= */

.header-inner{ display:flex; align-items:center; height:74px; gap:18px; }

/* الترتيب في RTL: البرقر أقصى اليمين، ثم الشعار، ثم الروابط، ثم الإجراء أقصى اليسار */
.menu-toggle{ order:1; }
.site-branding{ order:2; }
.main-nav{ order:3; }
.header-cta{ order:4; margin-inline-start:auto; }

/* ---------- زر البرقر ---------- */
.menu-toggle{
  display:none; position:relative; z-index:1002;
  background:none; border:0; cursor:pointer; padding:10px;
  border-radius:10px; transition:background .18s; flex:none;
}
.menu-toggle:hover{ background:rgba(255,255,255,.1); }
.menu-toggle:focus-visible{ outline:2px solid #2fd06e; outline-offset:2px; }
.menu-toggle span{
  display:block; width:26px; height:2px; background:#fff; margin:6px 0;
  border-radius:2px; transition:transform .25s, opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- زر سهم القائمة الفرعية: تنسيق أساسي مشترك ---------- */
.submenu-toggle{
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  font:inherit; line-height:0; -webkit-appearance:none; appearance:none;
}
.submenu-toggle svg{ pointer-events:none; display:block; }


/* ---------- شاشات كبيرة: أربعة روابط أفقية بقوائم منسدلة ---------- */
@media(min-width:1024px){
  .main-nav{ display:flex; align-items:center; }
  .main-nav .nav-menu{ display:flex; align-items:center; gap:30px; margin:0; padding:0; list-style:none; }
  .main-nav .nav-menu > li{
    position:relative; border:0; padding:0;
    display:flex; align-items:center; gap:5px;
  }
  .main-nav .nav-menu > li > a{
    display:block; padding:27px 0; line-height:1.25;
    color:rgba(255,255,255,.9); font-weight:700; font-size:15.5px; white-space:nowrap;
  }
  .main-nav .nav-menu > li > a:hover,
  .main-nav .nav-menu > .current-menu-item > a,
  .main-nav .nav-menu > .current-menu-ancestor > a{ color:#fff; background:none; }
  .main-nav .nav-menu > li::after{
    content:""; position:absolute; right:0; bottom:19px; height:2px; width:0;
    background:#2fd06e; transition:width .22s; pointer-events:none;
  }
  .main-nav .nav-menu > li:hover::after,
  .main-nav .nav-menu > li.current-menu-item::after,
  .main-nav .nav-menu > li.current-menu-ancestor::after{ width:100%; }

  /* سهم القائمة المنسدلة */
  .main-nav .nav-menu > li.menu-item-has-children > .submenu-toggle{
    position:static; width:14px; height:14px; margin:0;
    display:grid; place-items:center; transform:none;
    color:rgba(255,255,255,.55); pointer-events:none;
    transition:color .18s, transform .22s;
  }
  .main-nav .nav-menu > li.menu-item-has-children > .submenu-toggle svg{ width:13px; height:13px; }
  .main-nav .nav-menu > li:hover > .submenu-toggle{ color:#fff; transform:rotate(180deg); }

  /* اللوحة المنسدلة */
  .main-nav .sub-menu{
    display:block; position:absolute; top:100%; right:-14px; min-width:236px;
    background:#12293f; border:1px solid rgba(255,255,255,.09); border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.32); padding:8px 0; margin:0;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .18s, visibility .18s, transform .18s;
  }
  .main-nav .nav-menu > li:hover > .sub-menu,
  .main-nav .nav-menu > li:focus-within > .sub-menu,
  .main-nav .nav-menu > li.open > .sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .main-nav .sub-menu li{ border:0; }
  .main-nav .sub-menu a{
    display:block; padding:10px 20px; font-size:14.5px; font-weight:500;
    color:rgba(255,255,255,.76); white-space:nowrap;
  }
  .main-nav .sub-menu a:hover{ color:#fff; background:rgba(255,255,255,.07); }

  .nav-overlay{ display:none; }
}

/* ---------- جوال ولوحي: برقر ولوحة منزلقة ---------- */
@media(max-width:1023px){
  .menu-toggle{ display:block; }

  .main-nav{
    display:block; position:fixed; top:0; bottom:0; right:0;
    width:min(360px,88vw); background:#0d2135; z-index:1001;
    padding:92px 0 32px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-16px 0 44px rgba(0,0,0,.3);
    flex:none; border-bottom:0;
  }
  .main-nav.open{ transform:translateX(0); }

  .main-nav .nav-menu,
  .main-nav ul{ display:block; margin:0; padding:0; list-style:none; }
  .main-nav li{ border-bottom:1px solid rgba(255,255,255,.07); padding:0; position:relative; }
  .main-nav a{
    display:block; padding:15px 26px; color:rgba(255,255,255,.92);
    font-weight:700; font-size:16px;
  }
  .main-nav a::after{ display:none; }
  .main-nav a:hover,
  .main-nav .current-menu-item > a{ color:#fff; background:rgba(255,255,255,.06); }

  /* أكورديون */
  .main-nav .sub-menu{ display:none; background:rgba(0,0,0,.22); }
  .main-nav li.open > .sub-menu{ display:block; }
  .main-nav .sub-menu li{ border-bottom:1px solid rgba(255,255,255,.05); }
  .main-nav .sub-menu li:last-child{ border-bottom:0; }
  .main-nav .sub-menu a{
    padding:12px 42px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.72);
  }
  .main-nav .sub-menu a:hover{ color:#fff; }

  .submenu-toggle{
    position:absolute; inset-inline-start:14px; top:6px;
    width:38px; height:38px;
    color:rgba(255,255,255,.6); display:grid; place-items:center;
    border-radius:8px; transition:color .18s, background .18s, transform .25s;
  }
  .submenu-toggle:hover{ color:#fff; background:rgba(255,255,255,.08); }
  .submenu-toggle:focus-visible{ outline:2px solid #2fd06e; outline-offset:-2px; }
  .main-nav li.open > .submenu-toggle{ transform:rotate(180deg); color:#fff; }

  .nav-overlay{
    position:fixed; inset:0; background:rgba(6,20,32,.55);
    opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:1000;
  }
  .nav-overlay.show{ opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }
}

.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .btn{ display:inline-block; padding:10px 20px; font-size:14.5px; }

@media(max-width:520px){
  .header-cta .btn{ display:none; }
  .main-nav{ width:min(340px,92vw); }
  .header-inner{ height:66px; gap:10px; }
}
@media(prefers-reduced-motion:reduce){
  .main-nav,.nav-overlay,.menu-toggle span,.submenu-toggle,.main-nav .sub-menu{ transition:none; }
}

/* =========================================================
   خريطة روابط التذييل (4 أعمدة — التواصل ضمن عمود العلامة)
   ========================================================= */
.footer-grid{ grid-template-columns:1.35fr 1fr 1.1fr 1.1fr; gap:38px; align-items:start; }
.site-footer ul li{ margin-bottom:9px; font-size:14.5px; line-height:1.6; }
.footer-contact-block{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); }
.footer-contact-block h4{ margin:0 0 14px; }
.footer-contact li{ color:#c7d2dc; }
@media(max-width:1100px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; gap:32px; } .footer-brand{ grid-column:1 / -1; } }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr; gap:26px; } }