/*
 * Non-Japanese TYPOGRAPHIC FIT for the Ogawamachi theme — nothing else.
 *
 * Owner rule (2026-10-01, verbatim): "原版的不用管" / "和日语版的美术效果不一致，需要尽可能的保持
 * 一致，不然日本人的做事方式你知道的，刻板较真儿的很，肯定会让我们重做，还会问我们为什么会改变".
 * The English page must look like the Japanese page with the text swapped: same colours,
 * backgrounds, panel shapes, opacity, decorations, font style, title tracking, emphasis scheme.
 * Pre-existing Japanese contrast weaknesses are left alone — this file does not "fix" them.
 * When English text doesn't fit, the ONLY allowed tools are typographic: font-size, line-height,
 * wrapping, width/max-width, height:auto growth, or shape-outside. Never color, background,
 * opacity, font-weight, or decoration — those are design, and style.css's design is the same file
 * for both locales on purpose. letter-spacing is set below in exactly one situation: style.css
 * tracks a couple of these elements in em, so shrinking font-size (an allowed fit tool) also
 * shrinks the COMPUTED px tracking as an unwanted side effect — those get letter-spacing
 * restated at ja's own px number, to cancel that side effect, never a new value of its own.
 *
 * Two earlier rounds (git show 26aeef07, 1ebd5d36) broke this rule — reset CJK-tuned
 * letter-spacing to "normal" on ~19 selectors, flattened the INFORMATION panel's diagonal photo
 * to a solid colour and recoloured its text/weight, darkened shared badges, forced labels white,
 * lightened the footer — all to chase axe-core contrast scores the Japanese page was never held
 * to. tools/check_art_fidelity.js proved every one of those as an ART regression (output/
 * OGAWAMACHI-EN-REVIEW-20261001/fidelity-proof/known-positive-stdout.txt). This file replaces
 * them: style.css's shared rules are left to render identically on both locales, and only the fit
 * problems that are REAL (English text overflowing a box, not a contrast number) get a
 * typographic-only rule here.
 *
 * Hero (#mv / .hero-i18n*) and header.php's content are owned elsewhere; header LAYOUT (switcher
 * placement, header height / #mv margin-top) lives in style.css's own body.en-US section, not
 * here — see that file's "English header fit" comment block.
 */

/* ------------------------------------------------------------------------------------------
 * Home INFORMATION panel (index.php, .information > .info_inner). style.css's own background,
 * colours and weights are UNCHANGED for English — same diagonal Rectangle-4.webp panel at
 * >768px, same #9ECBFF fallback at <=768px, same white key-phrase / grey secondary-text scheme,
 * same font-weight. The only problem translation creates is that several English lines are wider
 * than the Japanese words they replace, and at >768px the panel's right edge is a diagonal (the
 * image's alpha channel), not the box's straight edge, so a line can cross into the bare photo
 * well before it reaches the element's own width.
 *
 * max-width values below are the panel's content width (box width minus the 75px left padding)
 * at the diagonal's narrowest point *for that element's own vertical span* — h3 sits highest,
 * where the cut is widest, so it keeps nearly the full box; the ul (lowest, where the cut is
 * narrowest) gets the tightest number. Derived from the image's measured alpha boundary
 * (tools/check_art_fidelity.js's panel geometry note; x(y) = 789.6 - 0.313*y in the image's own
 * 790x936px, cropped to the box's rendered height) scaled to each width this file targets, then
 * re-verified against the rendered Range.getClientRects() of every line (fidelity-proof/
 * information-geometry.json) — not read off the CSS alone, since background-size:cover's crop
 * depends on the box's content height, which these very font-size choices feed back into.
 * ------------------------------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* .info_inner's own width is a flat 790px from 831px up (no media query narrows it, so this
     covers every wider viewport identically); 769-830px (style.css's own .info_inner{width:100%}
     sliver, still with the diagonal image) is narrower than that and gets its own adjustment
     below. h3 keeps style.css's own 62px: "INFORMATION" is the same literal word in both
     languages, so it already clears the diagonal with ~60-75px to spare at every width here and
     needs no change at all. */
  body:not(.ja, .zh-CN, .ko-KR) .info_inner p {
    font-size: 23px;
    /* style.css's letter-spacing: 0.1em on this selector is 2.6px at ja's 26px; restated here so
       the smaller font-size above doesn't also shrink the computed tracking to 2.3px. */
    letter-spacing: 2.6px;
  }
  body:not(.ja, .zh-CN, .ko-KR) .info_inner ul li {
    font-size: 23px;
    /* same reason: style.css's 0.1em is 3px at ja's 30px, not the ~2.3px this font-size would
       otherwise compute. (Solved together with font-size above, not after it: pinning this to
       3px -- wider than the em-based value a smaller font implies -- also widens every line, so
       the two have to be sized as one system, not font-size first and tracking patched in after.) */
    letter-spacing: 3px;
  }
  /* Two of the six lines are long enough ("Same-day appointments and emergencies also welcome",
     "Same-day wisdom tooth extraction available") that even at this size they still run past the
     diagonal on their first line; capping their own width (not every li's -- the other four don't
     need it) wraps just those two to a second line. 769-830px also covers style.css's own
     @media(max-width:830px) .info_inner{width:100%} -- the box there is wider than the 790px
     desktop case, so the same numbers fit with room to spare. */
  body:not(.ja, .zh-CN, .ko-KR) .info_inner ul li:nth-of-type(3) {
    max-width: 480px;
  }
  body:not(.ja, .zh-CN, .ko-KR) .info_inner ul li:nth-of-type(5) {
    max-width: 480px;
  }
  /* 769-830px (style.css's own .info_inner{width:100%} sliver, still with the diagonal image):
     the box is NARROWER here (100% of a 769-830px viewport) than the fixed 790px desktop case,
     so content that cleared the diagonal at 790px can run 8-10px past it here. p and the last
     <li> (lowest on the panel, where the diagonal is tightest) are the two that do. */
  @media screen and (max-width: 830px) {
    body:not(.ja, .zh-CN, .ko-KR) .info_inner p {
      font-size: 21px;
    }
    body:not(.ja, .zh-CN, .ko-KR) .info_inner ul li:nth-of-type(6) {
      max-width: 460px;
    }
  }
}

/* ------------------------------------------------------------------------------------------
 * Service-card title/description overlap (.service .treatment a .tlt h3 + p, shared by the home
 * SERVICE preview grid and /service/): the title is a fixed height:27px sized for one line of
 * Japanese. "Wisdom tooth extraction" and "Periodontal regeneration" wrap to two lines in
 * English, and the flex-column layout places the description paragraph immediately after that
 * fixed (too-short) box, so the wrapped second line prints on top of the description.
 * height:auto lets the flex column reserve real space for however many lines the title needs;
 * min-height keeps one-line English titles the same height they always were.
 * ------------------------------------------------------------------------------------------ */
body:not(.ja) .service .treatment a .tlt h3 {
  height: auto;
  min-height: 27px;
}

/* ------------------------------------------------------------------------------------------
 * Access page dental-loan amount box (.access .payment .inner .num1 .num1-2 p): fixed
 * height:30px sized for one line of Japanese; both English lines ("From 5,000 yen a month...",
 * "Instalment fee...") wrap and overflow 5px past the yellow highlight onto the plain card
 * behind it, at every width. height:auto lets the yellow panel grow to fit the wrapped text.
 * ------------------------------------------------------------------------------------------ */
body:not(.ja, .zh-CN, .ko-KR) .access .payment .inner .num1 .num1-2 p {
  height: auto;
  min-height: 30px;
  padding: 4px 0;
}

/* ------------------------------------------------------------------------------------------
 * Process-step captions (.flow_01 .inner > p, shared by /service/cavity/, /service/periodontal/,
 * /service/preventive/): fixed height:80px sized for ja's own text at 16px, which itself already
 * overflows the box by up to 21px on its two longest steps (ja's own design tolerates some
 * overflow here -- the box has no overflow:hidden, and the next step's circle is far enough below
 * not to be touched). On /service/periodontal/ specifically, English's longer steps 1, 3 and 5
 * overflow by 46px at 16px -- more than double ja's own worst case, and tight enough (8px to the
 * next circle, measured) to read as crowding, not ja's rhythm. 14px brings every English step's
 * overflow down to an even 8px everywhere this component is used (periodontal, cavity, preventive
 * are all comfortably under this already and only get a little smaller) -- all comfortably under
 * ja's own 21px max, and the same amount on every step keeps the rhythm uniform rather than
 * step-dependent the way ja's own 21/21/-5/-30/-5 pattern is. Checked at 375/768/1024/1440: the
 * overflow amount does not change with viewport (the box is a fixed 240px wide at every width this
 * component appears at), so one rule covers all of them. */
body:not(.ja, .zh-CN, .ko-KR) .flow_01 .inner > p {
  font-size: 14px;
}

/* ------------------------------------------------------------------------------------------
 * Process-step circle labels (.flow_01 .inner>div h3) at <=640px only, where the circle itself
 * shrinks to 140x140 and style.css already drops this label to 18px (both locales): at that size
 * periodontal's step 2, "Basic periodontal treatment", wraps to a line whose corner crosses the
 * circle's own curve by ~2.5px (checked against the circle's chord at the line's own top and
 * bottom, the same test tools/check_text_fits.js uses -- a box-only check would miss this, since
 * the line's rectangle still sits inside the circle's bounding box). ja's text and the other 4
 * English steps on this page already clear the curve at 18px; >640px (19px, 150x150 circle) also
 * already clears it. 17px is the largest size that brings this one line back inside the curve
 * (measured 0px over; still 18px, i.e. unchanged, for every other step and for cavity/preventive,
 * the other two pages that share this component). */
@media screen and (max-width: 640px) {
  body:not(.ja, .zh-CN, .ko-KR) .flow_01 .inner > div h3 {
    font-size: 17px;
  }
}

/* ------------------------------------------------------------------------------------------
 * Simplified Chinese (body.zh-CN).
 * The English fit rules above are written body:not(.ja, .zh-CN, .ko-KR) (otemachi's convention,
 * docs/tasks/CSS-NONJA-SELECTOR-20260925.md): they fix English lines that run wider than the
 * Japanese, and Chinese runs about as wide as the Japanese, so Chinese starts from ja's own
 * style.css sizes. If a Chinese line is measured to overflow, it gets its own body.zh-CN rule
 * here. The service-card title rule (height:auto, min-height = ja's 27px) still applies: it
 * changes nothing for a one-line title.
 *
 * Faces: ja sets "Noto Sans JP" (body) and "Noto Serif JP" (INFORMATION panel, banner, button).
 * Neither has most Simplified forms, so a Chinese line would draw part of its glyphs in another
 * face. Chinese leads with the SC face of the same family (same design, same Latin), loaded for
 * zh only in functions.php -- the same order takadanobaba's css/zh.css uses.
 * ------------------------------------------------------------------------------------------ */
body.zh-CN {
  font-family: "Noto Sans SC", "Noto Sans JP", sans-serif;
}
body.zh-CN .info_inner,
body.zh-CN .info_bottom,
body.zh-CN .info_link_btn a {
  font-family: "Noto Serif SC", "Noto Serif JP", serif;
}

/* ------------------------------------------------------------------------------------------
 * Burmese, Nepali, Korean, Vietnamese, Filipino, Spanish (2026-10-06).
 *
 * Which of the English fit rules above apply: vi, tl and es are Latin script and run about as
 * long as the English, and my and ne run longer still, so all five keep them. Korean is set on the
 * same full-width grid as the Japanese and runs close to its length, so like Chinese it is left
 * out (body:not(.ja, .zh-CN, .ko-KR)) and starts from ja's own style.css sizes. These are starting
 * points: once each catalogue is translated, check_text_fits.js and the INFORMATION panel's
 * diagonal (tools/check_art_fidelity.js) decide, and any rule that turns out to be needed is
 * scoped to that language's body class here.
 *
 * Faces: Noto Sans JP / Noto Serif JP carry no Burmese, Devanagari or Hangul, so each adds its own
 * script after the Japanese face (Latin and digits stay in ja's face, takadanobaba's order),
 * loaded for that language only in functions.php. Noto Sans JP draws every Vietnamese letter, so
 * Vietnamese body text needs nothing; the three places ja sets in a serif get Noto Serif, which
 * has the Vietnamese letters the system serifs behind "Noto Serif JP" lack. In those three places
 * the theme never loads "Noto Serif JP", so for my/ne/ko the script serif would become the
 * first available face and its taller line metrics set every line's height: on /my/ the
 * INFORMATION list's <span> then overlapped its <li> (check_text_fits, 7 widths). Zen Old Mincho,
 * already loaded on every non-Japanese page by hero-i18n.css, goes in front of it instead.
 * ------------------------------------------------------------------------------------------ */
body.my-MM {
  font-family: "Noto Sans JP", "Noto Sans Myanmar", sans-serif;
}
body.ne-NP {
  font-family: "Noto Sans JP", "Noto Sans Devanagari", sans-serif;
}
/* Korean wraps between words, as Korean sites do (otemachi's and takadanobaba's rule): browsers
   otherwise break Hangul between any two syllables. overflow-wrap only breaks a word wider than
   its box. */
body.ko-KR {
  font-family: "Noto Sans JP", "Noto Sans KR", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body.my-MM .info_inner,
body.my-MM .info_bottom,
body.my-MM .info_link_btn a {
  font-family: "Noto Serif JP", "Zen Old Mincho", "Noto Serif Myanmar", serif;
}
body.ne-NP .info_inner,
body.ne-NP .info_bottom,
body.ne-NP .info_link_btn a {
  font-family: "Noto Serif JP", "Zen Old Mincho", "Noto Serif Devanagari", serif;
}
body.ko-KR .info_inner,
body.ko-KR .info_bottom,
body.ko-KR .info_link_btn a {
  font-family: "Noto Serif JP", "Zen Old Mincho", "Noto Serif KR", serif;
}
body.vi .info_inner,
body.vi .info_bottom,
body.vi .info_link_btn a {
  font-family: "Noto Serif", serif;
}

/* Burmese fits (check_text_fits.js against ja, 2026-10-06). The catalogue runs longer than ja's:
   the home doctor message (.doctors .inner, fixed 424px at >=841px) and the guidance cards
   (.guidance_list>div, fixed 140px at <=640px) get the box-grows-to-content rule body.en-US already
   has in style.css for the same two boxes; the FEATURE heading takes a fourth line in its fixed
   120px band below 360px, and 15px keeps ja's three. */
@media screen and (min-width: 841px) {
  body.my-MM .doctors .inner {
    height: auto;
    min-height: 424px;
  }
}
@media screen and (max-width: 640px) {
  body.my-MM .guidance_list > div {
    height: auto;
    min-height: 140px;
  }
}
@media screen and (max-width: 359px) {
  body.my-MM .feature .heading h2 {
    font-size: 15px;
  }
}
/* The first features card's paragraph (the clinic philosophy) wraps to 7 lines at 641-760px and
   841-940px, one more than its fixed 280px panel holds; 15px on a 22px line keeps it inside. */
@media screen and (min-width: 641px) and (max-width: 760px), screen and (min-width: 841px) and (max-width: 940px) {
  body.my-MM .features .inner.num1 .txt p {
    font-size: 15px;
    line-height: 22px;
  }
}

/* Nepali fits (check_text_fits.js against ja, 2026-10-06). Below 385px three guidance card titles
   (予防歯科 / むし歯治療 / ホワイトニング) take a second line in the fixed 140px card at ja's 14px;
   at 12px each card is no taller than ja's tallest. */
@media screen and (max-width: 384px) {
  body.ne-NP .guidance_list h3 {
    font-size: 12px;
  }
}

/* Vietnamese fits (check_text_fits.js against ja, 2026-10-06). The home doctor message runs past
   the fixed 424px card at >=841px, as English and Burmese do; the same box-grows-to-content rule.
   Below 385px three guidance card titles (歯周病治療 / 予防歯科 / インプラント) take a second line in
   the fixed 140px card at ja's 14px; at 12px (11px below 340px, where 歯周病治療 still wraps) each
   card is no taller than ja's tallest. */
@media screen and (min-width: 841px) {
  body.vi .doctors .inner {
    height: auto;
    min-height: 424px;
  }
}
@media screen and (max-width: 384px) {
  body.vi .guidance_list h3 {
    font-size: 12px;
  }
}
@media screen and (max-width: 339px) {
  body.vi .guidance_list h3 {
    font-size: 11px;
  }
}

/* Header hours paragraph beside the switcher (moved from common.css, owner option B 2026-10-13):
   header_l(260) + .header_r(icons + switcher + this text) no longer fit side by side below 901px
   (check_text_fits, 2026-09-30: header_r wraps below header_l at 841px and the pill/icons paint
   over the hero). A notch smaller than 14px brings the widest line under the budget at 841px with
   a few px to spare; 901px+ already fits at 14px. Locales with their own sizes (body.<locale>
   rules here and in style.css) override this one. */
@media screen and (max-width: 900px) {
  .header_r .info p {
    font-size: 12px;
  }
}

/* Filipino fits (check_text_fits.js against ja, 2026-10-06). The header hours paragraph is as long
   as English's and gets English's sizes (style.css fix 3): at ja's 14px it pushed .header_r below
   .header_l from 841 to 1279px. The doctor message and the guidance cards get the
   box-grows-to-content rule English, Burmese and Vietnamese already have. */
body.tl .header_r .info p {
  line-height: 1.35;
  letter-spacing: 0.7px;
}
@media screen and (max-width: 900px) {
  body.tl .header_r .info p {
    letter-spacing: 0.6px;
  }
}
@media screen and (min-width: 1024px) {
  body.tl .header_r .info p {
    font-size: 12.5px;
  }
}
@media screen and (min-width: 841px) and (max-width: 1023px) {
  body.tl .header_r .info p {
    max-width: 295px;
    font-size: 9.5px;
  }
}
@media screen and (min-width: 841px) {
  body.tl .doctors .inner {
    height: auto;
    min-height: 424px;
  }
}
@media screen and (max-width: 640px) {
  body.tl .guidance_list > div {
    height: auto;
    min-height: 140px;
  }
}
/* The first features card (sick care / health care + the clinic philosophy) runs past its fixed
   panel at 641-998px; a 15px/22px paragraph keeps it inside, and below 941px the heading also
   needs 20px, tracking pinned to ja's computed 2.4px (measured 0-1px past the panel, ja's own
   overflow being the limit). */
@media screen and (min-width: 641px) and (max-width: 998px) {
  body.tl .feature .inner.num1 .txt p {
    font-size: 15px;
    line-height: 22px;
  }
}
@media screen and (min-width: 641px) and (max-width: 940px) {
  body.tl .feature .inner.num1 .txt h3 {
    font-size: 20px;
    letter-spacing: 2.4px;
  }
}

/* Spanish fits (check_text_fits.js against ja, 2026-10-06). The home doctor message and the guidance
   cards get the box-grows-to-content rule English, Burmese, Vietnamese and Filipino have. The clinic
   philosophy paragraph takes one or two lines more than its fixed 280px panel holds at 641-840px and
   841-960px; 15px on a 22px line keeps it inside (the Burmese rule). The footer treatment list is two
   120px columns: Odontopediatría and Blanqueamiento are single words wider than a column at ja's
   size and tracking, so the list may hyphenate (Spanish dictionary, Chromium and WebKit). The header hours paragraph is as long as
   English's and gets English's sizes (style.css fix 3), as the Filipino does. */
body.es-ES .header_r .info p {
  line-height: 1.35;
  letter-spacing: 0.7px;
}
@media screen and (max-width: 900px) {
  body.es-ES .header_r .info p {
    letter-spacing: 0.6px;
  }
}
@media screen and (min-width: 1024px) {
  body.es-ES .header_r .info p {
    font-size: 12.5px;
  }
}
@media screen and (min-width: 841px) and (max-width: 1023px) {
  body.es-ES .header_r .info p {
    max-width: 295px;
    font-size: 9.5px;
  }
}
@media screen and (min-width: 841px) {
  body.es-ES .doctors .inner {
    height: auto;
    min-height: 424px;
  }
}
@media screen and (max-width: 640px) {
  body.es-ES .guidance_list > div {
    height: auto;
    min-height: 140px;
  }
}
@media screen and (min-width: 641px) and (max-width: 960px) {
  body.es-ES .features .inner.num1 .txt p {
    font-size: 15px;
    line-height: 22px;
  }
}
body.es-ES footer .footer_nav ul#menu-treatment li a {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Inner-page fits for my / vi / tl / es (check_text_fits.js against ja, 2026-10-06). Smaller type
   only, each scoped to its language.
   - .flow_01 circle labels (/service/cavity/, periodontal, preventive): es step 3 wraps to three
     lines at the >640px 19px size and runs into "Step3."; vi step 1 crosses the circle's curve at
     every width; tl and my step 5 cross it at the <=640px 17px size.
   - .nums_list_tlt_txt cards (/service/periodontal/, fixed 216px box): my, tl and es text runs
     past the box into the card title at <=640px.
   - es: the first breadcrumb runs off the left edge at 320px, and "Blanqueamiento" is one word
     wider than the whitening card title line at 18px. */
@media screen and (min-width: 641px) {
  body.es-ES .flow_01 .inner > div h3 {
    font-size: 17px;
  }
  body.vi .flow_01 .inner > div h3 {
    font-size: 18px;
  }
}
@media screen and (max-width: 640px) {
  body.vi .flow_01 .inner > div h3,
  body.my-MM .flow_01 .inner > div h3 {
    font-size: 16px;
  }
  body.tl .flow_01 .inner > div h3 {
    font-size: 15px;
  }
  body.my-MM .nums_list_tlt_txt li .txt p,
  body.tl .nums_list_tlt_txt li .txt p,
  body.es-ES .nums_list_tlt_txt li .txt p {
    font-size: 14px;
  }
  body.es-ES .breadcrumbs {
    font-size: 12px;
  }
  body.es-ES .nums_list li h4.midashi {
    font-size: 17px;
  }
}