/*
 * Kora OnLive — header-v2.css
 * تصميم كامل من الصفر للهيدر (header.php V2 REBUILD). مستقل تمامًا عن
 * style.css: متغيرات ألوان خاصة به فقط. كل الفئات بادئتها kol-hdr-
 * (فريدة كليًا، صفر تقاطع مع .topbar, .subnav, .brand القديمة).
 * يُحمَّل في كل صفحات الموقع (الهيدر مشترك)، بعد كل الأصول الأخرى.
 */

:root{
  --kolh-bg:#06172d;
  --kolh-bg-2:#0a2037;
  --kolh-line:rgba(255,255,255,.08);
  --kolh-text:#f2f6fb;
  --kolh-muted:#8ea3bd;
  --kolh-blue:#1976d2;
  --kolh-blue-2:#35a1ff;
  --kolh-green:#18e875;
  --kolh-red:#ff4350;
}
html[data-theme="light"]{
  --kolh-bg:#06172d;
  --kolh-bg-2:#0a2037;
  --kolh-text:#f2f6fb;
  --kolh-muted:#8ea3bd;
}

.kol-hdr{
  position:sticky; top:0; z-index:150;
  background:linear-gradient(180deg,var(--kolh-bg) 0%,var(--kolh-bg-2) 100%);
  font-family:Tajawal,"Noto Sans Arabic",Arial,sans-serif;
  box-shadow:0 8px 24px rgba(2,10,20,.25);
}
.kol-hdr-shell{ max-width:1320px; margin:0 auto; padding:0 18px; }

/* ---------- Utility bar: live count + update status ---------- */
.kol-hdr-utility{ border-bottom:1px solid var(--kolh-line); }
.kol-hdr-utility .kol-hdr-shell{ display:flex; align-items:center; justify-content:space-between; height:30px; }
.kol-hdr-live{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:900; color:var(--kolh-text); }
.kol-hdr-live i{ width:6px; height:6px; border-radius:50%; background:var(--kolh-red); box-shadow:0 0 0 3px rgba(255,67,80,.18); animation:kolHdrPulse 1.3s infinite; }
.kol-hdr-live b{ color:var(--kolh-muted); font-weight:800; }
.kol-hdr-live span{ color:var(--kolh-green); font-weight:1000; }
@keyframes kolHdrPulse{ 50%{ opacity:.35; } }
.kol-hdr-update{ display:flex; align-items:center; gap:6px; font-size:9px; font-weight:800; color:var(--kolh-muted); }
.kol-hdr-update i{ width:5px; height:5px; border-radius:50%; background:var(--kolh-blue-2); }
@media(max-width:700px){ .kol-hdr-update{ display:none; } }

/* ---------- Main bar: notify / logo / theme ---------- */
.kol-hdr-main .kol-hdr-shell{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:14px; }
.kol-hdr-icon-btn{
  position:relative; width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--kolh-line);
  color:var(--kolh-text); cursor:pointer;
}
.kol-hdr-icon-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kol-hdr-icon-btn:hover{ background:rgba(255,255,255,.11); }
.kol-hdr-icon-btn.enabled{ color:var(--kolh-green); border-color:rgba(24,232,117,.35); }
.kol-hdr-badge{
  position:absolute; top:-5px; left:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:#d9202f; color:#fff; font-size:9px; font-weight:1000; display:grid; place-items:center;
  border:2px solid var(--kolh-bg);
}
.kol-hdr-theme-icon{ font-size:16px; }

.kol-hdr-brand{ display:flex; align-items:center; justify-content:center; }
.kol-hdr-brand img{ height:40px; width:auto; display:block; }
@media(max-width:480px){ .kol-hdr-brand img{ height:34px; } }

/* ---------- Primary nav: pill tabs with accent underline ---------- */
.kol-hdr-nav{ border-top:1px solid var(--kolh-line); background:rgba(0,0,0,.14); }
.kol-hdr-nav-inner{ padding:0; }
.kol-hdr-nav-scroll{
  display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.kol-hdr-nav-scroll::-webkit-scrollbar{ display:none; }
.kol-hdr-nav-scroll a{
  position:relative; flex:0 0 auto; white-space:nowrap;
  padding:13px 14px; font-size:11.5px; font-weight:800; color:var(--kolh-muted);
}
.kol-hdr-nav-scroll a:hover{ color:var(--kolh-text); }
.kol-hdr-nav-scroll a.is-active{ color:#fff; font-weight:1000; }
.kol-hdr-nav-scroll a.is-active::after{
  content:""; position:absolute; right:14px; left:14px; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--kolh-blue),var(--kolh-blue-2));
}
.kol-hdr-live-dot{ display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--kolh-red); vertical-align:middle; animation:kolHdrPulse 1.3s infinite; }

/* ---------- Breaking-news ticker ---------- */
.kol-hdr-ticker{ background:#0c2340; border-top:1px solid var(--kolh-line); }
.kol-hdr-ticker-inner{ display:flex; align-items:center; gap:12px; height:34px; }
.kol-hdr-ticker-tag{
  flex:none; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:#d9202f; color:#fff; font-size:9px; font-weight:1000;
}
.kol-hdr-ticker-tag i{ width:5px; height:5px; border-radius:50%; background:#fff; }
.kol-hdr-ticker-viewport{ flex:1; min-width:0; overflow:hidden; }
.kol-hdr-ticker-track{ display:flex; gap:34px; white-space:nowrap; font-size:10.5px; font-weight:700; color:var(--kolh-muted); animation:kolHdrTicker 32s linear infinite; }
.kol-hdr-ticker:hover .kol-hdr-ticker-track{ animation-play-state:paused; }
@keyframes kolHdrTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media(max-width:620px){
  .kol-hdr-main .kol-hdr-shell{ height:58px; }
  .kol-hdr-icon-btn{ width:34px; height:34px; }
}