/* ============================================================
   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;}}

/* Mobile directory: shared destinations, natural scrolling on short screens. */
@media(max-width:900px){
  html body .mobile-menu-toggle.mobile-menu-toggle{min-width:60px;min-height:44px;font-size:11px!important;}
  html body nav.jr-nav{flex-direction:row!important;align-items:center!important;}
  html body .mobile-menu.mj-mobile-directory{
    box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(78px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
    gap:18px;justify-content:flex-start;
  }
  .mobile-menu.mj-mobile-directory::before{content:none;}
  .mj-mobile-directory .mobile-menu-close{top:calc(16px + env(safe-area-inset-top));right:16px;}
  html body .mj-mobile-directory nav{margin:0;flex:none;}
  html body .mj-mobile-directory nav a{justify-content:flex-start!important;text-align:start!important;font-size:clamp(24px,7vw,30px);min-height:52px;}
  .mj-mobile-groups{border-top:1px solid #986b60;flex:none;}
  .mj-mobile-groups details{border-bottom:1px solid #986b60;}
  .mj-mobile-groups summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#fff8ea;font-size:15px;letter-spacing:.04em;list-style:none;}
  .mj-mobile-groups summary::-webkit-details-marker{display:none;}
  .mj-mobile-groups summary::after{content:'+';font-size:22px;color:#40d0d0;}
  .mj-mobile-groups details[open]>summary::after{content:'−';}
  .mj-mobile-groups details>div{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding-bottom:12px;}
  html body .mj-mobile-groups a{display:flex;align-items:center;min-height:44px;color:#fff8ea;font-size:14px;line-height:1.3;text-decoration:none;}
  .mj-mobile-directory a[aria-current='page']{text-decoration:underline!important;text-underline-offset:6px;}
  .mj-mobile-directory :is(a,summary):focus-visible{outline:2px solid #40d0d0;outline-offset:3px;}
  html body .mj-mobile-directory .mobile-menu-account{position:static!important;transform:none;width:100%!important;box-sizing:border-box;margin:0;flex:none;}
  html body .mj-mobile-directory .mobile-menu-meta{position:static;margin:0!important;flex:none;}
}
@media(max-width:900px){
 html body .mj-mobile-groups a::before,html body .mj-mobile-groups a::after{content:none!important;}
 .mj-mobile-groups details:not([open])>div{display:none!important;}
}