/**
 * Bilingual subpage chrome — shared styles for the lang-toggle pill + the
 * .lang-en / .lang-ar content blocks. Loaded by every public landing
 * subpage via <link rel="stylesheet" href="/landing/shared/lang-switcher.css">.
 *
 * Pairs with /landing/shared/lang-switcher.js.
 */

/* Lang toggle pill (inserted into each subpage's navbar) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 3px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  vertical-align: middle;
}
html[dir="rtl"] .lang-toggle { font-family: 'Tajawal', system-ui, sans-serif; }
.lang-toggle .lang-btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  color: #475569;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  transition: background 120ms, color 120ms;
}
.lang-toggle .lang-btn:hover { color: #0F766E; }
.lang-toggle .lang-btn[aria-pressed="true"],
.lang-toggle .lang-btn.active {
  background: #0F766E;
  color: #FFFFFF;
}

/* Content blocks — hidden state respects the [hidden] HTML attribute set by
 * the JS. We default both to visible so non-JS visitors see at least the EN
 * block (since lang-en comes first in markup). */
.lang-en[hidden], .lang-ar[hidden] { display: none; }

/* Sticky-navbar overlap fix — every subpage uses position:fixed navbar at ~80px
 * tall. The legal-page / about-page / contact-page / blog-page main containers
 * had only 48px top padding, so titles were hidden behind the navbar. This
 * gives every public-page <main> at least 96px clear space at the top.
 *
 * Per-page <style> blocks may override; this acts as a safety net. */
main.legal-page,
main.about-page,
main.contact-page,
main.blog-page,
main.policy-page {
  padding-top: 96px;
  scroll-padding-top: 96px;
}
@media (max-width: 768px) {
  main.legal-page,
  main.about-page,
  main.contact-page,
  main.blog-page,
  main.policy-page {
    padding-top: 88px;
  }
}

/* Smooth fade between EN ↔ AR — applied only to direct content blocks so we
 * don't fight any animation a page may already have. */
@media (prefers-reduced-motion: no-preference) {
  .lang-en, .lang-ar {
    animation: lang-fade 180ms ease-out;
  }
  @keyframes lang-fade {
    from { opacity: 0.4; }
    to   { opacity: 1; }
  }
}