/* ==========================================================================
   Han Yuan — mobile layer for the classic (inline-styled) pages.
   Loaded only on the pages that don't use the shared styles.css system.
   Header switches to a hamburger below 1280px (the full nav needs ~1500px);
   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}

/* ---- Desktop header: keep the classic (inline-styled) header identical to the
        shared styles.css pages. The inline header has a 24px flex gap that, in
        the 1280-1360px band, squeezes the logo until the brand text wraps to two
        lines. Drop that gap here (space-between still spaces the three items) and
        stop the brand + enroll button from wrapping. ---- */
@media (min-width:1280px){
  header > div{gap:0 !important}
  /* keep the Chinese brand name on one line (never break 漢源教育中心);
     the English sub-line may wrap exactly as it does on the styles.css pages. */
  header > div > a[href="index.html"] > span > span:first-child{white-space:nowrap}
}

/* ---- Mid-width band (1280–1459px), matched with styles.css pages: pills keep
        their FULL font size; only pill padding and the small EN sub-line of the
        logo give way so all nine items + the enroll button fit comfortably. ---- */
@media (min-width:1280px) and (max-width:1459px){
  header nav .pill{padding:9px 14px}
  header a[href="index.html"]:not(.pill) span span:last-child{display:none}   /* EN sub-line of the logo (not the Home pill) */
}

/* ---- Below 1280px the full nav cannot fit: switch to the hamburger. ---- */
@media (max-width: 1279px){

  /* ---- 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; -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 ---- */
  html, body{overflow-x:hidden; 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}
}