/* Floating mobile menu, shared by every page (Jan, 26 Sep 2026). Phones only (up to 767px): a magenta
   hamburger on a bone square, top right, that stays visible while scrolling and opens the page's own menu
   (#mp-nav) as a full-screen teal panel. Behaviour is in js/menu.js. */
.mp-menu-btn{display:none}
/* Subpage menu (Jan, 26 Sep 2026): the same links on every subpage; the page you are on is marked in teal
   with a magenta underline. The menu stays to the right of the logo and wraps onto
   a second row there, so the pinned header keeps its original height. */
body > div > header > nav#mp-nav,body > div > div > header > nav#mp-nav{flex:1 1 0;min-width:0;justify-content:flex-end;row-gap:14px !important}
header > nav#mp-nav a[aria-current="page"]{color:#1E3F3F !important;text-decoration:underline;text-decoration-color:#F21EA1;text-decoration-thickness:2px;text-underline-offset:8px}
@media (max-width:767px){
  .mp-menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:12px;right:12px;z-index:1001;width:56px;height:56px;padding:0;border:0;border-radius:2px;background:rgba(250,245,231,0.92);cursor:pointer}
  .mp-menu-btn span,.mp-menu-btn span::before,.mp-menu-btn span::after{display:block;width:26px;height:3px;border-radius:2px;background:#F21EA1;transition:transform 280ms ease,background-color 280ms ease}
  .mp-menu-btn span{position:relative}
  .mp-menu-btn span::before,.mp-menu-btn span::after{content:"";position:absolute;left:0}
  .mp-menu-btn span::before{top:-8px}
  .mp-menu-btn span::after{top:8px}
  .mp-menu-btn[aria-expanded="true"] span{background:transparent}
  .mp-menu-btn[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
  .mp-menu-btn[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}
  .mp-menu-btn:focus-visible{outline:2px solid #F21EA1;outline-offset:2px}
  body.mp-menu-open{overflow:hidden}

  /* Subpages: the header's text links move into the hamburger and the header scrolls away with the page
     instead of staying pinned (the logo block would otherwise hold about a third of the screen). On the
     Interview Question Bank the topic strip scrolls away with it. */
  body > div > header,body > div > div > header,body > div > div:has(> header){position:relative !important;z-index:auto !important}
  header > nav#mp-nav{display:none !important}
  header > nav#mp-nav.is-open{display:flex !important;position:fixed !important;inset:0 !important;z-index:1000;margin:0 !important;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:32px !important;padding:96px 24px 48px;background:#1E3F3F;overflow-y:auto;font:500 19px/1.4 var(--font-body) !important;letter-spacing:0.18em;text-transform:uppercase}
  header > nav#mp-nav.is-open a{color:#FAF5E7 !important;text-align:center}
  /* In the open panel the current page (subpages) or current section (landing page) is underlined. */
  /* Only the last row of the current item is underlined (menu.js adds .mp-line), in a thinner line. */
  header > nav#mp-nav.is-open a[aria-current]{text-decoration:none}
  header > nav#mp-nav.is-open a[aria-current] .mp-line{text-decoration:underline;text-decoration-color:#F21EA1;text-decoration-thickness:1.5px;text-underline-offset:10px}
}