/* 22Media Premium Pro v6.56 — desktop primary navigation collision fix */

/*
 * The primary menu grew after the Islamic/World desks were added. Older flex
 * rules allowed the menu and Saved/Search tools to compete for the same width,
 * which could make the last item (Opinion) sit underneath the utility buttons.
 * This layer gives the tools their own reserved column and keeps the newsroom
 * navigation compact, single-line and collision-free.
 */
@media (min-width:981px){
  .m22-header-v66 .m22-nav-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:10px!important;
    height:56px!important;
    overflow:visible!important;
  }

  .m22-header-v66 .m22-primary-nav{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .m22-header-v66 .m22-nav-list{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:max-content!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    gap:2px!important;
  }

  .m22-header-v66 .m22-nav-list>li{
    flex:0 0 auto!important;
    min-width:0!important;
  }

  .m22-header-v66 .m22-nav-list>li>a{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    min-height:38px!important;
    padding:8px 6px!important;
    gap:4px!important;
    border-radius:10px!important;
    font-size:10.8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .m22-header-v66 .m22-nav-list>li>a .m22-menu-label{
    display:block!important;
    white-space:nowrap!important;
  }

  /* Reserve a real column for Saved + Search so they can never overlap Opinion. */
  .m22-header-v66 .m22-nav-tools{
    position:relative!important;
    z-index:8!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:82px!important;
    margin:0!important;
    padding:0 0 0 10px!important;
    border-left:1px solid #e4eaf2!important;
    background:var(--m22-card,#fff)!important;
  }

  .m22-header-v66 .m22-nav-tools>a,
  .m22-header-v66 .m22-nav-tools>button{
    position:relative!important;
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #e1e8f1!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(15,43,84,.035)!important;
  }

  .m22-header-v66 .m22-nav-tools>a:hover,
  .m22-header-v66 .m22-nav-tools>button:hover{
    border-color:#cbd9eb!important;
    background:#f5f9ff!important;
    color:#0867e8!important;
  }

  .m22-header-v66 .m22-nav-tools .m22-nav-tool-label{display:none!important}
}

/* Normal laptop widths: tighten only spacing, never stack/overlap controls. */
@media (min-width:1181px) and (max-width:1460px){
  .m22-header-v66 .m22-nav-inner{column-gap:7px!important}
  .m22-header-v66 .m22-nav-list{gap:0!important}
  .m22-header-v66 .m22-nav-list .m22-menu-icon{display:none!important}
  .m22-header-v66 .m22-nav-list>li>a{
    padding-left:4.5px!important;
    padding-right:4.5px!important;
    font-size:10.1px!important;
  }
  .m22-header-v66 .m22-nav-tools{min-width:76px!important;padding-left:7px!important;gap:4px!important}
  .m22-header-v66 .m22-nav-tools>a,
  .m22-header-v66 .m22-nav-tools>button{width:34px!important;min-width:34px!important;flex-basis:34px!important;height:34px!important}
}

/* Narrow desktop/tablet landscape: keep the menu usable with a discreet horizontal rail. */
@media (min-width:981px) and (max-width:1180px){
  .m22-header-v66 .m22-nav-inner{
    grid-template-columns:minmax(0,1fr) 72px!important;
    column-gap:5px!important;
  }
  .m22-header-v66 .m22-primary-nav{
    overflow-x:auto!important;
    overflow-y:visible!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .m22-header-v66 .m22-primary-nav::-webkit-scrollbar{display:none!important}
  .m22-header-v66 .m22-nav-list{width:max-content!important;max-width:none!important;gap:0!important;padding-right:22px!important}
  .m22-header-v66 .m22-nav-list .m22-menu-icon{display:none!important}
  .m22-header-v66 .m22-nav-list>li>a{padding:8px 5px!important;font-size:10px!important}
  .m22-header-v66 .m22-nav-tools{min-width:72px!important;padding-left:5px!important;gap:4px!important}
  .m22-header-v66 .m22-nav-tools>a,
  .m22-header-v66 .m22-nav-tools>button{width:32px!important;min-width:32px!important;flex-basis:32px!important;height:32px!important;border-radius:9px!important}
}

/* RTL gets the divider/fade on the correct side. */
@media (min-width:981px){
  body.m22-lang-ur .m22-header-v66 .m22-nav-tools{
    padding-left:0!important;
    padding-right:10px!important;
    border-left:0!important;
    border-right:1px solid #e4eaf2!important;
  }
}
@media (min-width:981px) and (max-width:1180px){
  body.m22-lang-ur .m22-header-v66 .m22-primary-nav{
    mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-list{padding-right:0!important;padding-left:22px!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-tools{padding-right:5px!important}
}

.m22-dark .m22-header-v66 .m22-nav-tools,
[data-theme="dark"] .m22-header-v66 .m22-nav-tools{border-color:#27354b!important;background:#0d1627!important}
.m22-dark .m22-header-v66 .m22-nav-tools>a,
.m22-dark .m22-header-v66 .m22-nav-tools>button,
[data-theme="dark"] .m22-header-v66 .m22-nav-tools>a,
[data-theme="dark"] .m22-header-v66 .m22-nav-tools>button{background:#111c2f!important;border-color:#2b3a52!important;color:#dce7f7!important}