/* AI Exam Center — mobile responsiveness.
   The site's pages are built with inline styles, so these rules use
   attribute selectors + !important to adapt the existing markup for
   small screens without rewriting each element. Linked from every page. */

/* Mobile hamburger button (hidden on desktop; shown <=768px via the @media block below).
   Built by mobilenav.js. */
.mnav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 9px; margin: 0; background: none; border: none;
  cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.mnav-toggle span { display: block; width: 22px; height: 2px; background: #181818;
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
nav.mnav-open .mnav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.mnav-open .mnav-toggle span:nth-child(2) { opacity: 0; }
nav.mnav-open .mnav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  * { box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; height: auto; }

  /* Collapse every multi-column grid to a single column on phones */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Scale down oversized headings (handles both "px" and " px" spacing) */
  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 38px !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size: 52px"], [style*="font-size:52px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 29px !important; line-height: 1.15 !important; }
  [style*="font-size: 44px"], [style*="font-size:44px"] { font-size: 28px !important; line-height: 1.15 !important; }
  [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 25px !important; }
  [style*="font-size: 34px"], [style*="font-size:34px"] { font-size: 23px !important; }

  /* ── Navigation: hamburger menu on phones (mobilenav.js) ── */
  nav > div { padding-left: 16px !important; padding-right: 16px !important; }
  nav .mnav-toggle { display: flex !important; }

  /* Hamburger navs, CLOSED = just the logo + the menu button */
  nav.mnav-ready > div { flex-wrap: nowrap !important; justify-content: space-between !important;
    align-items: center !important; gap: 8px !important; }
  nav.mnav-ready .mnav-group { display: none !important; }

  /* OPEN = link groups drop down as a full-width, tap-friendly vertical list */
  nav.mnav-ready.mnav-open > div { flex-wrap: wrap !important; }
  nav.mnav-ready.mnav-open .mnav-group {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; flex-basis: 100% !important; gap: 0 !important; margin-top: 6px !important; }
  nav.mnav-ready.mnav-open .mnav-group a,
  nav.mnav-ready.mnav-open .mnav-group button {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 14px 2px !important; margin: 0 !important;
    font-size: 16px !important; font-weight: 500 !important; text-align: left !important;
    color: #181818 !important; background: none !important; border: none !important;
    border-top: 1px solid #F0F0F0 !important; border-radius: 0 !important; box-shadow: none !important; }
  nav.mnav-ready.mnav-open .mnav-group .member-email {
    padding: 12px 2px !important; color: #706E6B !important; font-size: 14px !important;
    border-top: 1px solid #F0F0F0 !important; }
  /* Primary CTA (Start Practising / register) stays a prominent button at the bottom */
  nav.mnav-ready.mnav-open .mnav-group a[href="/register.html"] {
    background: #0176D3 !important; color: #fff !important; justify-content: center !important;
    border: none !important; border-radius: 8px !important; margin: 12px 0 4px !important;
    height: 48px !important; font-weight: 600 !important; }

  /* Minimal navs (auth pages, no hamburger): keep tidy */
  nav:not(.mnav-ready) > div { flex-wrap: wrap !important; justify-content: space-between !important;
    gap: 6px 12px !important; }
  nav:not(.mnav-ready) a, nav:not(.mnav-ready) button { font-size: 14px !important; }

  /* Wide tables (e.g. dashboard attempts) scroll rather than overflow */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Trim the tallest hero/section paddings for better density on phones */
  [style*="padding: 80px 32px"] { padding: 44px 20px !important; }
  [style*="padding: 72px 32px"] { padding: 40px 20px !important; }
  [style*="padding: 64px 32px"] { padding: 40px 20px !important; }
  [style*="padding: 48px 32px"] { padding: 32px 20px !important; }
}