/* ============================================================
   Multilingual typography and direction overrides
   ============================================================ */

/* Arabic: Cairo / Tajawal, never italic */
html[lang="ar"] body {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* English: Lato / Montserrat for body, Playfair Display for headings */
html[lang="en"] body {
    font-family: 'Lato', 'Montserrat', sans-serif !important;
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .t1-text-gradient {
    font-family: 'Playfair Display', serif;
}

/* Hebrew: Heebo */
html[lang="he"] body {
    font-family: 'Heebo', 'Cairo', sans-serif !important;
}

html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3,
html[lang="he"] h4,
html[lang="he"] h5,
html[lang="he"] h6,
html[lang="he"] .t1-text-gradient {
    font-family: 'Heebo', sans-serif;
}

html[lang="ar"] {
    /* Keep the decorative Latin face but let Arabic glyphs fall back to Cairo. */
    --font-en: 'Playfair Display', 'Cairo', 'Tajawal', sans-serif;
}

html[lang="he"] {
    --font-en: 'Heebo', sans-serif;
}

html[lang="en"] {
    --font-ar: 'Lato', sans-serif;
    --font-en: 'Playfair Display', serif;
}

/* No italics for Arabic/Hebrew text */
html[lang="ar"] .italic,
html[lang="ar"] em,
html[lang="he"] .italic,
html[lang="he"] em {
    font-style: normal !important;
}

/* ------------------------------------------------------------
   RTL -> LTR adjustments for the English version
   ------------------------------------------------------------ */
html[dir="ltr"] .t1-nav-link::after {
    right: auto;
    left: 0;
}

html[dir="ltr"] .t1-nav-link:hover::after {
    left: 0;
    right: auto;
}

/* In the Arabic design text-right is used for the "start" side. */
html[dir="ltr"] .text-right {
    text-align: left;
}

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

/* Directional icons */
html[dir="ltr"] .fa-arrow-left,
html[dir="ltr"] .fa-arrow-circle-left,
html[dir="ltr"] .fa-chevron-left,
html[dir="ltr"] .ph-arrow-left,
html[dir="ltr"] .ph-caret-left {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------
   Language switcher
   ------------------------------------------------------------ */
.samah-lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.samah-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--brand-200, #d8b9e8);
    border-radius: 9999px;
    background: transparent;
    color: var(--brand-500, #9C27B0);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.samah-lang-trigger:hover,
.samah-lang-switcher:focus-within .samah-lang-trigger {
    background: var(--brand-50, #FDF8FF);
    border-color: var(--brand-500, #9C27B0);
}

.samah-lang-trigger .samah-lang-chevron {
    font-size: 0.6rem;
    transition: transform 0.18s ease;
}

.samah-lang-switcher:hover .samah-lang-chevron,
.samah-lang-switcher:focus-within .samah-lang-chevron {
    transform: rotate(180deg);
}

.samah-lang-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 80;
    width: 9.5rem;
    padding: 0.35rem;
    border: 1px solid var(--brand-100, #f0e2f7);
    border-radius: 0.9rem;
    background: var(--surface-elevated, #ffffff);
    box-shadow: 0 18px 40px -18px rgba(74, 14, 112, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

html[dir="ltr"] .samah-lang-menu {
    right: auto;
    left: 0;
}

.samah-lang-switcher:hover .samah-lang-menu,
.samah-lang-switcher:focus-within .samah-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.samah-lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    color: var(--ink, #2B1D35);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.samah-lang-menu a:hover,
.samah-lang-menu a:focus {
    background: var(--brand-50, #FDF8FF);
    color: var(--brand-500, #9C27B0);
}

.samah-lang-menu a.is-current {
    color: var(--brand-500, #9C27B0);
    font-weight: 800;
}

.samah-lang-menu a .samah-lang-check {
    font-size: 0.7rem;
}

/* Language links in the mobile menu / footer */
.samah-lang-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.samah-lang-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--brand-100, #f0e2f7);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-muted, #6b5a75);
    text-decoration: none;
    transition: all 0.15s ease;
}

.samah-lang-links a:hover,
.samah-lang-links a.is-current {
    border-color: var(--brand-500, #9C27B0);
    color: var(--brand-500, #9C27B0);
    background: var(--brand-50, #FDF8FF);
}

/* Footer variant (dark background) */
footer .samah-lang-links a {
    color: #9ca3af;
    border-color: rgba(255, 255, 255, 0.15);
}

footer .samah-lang-links a:hover,
footer .samah-lang-links a.is-current {
    color: #ffffff;
    border-color: var(--brand-500, #9C27B0);
    background: rgba(255, 255, 255, 0.06);
}

/* Inline code snippets should keep their own font */
html[lang="en"] code,
html[lang="en"] pre,
html[lang="he"] code,
html[lang="he"] pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}