/* RO / EN (js/i18n.js). Loaded by every public page after site-navigation.css.

   1. English visitors: the page stays hidden until the first translation pass (a few ms, before first paint in
      practice), so the Romanian source never flashes. The failsafe reveals it after 1.5 s even if a script fails;
      Romanian visitors are never hidden. */
html.i18n-pending body {
  visibility: hidden;
  animation: i18n-failsafe 0s linear 1.5s forwards;
}
@keyframes i18n-failsafe { to { visibility: visible; } }

/* 2. The language switch: "RO / EN" in the same small editorial type as the header wordmark and the drawer brand
      (12px, bold, spaced capitals), fixed next to the menu trigger (css/site-navigation.css), vertically centred on
      its 56px row. Active = lime + underline (never colour alone); inactive = soft white; hover/focus = lime.
      No box: a soft shadow keeps it legible over photos. Over a lime / off-white surface it turns near-black
      (html.chrome-on-light, the same state as the menu trigger - see the end of this section). */
:root { --lang-switch-width: 76px; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
}
.lang-switch[hidden] { display: none; }

.lang-switch--fixed {
  --menu-inset: clamp(16px, 2vw, 28px);
  position: fixed;
  top: calc(var(--menu-inset) + env(safe-area-inset-top, 0px));
  right: calc(var(--menu-inset) + 56px + env(safe-area-inset-right, 0px));
  z-index: 110;
  height: 56px;
  /* A thin dark outline: invisible on the dark pages, it keeps the letters readable over bright photo areas. */
  text-shadow: 0 0 1px rgba(10, 10, 11, 0.95), 0 0 2px rgba(10, 10, 11, 0.7), 0 1px 10px rgba(0, 0, 0, 0.5);
}
.lang-switch--fixed .lang-switch__option.is-active::after { box-shadow: 0 0 1px rgba(10, 10, 11, 0.95), 0 0 2px rgba(10, 10, 11, 0.7); }

.lang-switch__option {
  position: relative;
  min-width: 32px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(245, 245, 240, 0.72);
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  cursor: pointer;
  transition: color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* letter-spacing adds space after the last letter: pull it back so the text is optically centred. */
.lang-switch__option { padding-right: calc(6px - 0.13em); }
.lang-switch__option.is-active { color: var(--color-accent); }
.lang-switch__option.is-active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: calc(6px + 0.13em);
  bottom: 11px;
  height: 1px;
  background: currentColor;
}
.lang-switch__option:hover,
.lang-switch__option:focus-visible { color: var(--color-accent); }
.lang-switch__option:focus-visible { outline: 1px solid var(--color-accent); outline-offset: -6px; }

.lang-switch__separator { color: rgba(245, 245, 240, 0.38); }

/* Over a lime / off-white surface (html.chrome-on-light, js/site-navigation.js): near-black letters, no shadow (it is
   what made them muddy on lime). Active = full black + the same underline; inactive = softer black; hover/focus =
   full black, focus outline in the text colour. */
.chrome-on-light .lang-switch--fixed { text-shadow: none; }
.chrome-on-light .lang-switch--fixed .lang-switch__option { color: rgba(10, 10, 11, 0.62); }
.chrome-on-light .lang-switch--fixed .lang-switch__option.is-active,
.chrome-on-light .lang-switch--fixed .lang-switch__option:hover,
.chrome-on-light .lang-switch--fixed .lang-switch__option:focus-visible { color: var(--color-bg); }
.chrome-on-light .lang-switch--fixed .lang-switch__option.is-active::after { box-shadow: none; }
.chrome-on-light .lang-switch--fixed .lang-switch__option:focus-visible { outline-color: currentColor; }
.chrome-on-light .lang-switch--fixed .lang-switch__separator { color: rgba(10, 10, 11, 0.45); }

/* Inside the open drawer (the reserved .home-menu__language-slot of css/site-navigation.css). */
.lang-switch--menu { margin-left: -6px; font-size: 13px; }

/* Under 360px the menu trigger moves its lines to the top edge (css/site-navigation.css); the switch follows them. */
@media (max-width: 360px) {
  .lang-switch--fixed { top: env(safe-area-inset-top, 0px); height: 32px; }
}

/* 3. English wrapping (Romanian keeps its approved wrapping): prose (paragraphs, list items) avoids a single word alone
      on its last line where the browser supports it, and headings wrap in balanced lines ("What are we / looking
      for?", not "What are we looking / for?"). The balance rule comes second so the table-of-contents items take it.
      :where() keeps both at the weight of one element selector, so every wrap rule a section sets itself (e.g. the
      balanced statement lines) still wins - these only fill the gaps. */
:where(html[lang="en"]) main :where(p, li) { text-wrap: pretty; }
:where(html[lang="en"]) main :where(h1, h2, h3, .volunteer-energy__line, .privacy-toc__list > li) { text-wrap: balance; }

/* Hyphenated forms on the legal pages ("cookie-urile") never break at the hyphen. */
.legal-nobreak { white-space: nowrap; }

/* 4. Same rule as the menu trigger: the drawer and the photo viewer are the foreground (the drawer's top layer covers
      the switch; js/i18n.js hides it while the lightbox is open). Reduced motion drops the colour transition. */
@media (prefers-reduced-motion: reduce) {
  .lang-switch__option { transition: none; }
}