/* ============================================================
   arabic.css — ONA Clinic Arabic (ar/) typography overrides
   
   Brand guideline:
     AR Headline  → Risala VF Light  (closest available: Lama Sans Light)
     AR Paragraph → Lama Sans (Regular / Light)
   
   This file is loaded ONLY by ar/ pages, after custom.css,
   overriding the English Onest/Runalto/Satisfy font stack.
   ============================================================ */

/* ── @font-face declarations (path from ar/ → ../webfonts/) ── */
@font-face {
    font-family: 'Lama Sans';
    src: url('../webfonts/LamaSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lama Sans';
    src: url('../webfonts/LamaSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lama Sans';
    src: url('../webfonts/LamaSans-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lama Sans';
    src: url('../webfonts/LamaSans-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lama Sans';
    src: url('../webfonts/LamaSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Override CSS custom properties ──────────────────────────── */
:root {
    /*
     * AR Headline: Lama Sans Light (300) — closest to Risala VF Light
     * per brand guideline. Risala VF file not bundled; Lama Sans Light
     * is the approved in-house alternative.
     */
    --heading-font: 'Lama Sans', 'DIN Next LT Arabic', sans-serif;

    /*
     * AR Paragraph: Lama Sans Regular (400) + DIN Next LT Arabic fallback
     * per brand guideline (paragraphs font AR: Lama Sans).
     */
    --default-font: 'Lama Sans', 'DIN Next LT Arabic', sans-serif;
}

/* ── Global direction & font ─────────────────────────────────── */
html[lang="ar"],
html[lang="ar"] body {
    font-family: var(--default-font);
    direction: rtl;
    text-align: right;
}

/* ── Headings — Lama Sans Light (300) ───────────────────────── */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: var(--heading-font);
    font-weight: 300;
    /* Light — matches Risala VF Light intent */
    letter-spacing: 0;
    /* Arabic doesn't use Latin letter-spacing */
}

/* ── Body & paragraphs ───────────────────────────────────────── */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[lang="ar"] a {
    font-family: var(--default-font);
    font-weight: 400;
    letter-spacing: 0;
}

/* ── Suppress the Google Fonts Onest request ─────────────────── */
/* (The link tag is still in the HTML but this ensures Onest is
    never applied to any AR element even if it loads.) */

/* ── Section sub-titles (eyebrow text) ──────────────────────── */
html[lang="ar"] .section-sub-title,
html[lang="ar"] .quiz-eyebrow {
    font-family: var(--default-font);
    font-weight: 500;
    letter-spacing: 0.05em;
    /* slight spacing still works in Arabic eyebrow labels */
}

/* ── Navigation ──────────────────────────────────────────────── */
html[lang="ar"] .navbar-nav,
html[lang="ar"] .nav-link {
    font-family: var(--default-font);
    font-weight: 500;
}

/* RTL flip: slicknav mobile menu */
html[lang="ar"] .slicknav_menu {
    direction: rtl;
    text-align: right;
}

/* ── Buttons ─────────────────────────────────────────────────── */
html[lang="ar"] .btn-default {
    font-family: var(--default-font);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── Footer ──────────────────────────────────────────────────── */
html[lang="ar"] .footer-links-royal h2,
html[lang="ar"] .footer-header-royal h2 {
    font-family: var(--heading-font);
    font-weight: 300;
}

/* ── Quiz — already RTL via quiz.js [dir] attribute ─────────── */
html[lang="ar"] .quiz-main-title {
    font-family: var(--heading-font);
    font-weight: 300;
}

html[lang="ar"] .quiz-step h3 {
    font-family: var(--heading-font);
    font-weight: 400;
}

/* ── Animated text classes — disable Latin-specific transforms ─ */
html[lang="ar"] .text-anime-style-3 span,
html[lang="ar"] [data-splitting] {
    letter-spacing: 0 !important;
}

/* ── Animated text classes — fix connected Arabic typography ── */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .section-title,
html[lang="ar"] [class*="text-anime"] {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

html[lang="ar"] .split-line,
html[lang="ar"] [class*="text-anime"] div,
html[lang="ar"] [class*="text-anime"] span {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-feature-settings: "liga" 1, "calt" 1;
}

/* ── Core Feature Section RTL layout ── */
html[lang="ar"] .core-feature-item {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .core-feature-item-content {
    text-align: right;
}

html[lang="ar"] .core-feature-item .icon-box {
    margin-left: 15px;
    margin-right: 0;
}

/* ── About Us Section RTL Layout Fix ──────────────────────────── */
html[lang="ar"] .about-us-image-box-royal {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

html[lang="ar"] .about-us-image-box-2-royal .about-us-image-royal figure {
    margin-left: 0 !important;
    margin-right: -177px !important;
}

html[lang="ar"] .about-us-counter-box-royal {
    margin: 40px 20px 15px 6px !important;
}

html[lang="ar"] .about-us-content-royal {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

@media (max-width: 991px) {
    html[lang="ar"] .about-us-image-box-2-royal .about-us-image-royal figure {
        margin-right: -80px !important;
    }
}

@media (max-width: 575px) {
    html[lang="ar"] .about-us-image-box-2-royal .about-us-image-royal figure {
        margin-right: 0 !important;
    }
}

/* ── Topbar RTL Layout & Link Box Fixes ────────────────────────── */
html[lang="ar"] .topbar-contact-info {
    text-align: right;
}

html[lang="ar"] .topbar-link-box {
    justify-content: left;
}

html[lang="ar"] .topbar-social-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

html[lang="ar"] .topbar .lang-toggle-wrap {
    margin-right: 0;
    margin-left: 5px;
}