/* Header: KAD PEMAIN as the featured link beside the logo; the section links live in a MENU dropdown at every width.
   Loaded after the portal CSS on every page. Works with the existing /app.js (it toggles nav.open on .menu-button). */
.header{gap:20px}
.header .brand{flex:none}
.nav-feature{display:inline-flex;align-items:center;gap:9px;margin-right:auto;padding:11px 16px 10px;background:var(--ink);color:#fff;font:700 17px/1 var(--display);letter-spacing:1.2px;white-space:nowrap;transition:background .15s}
.nav-feature .nf-mark{color:var(--gold-light);font-size:11px;line-height:1}
.nav-feature:hover{background:#000}
.nav-feature[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold-light)}
.header-actions{gap:18px}
.header .menu-button{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.header .menu-button:hover,.header .menu-button[aria-expanded="true"]{border-color:var(--ink)}
.header .menu-button .mb-label{display:inline;width:auto;height:auto;margin:0;background:none;font:600 16px/1 var(--display);letter-spacing:1.5px}
.header .menu-button .mb-icon{display:inline-flex;flex-direction:column;gap:5px;width:auto;height:auto;margin:0;background:none}
.header .menu-button .mb-icon i{display:block;width:20px;height:2px;background:currentColor}
.header nav{display:none;position:absolute;top:calc(100% + 1px);right:7%;left:auto;min-width:270px;flex-direction:column;gap:0;padding:8px 0;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,20,15,.14);z-index:30}
.header nav.open{display:flex}
.header nav a{padding:13px 24px;font:600 19px/1.1 var(--display);letter-spacing:1px}
.header nav a:hover{background:#ecece6}
.header nav a:hover::after{display:none}
.header nav .nav-lang{display:none}
@media(max-width:1100px){.header nav{right:5%}}
@media(max-width:760px){
  .header{gap:10px}
  .nav-feature{padding:9px 11px 8px;font-size:14px;gap:6px}
  .header .menu-button{padding:9px 10px;border-color:transparent}
  .header .menu-button .mb-label{display:none}
  .header nav{left:0;right:0;top:82px;min-width:0;border-width:0 0 1px;box-shadow:none;padding:12px 6%}
  .header nav a{padding:12px 0}
}
@media(max-width:520px){
  .header-actions .language{display:none}
  .header nav .nav-lang{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);font:600 16px var(--display);letter-spacing:1px}
  .header nav .nav-lang a{padding:6px 0}
  .header nav .nav-lang a.active{border-bottom:2px solid var(--gold)}
  .header nav .nav-lang span{color:#aaa}
  .header{padding:0 4%;gap:6px}
  .header .menu-button{padding:9px 8px}
  /* if a wide fallback font shows before Barlow Condensed loads, the brand text clips instead of pushing MENU off screen */
  .header .brand{flex:0 1 auto;min-width:0}
  .header .brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header .brand small{overflow:hidden;text-overflow:ellipsis}
  .nav-feature,.header-actions{flex:none}
  .nav-feature{font-size:13.5px;padding:9px 8px 8px;gap:5px}
}
@media(max-width:350px){.nav-feature .nf-mark{display:none}}