/* ════════════════════════════════════════════════════════════════
   MuzamMaths — shared navigation styles  (Phase 4 · H2 / H3)
   Mobile menu, "Soon" badges and the small notice toast.
   Uses each page's existing colour tokens (with safe fallbacks),
   so the brand look stays exactly the same.
   ════════════════════════════════════════════════════════════════ */

/* Links that used to be <span onclick> are now real <a> links */
a.nav-link, a.logo, a.nav-logo { text-decoration: none; }
a.nav-link { color: var(--text2, #555); }

/* Visible keyboard focus */
.mm-menu-btn:focus-visible,
.mm-menu-panel a:focus-visible,
a.nav-link:focus-visible,
a.logo:focus-visible {
  outline: 2px solid var(--navy-light, #185FA5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Login area: hidden for a moment while the saved session is checked,
   so signed-in students don't see "Login" flash (Phase 5) */
.mm-auth-pending #nav-acts-auth-slot,
.mm-auth-pending [data-mm-auth-slot] { visibility: hidden; }
#nav-acts-auth-slot, [data-mm-auth-slot] { display: inline-flex; align-items: center; gap: 4px; }

/* "Soon" badge — neutral slate, so it reads as a quiet status note
   rather than competing with the live navigation items. */
.mm-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  margin-left: 6px;
  border-radius: 5px;
  vertical-align: 1px;
  background: var(--n-100, #F1F5F9);
  color: var(--n-500, #64748B);
  border: 1px solid var(--n-200, #E2E8F0);
}
.nav-soon { cursor: default !important; color: var(--text3, #888) !important; font-weight: 400 !important; }

/* Hamburger button — phones only */
.mm-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0.5px solid var(--border2, #C2D4E8);
  border-radius: var(--radius-sm, var(--r-sm, 7px));
  background: transparent;
  color: var(--text, #1A1A1A);
  cursor: pointer;
  flex-shrink: 0;
}
.mm-menu-btn svg { width: 20px; height: 20px; }
.mm-menu-btn .mm-ico-close { display: none; }
.mm-menu-btn[aria-expanded="true"] .mm-ico-open { display: none; }
.mm-menu-btn[aria-expanded="true"] .mm-ico-close { display: block; }

/* Slide-down panel */
.mm-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: .5rem 1rem 1rem;
  background: var(--bg, #fff);
  border-bottom: 0.5px solid var(--border, #D8E4F0);
  box-shadow: 0 14px 30px rgba(4, 44, 83, .12);
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.mm-menu-panel[hidden] { display: none; }
.mm-menu-panel a,
.mm-menu-panel .mm-menu-item {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 .5rem;
  font-size: 15px;
  color: var(--text, #1A1A1A);
  text-decoration: none;
  border-bottom: 0.5px solid var(--border, #D8E4F0);
}
.mm-menu-panel .mm-menu-item { color: var(--text3, #888); }
.mm-menu-panel a.cur { color: var(--navy-light, #185FA5); font-weight: 500; }
.mm-menu-panel .mm-menu-cta {
  justify-content: center;
  margin-top: .85rem;
  border-bottom: none;
  border-radius: var(--radius-sm, var(--r-sm, 7px));
  background: var(--amber, #BA7517);
  color: var(--amber-bg, #FAEEDA);
  font-weight: 500;
}

/* Notice toast (replaces blocking alert() pop-ups) */
.mm-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 500;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--navy, #042C53);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.mm-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .mm-menu-btn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-toast { transition: none; }
}