/* emoji.sg unified public navigation — B12-NAV-HF04
   Affects only the two existing public header variants. No page content changes. */
:root{--emoji-nav-brand:#173765;--emoji-nav-sg:#159bdf;--emoji-nav-h:70px}
/* Keep the same physical bar size, outer edge and spacing on every page. */
body > header.top,body > header.b09-global-nav{
  box-sizing:border-box;height:var(--emoji-nav-h);min-height:var(--emoji-nav-h);
  width:100%;max-width:none;margin:0;padding:0 max(20px, calc((100vw - 1240px) / 2));
  background:#fff;border-bottom:1px solid #dce3f0;
  display:flex;align-items:center;justify-content:flex-start;gap:20px;
  position:relative;z-index:50;flex-wrap:nowrap;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
body > header.top{position:sticky;top:0;box-shadow:0 2px 14px #17294d0a}
body > header.b09-global-nav{position:relative;box-shadow:none}
/* Identical brand weight, type size, and blue .sg on both variants. */
body > header.top .brand,body > header.b09-global-nav .b09-brand{
  color:var(--emoji-nav-brand);font-size:26px;font-weight:850;
  text-decoration:none;line-height:1.15;letter-spacing:-.025em;
  white-space:nowrap;flex:0 0 auto;
}
body > header.top .brand span,body > header.b09-global-nav .b09-brand span{
  color:var(--emoji-nav-sg)!important;
}
/* Preserve existing language translations and route destination lists. */
body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{
  display:flex;align-items:center;flex:1 1 auto;min-width:0;
  gap:clamp(9px,1.12vw,18px);margin:0;flex-wrap:nowrap;
  font-size:13px;font-weight:600;line-height:1.4;
}
body > header.top .desktop-nav a,body > header.b09-global-nav .b09-links a{
  text-decoration:none;white-space:nowrap;flex:0 0 auto;
  color:#233752;font-size:inherit;font-weight:600;
}
body > header.top .desktop-nav a:hover,body > header.b09-global-nav .b09-links a:hover{color:#3656c6}
body > header.top > .language-menu,body > header.b09-global-nav > .b09-lang{
  margin-inline-start:auto;flex:0 0 auto;min-width:0;
}
body > header.b09-global-nav .b09-lang select{max-width:155px;min-width:110px;padding:9px 10px;border-radius:10px;border:1px solid #cad6ea;background:#fff;color:#243856;}
body > header.top .language-menu summary{border-radius:10px;min-height:38px;display:flex;align-items:center;}
/* At narrower desktop widths, do not wrap or widen the navigation bar. */
@media(max-width:1180px) and (min-width:761px){
 body > header.top,body > header.b09-global-nav{gap:13px;padding-inline:20px}
 body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{gap:9px;font-size:12px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
 body > header.top .desktop-nav::-webkit-scrollbar,body > header.b09-global-nav .b09-links::-webkit-scrollbar{display:none}
 body > header.top .brand,body > header.b09-global-nav .b09-brand{font-size:23px}
}
/* Preserve the site's existing mobile drawer and standalone mobile menu. */
@media(max-width:760px){
 body > header.top,body > header.b09-global-nav{height:70px;min-height:70px;padding-inline:16px 14px;gap:10px;}
 body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{display:none!important}
 body > header.b09-global-nav .b09-mobile{display:block;margin-left:auto}
 body > header.top .brand,body > header.b09-global-nav .b09-brand{font-size:23px}
 body > header.b09-global-nav .b09-lang{margin-left:auto}
 body > header.b09-global-nav .b09-lang select{max-width:120px;min-width:90px}
}

/* HF03: keep navigation anchored to same 1240px content axis on zoomed-out
   browsers rather than stretching navigation items across the virtual viewport. */
body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{min-width:0;max-width:100%;overflow:hidden}
@media (min-width:1181px){
 body > header.top,body > header.b09-global-nav{column-gap:clamp(12px,1.5vw,24px)}
 body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{gap:clamp(8px,.9vw,16px)}
}
@media (min-width:761px) and (max-width:1280px){
 body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{overflow-x:auto;scrollbar-width:none}
 body > header.top .desktop-nav::-webkit-scrollbar,body > header.b09-global-nav .b09-links::-webkit-scrollbar{display:none}
}

/* HF04: do not stretch link groups across the available viewport at low zoom.
   Browser zoom is controlled by the user; CSS cannot override it. */
@media (min-width:1181px){
 body > header.top .desktop-nav,body > header.b09-global-nav .b09-links{flex-grow:0;gap:clamp(10px,.9vw,16px)}
 body > header.top > .language-menu,body > header.b09-global-nav > .b09-lang{margin-inline-start:auto}
}