/* Shared public header. Values follow compassedu.hk/static/layout/nav-bar/index.css.
   Production uses neutral navigation on both landing and selected section pages. */
.site-header{background:#fff;position:sticky;top:0;z-index:30;box-shadow:inset 0 -1px 0 #e7e7e7;font-family:"PingFang SC","Microsoft Yahei","Microsoft Yahei UI","Segoe UI",Tahoma,SimSun,sans-serif,"Hiragino Sans GB";font-weight:400;line-height:normal}
.header-inner{width:1200px;height:66px;display:flex;align-items:center;flex-wrap:nowrap;padding:0;gap:0}
.brand{display:flex;align-items:center;line-height:1.2;white-space:nowrap}.brand img{display:block;object-fit:contain}.desktop-brand{flex:0 0 165px;margin-right:16.6px}.desktop-brand img{width:165px;height:24px}.mobile-brand,.mobile-app-link,.mobile-header-tools{display:none}
.header-inner>.desktop-navigation{display:flex;align-items:center;justify-content:space-between;flex:0 0 696px;height:66px;padding:0;gap:0;font-size:16px;line-height:24px;white-space:nowrap}
.desktop-navigation>a,.header-services>summary{display:flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:8px;color:#232733;font-size:16px;font-weight:400;line-height:24px}
.desktop-navigation>a:hover,.header-services>summary:hover{background:#f6f6f7;color:#232733}
.header-services{position:relative;height:66px;display:flex;align-items:center}
.header-services>summary{list-style:none;cursor:pointer}.header-services>summary::-webkit-details-marker{display:none}
.services-arrow{display:block;width:20px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s}
.header-services[open] .services-arrow{transform:rotate(-180deg)}
.header-services>nav{display:none;position:absolute;left:0;top:82%;width:100%;padding:0;background:#fff;border:.6px solid #d2d6e1;border-radius:8px;box-shadow:0 2px 4px #59595980;text-align:center;animation:header-dropdown .5s both}
.header-services[open]>nav{display:block}
.header-services>nav>a{display:block;width:100%;padding:6px 0;font-size:14px;line-height:24px;color:#232733;transition:background-color .5s}
.header-services>nav>a:first-child{border-radius:8px 8px 0 0}.header-services>nav>a:last-child{border-radius:0 0 8px 8px}
.header-services>nav>a:hover{background:#f6f6f7;color:#232733}
@keyframes header-dropdown{from{transform:translateY(30px);opacity:.3}to{transform:translateY(0);opacity:1}}
.header-actions{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;margin-left:40px}
.header-phone{display:flex;align-items:center;flex-shrink:0;gap:3px;white-space:nowrap;font-size:18px;line-height:28px;font-weight:400;color:#0c32f6}.header-phone:hover{color:#0c32f6}.header-phone img{width:20px;height:20px;object-fit:contain}
.header-search{display:block;width:36px;height:36px;flex-shrink:1;margin:0 16px 0 28px}.header-search img{display:block;width:100%;height:100%}
.login-link{display:flex;align-items:center;justify-content:center;width:64px;height:36px;flex-shrink:1;padding:0;border-radius:8px;font-size:16px;line-height:24px;background:#041f44;color:#fff}.login-link:hover{background:#041f44;color:#fff}
/* Preserve the production desktop row instead of shrinking its type or wrapping. */
@media(min-width:701px){.site-header{min-width:1200px}}
/* The reading container ends in the gap before the login button. */
.detail-container{width:min(1136px,calc(100% - 112px));margin-left:max(24px,calc((100% - 1200px)/2))}
@media(max-width:1000px) and (min-width:701px){.detail-container{width:calc(100% - 48px);margin:28px auto 48px}}
@media(max-width:700px){
 .header-actions{display:none}
 .site-header{position:relative;min-width:0;border:0;box-shadow:0 2px 8px #1823380a}
 .header-inner{height:auto;width:calc(100% - 36px);min-height:56px;padding:8px 0;gap:12px;flex-wrap:nowrap}
 .header-inner>.desktop-brand,.header-inner>.desktop-navigation{display:none}
 .header-inner>.mobile-brand{display:flex;align-items:center;gap:8px;flex:1;font-size:13px;font-weight:500;line-height:1.4}
 .mobile-brand img{width:30px;height:30px;flex-shrink:0}.mobile-brand .brand-tagline{display:block;margin-top:1px;font-size:9px;font-weight:400;color:#8b8b8b}
 .mobile-app-link{display:block;background:#168cff;color:white;padding:3px 10px;border-radius:3px;font-size:13px;white-space:nowrap}.mobile-app-link:hover{color:white;background:#0879e8}
 .mobile-header-tools{display:flex;align-items:center;gap:16px;padding:10px 18px 12px;border-top:1px solid #f4f4f4}
 .mobile-site-search{display:flex;align-items:center;gap:7px;flex:1;min-width:0;border:1px solid #d8d8d8;border-radius:20px;color:#969696;font-size:12px;line-height:1.5;padding:5px 12px}
 .mobile-site-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}
 .mobile-navigation{display:block;margin:0;position:relative;flex-shrink:0}.mobile-navigation>summary{padding:0;color:#168cff;list-style:none;cursor:pointer}.mobile-navigation>summary::-webkit-details-marker{display:none}.mobile-navigation>summary>svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
 .mobile-navigation nav{position:absolute;z-index:1;background:#fff;border:1px solid #eceef1;border-radius:8px;box-shadow:0 6px 24px #18233818;top:calc(100% + 10px);right:0;width:min(320px,calc(100vw - 36px));max-height:65vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;font-size:13px}
 .mobile-navigation:not([open]) nav{display:none}
 .mobile-navigation nav a{padding:9px;white-space:normal}
 .detail-container{width:100%;margin:0}.js-toc .toc-trigger{top:118px}
}


.header-services>summary:focus-visible,.mobile-navigation>summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}