/* kc-ui-fix.css — KolaCash 移动端导航 + 横向溢出兜底 (2026-07)
   纯 CSS，不依赖 Tailwind 编译类；在 css/site.css 之后加载，未分层规则天然覆盖 Tailwind 的 @layer utilities。
   解决：①荣耀 60 等窄屏上 WhatsApp 按钮只显示一半 / 汉堡菜单被挤出屏幕点不到；②整体横向溢出。 */

/* 任何过宽元素都不产生横向滚动，避免 position:fixed 顶栏被撑出可视区（汉堡按钮因此点不到） */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* clip 不建立滚动容器，避免影响 sticky */

/* 顶栏在窄屏收紧：保证 [logo] [WhatsApp 按钮] [汉堡] 三者都完整可见 */
@media (max-width: 480px) {
  nav .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  nav .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }               /* 品牌字号略小，给右侧 CTA 让位 */
  nav a[data-wa-location="mobile-top-nav"] { padding-left: 0.55rem; padding-right: 0.55rem; gap: 0.25rem; } /* WhatsApp 按钮更紧凑 */
  nav #mobile-menu-btn { flex: 0 0 auto; padding-left: 0.25rem; padding-right: 0.25rem; }                   /* 汉堡永远可见、不被压缩 */
}
/* 极窄屏（<=360，荣耀 60 等）再紧一档 */
@media (max-width: 360px) {
  nav .text-2xl { font-size: 1.125rem; }
  nav a[data-wa-location="mobile-top-nav"] span { display: none; }          /* 只留 WhatsApp 图标，绝不挤掉汉堡 */
  nav a[data-wa-location="mobile-top-nav"] { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* 折叠菜单本身不溢出视口 */
#mobile-menu { max-width: 100vw; }