/* ==========================================================================
   Love Counter — i18n.css
   Header language switcher, Google Translate artefact suppression, and the
   right-to-left mirror. Loaded on every page.
   ========================================================================== */

.lang-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Strings the tool reads at render time so its dynamic text is translated
   too. Kept in the layout (not display:none) because the translator skips
   nodes that are not rendered. */
.i18n-src {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---------- Trigger ---------- */
.lang { position: relative; flex: none; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang__btn:hover,
.lang__btn[aria-expanded="true"] {
  background: rgba(231, 71, 126, 0.22);
  border-color: var(--rose);
  color: var(--white);
}
.lang__btn-flag { display: block; width: 22px; flex: none; }
.lang__flag-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.lang__btn-code { letter-spacing: 0.06em; }
.lang__caret { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease); }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

/* ---------- Panel ---------- */
.lang__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: min(680px, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-body);
  animation: langIn 160ms var(--ease);
}
.lang__panel[hidden] { display: none; }
@keyframes langIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang__head { margin-bottom: 0.85rem; }
.lang__title {
  margin: 0 0 0.6rem;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
}
.lang__search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--blush);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lang__search:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(231, 71, 126, 0.16); }
.lang__search svg { width: 17px; height: 17px; flex: none; color: var(--rose-deep); }
.lang__search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 0.92rem;
  color: var(--text-body);
}
.lang__search input:focus { outline: none; }
.lang__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.lang__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}
.lang__grid::-webkit-scrollbar { width: 8px; }
.lang__grid::-webkit-scrollbar-thumb { background: var(--rose-mist); border-radius: 99px; }

.lang__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang__opt[hidden] { display: none; }
.lang__opt:hover { background: var(--rose-soft); border-color: var(--border); }
.lang__opt.is-current { background: var(--rose-soft); border-color: var(--rose); }
.lang__opt-flag { display: block; width: 25px; flex: none; }
.lang__opt-text { min-width: 0; }
.lang__opt-name {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--text-heading);
  /* Long endonyms must trim rather than push the grid column wider. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang__opt-country {
  display: block;
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang__opt.is-current .lang__opt-name { color: var(--rose-deep); }

.lang__empty { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.lang__foot {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lang__panel { width: min(460px, calc(100vw - 1.5rem)); }
  .lang__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this the panel becomes a sheet anchored to the bottom of the screen,
   which is far easier to reach one-handed than a dropdown pinned under the
   header. */
@media (max-width: 640px) {
  .lang__btn { padding: 0 0.5rem; gap: 0.3rem; }
  .lang__btn-code { display: none; }
  .lang__panel {
    position: fixed;
    inset: auto 0.6rem 0.6rem;
    width: auto;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: langSheet 200ms var(--ease);
  }
  .lang__grid { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  @keyframes langSheet {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* Backdrop for the sheet. */
@media (max-width: 640px) {
  /* Sits below the header's stacking context (z-index 100) so the sheet,
     which lives inside that header, stays above the dim. */
  html.lang-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(42, 17, 40, 0.5);
  }
}

/* ---------- Header must never overlap ----------
   Belt and braces for the fit logic: with every bar child refusing to shrink
   below its content, a bar that is too narrow can only ever overflow — it can
   never collapse items on top of each other, in either direction. */
html:not(.nav-drawer) .nav > * { flex: none; min-width: 0; }
html:not(.nav-drawer) .nav__actions { flex: none; }

/* Step between the full bar and the drawer. Most translations fit here, so
   the menu tightens instead of jumping to a hamburger. */
html.nav-tight:not(.nav-drawer) .nav { gap: 1rem; }
html.nav-tight:not(.nav-drawer) .nav__menu { gap: 0.1rem; }
html.nav-tight:not(.nav-drawer) .nav__link { padding: 0.5rem 0.55rem; font-size: 0.89rem; }
html.nav-tight:not(.nav-drawer) .nav__cta { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
html.nav-tight:not(.nav-drawer) .lang__btn { height: 36px; padding: 0 0.45rem; }

/* ---------- Google Translate artefacts ----------
   The widget injects a banner iframe and pushes the document down with
   `body { top: 40px }`. Left alone that single rule offsets the sticky
   header and every fixed element on the page. */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
iframe.skiptranslate,
body > .skiptranslate:not(#google_translate_element),
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}
/* Moved off-screen rather than display:none — the widget needs to stay
   rendered to initialise, it just must not be seen. */
#google_translate_element {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
body { top: 0 !important; position: static !important; }
/* The widget marks translated phrases with a highlight and a dotted rule so
   you can hover for the original. Useful in a demo, noise on a finished
   site. */
.goog-text-highlight,
.goog-te-ftab-link {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
}
/* Translated runs are wrapped in <font>; keep them typographically inert so
   they inherit our type scale instead of introducing their own. */
font {
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
  text-decoration: inherit !important;
  border-bottom: 0 !important;
  vertical-align: baseline !important;
}

/* Brief dim while the page reloads into the new language. */
html.lang-switching body { opacity: 0.5; transition: opacity 140ms linear; pointer-events: none; }

/* A slow or blocked translation service must never hide the source page.
   Google can inject inline visibility during startup, so the core shell gets
   an explicit visible fallback while translation is pending or has failed. */
html.translation-pending :is(.site-header, main, .site-footer),
html.translation-failed :is(.site-header, main, .site-footer) {
  visibility: visible !important;
}

/* ---------- Right-to-left ----------
   Direction alone flips flex and grid; what is left are the handful of
   physical offsets and borders the design uses. */
html.is-rtl .note-block { border-left: 1px solid var(--border); border-right: 5px solid var(--rose); }
html.is-rtl .callout--info { border-left: 1px solid var(--border); border-right: 4px solid var(--rose); }
html.is-rtl .article__body blockquote {
  border-left: 0;
  border-right: 4px solid var(--rose);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
html.is-rtl .side-toc a { border-left: 0; border-right: 2px solid transparent; }
html.is-rtl .side-toc a.is-current { border-right-color: var(--rose); }
html.is-rtl .hero__trust li { padding-left: 0; padding-right: 1.4rem; }
html.is-rtl .hero__trust li::before { left: auto; right: 0; }
html.is-rtl .scroll-top { right: auto; left: clamp(1rem, 3vw, 2rem); }
html.is-rtl .lang__panel { right: auto; left: 0; }
html.is-rtl .lang__opt { text-align: right; }
html.is-rtl .skip-link { border-radius: 0 0 0 var(--radius-sm); }
/* Drawer only. Unscoped, this slid the desktop menu a full width to the left
   and parked it on top of the header actions. */
html.is-rtl.nav-drawer .nav__menu { right: auto; left: 0; transform: translateX(-100%); }
html.is-rtl.nav-drawer .nav__menu.is-open { transform: translateX(0); }
html.is-rtl.nav-drawer .nav__menu { box-shadow: 8px 0 40px rgba(42, 17, 40, 0.4); }
/* Only prose lists flip their indent. A blanket `html.is-rtl ul` rule would
   outrank the `padding: 0` on the nav menu, footer columns and TOC and give
   them all a stray indent. */
html.is-rtl :is(.article__body, .prose, .callout, .flow) :is(ul, ol) {
  padding-left: 0;
  padding-right: 1.4rem;
}

/* ---------- Script-aware typography ----------
   Poppins and Playfair Display ship Latin glyphs only. Without these stacks
   a translated page falls back per-character to whatever the OS offers,
   which is what produces the uneven word and letter spacing. Every family
   below is a system font, so nothing extra is downloaded. */
html[data-script="arabic"] {
  --font-body: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
  --font-display: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
}
html[data-script="hebrew"] {
  --font-body: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --font-display: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
}
html[data-script="devanagari"] {
  --font-body: "Nirmala UI", "Noto Sans Devanagari", "Kohinoor Devanagari", system-ui, sans-serif;
  --font-display: "Nirmala UI", "Noto Serif Devanagari", "Kohinoor Devanagari", system-ui, serif;
}
html[data-script="bengali"] {
  --font-body: "Nirmala UI", "Noto Sans Bengali", "Bangla MN", system-ui, sans-serif;
  --font-display: "Nirmala UI", "Noto Serif Bengali", "Bangla MN", system-ui, serif;
}
html[data-script="han"] {
  --font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-display: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", sans-serif;
}
html[data-script="kana"] {
  --font-body: "Yu Gothic UI", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
  --font-display: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
html[data-script="hangul"] {
  --font-body: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Serif KR", sans-serif;
}
html[data-script="thai"] {
  --font-body: "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --font-display: "Leelawadee UI", "Noto Serif Thai", Tahoma, sans-serif;
}
html[data-script="cyrillic"] {
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}
html[data-script="greek"] {
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

/* Latin-tuned tracking is wrong for scripts that join or stack their marks:
   negative letter-spacing on Arabic clips ligatures, and on Devanagari it
   collides the matras. */
html.script-nonlatin h1,
html.script-nonlatin h2,
html.script-nonlatin h3,
html.script-nonlatin h4,
html.script-nonlatin h5,
html.script-nonlatin h6,
html.script-nonlatin .brand__name,
html.script-nonlatin .hero__title,
html.script-nonlatin .article__title { letter-spacing: normal; }

html.script-nonlatin .section-eyebrow,
html.script-nonlatin .chip,
html.script-nonlatin .footer__heading,
html.script-nonlatin .time-cell__label,
html.script-nonlatin .side-toc h2,
html.script-nonlatin .lang__btn-code {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* These scripts need more leading than a Latin face does. */
html[data-script="arabic"] body,
html[data-script="devanagari"] body,
html[data-script="bengali"] body,
html[data-script="thai"] body { line-height: 1.85; }
html[data-script="arabic"] h1, html[data-script="arabic"] h2, html[data-script="arabic"] h3,
html[data-script="devanagari"] h1, html[data-script="devanagari"] h2, html[data-script="devanagari"] h3,
html[data-script="bengali"] h1, html[data-script="bengali"] h2, html[data-script="bengali"] h3,
html[data-script="thai"] h1, html[data-script="thai"] h2, html[data-script="thai"] h3 { line-height: 1.45; }

/* CJK has no spaces to break on; let it wrap anywhere rather than overflow. */
html[data-script="han"] :is(p, h1, h2, h3, li, .btn, .nav__link),
html[data-script="kana"] :is(p, h1, h2, h3, li, .btn, .nav__link),
html[data-script="thai"] :is(p, h1, h2, h3, li, .btn, .nav__link) {
  line-break: normal;
  overflow-wrap: anywhere;
}

/* A `translate="no"` element is an atomic token to the translator, and the
   whitespace that sat beside it in the source is not carried across when the
   sentence is reordered — hence "Love CounterConvierte...". A margin restores
   the gap without touching the untranslated English page. */
html.is-translated .kw,
html.is-translated .kw-link { margin-inline: 0.18em; }

/* ---------- Length tolerance ----------
   Translated strings run longer than the English source; these keep the
   growth inside the component instead of bursting the layout. */
.btn,
.nav__link,
.lang__opt,
.blog-cats__btn,
.pagination a,
.pagination span { overflow-wrap: break-word; }
.btn { max-width: 100%; }
.time-cell__label,
.stat__label,
.milestone__body span { overflow-wrap: anywhere; hyphens: auto; }
.next-anniv__label,
.next-anniv__value { min-width: 0; overflow-wrap: anywhere; }
.counter__intro h2,
.section-title,
.hero__title { overflow-wrap: break-word; }

@media print {
  .lang, .lang-sprite, .i18n-src { display: none !important; }
}