/**
* Hakuho Language Switcher — theme-integrated styling.
*
* FIX8 (2026-07-10): Chip overflow / label wrapping fix.
* - `__label` ("日本語" / "English" / "中文") hidden ALL viewports
* because it visually duplicates `__code` (JP/EN/CN) and its
* variable width (English=7ch) caused chip overflow within the
* burgundy strip.
* - Chip content strictly bounded by explicit inline-flex + nowrap
* + line-height:1 on all inner spans to defeat theme
* `#subNavi li a { line-height:20px; padding:10px 15px }`.
* - `#subNavi > li.hakuho-lang-switcher-wrap` padding zeroed
* with !important to override theme padding cascade.
*
* FIX7 (2026-07-10): Switcher is now embedded INSIDE #subNavi as a
* and pinned to the LEFT of
* the burgundy strip (before アクセス).
*
* Selectors are qualified with #subNavi to defeat the plugin residue CSS
* (/wp2017/wp-content/plugins/hakuho-language-switcher/assets/language-switcher.css?ver=0.6.0)
* which the theme was previously losing the enqueue race against.
*
* Site design tokens (extracted from theme style.css):
* #671E2C – #subNavi background (deep burgundy)
* #92394A – #header background & #subNavi li a:hover
* #BF9D63 – gold accent
* Font – .mincho: 'Noto Serif JP', serif
* Nav items: display:block; padding:10px 15px; color:#FFF; hover .5s
*
* The uses `margin-right: auto` so
* flex pushes it LEFT while remaining sibling s stay RIGHT (original
* design). We do NOT alter #subNavi text-align — the auto margin trick
* works with inline-block just as well as with flex, and we set flex only
* as a defensive layer.
*/
/* -----------------------------------------------------------
* Kill legacy floating switcher variants (plugin residue).
* ----------------------------------------------------------- */
body .hakuho-lang-switcher-floating,
body .hakuho-lang-switcher--floating,
body .language-switcher-floating,
body > .hakuho-lang-switcher-floating,
body > .language-switcher-floating {
display: none !important;
visibility: hidden !important;
}
/* Any switcher rendered OUTSIDE #subNavi is a residue — hide it. */
body > .hakuho-lang-switcher,
header > .hakuho-lang-switcher {
display: none !important;
}
/* -----------------------------------------------------------
* Convert #subNavi to flex so the switcher pins LEFT and the
* existing icon links stay RIGHT (behaviour parity via auto margin).
* ----------------------------------------------------------- */
#subNavi {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
#subNavi > li.hakuho-lang-switcher-wrap {
list-style: none;
margin: 0 auto 0 15px; /* auto right-margin pushes remaining links to the right */
padding: 0 !important; /* defeat theme #subNavi padding cascade */
line-height: 1 !important;
display: flex;
align-items: center;
overflow: visible;
}
/* Defeat theme `#subNavi li a { display:block; padding:10px 15px; line-height:20px }`
which is applied to the switcher elements because they are `#subNavi li a`.
Our chip padding + line-height must win. */
#subNavi > li.hakuho-lang-switcher-wrap a.hakuho-lang-switcher__item {
display: inline-flex !important;
line-height: 1 !important;
}
/* -----------------------------------------------------------
* Switcher container (now inside the ).
* ----------------------------------------------------------- */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher {
display: inline-flex;
gap: 6px;
align-items: center;
font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 12px;
line-height: 1;
letter-spacing: 0.04em;
padding: 0;
margin: 0;
float: none; /* override plugin .hakuho-lang-switcher{float:right} residue */
position: static; /* override any plugin absolute positioning */
background: transparent;
}
/* -----------------------------------------------------------
* Chip — transparent bg / white 0.5px border / white text / mincho.
* Selectors qualified with #subNavi to beat plugin CSS specificity.
* ----------------------------------------------------------- */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item {
display: inline-flex;
align-items: center;
padding: 6px 11px;
line-height: 1;
border: 0.5px solid rgba(255, 255, 255, 0.55);
border-radius: 2px;
background: transparent;
color: #FFFFFF;
text-decoration: none;
font-weight: 500;
font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
white-space: nowrap;
overflow: visible;
box-sizing: border-box;
vertical-align: middle;
gap: 4px;
}
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item:visited {
color: #FFFFFF;
}
/* Hover: mirror #subNavi li a:hover (#92394A, .5s). */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item:hover,
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item:focus {
background: #92394A;
border-color: #FFFFFF;
color: #FFFFFF;
text-decoration: none;
outline: none;
}
/* Active language: solid gold accent. */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item--active,
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item--active:visited {
background: #BF9D63;
border-color: #BF9D63;
color: #FFFFFF;
pointer-events: none;
font-weight: 700;
}
/* -----------------------------------------------------------
* Inner spans.
* ----------------------------------------------------------- */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__flag {
display: inline-block;
font-size: 13px;
line-height: 1;
margin-right: 4px;
vertical-align: middle;
white-space: nowrap;
overflow: visible;
}
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__code {
display: inline-block;
font-family: 'Roboto', 'Noto Serif JP', serif;
font-weight: 700;
letter-spacing: 0.08em;
min-width: 1.6em;
text-align: center;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
overflow: visible;
}
/* FIX8: `__label` always hidden — visually duplicates `__code` and its
variable-width English text ("English" = 7 chars) caused the chip to
overflow the burgundy strip. Chip now shows FLAG + CODE only. */
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__label {
display: none !important;
}
/* FIX9 (2026-07-10): JS emoji-fallback DISABLED.
The canvas-based tofu detector in language-switcher.js was producing
false positives on Mac browsers, causing the flag to flash then hide.
The `--noflag` class is no longer added by JS, and even if legacy
markup carries it, we now explicitly keep the flag visible. */
#subNavi .hakuho-lang-switcher--noflag .hakuho-lang-switcher__flag {
display: inline-block !important;
}
/* -----------------------------------------------------------
* Responsive parity with existing theme rules.
*
* Theme hides #subNavi at <=896px and shows the drawer (#spnav).
* Our switcher inside #subNavi disappears with the strip; the drawer
* variant (rendered inside #spnav via header.php line 62) takes over.
* ----------------------------------------------------------- */
@media (max-width: 1290px) {
#subNavi > li.hakuho-lang-switcher-wrap {
margin-left: 10px;
}
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item {
padding: 5px 8px;
font-size: 11px;
}
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__flag {
font-size: 12px;
margin-right: 3px;
}
}
@media (max-width: 991px) and (min-width: 897px) {
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher {
gap: 4px;
}
#subNavi .hakuho-lang-switcher-wrap .hakuho-lang-switcher__item {
padding: 4px 7px;
font-size: 10.5px;
}
}
/* Drawer variant (#spnav): rendered once via drawer-navbar-header. */
@media (max-width: 991px) {
#spnav .hakuho-lang-switcher,
.drawer-navbar .hakuho-lang-switcher {
display: inline-flex;
gap: 4px;
padding: 6px 12px;
}
#spnav .hakuho-lang-switcher__item,
.drawer-navbar .hakuho-lang-switcher__item {
padding: 5px 9px;
font-size: 11px;
border: 0.5px solid rgba(255, 255, 255, 0.55);
border-radius: 2px;
background: transparent;
color: #FFFFFF;
text-decoration: none;
font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}
#spnav .hakuho-lang-switcher__item--active,
.drawer-navbar .hakuho-lang-switcher__item--active {
background: #BF9D63;
border-color: #BF9D63;
}
#spnav .hakuho-lang-switcher__flag,
.drawer-navbar .hakuho-lang-switcher__flag {
font-size: 12px;
}
}
/* fix10.1 (2026-07-10): WP img.wp-smiley/img.emoji の 1em 強制サイズ解除 (minimal) */
.hakuho-lang-switcher__flag img.wp-smiley,
.hakuho-lang-switcher__flag img.emoji {
width: auto !important;
height: auto !important;
}
/* 2026-09-11 (Issue #8): 沿革 (EN) — 月名が style.css の固定幅 40px (.hist dd span.month) から
はみ出して本文と重なる (September 72px / November 68px 実測)。EN のみ月名欄を 80px に広げ、
本文は残り幅に収めて月名の横に並べる。JA / ZH は変更なし。 */
html[lang="en"] .hist dd span.month {
width: 80px;
}
html[lang="en"] .hist dd span.txt {
max-width: calc(100% - 90px);
}