/* ============================================================
   MAJLIS, shared mobile navigation panel
   Same toggle + full-screen menu on every page. Colors are
   hardcoded (not page CSS vars) so this renders identically
   everywhere regardless of what each page defines locally.
   Targets the same nav selectors as majlis-nav.css.
   ============================================================ */
.mobile-menu-toggle{display:none;border:1px solid currentColor;background:transparent;color:inherit;min-height:38px;padding:0 12px;font:600 9px/1 "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
.mobile-menu{display:none;}
body.mobile-menu-open{overflow:hidden;}

@media(max-width:900px){
  .nav:not([id]) .links,
  .site-nav .site-nav-links,
  .c-nav .links,
  .m-nav .links,
  .jr-nav .jr-nav-links,
  .story-nav .story-links{display:none!important;}

  /* Exactly one control in the bar. Meet and Log in live inside the panel, so
     the inline copies next to the toggle are hidden rather than duplicated. */
  .nav:not([id]) .tools a,
  .site-nav .site-nav-actions a,
  .c-nav .tools a,
  .m-nav .tools a{display:none!important;}

  .mobile-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;}

  .mobile-menu{
    position:fixed;z-index:2100;inset:0;display:flex!important;flex-direction:column;
    padding:calc(104px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom));
    background:#3a0700!important;color:#fff8ea;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    transform:translateY(-102%);visibility:hidden;
    transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s;
  }
  .mobile-menu::before{
    content:"";position:absolute;z-index:0;top:calc(100px + env(safe-area-inset-top));right:0;
    bottom:calc(94px + env(safe-area-inset-bottom));width:1px;background:#40d0d0;opacity:.72;
  }
  .mobile-menu[aria-hidden="false"]{transform:translateY(0);visibility:visible;transition-delay:0s;}
  .mobile-menu nav{
    position:relative;z-index:1;display:grid!important;align-content:center;
    width:100%;margin:auto 0;border:0!important;
  }
  .mobile-menu nav a{
    display:flex;align-items:center;justify-content:flex-end!important;min-height:56px;padding:8px 0;
    border:0!important;color:#fff8ea;text-align:right!important;
    font-family:"Brandon Grotesque","Brandon Text","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-weight:400;font-size:clamp(28px,8.1vw,38px);line-height:1;
    letter-spacing:-.018em;text-decoration:none;text-transform:uppercase;
  }
  .mobile-menu nav a::before,.mobile-menu nav a::after{content:none!important;}

  .mobile-menu-close{
    position:absolute;top:calc(39px + env(safe-area-inset-top));right:18px;z-index:3;
    width:44px;height:44px;display:block;background:transparent;border:0!important;
    color:#fff8ea;font-size:0;line-height:1;cursor:pointer;padding:0;
  }
  .mobile-menu-close::before,.mobile-menu-close::after{
    content:"";position:absolute;top:50%;left:50%;width:20px;height:1px;background:currentColor;transform-origin:center;
  }
  .mobile-menu-close::before{transform:translate(-50%,-50%) rotate(45deg);}
  .mobile-menu-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .mobile-menu-close:focus-visible{outline:2px solid #40d0d0;outline-offset:2px;}

  .mobile-menu-account{
    position:absolute!important;z-index:2;left:50%!important;right:auto!important;
    bottom:calc(50px + env(safe-area-inset-bottom));transform:translateX(-50%);
    display:flex!important;align-items:center;justify-content:center!important;
    width:min(210px,58vw)!important;min-height:44px!important;padding:0 22px!important;
    border:1px solid #40d0d0!important;background:transparent!important;color:#fff8ea!important;
    font-family:"Brandon Grotesque","Brandon Text","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-size:10px!important;font-weight:500!important;line-height:1!important;letter-spacing:.19em!important;
    text-align:center!important;text-decoration:none!important;text-transform:uppercase!important;
  }
  .mobile-menu-account:hover,.mobile-menu-account:focus-visible{background:#40d0d0!important;color:#3a0700!important;}
  .mobile-menu-account:focus-visible{outline:2px solid #fff8ea;outline-offset:3px;}
  .mobile-menu-account::before,.mobile-menu-account::after{content:none!important;}

  .mobile-menu-meta{
    position:absolute;z-index:1;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));left:18px;
    margin:0!important;display:flex;justify-content:space-between;gap:20px;color:#40d0d0;
    font-family:"Brandon Grotesque","Brandon Text","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
    font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  }
}
@media(max-width:380px){
  .mobile-menu{padding-top:calc(92px + env(safe-area-inset-top));}
  .mobile-menu nav a{min-height:48px;padding:6px 0;font-size:clamp(25px,7.8vw,30px);}
}
@media(prefers-reduced-motion:reduce){.mobile-menu{transition:none;}}