/* ==========================================================================
   AngelVow English site · style override layer
   -- Nothing under the Chinese site's css/ is ever edited; the English site only appends this
      file at the very end as a minimal override. It has to be referenced after every Chinese
      stylesheet, or the overrides do not take.
   -- Structure, spacing, line-height multiples, images and colours are all left alone. Only
      three kinds of problem are handled here:
      1. Font stack: the Chinese site renders headings and body copy with Noto Serif SC,
         PingFang SC and Microsoft YaHei, whose Latin glyphs are drawn to sit beside Chinese
         characters, so a full page of English comes out loosely spaced, heavy in weight and
         hard to read across long paragraphs. Latin faces are pulled to the front here, with the
         Chinese faces left as a fallback (the page still holds decorative glyphs and the
         Chinese form of the brand name, which need them to display).
      2. Chinese labels hard-coded in a pseudo-element: CSS content cannot be changed from the
         HTML, so the whole rule has to be overridden.
      3. Shrinking the type where English runs longer than Chinese and pushes an element onto an
         extra line: the copy has already been squeezed once against the Chinese width budget,
         and only what will not fit gets shrunk here -- font-size alone, while the line-height
         multiple, max-width and padding all keep the Chinese values so the line count matches.
   ========================================================================== */

:root {
  /* English serif first, Noto Serif SC kept at the end to catch the decorative glyphs */
  --serif: "Noto Serif", "Iowan Old Style", Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif;
  /* System English sans first, PingFang and YaHei kept at the end to catch Chinese characters */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Large headings: a Chinese heading needs 1px of letter-spacing to open up, while the same
   spacing on Latin letters just looks scattered */
.hero h1, .subhero h1 { letter-spacing: 0; }
.sec-head .zh { letter-spacing: 0; }
.hp-card--main h1 { letter-spacing: 0; }

/* The big type on the two secondary cards of the home page: home.css sets 25px with max-width 62%
   (about 242px). The 6-character Chinese title comes to 150px on one line; Compatibility Report
   at 25px runs about 250px, just over the edge and onto a second line, which makes the card a
   line taller than the Chinese version. Down to 22px it is about 220px and back on one line.
   Both cards shrink together so the type does not differ left to right. */
.hp-card--rose h2,
.hp-card--cream h2 { font-size: 22px; }

/* The seven theme capsules: face.css gives them padding 5px 10px, gap 8px and 12px type. The
   seven Chinese labels total roughly 350px, which fits one row with room to spare; the same
   seven in English come to about 680px, overrunning the form content width so overflow-x cuts
   the right half off the last one, which reads as a broken layout. Pulling in the horizontal
   padding and the gap and dropping the type half a pixel (12.5 and 13.5px are already in use
   across the site) saves about 70px and gets them back on one row. Vertical padding, line
   height and borders match the Chinese site, so the line count is unchanged. */
.bb-form #faceForm .adv-line .segm[data-multi="focus"] { gap: 5px; }
.bb-form #faceForm .adv-line .segm[data-multi="focus"] .seg-item {
  padding: 5px 6px;
  font-size: 11.5px;
}

/* The extra-section badge is intentionally hidden in both languages. */
.fx-pro-sec > h3::after { content: none; }

/* The gender and relationship-status capsules on mobile: face.css gives them padding 5px 10px and
   nowrap. The five Chinese labels still have room when they take a row to themselves on a narrow
   screen; Single / Crush / Dating / Married / Divorced come to about 342px against roughly 360px
   of usable phone width, grazing the edge, and a little narrower would clip the last letters of
   Divorced. Only the horizontal padding and gap come in, saving about 42px; the type is left
   alone (already small on a phone) and the height matches the Chinese site.
   #modeSeg (one person / two) is handled separately by face.css and is excluded here so it is not
   dragged along. */
@media (max-width: 640px) {
  .bb-form #faceForm .tool-row .seg:not(#modeSeg) { gap: 5px; }
  .bb-form #faceForm .tool-row .seg:not(#modeSeg) .seg-item { padding: 5px 7px; }
}

/* The four-point bar on the home page: style.css:370 sets 22px serif, and below 640px the four items
   drop to two per row (style.css:721-728), leaving each about 175px. "Romance timing" runs to roughly
   178px at 22px and breaks onto a second line, which the Chinese side never does because each of its
   four lines is five characters wide.
   Each item has to read as one line, so the type steps down as the screen narrows and nowrap holds it
   together. The sizes are deliberately kept well under the slot width -- with nowrap, type that does not
   fit would push past the container and widen the whole document. */
.trust-num { white-space: nowrap; }
@media (max-width: 900px) {
  .trust-num { font-size: 19px; }
}
@media (max-width: 640px) {
  .trust-num { font-size: 16px; }
}