/* Locale-specific direction and language switch. The Arabic originals keep RTL;
   the statically generated English edition uses the same components in LTR. */
.language-switch {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #c8d5e1;
  border-radius: 999px;
  background: #fff;
  color: #0a2440;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.language-switch:hover,
.language-switch:focus-visible { border-color: #2563eb; background: #edf4ff; transform: translateY(-1px); }
.language-switch b { display: block; letter-spacing: .06em; }

html[lang^="en"] { direction: ltr; }
html[lang^="en"] body { direction: ltr; text-align: left; }
html[lang^="en"] .site-head,
html[lang^="en"] .site-foot,
html[lang^="en"] main,
html[lang^="en"] input,
html[lang^="en"] textarea,
html[lang^="en"] select,
html[lang^="en"] button { direction: ltr; }
html[lang^="en"] .identity,
html[lang^="en"] .head-actions,
html[lang^="en"] .mega-nav-inner,
html[lang^="en"] .mega-panel-inner,
html[lang^="en"] .mobile-menu-panel,
html[lang^="en"] .mobile-menu-content,
html[lang^="en"] .footer-main { direction: ltr; text-align: left; }
html[lang^="en"] .mobile-menu-layer { justify-content: flex-end; }
html[lang^="en"] .mobile-menu-panel { animation-name: mobile-menu-in-en; }
html[lang^="en"] .mobile-menu-content a i,
html[lang^="en"] .mega-links a i { transform: rotate(180deg); }
html[lang^="en"] .tool-category-tabs button,
html[lang^="en"] .boundary-tool-layout > aside button,
html[lang^="en"] .focus-selector > div > button { text-align: left; }
html[lang^="en"] .tool-faq-long summary { padding-right: 0; padding-left: 46px; }
html[lang^="en"] .tool-faq-long summary::before { right: auto; left: 0; }
html[lang^="en"] .tool-faq-long details p { padding-right: 0; padding-left: 46px; }
@keyframes mobile-menu-in-en { from { transform: translateX(100%); } to { transform: none; } }

@media (max-width: 820px) {
  .language-switch { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .head-actions .language-switch { order: -1; }
}

@media (max-width: 650px) {
  .language-switch { font-size: 11px; }
  html[lang^="en"] .tool-faq-long summary { padding-left: 35px; }
  html[lang^="en"] .tool-faq-long details p { padding-left: 35px; }
}

/* English edition: keep editorial headings elegant without consuming most of the viewport. */
html[lang^="en"] :is(
  .hero-copy h1,
  .article-heading h1,
  .content-page h1,
  .category-hero h1,
  .guide-hero h1,
  .platform-hero h1,
  .hub-hero-copy h1,
  .tool-editorial-hero h1,
  .not-found-copy h1,
  .directory-page > header h1,
  .search-page > h1,
  .tool-page > h1
) {
  font-size: clamp(2.2rem, 3.35vw, 3.6rem) !important;
  line-height: 1.14 !important;
  max-width: 23ch;
  text-wrap: balance;
}

html[lang^="en"] :is(
  .section-head h2,
  .category-showcase h2,
  .platform-section-head h2,
  .hub-outcomes h2,
  .hub-situations h2,
  .hub-roadmap h2,
  .hub-toolkit h2,
  .hub-plan h2,
  .hub-reading h2,
  .hub-faq h2,
  .tool-how h2,
  .tool-workspace h2,
  .tool-uses h2,
  .tool-related h2,
  .tool-faq h2
) {
  font-size: clamp(1.75rem, 2.3vw, 2.55rem) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

@media (max-width: 650px) {
  html[lang^="en"] :is(
    .hero-copy h1,
    .article-heading h1,
    .content-page h1,
    .category-hero h1,
    .guide-hero h1,
    .platform-hero h1,
    .hub-hero-copy h1,
    .tool-editorial-hero h1,
    .not-found-copy h1,
    .directory-page > header h1,
    .search-page > h1,
    .tool-page > h1
  ) { font-size: clamp(2rem, 9.2vw, 2.7rem) !important; max-width: 20ch; }
}