/* Deraya bilingual layout — direction, type, language switcher */

html[dir="ltr"] {
  direction: ltr;
  text-align: start;
}

html[dir="rtl"] {
  direction: rtl;
  text-align: start;
}

html[dir="ltr"] body {
  font-family: "Readex Pro", Inter, system-ui, sans-serif;
}

html[dir="ltr"] .hero h1,
html[dir="ltr"] .page-hero h1,
html[dir="ltr"] .section-head h2 {
  font-family: Inter, "Readex Pro", system-ui, sans-serif;
  letter-spacing: -0.03em;
}

html[dir="ltr"] .nav,
html[dir="ltr"] .site-footer,
html[dir="ltr"] .hero-copy,
html[dir="ltr"] .section-head,
html[dir="ltr"] .page-hero,
html[dir="ltr"] .content-block,
html[dir="ltr"] .chapter-text,
html[dir="ltr"] .about-prose,
html[dir="ltr"] .contact-info,
html[dir="ltr"] .auth-card {
  text-align: left;
}

html[dir="rtl"] .nav,
html[dir="rtl"] .site-footer,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .section-head,
html[dir="rtl"] .page-hero,
html[dir="rtl"] .content-block,
html[dir="rtl"] .auth-card {
  text-align: right;
}

html[dir="ltr"] .sidebar {
  left: 0;
  right: auto;
}

html[dir="ltr"] .main-content {
  margin-left: var(--sidebar-width, 260px);
  margin-right: 0;
}

html[dir="ltr"] .app-shell.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed, 72px);
}

html[dir="ltr"] .header-search input {
  text-align: left;
}

html[dir="ltr"] .btn-nav,
html[dir="ltr"] .hero-actions .btn,
html[dir="ltr"] .cta-band .btn {
  letter-spacing: 0.01em;
}

html[dir="ltr"] .auth-back {
  flex-direction: row;
}

.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  flex-shrink: 0;
}

.lang-switch[data-variant="light"] {
  border-color: color-mix(in srgb, var(--black, currentColor) 28%, transparent);
  background: color-mix(in srgb, var(--black, currentColor) 5%, transparent);
}

.lang-switch[data-variant="dark"] {
  border-color: rgba(20, 18, 16, 0.18);
  background: rgba(20, 18, 16, 0.04);
}

.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lang-switch button:hover {
  opacity: 0.9;
}

.lang-switch button.is-active {
  opacity: 1;
  background: var(--black);
  color: var(--white);
}

html[dir="ltr"] .lang-switch button {
  font-family: Inter, system-ui, sans-serif;
}

.app-header .lang-switch {
  color: inherit;
}

.nav-links .lang-switch {
  margin-inline: 4px;
}

html[dir="ltr"] .rtl-flip {
  transform: scaleX(-1);
}

@media (max-width: 1024px) {
  html[dir="ltr"] body.home-page .hero-stage,
  html[dir="ltr"] body.home-page .hero h1,
  html[dir="ltr"] body.home-page .hero-title-line {
    min-width: 0;
    max-width: 100%;
  }

  html[dir="ltr"] body.home-page .hero h1 {
    font-size: clamp(1.32rem, 5.4vw, 1.8rem);
    line-height: 1.28;
    width: 100%;
  }

  html[dir="ltr"] body.home-page .hero-title-line {
    white-space: normal;
    overflow-wrap: break-word;
  }

  html[dir="ltr"] body.home-page .hero-title-line--spin {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    white-space: normal !important;
    width: 100%;
    max-width: 100%;
  }

  html[dir="ltr"] body.home-page .hero-spin {
    display: block !important;
    flex: none;
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal !important;
  }
}