/* أبناء طويق — Global navigation v2 / 2026-08-23 */
:root{
  --nav2-navy:#062f53;
  --nav2-navy-2:#083c68;
  --nav2-green:#2aa347;
  --nav2-green-soft:#eef8f0;
  --nav2-text:#18354c;
  --nav2-muted:#687f91;
  --nav2-line:#dce7ee;
  --nav2-bg:#fff;
  --nav2-shadow:0 22px 60px rgba(2,35,61,.18);
}

/* Desktop shell */
.tuwaiq-header{overflow:visible!important;z-index:100!important}
.tuwaiq-nav.nav2-desktop{display:flex!important;align-items:center;gap:8px;overflow:visible}
.nav2-item{position:relative;display:flex;align-items:center}
.nav2-trigger,.nav2-direct{
  min-height:46px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;
  border:0;border-radius:12px;background:transparent;color:#edf6fb!important;
  font:inherit;font-size:14px;font-weight:850;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav2-trigger:hover,.nav2-direct:hover,.nav2-item.is-open>.nav2-trigger,
.nav2-direct.active{background:rgba(255,255,255,.10);color:#fff!important}
.nav2-trigger::after{content:"⌄";font-size:15px;opacity:.8;transform:translateY(-1px);transition:transform .18s ease}
.nav2-item.is-open>.nav2-trigger::after{transform:rotate(180deg) translateY(1px)}
.nav2-account{margin-inline-start:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}

.nav2-mega{
  display:none;position:absolute;top:calc(100% + 14px);right:0;width:min(880px,86vw);
  padding:18px;border:1px solid var(--nav2-line);border-radius:22px;background:#fff;
  box-shadow:var(--nav2-shadow);color:var(--nav2-text);direction:rtl;text-align:right;
}
.nav2-item.is-open>.nav2-mega{display:block;animation:nav2Drop .16s ease-out}
@keyframes nav2Drop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.nav2-mega::before{content:"";position:absolute;top:-8px;right:34px;width:16px;height:16px;background:#fff;border-top:1px solid var(--nav2-line);border-right:1px solid var(--nav2-line);transform:rotate(-45deg)}
.nav2-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nav2-mega-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.nav2-group{min-width:0;padding:14px;border-radius:16px;background:#f8fafc;border:1px solid #e7eef3}
.nav2-group.featured{background:linear-gradient(145deg,#f4fbf5,#f8fbfd);border-color:#dcebe0}
.nav2-group-title{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--nav2-navy);font-weight:900;font-size:14px}
.nav2-group-title .nav2-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#fff;border:1px solid #e1eaf0;font-size:17px}
.nav2-links{display:grid;gap:4px}
.nav2-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 10px;border-radius:9px;color:#29495f!important;text-decoration:none;font-size:13px;font-weight:760;line-height:1.45}
.nav2-links a:hover{background:#fff;color:var(--nav2-green)!important;box-shadow:0 3px 12px rgba(19,67,93,.07)}
.nav2-links small{font-size:10px;color:#8a9aa6;font-weight:700;white-space:nowrap}
.nav2-links .soon{color:#7d8d98!important;pointer-events:none}
.nav2-links .soon small{padding:3px 7px;border-radius:999px;background:#fff4da;color:#956f25}
.nav2-divider{height:1px;margin:8px 4px;background:#e5edf2}
.nav2-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px;padding:11px 13px;border-radius:13px;background:#f3f7fa;color:#5c7283;font-size:12px}
.nav2-mega-foot a{font-weight:900;color:var(--nav2-green)!important;text-decoration:none}

/* Home hero enhancement: compact, action-oriented, leaves existing content intact */
.home-page .tuwaiq-hero{padding-top:46px!important;padding-bottom:40px!important}
.home-page .hero-brand-lockup{max-width:980px!important}
.home-page .hero-brand-lockup>img{max-height:180px!important;width:auto!important;margin-bottom:4px}
.nav2-hero-actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin:22px auto 0}
.nav2-hero-actions a{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 23px;border-radius:12px;text-decoration:none;font-weight:900}
.nav2-hero-actions .primary{background:var(--nav2-green);color:#fff;box-shadow:0 10px 28px rgba(42,163,71,.20)}
.nav2-hero-actions .secondary{background:#fff;color:var(--nav2-navy);border:1px solid #d7e4eb}
.nav2-stats{max-width:780px;margin:22px auto 0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dce7ee;border-radius:17px;background:rgba(255,255,255,.92);overflow:hidden;box-shadow:0 10px 28px rgba(4,48,81,.06)}
.nav2-stat{padding:14px 11px;text-align:center}
.nav2-stat+.nav2-stat{border-right:1px solid #e2ebf0}
.nav2-stat b{display:block;color:var(--nav2-navy);font-size:22px;line-height:1.1}
.nav2-stat span{display:block;margin-top:4px;color:var(--nav2-muted);font-size:11px;font-weight:750}

/* Mobile: accessible accordion */
.nav2-mobile-panel{display:none;position:fixed;z-index:120;top:82px;right:8px;left:8px;max-height:calc(100vh - 96px);overflow:auto;padding:9px;border:1px solid #dce6ec;border-radius:18px;background:#fff;box-shadow:0 18px 48px rgba(2,35,61,.24);direction:rtl}
.nav2-mobile-panel.is-open{display:block}
.nav2-mobile-panel details{border-bottom:1px solid #edf1f4}
.nav2-mobile-panel details:last-of-type{border-bottom:0}
.nav2-mobile-panel summary{list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;color:var(--nav2-navy);font-size:14px;font-weight:900;cursor:pointer}
.nav2-mobile-panel summary::-webkit-details-marker{display:none}
.nav2-mobile-panel summary::after{content:"+";font-size:20px;font-weight:500;color:#7790a0}
.nav2-mobile-panel details[open]>summary::after{content:"−"}
.nav2-mobile-links{display:grid;gap:3px;padding:0 8px 10px}
.nav2-mobile-links a,.nav2-mobile-home,.nav2-mobile-account{min-height:43px;display:flex;align-items:center;padding:8px 12px;border-radius:10px;color:#315064;text-decoration:none;font-size:13px;font-weight:760}
.nav2-mobile-links a:hover,.nav2-mobile-home:hover{background:#f2f7fa}
.nav2-mobile-links .nav2-subhead{padding:8px 11px 3px;color:#7690a1;font-size:11px;font-weight:900}
.nav2-mobile-home{margin-bottom:3px;color:var(--nav2-navy);font-weight:900}
.nav2-mobile-account{margin-top:7px;justify-content:center;background:var(--nav2-navy);color:#fff!important;font-weight:900}

/* Keep legacy mobile toggle but style it for v2 */
.mobile-nav-toggle{z-index:125!important}

@media(min-width:1101px){
  .nav2-mobile-panel{display:none!important}
}
@media(max-width:1100px){
  .tuwaiq-nav.nav2-desktop{display:none!important}
  .nav2-mobile-panel{top:74px}
  .home-page .tuwaiq-hero{padding-top:28px!important;padding-bottom:30px!important}
  .home-page .hero-brand-lockup>img{max-height:140px!important}
}
@media(max-width:680px){
  .nav2-stats{grid-template-columns:1fr;margin-inline:8px}
  .nav2-stat+.nav2-stat{border-right:0;border-top:1px solid #e2ebf0}
  .nav2-hero-actions{display:grid;grid-template-columns:1fr;margin-inline:14px}
  .nav2-hero-actions a{width:100%}
  .home-page .hero-benefits{gap:7px!important}
}

@media(prefers-reduced-motion:reduce){.nav2-mega,.nav2-trigger::after{animation:none!important;transition:none!important}}

/* V3 viewport-safe desktop mega menus — 2026-08-23 */
@media(min-width:1101px){
  html,body{overflow-x:hidden}
  .nav2-mega{
    position:fixed!important;
    top:86px!important;
    left:50%!important;
    right:auto!important;
    width:min(980px,calc(100vw - 32px))!important;
    max-height:calc(100vh - 106px)!important;
    overflow:auto!important;
    transform:translateX(-50%)!important;
    margin:0!important;
  }
  .nav2-item.is-open>.nav2-mega{animation:nav2DropSafe .16s ease-out!important}
  .nav2-mega::before{display:none!important}
  @keyframes nav2DropSafe{
    from{opacity:0;transform:translateX(-50%) translateY(-7px)}
    to{opacity:1;transform:translateX(-50%) translateY(0)}
  }
}

/* V4 — home header text visibility fix: menu labels match الرئيسية/عن المنصة/حسابي */
.pro-home .tuwaiq-nav.nav2-desktop .nav2-trigger,
.pro-home .tuwaiq-nav.nav2-desktop .nav2-direct{
  color:#102b40!important;
  -webkit-text-fill-color:#102b40!important;
  opacity:1!important;
  font-family:"Alexandria","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
  text-shadow:none!important;
  filter:none!important;
}
.pro-home .tuwaiq-nav.nav2-desktop .nav2-trigger:hover,
.pro-home .tuwaiq-nav.nav2-desktop .nav2-item.is-open>.nav2-trigger,
.pro-home .tuwaiq-nav.nav2-desktop .nav2-direct:hover,
.pro-home .tuwaiq-nav.nav2-desktop .nav2-direct.active{
  color:#175d39!important;
  -webkit-text-fill-color:#175d39!important;
  background:#dfeee5!important;
}
.pro-home .tuwaiq-nav.nav2-desktop .nav2-trigger::after{
  color:#175d39!important;
  opacity:1!important;
}
.pro-home .tuwaiq-nav.nav2-desktop .nav2-account{
  color:#102b40!important;
  -webkit-text-fill-color:#102b40!important;
  background:transparent!important;
  border-color:transparent!important;
}
.pro-home .tuwaiq-nav.nav2-desktop .nav2-account:hover{
  color:#175d39!important;
  -webkit-text-fill-color:#175d39!important;
  background:#dfeee5!important;
}