/* Shared linkers.ooo site header (index, logs, leaderboards, user).
   Same approach as the emotes kit (apps/emotes/web/components/linkers/linkers.css):
   the header and its pills wrap instead of overflowing, and on narrow screens the
   dropdown menus span the full nav width. Nothing wraps at desktop widths, so the
   desktop layout is unchanged. Selectors are class-qualified so they win over the
   page-level <style data-page> rules regardless of order. */
.lk-site-header { flex-wrap: wrap; row-gap: 14px; column-gap: 18px; }
.lk-site-nav, .lk-site-brand { flex-wrap: wrap; }

@media (max-width: 720px) {
  .lk-site-nav { position: relative; width: 100%; justify-content: flex-start; }
  /* Anchor dropdowns to the nav (not the pill) so they can span its width. */
  .lk-site-nav .lk-settings-wrap { position: static; }
  .lk-site-nav #lk-auth-wrap { position: static !important; } /* auth.js sets position inline */
  .lk-site-nav .lk-theme-panel { left: 0; right: 0; width: auto; min-width: 0; }
  .lk-site-nav #lk-auth-panel { left: 0 !important; right: 0 !important; min-width: 0 !important; }
  .lk-site-nav #lk-auth-panel > * { white-space: normal !important; overflow-wrap: anywhere; }
}