/* BondMai Typography System
   Phase 4 component layer. Refines type hierarchy without changing homepage structure. */

body:has(.appShell.view-market) .appShell.view-market {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-type-body-size);
  line-height: var(--bm-type-body-line);
  font-weight: var(--bm-type-body-weight);
  letter-spacing: var(--bm-letter-spacing);
  color: var(--bm-color-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(.appShell.view-market) :where(h1, h2, h3, h4, p, small, strong, button, input, select, textarea, label, span) {
  letter-spacing: var(--bm-letter-spacing);
}

body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
  font-size: var(--bm-type-display-size) !important;
  line-height: var(--bm-type-display-line) !important;
  font-weight: var(--bm-type-display-weight) !important;
  letter-spacing: var(--bm-letter-spacing) !important;
}

body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.18 !important;
  font-weight: 580 !important;
  letter-spacing: var(--bm-letter-spacing) !important;
}

body:has(.appShell.view-market) :where(.sectionHead h2, .sectionHead h3, .marketPulseHead h2, .marketPulseHead h3) {
  font-size: var(--bm-type-headline-size) !important;
  line-height: var(--bm-type-headline-line) !important;
  font-weight: var(--bm-type-headline-weight) !important;
  letter-spacing: var(--bm-letter-spacing) !important;
  color: var(--bm-color-text) !important;
}

body:has(.appShell.view-market) :where(.sectionHead p, .marketPulseHead p, .heroProduct p, .tripCard p, .matchCard p, .featuredWishCard p, .trustedMemberCard small) {
  font-size: var(--bm-type-body-size) !important;
  line-height: var(--bm-type-body-line) !important;
  font-weight: var(--bm-type-body-weight) !important;
  color: var(--bm-color-text-muted) !important;
}

body:has(.appShell.view-market) :where(.trendCard strong, .featuredRequestCard strong, .trustedTravelerCard strong, .returningTravelerCard strong, .tripCard h3, .matchCard h3, .destinationText strong) {
  font-size: var(--bm-type-title-size) !important;
  line-height: var(--bm-type-title-line) !important;
  font-weight: var(--bm-type-title-weight) !important;
  letter-spacing: var(--bm-letter-spacing) !important;
  color: var(--bm-color-text) !important;
}

body:has(.appShell.view-market) :where(.featuredRequestCard.single .requestContent > strong, .trustedTravelerCard.single .travelerTrustHead strong, .returningTravelerCard.featured .returningBody strong) {
  font-size: var(--bm-type-title-large-size) !important;
  line-height: var(--bm-type-title-large-line) !important;
  font-weight: var(--bm-type-title-weight) !important;
}

body:has(.appShell.view-market) :where(.heroSearchField span, .productStats span, .requestMeta span, .trustSignalRow span, .miniMeta span, .returningMeta span, .acceptedTags span, .tagRow span, .reasonPills span, .matchFooter span, .status, .departBadge, .verifiedBadge, .badge) {
  font-size: var(--bm-type-label-size) !important;
  line-height: var(--bm-type-label-line) !important;
  font-weight: var(--bm-type-label-weight) !important;
}

body:has(.appShell.view-market) :where(.heroSearchField small, .destinationText small, .productContent p, .tripCard small, .matchCard small, .brandText small) {
  font-size: var(--bm-type-support-size) !important;
  line-height: var(--bm-type-support-line) !important;
  font-weight: var(--bm-type-support-weight) !important;
  color: var(--bm-color-text-muted) !important;
}

body:has(.appShell.view-market) :where(.productStats b, .requestMeta b, .trustSignalRow b, .matchScore b) {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 720 !important;
  color: var(--bm-color-text) !important;
}

body:has(.appShell.view-market) .featuredRequestCard.single .requestMeta b {
  font-size: 20px !important;
  line-height: 26px !important;
}

body:has(.appShell.view-market) :where(.brandText strong) {
  font-size: 21px !important;
  line-height: 26px !important;
  font-weight: 700 !important;
}

body:has(.appShell.view-market) :where(.topBarNav button, .languageToggle button, .themeToggle, .bm-button, .primaryButton, .softButton, .secondaryAction, .profileLinkButton, .cardCta) {
  font-size: var(--bm-button-font-size) !important;
  line-height: 20px !important;
  font-weight: var(--bm-button-font-weight) !important;
}

@media (max-width: 760px) {
  body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(40px, 11vw, 52px) !important;
  }

  body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  body:has(.appShell.view-market) :where(.sectionHead h2, .sectionHead h3, .marketPulseHead h2, .marketPulseHead h3) {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}