/* Marina Chinese: shared mobile menu + hamburger styling (overrides inline page styles) */

/* ── Hamburger / close button: lines centred, no sticky tap background ── */
nav .hamburger {
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; height: 44px !important;
  padding: 0 !important;
  margin-right: -10px;            /* visible lines line up with the page edge, like the logo on the left */
  border-radius: 12px !important;
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}
nav .hamburger span,
nav .hamburger span:nth-child(1),
nav .hamburger span:nth-child(2),
nav .hamburger span:nth-child(3) { width: 22px !important; margin: 0 !important; }
@media (hover: hover) { nav .hamburger:hover { background: rgba(232,57,42,.08) !important; } }
nav .hamburger:focus, nav .hamburger:active { outline: none; }
nav .hamburger:focus-visible { outline: 2px solid rgba(232,57,42,.5); }

/* ── Panel: scrollable, never taller than the screen ── */
#mobile-menu {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start;
  gap: .55rem !important;
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 5% calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
}
/* page behind the open menu does not scroll, WhatsApp bubble steps aside */
html:has(#mobile-menu.open), body:has(#mobile-menu.open) { overflow: hidden !important; }
body:has(#mobile-menu.open) > a[href^="https://wa.me"][title="WhatsApp"] { display: none !important; }

/* reset all links */
#mobile-menu a {
  box-sizing: border-box;
  border-bottom: none !important;
  margin: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

/* 1. Two big buttons side by side at the top */
#mobile-menu a.mob-cta,
#mobile-menu a.mob-play {
  order: 1;
  flex: 1 1 calc(50% - .3rem);
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: .7rem .6rem !important;
  border-radius: 50px !important;
  font-size: 1rem !important; font-weight: 900 !important;
  text-align: center; white-space: nowrap;
  color: #fff !important;
}
#mobile-menu a.mob-cta { order: 0; background: var(--red, #e8392a) !important; box-shadow: 0 4px 14px rgba(232,57,42,.28) !important; }
#mobile-menu a.mob-play { background: linear-gradient(135deg,#2fb3a3,#21867a) !important; box-shadow: 0 4px 14px rgba(42,157,143,.3) !important; }
#mobile-menu a.mob-play::before { content: "\2726"; color: #ffe066; margin-right: .4rem; }

/* 2. Section labels + tiles */
#mobile-menu .mob-label {
  order: 2;
  flex: 1 1 100%;
  padding: 1rem .2rem .1rem !important;
  font-size: .72rem !important; font-weight: 900 !important;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red, #e8392a) !important;
}
#mobile-menu a.mob-sub {
  order: 2;
  flex: 0 0 calc(50% - .28rem);
  display: flex; align-items: center;
  min-height: 52px;
  padding: .7rem .9rem !important;
  background: #fff;
  border: 1.5px solid rgba(28,28,46,.07) !important;
  border-radius: 14px;
  font-size: .95rem !important; font-weight: 700 !important; line-height: 1.25;
  color: var(--ink, #1c1c2e) !important;
  transition: border-color .2s, color .2s, background .2s;
}
#mobile-menu a.mob-sub::before { content: none !important; display: none !important; }
#mobile-menu a.mob-sub:hover,
#mobile-menu a.mob-sub:active,
#mobile-menu a.mob-sub.active { color: var(--red, #e8392a) !important; border-color: rgba(232,57,42,.3) !important; background: rgba(232,57,42,.04); }

/* 3. Remaining links (Contact, Student Portal, language) as pills at the bottom */
#mobile-menu a:not(.mob-sub):not(.mob-cta):not(.mob-play) {
  order: 3;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .55rem 1.1rem !important;
  border: 1.5px solid rgba(28,28,46,.14) !important;
  border-radius: 50px;
  font-size: .92rem !important; font-weight: 800 !important;
  color: var(--ink, #1c1c2e) !important;
}
/* small spacer above the pills */
#mobile-menu::after { content: ""; order: 2; flex: 1 1 100%; height: .4rem; }
#mobile-menu a:not(.mob-sub):not(.mob-cta):not(.mob-play):hover { border-color: var(--red, #e8392a) !important; color: var(--red, #e8392a) !important; }

/* very narrow phones: tiles full width */
@media (max-width: 330px) {
  #mobile-menu a.mob-sub { flex-basis: 100%; }
  #mobile-menu a.mob-cta, #mobile-menu a.mob-play { flex-basis: 100%; }
}