/* ==========================================================================
   Han Yuan — mobile layer for the classic (inline-styled) pages.
   Loaded only on the pages that don't use the shared styles.css system.
   Phones use a hamburger; tablets and laptops keep one row of navigation.
   content reflow to a single column happens below 900px.
   ========================================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Injected by hy-mobile.js; hidden on desktop. */
.hy-burger{display:none}
.hy-mnav{display:none}
/* Keep the close button above the menu panel's sibling stacking context. */
html.hy-menu-open header{z-index:70 !important}

/* JS measures the actual row, keeping full-size labels until they cannot fit. */
@media (min-width:768px){
  header[data-nav-size]{--hy-nav-pad:18px;--hy-nav-font:14.5px;--hy-header-gap:16px;--hy-header-pad:14px 28px;--hy-logo-height:46px;--hy-brand-font:19px;--hy-brand-display:flex;--hy-brand-sub:inline;--hy-cta-font:14px;--hy-cta-pad:11px 20px}
  header[data-nav-size="tight"]{--hy-nav-pad:10px;--hy-header-gap:8px}
  header[data-nav-size="brand"]{--hy-nav-pad:10px;--hy-header-gap:8px;--hy-brand-sub:none}
  header[data-nav-size="compact"]{--hy-nav-pad:7px;--hy-nav-font:13.5px;--hy-header-gap:8px;--hy-header-pad:12px 20px;--hy-logo-height:40px;--hy-brand-font:18px;--hy-brand-sub:none;--hy-cta-font:13px;--hy-cta-pad:10px 14px}
  header[data-nav-size="icon"]{--hy-nav-pad:5px;--hy-nav-font:12.5px;--hy-header-gap:8px;--hy-header-pad:12px 16px;--hy-logo-height:36px;--hy-brand-display:none;--hy-cta-font:12px;--hy-cta-pad:10px 10px}
  header[data-nav-size] > div{gap:var(--hy-header-gap) !important;padding:var(--hy-header-pad) !important;flex-wrap:nowrap !important}
  header[data-nav-size] > div > a:first-child{flex:none}
  header[data-nav-size] > div > a:first-child > img{height:var(--hy-logo-height) !important}
  header[data-nav-size] > div > a:first-child > span{display:var(--hy-brand-display) !important}
  header[data-nav-size] > div > a:first-child > span > span:first-child{font-size:var(--hy-brand-font) !important;white-space:nowrap}
  header[data-nav-size] > div > a:first-child > span > span:last-child{display:var(--hy-brand-sub) !important;white-space:nowrap}
  header[data-nav-size] nav{flex:1;min-width:0;justify-content:space-evenly;flex-wrap:nowrap !important;gap:0 !important}
  header[data-nav-size] nav > *{flex:none}
  header[data-nav-size] nav .pill{padding:9px var(--hy-nav-pad);font-size:var(--hy-nav-font)}
  header[data-nav-size] > div > a[href="courseapply.html"]{flex:none;font-size:var(--hy-cta-font) !important;padding:var(--hy-cta-pad) !important}
}
@media (max-width:1023px){.hy-topbar-dark{display:none !important}}

/* ---- Only phones use the compact menu. ---- */
@media (max-width: 767px){

  /* ---- 1. Remove the black top bar entirely (client choice) ---- */
  .hy-topbar-dark{display:none !important}

  /* ---- 2. Replace the wide desktop nav with a hamburger ---- */
  header nav{display:none !important}
  header a[href="courseapply.html"]{display:none !important}   /* desktop "Enroll" button */

  .hy-burger{
    position:fixed; top:14px; right:16px; z-index:70;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:9px; margin:0;
    background:#fff; border:1px solid #E6E6E8; border-radius:8px; cursor:pointer;
    box-shadow:0 2px 10px -4px rgba(0,0,0,.25);
  }
  .hy-burger span{display:block; width:22px; height:2px; background:#1A1A1A; border-radius:2px; transition:.25s}
  .hy-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hy-burger.open span:nth-child(2){opacity:0}
  .hy-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---- 3. Full-screen slide-down menu ---- */
  .hy-mnav{
    display:block; position:fixed; inset:0; z-index:60;
    background:#fff; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:78px 22px 40px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  html.hy-menu-open .hy-mnav{opacity:1; visibility:visible; transform:none}
  html.hy-menu-open{overflow:hidden}

  .hy-mnav ul{list-style:none; margin:0; padding:0}
  .hy-mnav .hy-mi > a{
    display:block; text-decoration:none; color:#1A1A1A;
    font-size:18px; font-weight:600; line-height:1.3;
    padding:15px 4px; border-bottom:1px solid #EFEFF1;
  }
  .hy-mnav .hy-mi.is-sub > a{
    font-size:14.5px; font-weight:500; color:#6B6B70;
    padding:11px 4px 11px 20px; border-bottom:1px solid #F5F5F6;
  }
  .hy-mnav .hy-mi > a:active{color:#B12E2C}
  .hy-mnav .hy-mcta{
    display:block; text-align:center; margin-top:24px;
    background:#B12E2C; color:#fff; text-decoration:none;
    font-size:16px; font-weight:600; padding:15px; border-radius:3px;
  }

  .hy-mnav .hy-mlang{
    display:inline-flex; align-items:center; gap:8px; margin-top:20px;
    background:transparent; border:1px solid #D9D9DC; border-radius:40px;
    padding:11px 20px; font:inherit; font-size:15px; font-weight:600; color:#1A1A1A; cursor:pointer;
  }
  .hy-mnav .hy-mlang:active{border-color:#B12E2C; color:#B12E2C}
}

@media (max-width: 900px){

  /* ---- 4. Reflow content to a single column & stop sideways scroll ---- */
  /* hidden also creates a vertical scroll container and breaks sticky headers. */
  html, body{overflow-x:clip; max-width:100%}
  #hyRoot [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  #hyRoot [style*="min-width"]{min-width:0 !important}          /* stop wide blocks from overflowing */
  #hyRoot img, #hyRoot iframe, #hyRoot video{max-width:100% !important; height:auto}
}

/* Chinese prose trial: two-character first-line indents; English stays unchanged. */
[data-langroot="zh"] p.hy-prose-indent,html[data-lang="zh"] p.hy-prose-indent{text-indent:2em;text-align:start}