/* HERO-LAB-99 — تعديلات الرأس التي اعتمدها حمد في صفحة التجربة البيضاء، مطبّقة على الموقع كله (الرئيسية وكل صفحات الرأس الجديد):
   رأس أصغر · الرأس الثابت زجاجي أبيض نهاراً · المحفظة · روابط القوائم بزاوية حادة من جهة الخط · ألوان القوائم بحسب الوضع · زر «كل خدمات…» ممتلئ · الأزرار عند المرور بالأخضر نهاراً. */

/* ───── HERO-LAB-86: الرأس الثابت عند التمرير زجاجي أبيض بدل الأخضر الشفاف ───── */
html:not(.dark) body .hl-hdr.is-glass{background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(31,30,39,.07),0 12px 32px -22px rgba(31,30,39,.22)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.dark) body .hl-hdr.is-glass{background:rgba(255,255,255,.96)}
}
/* على الزجاج الأبيض: الروابط والأيقونات بلون داكن والشعار الداكن (فوق الهيرو الأخضر تبقى كما هي) */
/* HERO-LAB-103: الروابط والأيقونات ترث لونها (.hl a / .hl button {color:inherit} أقوى من .hl-nav__a) فاللون يُضبط على الرأس نفسه */
html:not(.dark) body .hl-hdr.is-glass{--ink:#1f1e27;--ink-2:rgba(31,30,39,.72);color:#1f1e27}
html:not(.dark) body .hl-hdr.is-glass .hl-logo--d{display:none!important}
html:not(.dark) body .hl-hdr.is-glass .hl-logo--l{display:block!important}
html:not(.dark) body .hl-hdr.is-glass .hl-ico::before{background:rgba(31,30,39,.06)}


/* ───── HERO-LAB-84/85/98: رأس أصغر — الشعار وخط الروابط والأيقونات والصورة الشخصية (الشاشات العريضة، وبالوضعين؛ الجوال والتابلت بمقاساتهم) ───── */
@media (min-width:861px) and (min-aspect-ratio:1001/1000){
  body .hl-logo{height:max(30px,calc(56 * var(--u)))}
  body .hl-nav__a{font-size:max(12px,calc(15 * var(--u)))}
  body .hl-ico{width:max(26px,calc(40 * var(--u)));height:max(26px,calc(40 * var(--u)))}
  body .hl-ico svg{width:max(17px,calc(28 * var(--u)));height:max(17px,calc(28 * var(--u)))}
  body .hl-ico--menu svg{width:max(22px,calc(38 * var(--u)))}
  body .hl-av{width:calc(34 * var(--u));height:calc(34 * var(--u));min-width:24px;min-height:24px;font-size:12px}
}

/* ───── HERO-LAB-87: المحفظة في الرأس (للعضو المسجّل) — الرصيد وأنواعه وزرّا الشحن والعرض ───── */
.hl-wl{width:264px;padding:18px 18px 16px;text-align:start}
.hl-wl__k{display:block;font-size:11.5px;font-weight:500;color:var(--pop-mute)}
.hl-wl__n{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:26px;font-weight:700;line-height:1.2;color:var(--pop-ink);font-variant-numeric:tabular-nums}
.hl-wl__s{display:block;margin-top:2px;font-size:12px;color:var(--pop-mute)}
.hl-wl__kinds{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--pop-line);display:grid;gap:6px}
.hl-wl__kinds li{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--pop-mute)}
.hl-wl__kinds b{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--pop-ink);font-variant-numeric:tabular-nums}
.hl-wl__acts{display:flex;gap:8px;margin-top:14px}
.hl-wl__btn,.hl-wl__alt{flex:1;display:grid;place-items:center;height:40px;border-radius:12px;font-size:13px;font-weight:500;transition:background-color .15s ease,border-color .15s ease}
.hl-wl__btn{background:#fcb040;color:#1c1b22}
.hl-wl__alt{border:1px solid var(--pop-line);color:var(--pop-ink)}
html:not(.dark) .hl-wl__btn{background:#282633;color:#ffffff}
@media (hover:hover) and (pointer:fine){
  .hl-wl__btn:hover{background:#ffbf5e}
  html:not(.dark) .hl-wl__btn:hover{background:#383258}
  .hl-wl__alt:hover{background:var(--pop-hover)}
}
.hl-wl__btn:focus-visible,.hl-wl__alt:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* ───── HERO-LAB-88: روابط القوائم المنسدلة (الأفراد، المنشآت…) — الزاويتان من جهة الخط الملوّن (اليمين بالعربي) حادّتان ليستقيم الخط مع الحافة ───── */
body .hl-mega .hl-mega__a{border-start-start-radius:0;border-end-start-radius:0}

/* ───── HERO-LAB-95: القوائم المنسدلة متناسقة مع الوضع المختار ─────
   النهاري: كان خليطاً من الذهبي (عنوان البوابة، «كل خدمات…»، علامة اللغة) والأخضر (الأسهم وخط المرور) ⇐ لون واحد هو لون الهوية الداكن.
   زر «كل خدمات …» صار زراً ممتلئاً بلون الوضع: داكن بنص أبيض نهاراً، وذهبي بنص داكن ليلاً. */
html:not(.dark) body .hl-pop{--sun:#282633}
html:not(.dark) body .hl-mega__k,
html:not(.dark) body .hl-me__k{color:rgba(40,38,51,.6)}
html:not(.dark) body .hl-menu__a.is-on,
html:not(.dark) body .hl-menu__a svg{color:#282633}
html:not(.dark) body .hl-me__btn{background:#282633;color:#ffffff}
@media (hover:hover) and (pointer:fine){
  html:not(.dark) body .hl-me__btn:hover{background:#383258}
  html:not(.dark) body .hl-me__item:hover .hl-me__ic{color:#282633}
  html:not(.dark) body .hl-me__alt:hover span,html:not(.dark) body .hl-me__joins a:hover{color:#282633}
}

body .hl-mega__side .hl-mega__all{align-self:stretch;justify-content:space-between;height:40px;padding:0 14px;border:0;border-radius:10px;font-size:12.5px;font-weight:600;background:#fcb040;color:#1c1b22;transition:background-color .15s ease}
body .hl-mega__side .hl-mega__all svg{color:currentColor}
html:not(.dark) body .hl-mega__side .hl-mega__all{background:#282633;color:#ffffff}
@media (hover:hover) and (pointer:fine){
  body .hl-mega__side .hl-mega__all:hover{background:#ffbf5e;color:#1c1b22;border:0}
  html:not(.dark) body .hl-mega__side .hl-mega__all:hover{background:#383258;color:#ffffff}
}
body .hl-mega__side .hl-mega__all:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* ───── HERO-LAB-96: الأزرار الممتلئة في الوضع النهاري عند المرور بالأخضر الذي كان خلفية الهيرو (#203526) ───── */
@media (hover:hover) and (pointer:fine){
  html:not(.dark) body .hl-mega__side .hl-mega__all:hover,
  html:not(.dark) body .hl-me__btn:hover,
  html:not(.dark) body .hl-wl__btn:hover{background:#2f5b3e;color:#ffffff} /* HERO-LAB-97: أفتح من #203526 بطلب حمد */
}

/* ───── HERO-LAB-100: خط المرور تحت أسماء الأقسام — أبعد عن النص (كان لاصقاً) وأوضح، وحركته مع القائمة بـGSAP (hero-lab-header.js) ───── */
body .hl-nav__a::after{bottom:calc(-6 * var(--u));height:2px;border-radius:2px}
/* مع GSAP: الخط يُرسم بالمتغير --ul، والقائمة وأعمدتها تتحرك من السكربت بدل انتقالات CSS */
html.hl-gsap body .hl-dd--nav>.hl-nav__a::after,
html.hl-gsap body .hl-dd--nav>.hl-nav__a:hover::after,
html.hl-gsap body .hl-dd--nav.is-open>.hl-nav__a::after{transform:scaleX(var(--ul,0));transition:none}
html.hl-gsap body .hl-dd--nav>.hl-pop{transition:none}
html.hl-gsap body .hl-dd--nav.is-open>.hl-mega .hl-mega__g{animation:none}

/* ───── HERO-LAB-103: أيقونات الرأس بخط أخف (1.7–1.8 ⇐ 1.3) ───── */
body .hl-ico svg,body .hl-ico svg *{stroke-width:1.3px}