/**
 * WordPress-only adjustments. Everything else is the live site's CSS, copied.
 *
 * The toolbar a logged-in editor sees is fixed at the top of the window and
 * pushes the page down with a margin on <html>. The guide's header is
 * absolutely positioned against the viewport, so without this it would sit
 * under the toolbar. Visitors never have the toolbar, so they see the page
 * exactly as the live site draws it.
 */
body.admin-bar .g-head { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .g-head { top: 46px; }
}

/* The same for the edition bar, which is fixed to the top of the window. */
body.admin-bar .eb { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .eb { top: 46px; }
}

/*
 * The language switch — the one element the live site does not have yet
 * (the owner asked for EN / 日本語 / ไทย from the start). Drawn in the
 * header's own small-caps register so it reads as part of the bar: the
 * current language in full ink, the others at the Editions link's opacity.
 */
.g-lang { flex: none; display: inline-flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.16em; }
.g-lang a { text-decoration: none; color: inherit; opacity: 0.55; padding: 2px 0; border-bottom: 1px solid transparent;
	transition: opacity 0.3s var(--g-e), border-color 0.3s var(--g-e); }
.g-lang a:hover { opacity: 1; }
.g-lang a.is-on { opacity: 1; border-bottom-color: currentColor; }
.g-lang--menu { display: flex; gap: 22px; font-size: 13px; }
.g-lang--menu a { opacity: 0.6; }
.g-head .g-menu .g-lang--menu a { opacity: 0.6; transform: none; }
.g-head.is-open .g-menu .g-lang--menu a { opacity: 0.6; }
.g-head.is-open .g-menu .g-lang--menu a.is-on { opacity: 1; }
@media (max-width: 640px) {
	.g-head__row > .g-lang { display: none; }
}

/*
 * Stars in place of the SCORE number (inc/score-display.php). Sized in em so
 * every place the number stood -- the café hero's large figure, a card's
 * small one -- draws the stars at its own scale, in its own colour.
 */
.mb-stars { display: inline-flex; align-items: center; gap: 0.1em; line-height: 1; vertical-align: middle; }
/* The number's own rules style a neighbouring <span> ("/ 100", "Our score")
   with small caps and grey ink; the stars take the number's size and colour
   instead, whatever span rule surrounds them. */
.g-body .mb-stars { font-size: inherit !important; color: inherit !important; letter-spacing: 0 !important;
	text-transform: none !important; margin: 0 !important; padding: 0 !important; }
.mb-stars svg { display: block; width: max(11px, 0.4em); height: max(11px, 0.4em); flex: none; }

/* "Illustrative photo": laid over a picture that is not the café's own, so a
   stock photograph is never read as this café. Quiet, but always legible. */
:where(span, figure, div, header):has(> .mb-illus) { position: relative; }
.mb-illus {
	position: absolute; right: 8px; top: 8px; z-index: 3;
	padding: 3px 7px; border-radius: 2px;
	background: rgb(10 12 10 / 0.62); color: #f3f1ea;
	font: 500 10px/1.2 var(--font-body, Inter, sans-serif); letter-spacing: 0.06em;
	pointer-events: none; white-space: nowrap;
}
.g-body .mb-illus { font-size: 10px !important; text-transform: none !important; margin: 0 !important; }
/* the café hero: the photo is full-bleed under the header, so the note sits top-right */
.cafe .hr__photo > .mb-illus { right: 16px; top: 76px; }
.cafe .hr__l.mb-prov { margin-top: 6px; opacity: 0.7; }

/* Japanese and Thai. The display type was set for Latin capitals, whose glyphs
   sit well inside a 0.9 line; kana, kanji and Thai marks fill the whole em, so
   stacked lines touched. These give them room, keep small kana and closing
   punctuation off the start of a line, and break headings at phrase ends
   where the browser can. */
html:lang(ja) body { line-break: strict; }
:is(html:lang(ja), html:lang(th)) :is(h1, h2, h3, .g-display, .g-display-2) { text-wrap: balance; }
html:lang(ja) :is(h1, h2, h3, .g-display, .g-display-2) { word-break: auto-phrase; }
:is(html:lang(ja), html:lang(th)) :is(
	.g-display, .g-display-2, .cafe .hr__title, .cafe .mp__place, .cafe .pk__name, .cf-hero__title,
	.city-page .dc__h, .city-page .ep__name, .city-page .fc__title, .city-page .rt__arrive-city, .city-page .rt__city,
	.ed-page .cf__name, .ed-page .dc__h, .ed-page .dc__name, .ed-page .ex__h, .ed-page .ex__name, .ed-page .ke__h,
	.ed-page .ke__name, .ed-page .mh__title, .ed-page .sb__cta-h, .ed-page .sb__name, .ed-page .se__name, .ed-page .st__title,
	.home-page .ed__name h2, .home-page .or__rname, .home-page .se__name, .kn-page .kn-hero__title, .reg-page .cr__h
) { line-height: 1.16; }
:is(html:lang(ja), html:lang(th)) :is(.ed-page .mh__code, .home-page .ed__code) { margin-bottom: 0.6em; }
/* Short lines in Japanese and Thai: no one- or two-character last line, and
   (where the browser can) break at phrase ends rather than mid-word. */
:is(html:lang(ja), html:lang(th)) body { text-wrap: pretty; }
html:lang(ja) :is(.sb__reason, .ep__name, .ke__line, .dc__line, .en__note, .kn__fline, .ed-page .ex__fact, .reg-page .rg__why) { word-break: auto-phrase; }
/* Country names in Japanese/Thai run longer than their English: the big
   edition name steps down so "シンガポール" clears the list beside it. */
:is(html:lang(ja), html:lang(th)) .home-page .ed__name h2 { font-size: clamp(48px, 8.2vw, 150px); }
:is(html:lang(ja), html:lang(th)) .ed-page .mh__title { font-size: clamp(48px, 8.8vw, 170px); }
@media (max-width: 760px) {
	:is(html:lang(ja), html:lang(th)) .home-page .ed__name h2,
	:is(html:lang(ja), html:lang(th)) .ed-page .mh__title { font-size: clamp(36px, 12vw, 64px); }
}

/* ── Home hero, 2026-09-29 ──────────────────────────────────────────────
   No corner brackets; full screen on phones (the canvas keeps the tallest
   height so the phone toolbar coming and going never re-lays it out); a
   scroll cue that says there is more below. */
.home-page .g-hero__frame { display: none; }
.home-page .g-hero__cue { display: none; }
@media (max-width: 640px) {
	.home-page .g-hero { height: 100svh; height: 100dvh; min-height: 520px; }
	.home-page .g-hero__canvas { height: 100vh; height: 100lvh; bottom: auto; }
}
.mb-scroll { position: absolute; left: 50%; bottom: 84px; z-index: 6; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	color: rgba(239, 234, 222, 0.72); text-decoration: none;
	font: 400 9px/1 var(--font-body, Inter, sans-serif); letter-spacing: 0.34em; text-transform: uppercase; padding-left: 0.34em;
	opacity: 0; transition: opacity 1.2s ease 1.6s; }
.g-hero.is-live .mb-scroll { opacity: 1; }
.mb-scroll i { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(239, 234, 222, 0.16); }
.mb-scroll i::after { content: ""; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: currentColor;
	animation: mb-drop 2.2s cubic-bezier(0.65, 0, 0.25, 1) infinite; }
@keyframes mb-drop { from { top: -45%; } to { top: 100%; } }
@media (max-width: 640px) { .mb-scroll { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .mb-scroll i::after { animation: none; top: 30%; } }

/* ── The menu button: two lines of unequal length that meet in an X, and a
   light X on the dark open menu (it was drawn in the page's dark ink). */
.g-burger { width: 44px; height: 44px; -webkit-tap-highlight-color: transparent; }
.g-burger span { left: auto; right: 6px; height: 1.5px; border-radius: 1px;
	transition: transform 0.5s var(--g-e, cubic-bezier(.2,.7,.2,1)), width 0.5s var(--g-e, cubic-bezier(.2,.7,.2,1)), top 0.5s var(--g-e, cubic-bezier(.2,.7,.2,1)); }
.g-burger span:nth-child(1) { top: 18px; width: 26px; }
.g-burger span:nth-child(2) { top: 26px; width: 15px; }
.g-burger:hover span:nth-child(2) { width: 26px; }
.g-head.is-open .g-burger { color: #efeade; }
.g-head.is-open .g-burger span:nth-child(1),
.g-head.is-open .g-burger span:nth-child(2) { top: 22px; width: 24px; }
.g-head.is-open .g-burger span:nth-child(1) { transform: rotate(45deg); }
.g-head.is-open .g-burger span:nth-child(2) { transform: rotate(-45deg); }
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Night-blue photographs (the Bangkok skyline) toned to the site's
   matcha palette rather than left electric blue. */
img[src*="bangkok-river"] { filter: saturate(0.45) sepia(0.28) hue-rotate(38deg) brightness(0.92); }
/* buttons do not inherit colour by default: the menu lines were drawn in the
   browser's black on the dark hero */
.g-burger { color: inherit; }
.home-page .g-hero .g-hero__cue { display: none; }
.mb-scroll { color: rgba(242, 238, 226, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); }
.mb-scroll i { background: rgba(242, 238, 226, 0.28); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
.cafe .hr__crumb, .cafe .hr__crumb a { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); color: rgba(242, 238, 226, 0.9); }