/* 22Media Premium Pro v6.17 — balanced mobile newsroom drawer
   Fixes the flex/shrink conflict that made the primary menu collapse into a narrow left column.
*/
@media (max-width:980px){
  /* Drawer frame */
  .m22-header-v66 .m22-nav-wrap{
    width:min(414px,92vw)!important;
    max-width:414px!important;
    padding:0!important;
    display:block!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:#f7f9fd!important;
    border-radius:0 24px 24px 0!important;
    box-shadow:26px 0 72px rgba(5,20,50,.30)!important;
  }
  body.m22-lang-en .m22-header-v66 .m22-nav-wrap{direction:ltr!important;text-align:left!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap{direction:rtl!important;text-align:right!important;border-radius:24px 0 0 24px!important}

  /* Drawer header stays compact and aligned */
  .m22-header-v66 .m22-mobile-menu-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    align-items:center!important;
    gap:10px!important;
    padding:13px 14px 12px!important;
    min-height:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid #e4eaf3!important;
  }
  .m22-mobile-menu-brand{width:100%!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important}
  .m22-mobile-menu-brand .m22-square-logo{flex:0 0 42px!important;width:42px!important;height:42px!important;border-radius:12px!important}
  .m22-mobile-menu-copy{display:block!important;min-width:0!important;flex:1!important}
  .m22-mobile-menu-copy b{font-size:13.5px!important;line-height:1.15!important;font-weight:850!important}
  .m22-mobile-menu-copy small{font-size:9.5px!important;line-height:1.25!important;margin-top:3px!important}
  .m22-mobile-menu-close{justify-self:end!important;align-self:center!important}

  /* Language row uses full drawer width and equal buttons */
  .m22-drawer-language{
    grid-column:1/-1!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    margin:2px 0 0!important;
    padding:8px 9px 8px 11px!important;
    border-radius:13px!important;
  }
  .m22-drawer-language>span{min-width:0!important;font-size:10.5px!important;white-space:nowrap!important}
  .m22-drawer-language>div{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px!important;min-width:128px!important}
  .m22-drawer-language a{min-width:0!important;width:100%!important;height:31px!important;padding:0 10px!important;font-size:10.5px!important}
  .m22-drawer-language a:last-child{font-size:12px!important}

  /* CRITICAL: desktop nav-inner is flex; make the drawer content a true block.
     This is what prevents every menu card from collapsing to ~160px. */
  .m22-header-v66 .m22-nav-inner{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:14px 14px calc(96px + env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
  }
  .m22-header-v66 .m22-mobile-menu-section-title{
    display:flex!important;
    width:100%!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:0 0 10px!important;
    padding:0 2px 9px!important;
  }
  .m22-header-v66 .m22-mobile-menu-section-title span{font-size:10.5px!important}
  .m22-header-v66 .m22-mobile-menu-section-title small{font-size:8.5px!important;text-align:end!important}
  .m22-header-v66 .m22-primary-nav{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
  }

  /* Symmetrical two-up quick actions + full-width section rows */
  .m22-header-v66 .m22-nav-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .m22-header-v66 .m22-nav-list>li{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(1),
  .m22-header-v66 .m22-nav-list>li:nth-child(2){
    grid-column:auto!important;
    width:auto!important;
    min-width:0!important;
  }
  .m22-header-v66 .m22-nav-list>li>a{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:52px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    border:1px solid #dfe7f1!important;
    background:#fff!important;
    box-shadow:0 3px 10px rgba(18,46,88,.035)!important;
    font-size:13px!important;
    line-height:1.25!important;
    font-weight:800!important;
    white-space:normal!important;
  }
  body.m22-lang-en .m22-header-v66 .m22-nav-list>li>a{direction:ltr!important;text-align:left!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li>a{direction:rtl!important;text-align:right!important}

  .m22-header-v66 .m22-nav-list>li>a:before{
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    border-radius:10px!important;
    background:#eef4fd!important;
    color:#216bd4!important;
    box-shadow:none!important;
  }
  .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin-left:auto!important;
    margin-right:0!important;
    border-radius:9px!important;
    background:#f2f5f9!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    margin-left:0!important;
    margin-right:auto!important;
  }

  /* The first two cards are equal, centered quick actions. */
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a{
    min-height:58px!important;
    justify-content:center!important;
    padding:9px 8px!important;
    gap:8px!important;
    text-align:center!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a:before{
    flex-basis:30px!important;width:30px!important;height:30px!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{
    background:linear-gradient(135deg,#075edb 0%,#1475f6 100%)!important;
    border-color:#0864e4!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(9,96,222,.17)!important;
  }

  /* Submenus inherit the same full width instead of appearing as a narrow floating strip. */
  .m22-header-v66 .m22-nav-list .sub-menu{
    position:static!important;
    display:none!important;
    width:calc(100% - 10px)!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:6px 5px 1px!important;
    padding:6px!important;
    border:1px solid #dfe7f2!important;
    border-radius:12px!important;
    background:#f0f5fb!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .m22-header-v66 .m22-nav-list li.is-open>.sub-menu{display:block!important}
  .m22-header-v66 .m22-nav-list .sub-menu:before{display:none!important}
  .m22-header-v66 .m22-nav-list .sub-menu li,
  .m22-header-v66 .m22-nav-list .sub-menu a{width:100%!important;max-width:none!important;box-sizing:border-box!important}
  .m22-header-v66 .m22-nav-list .sub-menu a{min-height:40px!important;padding:8px 10px!important;font-size:11.5px!important;border-radius:9px!important}

  /* Utility actions are always equal and aligned to the same drawer width. */
  .m22-header-v66 .m22-nav-tools{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin:14px 0 0!important;
    padding:13px 0 0!important;
    box-sizing:border-box!important;
  }
  .m22-header-v66 .m22-nav-tools>a,
  .m22-header-v66 .m22-nav-tools>button{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    box-sizing:border-box!important;
    border-radius:13px!important;
  }

  /* Small-phone tuning */
  @media(max-width:430px){
    .m22-header-v66 .m22-nav-wrap{width:94vw!important;max-width:390px!important;border-radius:0 20px 20px 0!important}
    body.m22-lang-ur .m22-header-v66 .m22-nav-wrap{border-radius:20px 0 0 20px!important}
    .m22-header-v66 .m22-mobile-menu-head{padding:11px 12px!important}
    .m22-header-v66 .m22-nav-inner{padding:12px 12px calc(92px + env(safe-area-inset-bottom))!important}
    .m22-drawer-language{padding:7px 8px!important}
    .m22-drawer-language>span{font-size:10px!important}
    .m22-drawer-language>div{min-width:120px!important}
    .m22-header-v66 .m22-nav-list>li>a{font-size:12.5px!important;min-height:50px!important}
  }

  /* Dark-mode parity */
  .m22-dark .m22-header-v66 .m22-nav-wrap,
  [data-theme="dark"] .m22-header-v66 .m22-nav-wrap{background:#0c1423!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li>a,
  [data-theme="dark"] .m22-header-v66 .m22-nav-list>li>a{background:#111c2d!important;border-color:#26354b!important;color:#dce6f5!important;box-shadow:none!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li>a:before,
  [data-theme="dark"] .m22-header-v66 .m22-nav-list>li>a:before{background:#162743!important;color:#85b6fb!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after,
  [data-theme="dark"] .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{background:#172235!important;color:#9eb0c9!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li:nth-child(2)>a,
  [data-theme="dark"] .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{background:linear-gradient(135deg,#0c57c9,#1167df)!important;border-color:#1263d8!important;color:#fff!important}
}