/* kgheader.css — one header for every page that has the crest + title bar.
   It only sets size, spacing and layout; colours still come from each page's theme. */
header{padding:16px 0!important}
header .homelink img{height:44px!important;width:auto!important;max-width:60px;object-fit:contain;display:block}
header .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px;padding:0 20px!important}
header .htitle{font-size:15px!important;letter-spacing:.06em!important;line-height:1.15;font-weight:700}
header .hsub{font-size:10.5px!important;letter-spacing:.14em;line-height:1.3;color:var(--kg-gold-dim,#c9a227)!important;text-transform:uppercase}
header .nav,header .navlinks{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
header .nav a,header .navlinks a{text-decoration:none!important;font-size:12.5px!important;padding:9px 14px!important;white-space:nowrap;border-radius:3px}
header .nav button,header .navlinks button{min-width:40px;min-height:36px}
@media (max-width:640px){
  header{padding:10px 0!important}
  header .wrap{padding:0 14px!important}
  header .homelink img{height:38px!important;max-width:50px}
  header .htitle{font-size:13px!important;letter-spacing:.04em!important}
  header .hsub{font-size:10px!important}
  /* the links become one row you can swipe, so the header never grows tall */
  header .nav,header .navlinks{width:100%;margin-left:0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  header .nav::-webkit-scrollbar,header .navlinks::-webkit-scrollbar{display:none}
  header .nav a,header .navlinks a{font-size:13px!important;padding:9px 12px!important;flex:0 0 auto}
  header .nav button,header .navlinks button{min-width:44px;min-height:40px;flex:0 0 auto}
}