/* Site header shared by the root and module dashboards */
.site-header { background: var(--shk-green-900); color: var(--shk-on-dark); border-block-end: 3px solid var(--shk-gold-500); position: relative; z-index: 120; }
.site-header__inner { min-height: var(--dash-header-h); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-height: 48px; flex: none; }
.brand:hover { color: #fff; }
.brand img { width: 40px; height: auto; flex: none; }
.brand__text { display: grid; line-height: 1.2; }
.brand__name { font-weight: 800; font-size: 16px; }
.brand__sub { font-size: 12px; color: var(--shk-on-dark-muted); font-weight: 600; white-space: nowrap; }
.brand__sub .en { color: var(--shk-gold-500); margin-inline-start: 6px; }

.site-nav { margin-inline-start: auto; min-width: 0; }
.site-nav__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-items: center; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--shk-r-pill);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background-color .15s var(--shk-ease);
}
.site-nav__link svg { width: 18px; height: 18px; }
.site-nav__link:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.site-nav__link[aria-current="page"] { background: var(--shk-gold-500); color: var(--shk-green-950); }
.site-nav__link:focus-visible { outline-color: var(--shk-gold-500); }
.site-nav__num { font-size: 11px; font-weight: 800; opacity: .75; }

.site-nav__toggle {
  display: none; margin-inline-start: auto; width: 44px; height: 44px; border-radius: var(--shk-r-md); border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: #fff; place-items: center;
}
.site-nav__toggle svg { width: 22px; height: 22px; }
.site-nav__toggle .ico-close, .site-nav__toggle[aria-expanded="true"] .ico-menu { display: none; }
.site-nav__toggle[aria-expanded="true"] .ico-close { display: block; }

/* Home + five short navLabels plus the brand fit on one row from 1200px; collapse to the toggle below 1180px. */
@media (max-width: 1180px) {
  .site-nav__toggle { display: grid; }
  .site-nav {
    position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--shk-green-900); border-block-end: 3px solid var(--shk-gold-500);
    padding: 8px var(--shk-gutter) 14px; box-shadow: var(--shk-shadow-3); margin: 0;
  }
  .site-nav[hidden] { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__link { min-height: 48px; border-radius: var(--shk-r-md); }
}
@media (min-width: 1181px) { .site-nav[hidden] { display: block !important; } }

/* Section jump links inside the sticky toolbar */
.jump { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline-start: auto; position: relative; }
.jump::-webkit-scrollbar { display: none; }
.jump a { white-space: nowrap; text-decoration: none; color: var(--shk-ink-700); font-weight: 700; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; }
.jump a:hover { background: var(--shk-surface-sunken); color: var(--shk-green-900); }

/* Footer */
.site-footer { background: var(--dash-footer-bg); color: #9DB3AA; font-size: 13.5px; padding-block: 36px 28px; margin-block-start: auto; }
.site-footer a { color: #D7E3DE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer .brand img { width: 44px; }
.site-footer__brand p { max-width: 48ch; margin-block-start: 10px; line-height: 1.8; }
.site-footer__title { color: #fff; font-weight: 800; font-size: 14px; margin-block-end: 10px; }
.site-footer__links { list-style: none; display: grid; gap: 4px; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.site-footer__links a[aria-current="page"] { color: var(--shk-gold-500); }
.site-footer__meta { margin-block-start: 28px; padding-block-start: 16px; border-block-start: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 12.5px; color: #7F958C; }

/* Dark header variant for dashboards, keeps the body background neutral */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }