/* PragmaWorks bilingual styles
 * Companion to i18n.js. Hides the inactive language via html[lang]
 * attribute selectors. Each translatable element is wrapped:
 *   <span lang="en">English</span><span lang="es">Español</span>
 * Only the active-language span renders; the other is display:none.
 */

html[lang="en"] [lang="es"] { display: none; }
html[lang="es"] [lang="en"] { display: none; }

/* Language toggle — fixed upper right, always above sidebar (z-index 250) */
.lang-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  display: flex;
  gap: 4px;
  z-index: 250;
}
.lang-toggle button {
  background: rgba(245,240,232,0.92);
  border: 1px solid #d4cfc4;
  color: #48484A;
  padding: 5px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  transition: all 0.15s;
  line-height: 1;
}
.lang-toggle button:hover {
  border-color: #C44B1A;
  color: #C44B1A;
  background: rgba(245,240,232,1);
}
.lang-toggle button.active {
  background: #C44B1A;
  border-color: #C44B1A;
  color: #F5F0E8;
}

@media (max-width: 600px) {
  .lang-toggle { top: 10px; right: 10px; }
  .lang-toggle button { padding: 4px 7px; font-size: 11px; }
}

/* Hide the toggle when printing — language is locked by the time
 * the user prints (or saves as PDF), no reason to show the chooser */
@media print {
  .lang-toggle { display: none; }
}