/* UALL-AK — project/module navigation sized as a primary HENDAR control. */
:root{--af-subnav-height:74px}
#contextSubnav.context-subnav{
  grid-template-columns:minmax(210px,250px) minmax(0,1fr)!important;
  gap:18px!important;height:74px!important;min-height:74px!important;max-height:74px!important;
  padding:10px clamp(18px,2vw,34px)!important;
  border-bottom:1px solid color-mix(in srgb,var(--af-line) 88%,var(--af-navy) 12%)!important;
  background:color-mix(in srgb,var(--af-surface) 97%,var(--af-navy) 3%)!important;
  box-shadow:0 7px 22px rgba(15,42,67,.07)!important
}
#contextSubnav .context-subnav-heading{gap:3px!important;padding-inline:4px!important;line-height:1.15!important}
#contextSubnav .context-subnav-heading strong{font-size:15px!important;font-weight:900!important;color:var(--af-ink)!important}
#contextSubnav .context-subnav-heading small{font-size:10px!important;font-weight:600!important;letter-spacing:.035em!important;color:var(--af-muted)!important}
#contextSubnav .context-subnav-items{
  gap:9px!important;height:54px!important;padding:2px 1px 4px!important;scroll-padding-inline:8px!important;
  scrollbar-width:thin!important
}
#contextSubnav .context-subnav-item{
  height:48px!important;min-height:48px!important;min-width:142px!important;
  padding:10px 18px!important;border-width:1px!important;border-radius:13px!important;
  background:color-mix(in srgb,var(--af-surface) 98%,var(--tone,var(--af-navy)) 2%)!important;
  color:color-mix(in srgb,var(--af-ink) 78%,var(--af-muted) 22%)!important;
  box-shadow:0 3px 10px rgba(15,42,67,.045)!important;
  font-family:"IBM Plex Sans Arabic","Cairo","Tajawal",sans-serif!important;
  font-size:13px!important;font-weight:800!important;line-height:1.25!important
}
#contextSubnav .context-subnav-item:hover{
  border-color:color-mix(in srgb,var(--tone,var(--af-navy)) 72%,var(--af-line))!important;
  background:color-mix(in srgb,var(--tone,var(--af-navy)) 7%,var(--af-surface))!important;
  color:var(--af-ink)!important;transform:translateY(-1px)!important;
  box-shadow:0 7px 16px rgba(15,42,67,.09)!important
}
#contextSubnav .context-subnav-item.active{
  border-color:var(--tone,var(--af-navy))!important;
  background:color-mix(in srgb,var(--tone,var(--af-navy)) 10%,var(--af-surface))!important;
  color:var(--af-ink)!important;font-weight:900!important;
  box-shadow:inset 0 -4px 0 var(--tone,var(--af-navy)),0 7px 18px color-mix(in srgb,var(--tone,var(--af-navy)) 16%,transparent)!important
}
#contextSubnav .context-subnav-item:focus-visible{outline:3px solid color-mix(in srgb,var(--tone,var(--af-navy)) 30%,transparent)!important;outline-offset:2px!important}

@media(max-width:1100px){
  :root{--af-subnav-height:66px}
  #contextSubnav.context-subnav{grid-template-columns:minmax(0,1fr)!important;height:66px!important;min-height:66px!important;max-height:66px!important;padding:7px 12px!important}
  #contextSubnav .context-subnav-heading{display:none!important}
  #contextSubnav .context-subnav-items{height:52px!important;gap:8px!important}
  #contextSubnav .context-subnav-item{height:46px!important;min-height:46px!important;min-width:138px!important;padding:9px 15px!important;font-size:12.5px!important}
}
@media(max-width:640px){
  :root{--af-subnav-height:62px}
  #contextSubnav.context-subnav{display:grid!important;height:62px!important;min-height:62px!important;max-height:62px!important;padding:6px 9px!important;overflow:hidden!important}
  #contextSubnav.context-subnav.hidden{display:none!important}
  #contextSubnav .context-subnav-items{height:50px!important;gap:7px!important;scroll-snap-type:x mandatory!important}
  #contextSubnav .context-subnav-item{height:44px!important;min-height:44px!important;min-width:min(72vw,230px)!important;padding:8px 14px!important;font-size:12px!important;scroll-snap-align:center!important}
}
@media print{#contextSubnav.context-subnav{display:none!important}}