/* lang.css — language switcher + Japanese base typography. Loaded on every public page (WP1).
   Colours are neutral/self-contained so it works on every theme; typography only touches font/line-height/letter-spacing/line-break. */

/* inline switcher (inside .pub-nav):  EN｜日本語 */
.hw-lang{display:inline-flex;align-items:center;gap:2px;margin-left:14px;font-size:13px;white-space:nowrap;line-height:1}
.hw-public .pub-nav .hw-lang a{margin-left:0;font-size:13px;padding:6px 4px;color:var(--p-mute,#5E5E7A);text-decoration:none}
.hw-lang a.on{color:var(--p-head,#14142B);font-weight:700}
.hw-lang i{font-style:normal;color:var(--p-line,#D9D3EE)}
.hw-lang a:hover{text-decoration:underline}
@media (max-width:480px){
  /* phones: show only the OTHER language (one tap target), and let the Japanese header drop the wordmark text (logo mark stays) */
  .hw-lang a.on,.hw-lang i{display:none}
  .hw-lang{margin-left:8px}
  .hw-public .pub-nav .hw-lang a{font-size:12.5px;padding:8px 4px}
  body.hw-ja .pub-header .brand-text{display:none}
  .hw-public .pub-header.hw-has-lang .brand-text{white-space:nowrap;font-size:13px}
  .hw-public .pub-header.hw-has-lang .logo-mark{margin-right:-2px}
  .hw-public .pub-header.hw-has-lang .pub-nav a{margin-left:6px;font-size:12.5px}
  .hw-public .pub-header.hw-has-lang .pub-nav .hw-lang{margin-left:4px}
  .hw-public .pub-header.hw-has-lang .pub-nav .hw-lang a{margin-left:0;padding:8px 2px}
  .hw-public .pub-header.hw-has-lang{gap:6px}
}

/* compact fixed pill for nav=false theme pages (WP10: 32px, bottom-RIGHT).
   Hero/secondary CTAs and form fields are left-aligned, so the right edge is the free side; every theme header uses the top for its own CTA.
   Where scroll-driven animations exist the pill fades out after the first ~240px of scroll (so it never covers body content or the sticky CTA bar); it stays at the bottom-right of the first screen only. */
.hw-lang-fab{position:fixed;z-index:60;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px));left:auto;
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;padding:0 11px;border-radius:16px;
  background:rgba(20,20,30,.62);color:#fff!important;font:600 12.5px/1 system-ui,-apple-system,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  letter-spacing:.02em;text-decoration:none!important;border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.hw-lang-fab:hover{background:rgba(20,20,30,.78)}
.hw-lang-fab:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:600px){.hw-lang-fab{bottom:auto;top:calc(86px + env(safe-area-inset-top,0px))}}   /* tablets/desktop: hero stat bars sit at the bottom edge; the area under the header (right) is empty */
@supports (animation-timeline:scroll()){
  @keyframes hw-fab-away{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
  .hw-lang-fab{animation:hw-fab-away linear both;animation-timeline:scroll(root block);animation-range:0 240px}
  .hw-lang-fab:focus-visible{animation:none;opacity:1;visibility:visible}
}
@media print{.hw-lang,.hw-lang-fab,.hw-ja-suggest{display:none!important}}

/* "also available in Japanese" suggestion (English home, ja browsers only; dismissible, never redirects) */
.hw-ja-suggest{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;background:#1B1B2F;color:#fff;font-size:14px;line-height:1.4}
.hw-ja-suggest[hidden]{display:none}
.hw-ja-suggest a{color:#fff;text-decoration:underline}
.hw-ja-suggest button{appearance:none;background:none;border:0;color:#fff;font-size:20px;line-height:1;min-width:32px;min-height:32px;cursor:pointer}

/* Japanese base typography. Font stack only on the standard (public.css) theme; theme pages keep their own families and
   fall back to the system CJK face (WP5/6 append per-theme tweaks). line-break:strict = kinsoku everywhere. */
html:lang(ja) body{line-break:strict}
html:lang(ja) body.hw-ja-std{font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;line-height:1.8;letter-spacing:.02em;font-feature-settings:normal}
html:lang(ja) body.hw-ja-std :is(h1,h2,h3,h4){line-height:1.4;letter-spacing:.01em;font-weight:700}
html:lang(ja) body.hw-ja-std :is(input,select,textarea,button){font-family:inherit}
html:lang(ja) :is(h1,h2,h3){text-wrap:balance}
@supports (word-break:auto-phrase){html:lang(ja) body.hw-ja-std :is(h1,h2,h3,.ev-tag,.sec-sub){word-break:auto-phrase}}
@media (max-width:400px){.hw-public .pub-header.hw-has-lang .brand-text{display:none}}

/* WP10: /ja/events filter tabs - Japanese labels are wider than English; wrap instead of clipping ("終了したイベント" was cut off at 390px). */
html:lang(ja) .tabs{flex-wrap:wrap;overflow:visible;border-radius:22px}
html:lang(ja) .tabs a,html:lang(ja) .tabs button{white-space:nowrap}
@media (max-width:480px){html:lang(ja) .tabs a,html:lang(ja) .tabs button{flex:1 1 auto;text-align:center;padding:10px 14px;font-size:14px}}

/* WP11: katakana chunks (hwJaChunk) and tail glue (hwJaGlue). .jk = one inline-block unit: moves to the next line whole; only if it is wider than its container does it wrap inside (never overflows at 360px). */
html:lang(ja) .jk{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:keep-all;vertical-align:baseline}
html:lang(ja) .ja-nb{white-space:nowrap}
@supports (text-wrap:pretty){html:lang(ja) body.hw-ja-std p{text-wrap:pretty}}
/* kiosk (projector): no language pill, no floating chrome */
.ja-kiosk .ja-en,.ja-kiosk .hw-lang-fab{display:none!important}
/* WP11: crowd (Endorser Circle) hero has a rotated date badge on the image at the bottom-right of the first screen on phones; park the pill just under the header instead. */
@media (max-width:599px){html:lang(ja) body.pg-crowd .hw-lang-fab{bottom:auto;top:calc(70px + env(safe-area-inset-top,0px))}}