/**
 * KMP shared responsive header fix
 * - Sub-brand text ("Kiva Member Portal") never wraps letter-by-letter; hidden on narrow/tablet widths.
 * - Font-size control box is hidden below 900px (prevents header overflow at tablet / half-window widths).
 * - Inline nav links are hidden below 768px (same behaviour as index/members).
 * - Extra-compact logos / buttons on small phones so nothing is pushed off-screen.
 */
header a[href="index.html"] { flex-shrink: 0; white-space: nowrap; }
header a[href="index.html"] span { white-space: nowrap; }
header > div, header > div > div { min-width: 0; }

@media (max-width: 1099px) {
  header a[href="index.html"] span.hidden { display: none !important; }
}
@media (max-width: 899px) {
  header div[class*="bg-[#F1F5F9]"] { display: none !important; }
}
@media (max-width: 767px) {
  header nav:not(.kmp-mobile-nav) { display: none !important; }
}
@media (max-width: 479px) {
  header { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  header a[href="index.html"] { gap: 0.25rem !important; }
  header .logo-badge-3d { width: 1.75rem !important; height: 1.75rem !important; }
  header a[href="index.html"] span.font-black { font-size: 0.95rem !important; line-height: 1.2rem !important; }
  header .kmp-auth-mount a, header .kmp-auth-mount button { padding: 0.25rem 0.45rem !important; font-size: 11px !important; }
  header [id^="kmp-lang-btn-"] { padding: 0.25rem 0.35rem !important; font-size: 11px !important; }
  #kmp-mobile-toggle-btn { width: 1.875rem !important; height: 1.875rem !important; margin-left: 0.125rem !important; }
  /* company pages: share button becomes icon-only on phones */
  header button[onclick="copyCurrentUrl()"] { padding: 0.375rem 0.5rem !important; }
  header button[onclick="copyCurrentUrl()"] span { display: none; }
}
@media (max-width: 369px) {
  header a[href="index.html"] > div.logo-badge-3d:nth-of-type(2) { display: none !important; }
}

/* Ensure mobile category bar has completely hidden scrollbars on all platforms */
#mobile-category-bar .overflow-x-auto::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}
#mobile-category-bar .overflow-x-auto {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* =========================================================================
   Global Mobile Layout Normalizer & Multilingual Typography Protection
   ========================================================================= */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Default natural wrapping for all text elements */
h1, h2, h3, h4, h5, h6, p, span, a, div, li, strong, b {
  overflow-wrap: break-word;
}

/* Korean typography keeps natural phrase units */
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4, html[lang="ko"] h5, html[lang="ko"] h6,
html[lang="ko"] p, html[lang="ko"] span, html[lang="ko"] a, html[lang="ko"] div,
[lang="ko"] h1, [lang="ko"] h2, [lang="ko"] h3, [lang="ko"] h4, [lang="ko"] h5, [lang="ko"] h6,
[lang="ko"] p, [lang="ko"] span, [lang="ko"] a, [lang="ko"] div {
  word-break: keep-all;
}

/* CJK languages without spaces (Japanese, Chinese):
   word-break: normal allows natural phrase & character wrapping under Kinsoku Shori
   without brutally tearing apart katakana loanwords or button text */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] h5, html[lang="ja"] h6,
html[lang="ja"] p, html[lang="ja"] li, html[lang="ja"] dd,
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4, html[lang="zh"] h5, html[lang="zh"] h6,
html[lang="zh"] p, html[lang="zh"] li, html[lang="zh"] dd,
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, [lang="ja"] h4, [lang="ja"] h5, [lang="ja"] h6,
[lang="ja"] p, [lang="ja"] li,
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh"] h4, [lang="zh"] h5, [lang="zh"] h6,
[lang="zh"] p, [lang="zh"] li {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

/* European & Arabic languages (German, English, Spanish, Vietnamese, French, Arabic):
   Natural word boundary wrapping */
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3, html[lang="de"] p,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] p,
html[lang="es"] h1, html[lang="es"] h2, html[lang="es"] h3, html[lang="es"] p,
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3, html[lang="vi"] p,
html[lang="fr"] h1, html[lang="fr"] h2, html[lang="fr"] h3, html[lang="fr"] p,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] p {
  word-break: normal;
  overflow-wrap: break-word;
}

/* =========================================================================
   Button, Badge & Interactive Label Optimization (All Languages)
   Never break mid-word inside buttons or badges
   ========================================================================= */
button,
a.btn,
[role="button"],
.btn,
.portal-card a,
[id^="d-spot-link"],
[id^="d-spot-btn"],
header nav a,
.kmp-mobile-nav a,
.badge,
[class*="badge"],
[class*="chip"] {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: normal !important;
}

/* Badges and single-line indicator tags never split into two lines */
.badge,
[class*="badge"],
[class*="chip"],
#dark-companies-list span.whitespace-nowrap,
.kmp-auth-mount a,
.kmp-auth-mount button {
  white-space: nowrap !important;
}

/* Spotlight CTA Button Optimization: Fluid readable text without awkward multi-line break */
#d-spot-link {
  min-height: 3.5rem;
  padding: 0.875rem 1.25rem !important;
  font-size: clamp(0.875rem, 1.1vw + 0.45rem, 1.05rem) !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
#d-spot-btn-text {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center;
}

/* Enforce max-width constraint on all block sections */
main, section, header, footer, article, nav,
.kmp-glow-card, .guide-card, .portal-card, .sections-wrapper {
  max-width: 100% !important;
  min-width: 0 !important;
}