/* ==========================================================================
   en.css — English-site layout adaptations
   English text runs 2-3x longer than Chinese; the shared design-system.css
   was tuned for Chinese labels. These overrides keep buttons, segmented
   controls and headings from breaking their containers on /en/ pages.
   Loaded ONLY by en/ pages — the Chinese site is unaffected.
   ========================================================================== */

/* --- Segmented button groups (loanTypeGroup, repayTypeGroup, ...) -------
   Chinese labels fit one row at any width; English ones don't. Let the
   group wrap and size buttons by content so long labels stay on 1-2 tidy
   lines instead of being crushed into 3-line slivers. */
[id$="Group"] {
  flex-wrap: wrap;
  gap: 6px;
}

.type-btn {
  white-space: normal;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
  word-break: break-word;
}

/* give short labels equal footing next to long ones */
.type-btn:nth-last-child(n+3) ~ .type-btn,
.type-btn { min-width: 22%; }

/* --- Primary / secondary action buttons ----------------------------------
   "Calculate Contributions" wrapping to two lines inside a fixed-width
   grid cell looks broken; keep one line, allow shrink within the cell. */
.btn {
  white-space: nowrap;
  max-width: 100%;
}

/* where a .btn is a grid/flex child it may need to shrink its padding */
@media (max-width: 480px) {
  .btn { padding-left: 16px; padding-right: 16px; font-size: 0.95rem; }
}

/* --- Form labels ----------------------------------------------------------
   Bilingual-length labels ("Social Security & Housing Fund (RMB)") wrap
   in narrow grid columns; tighten leading so 2 lines look intentional. */
.form-field label {
  line-height: 1.35;
}

/* --- Page titles -----------------------------------------------------------
   Long English H1s ("Personal Income Tax Calculator") tripling up on
   mobile; cap the size and tighten leading. */
header h1,
.page-header h1,
h1 {
  line-height: 1.2;
}

@media (max-width: 480px) {
  header h1,
  .page-header h1,
  main > h1 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
}

/* --- Stat / result card labels --------------------------------------------
   English result labels wrap where Chinese never did; allow graceful
   2-line labels instead of clipped text.
   Covers: stat-title / stat-label / stat-item .label (design-system)
          total-label / total-box .label (social_security, pension, ...)
          info-row .label / info-grid .label (rmb_converter, ...)
          result-label / summary-label (various result cards) */
.stat-title,
.stat-label,
.stat-item .label,
.total-label,
.total-box .label,
.info-row .label,
.info-grid .label,
.result-label,
.summary-label {
  white-space: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* --- Bento grid card titles (homepage) ------------------------------------
   English H3s ("Sole Proprietorship vs. Corporation Tax") are 3-4x longer
   than Chinese ("个体户 vs 公司税负"). At 2-col layout each card is ~224px
   wide; cap font-size and tighten leading so 2 lines look intentional. */
.card-body h3 {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.25;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

/* Featured card (2x2) keeps a larger title but still constrained */
.bento-featured .card-body h3 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.2;
}

/* --- Table headers ---------------------------------------------------------
   design-system.css sets `table th, td { white-space: nowrap }` on mobile,
   which makes long English headers ("Cumulative Taxable Income") overflow
   the table horizontally. Allow wrapping on /en/ pages instead. */
@media (max-width: 768px) {
  table th,
  table td {
    white-space: normal;
    word-break: break-word;
  }
}

/* Desktop: keep nowrap off only for the longest header columns; most tables
   still look fine nowrap on wide screens, so scope this narrowly. */
table th {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- Form hints / auxiliary text ------------------------------------------
   "2026 Rule: Expenses exceeding 15,000 RMB are deductible, capped at
   80,000 RMB/year" — these hint lines under inputs also wrap awkwardly. */
.form-hint,
.help-text,
.hint-text {
  line-height: 1.4;
  overflow-wrap: anywhere;
}