/**
 * Persian typography and compact RTL scale.
 * Loaded only when the active language is Persian.
 */
html[lang="fa"] {
    --font-fa: 'Ravi', Tahoma, Arial, sans-serif;
}

html[lang="fa"] body {
    font-family: var(--font-fa);
    font-size: 0.93rem;
    line-height: 1.85;
    letter-spacing: 0;
}

html[lang="fa"] button,
html[lang="fa"] input,
html[lang="fa"] textarea,
html[lang="fa"] select {
    font-family: var(--font-fa);
}

html[lang="fa"] .logo,
html[lang="fa"] .logo-code,
html[lang="fa"] .preloader-status,
html[lang="fa"] .nav-links a,
html[lang="fa"] .mobile-header-lang-switcher,
html[lang="fa"] .hero-title,
html[lang="fa"] .hero-subtitle,
html[lang="fa"] .cta-button,
html[lang="fa"] .section-title,
html[lang="fa"] .section-title::after,
html[lang="fa"] .section-title span,
html[lang="fa"] .editor-title,
html[lang="fa"] .editor-body,
html[lang="fa"] .feature-title,
html[lang="fa"] .feature-description,
html[lang="fa"] .project-title,
html[lang="fa"] .project-description,
html[lang="fa"] .tech-tag,
html[lang="fa"] .project-links a,
html[lang="fa"] .tutorial-card-date,
html[lang="fa"] .read-more-button,
html[lang="fa"] .show-more-button,
html[lang="fa"] .tutorial-back-button,
html[lang="fa"] .tutorial-page-title,
html[lang="fa"] .tutorial-page-date,
html[lang="fa"] .tutorial-page-description,
html[lang="fa"] .like-button,
html[lang="fa"] .comments-title,
html[lang="fa"] .comment-author,
html[lang="fa"] .comment-text,
html[lang="fa"] .comment-field,
html[lang="fa"] .comment-input,
html[lang="fa"] .comment-submit-button,
html[lang="fa"] .side-nav .tooltip,
html[lang="fa"] .mobile-nav-contact,
html[lang="fa"] .contact-content,
html[lang="fa"] .contact-email,
html[lang="fa"] .footer-text,
html[lang="fa"] .site-page-shell,
html[lang="fa"] .site-page-shell h1,
html[lang="fa"] .site-page-shell h2,
html[lang="fa"] .site-page-shell h3 {
    font-family: var(--font-fa);
    letter-spacing: 0;
}

/* Compact Persian type scale */
html[lang="fa"] .logo {
    font-size: 1.3rem;
}

html[lang="fa"] .nav-links a {
    font-size: 0.9rem;
}

html[lang="fa"] .hero-title {
    font-size: clamp(1.55rem, 3.6vw, 2rem);
    line-height: 1.55;
    font-weight: 700;
}

html[lang="fa"] .hero-subtitle {
    max-width: 720px;
    margin-inline: auto;
    font-size: 0.96rem;
    line-height: 1.9;
}

html[lang="fa"] .cta-button,
html[lang="fa"] .show-more-button {
    font-size: 0.88rem;
}

html[lang="fa"] .section-title,
html[lang="fa"] .section-title::after {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.25;
    font-weight: 700;
}

html[lang="fa"] .editor-title,
html[lang="fa"] .tutorial-card-date,
html[lang="fa"] .tutorial-page-date,
html[lang="fa"] .tech-tag,
html[lang="fa"] .side-nav .tooltip {
    font-size: 0.76rem;
}

html[lang="fa"] .editor-body {
    font-size: 0.87rem;
    line-height: 1.95;
}

html[lang="fa"] .feature-title,
html[lang="fa"] .project-title {
    font-size: 1.04rem;
    line-height: 1.55;
}

html[lang="fa"] .feature-description,
html[lang="fa"] .project-description {
    font-size: 0.86rem;
    line-height: 1.85;
}

html[lang="fa"] .project-links a,
html[lang="fa"] .read-more-button,
html[lang="fa"] .tutorial-back-button,
html[lang="fa"] .like-button,
html[lang="fa"] .comment-submit-button {
    font-size: 0.82rem;
}

html[lang="fa"] .tutorial-page-title {
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    line-height: 1.5;
}

html[lang="fa"] .tutorial-page-description,
html[lang="fa"] .comment-text,
html[lang="fa"] .contact-content,
html[lang="fa"] .site-page-shell {
    font-size: 0.9rem;
    line-height: 1.9;
}

html[lang="fa"] .comments-title {
    font-size: 1.2rem;
}

html[lang="fa"] .comment-author {
    font-size: 0.84rem;
}

html[lang="fa"] .comment-field,
html[lang="fa"] .comment-input,
html[lang="fa"] .tutorials-search-input {
    font-size: 0.88rem;
}

html[lang="fa"] .contact-email {
    font-size: 1rem;
}

html[lang="fa"] .footer-text {
    font-size: 0.78rem;
}

html[lang="fa"] .site-page-shell h1 {
    font-size: clamp(1.55rem, 4vw, 2rem);
}

html[lang="fa"] .site-page-shell h2 {
    font-size: clamp(1.25rem, 3vw, 1.55rem);
}

html[lang="fa"] .site-page-shell h3 {
    font-size: 1.05rem;
}

/* Preserve code typography and direction in Persian. */
html[lang="fa"] .code-block,
html[lang="fa"] .code-block code,
html[lang="fa"] .copy-button {
    font-family: var(--font-mono);
}

@media (max-width: 768px) {
    html[lang="fa"] body {
        font-size: 0.9rem;
    }

    html[lang="fa"] .app-header {
        padding-inline: 1rem;
    }

    html[lang="fa"] .logo {
        font-size: 1.12rem;
    }

    html[lang="fa"] .nav-links a {
        font-size: 0.94rem;
    }

    html[lang="fa"] .hero-title {
        font-size: 1.38rem !important;
        line-height: 1.65 !important;
    }

    html[lang="fa"] .hero-subtitle {
        font-size: 0.88rem !important;
        line-height: 1.85 !important;
    }

    html[lang="fa"] .section-title,
    html[lang="fa"] .section-title::after {
        font-size: 1.7rem !important;
        margin-bottom: 1.75rem !important;
    }

    html[lang="fa"] .editor-body {
        font-size: 0.8rem !important;
    }

    html[lang="fa"] .feature-title,
    html[lang="fa"] .project-title {
        font-size: 0.98rem !important;
    }

    html[lang="fa"] .feature-description,
    html[lang="fa"] .project-description,
    html[lang="fa"] .tutorial-page-description {
        font-size: 0.82rem !important;
        line-height: 1.85 !important;
    }

    html[lang="fa"] .tutorial-page-title {
        font-size: 1.28rem !important;
    }

    html[lang="fa"] .contact-email {
        font-size: 0.92rem !important;
    }
}


@media (max-width: 768px) {
    html[lang="fa"] .mobile-header-lang-switcher {
        font-family: var(--font-fa);
        font-size: 0.7rem;
        letter-spacing: 0;
        direction: ltr;
    }
}

/* Keep the Latin code-style brand mark in Lekton in the Persian interface. */
html[lang="fa"] .logo,
html[lang="fa"] .logo-code {
    font-family: 'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: 0;
}

/* Persian project case study typography — v1.2.11 */
html[lang="fa"] .project-entry-header h1,
html[lang="fa"] .project-section-heading h2,
html[lang="fa"] .project-detail-card h3,
html[lang="fa"] .project-action-button,
html[lang="fa"] .project-kicker,
html[lang="fa"] .project-section-heading > span,
html[lang="fa"] .project-header-date > span,
html[lang="fa"] .project-screenshot figcaption,
html[lang="fa"] .project-technology-chip {
    font-family: var(--font-fa);
    letter-spacing: 0;
}

html[lang="fa"] .project-entry-header h1 {
    font-size: clamp(1.45rem, 3.6vw, 2.15rem);
    line-height: 1.55;
}

html[lang="fa"] .project-section-heading h2 {
    font-size: clamp(1.2rem, 2.7vw, 1.6rem);
}

html[lang="fa"] .project-detail-card h3 {
    font-size: 0.98rem;
}

html[lang="fa"] .project-detail-card p,
html[lang="fa"] .project-introduction {
    font-size: 0.86rem;
    line-height: 1.95;
}

html[lang="fa"] .project-detail-index {
    direction: ltr;
    text-align: right;
}

html[lang="fa"] .project-action-button {
    font-size: 0.78rem;
}

html[lang="fa"] .project-action-button svg {
    transform: scaleX(-1);
}

html[lang="fa"] .project-action-button:hover svg,
html[lang="fa"] .project-action-button:focus-visible svg {
    transform: scaleX(-1) translate(2px, -2px);
}

@media (max-width: 768px) {
    html[lang="fa"] .project-entry-header h1 {
        font-size: 1.28rem;
    }

    html[lang="fa"] .project-section-heading h2 {
        font-size: 1.08rem;
    }

    html[lang="fa"] .project-detail-card p,
    html[lang="fa"] .project-introduction {
        font-size: 0.82rem;
    }
}


/* Persian compact project titles — v1.2.12 */
html[lang="fa"] .project-entry-header h1 {
    font-size: clamp(1.2rem, 2.35vw, 1.72rem);
    line-height: 1.45;
    white-space: nowrap;
}

html[lang="fa"] .project-section-heading h2 {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}

html[lang="fa"] .project-detail-card h3 {
    font-size: 0.86rem;
}

html[lang="fa"] .project-technologies .project-section-heading h2 {
    font-size: clamp(0.96rem, 1.7vw, 1.15rem);
}

@media (max-width: 768px) {
    html[lang="fa"] .project-entry-header h1 {
        font-size: clamp(1.02rem, 4.6vw, 1.2rem);
    }

    html[lang="fa"] .project-section-heading h2 {
        font-size: 1rem;
    }

    html[lang="fa"] .project-detail-card h3 {
        font-size: 0.82rem;
    }
}

/* Bilingual service cards — v1.2.13 */
html[lang="fa"] .feature-item {
    align-items: flex-start;
    text-align: right;
}

html[lang="fa"] .feature-item::before {
    background: linear-gradient(270deg, var(--service-accent), transparent 82%);
}

html[lang="fa"] .feature-item::after {
    right: auto;
    left: -46px;
}

html[lang="fa"] .feature-title,
html[lang="fa"] .feature-description,
html[lang="fa"] .feature-meta {
    text-align: right;
}

html[lang="fa"] .feature-meta span {
    font-family: var(--font-fa);
    font-size: 0.74rem;
    line-height: 1.55;
}

@media (max-width: 768px) {
    html[lang="fa"] .feature-item {
        align-items: flex-start !important;
        text-align: right !important;
    }
}


/* Keep the code-style Latin wordmark in Lekton Bold on the Persian site. */
html[lang="fa"] .logo,
html[lang="fa"] .logo-code {
    font-family: 'Lekton Logo', 'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
    font-style: normal;
    font-weight: 700;
    font-synthesis: none;
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: 0;
}


/* Tutorial downloads RTL */
html[lang="fa"] .tutorial-downloads,
html[lang="fa"] .tutorial-downloads-heading,
html[lang="fa"] .tutorial-download-copy {
    text-align: right;
}

html[lang="fa"] .tutorial-download-item {
    direction: rtl;
}

html[lang="fa"] .tutorial-downloads-heading > span,
html[lang="fa"] .tutorial-download-copy small,
html[lang="fa"] .tutorial-download-action {
    font-family: var(--font-fa);
    letter-spacing: 0;
}

/* Readable Persian project titles on mobile — v1.2.21 */
@media (max-width: 768px) {
    html[lang="fa"] .project-title,
    html[lang="fa"] .project-title a,
    html[lang="fa"] .project-entry-header h1 {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    html[lang="fa"] .project-title {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    html[lang="fa"] .project-entry-header h1 {
        font-size: clamp(1.18rem, 5.4vw, 1.45rem);
        line-height: 1.7;
    }
}


/* Unified Persian typography — v1.2.23
 * Every user-facing Persian label, sentence, link, button and tag uses Ravi.
 * The Latin wordmark and real source-code blocks keep their dedicated faces. */
html[lang="fa"] body,
html[lang="fa"] body :where(
    h1, h2, h3, h4, h5, h6,
    p, a, span, button, label,
    input, textarea, select, option,
    ul, ol, li, dl, dt, dd,
    small, strong, b, em, i,
    blockquote, figcaption, time,
    summary, th, td
) {
    font-family: var(--font-fa) !important;
    letter-spacing: 0;
}

/* Explicit coverage for labels and tag-like UI that previously used Lekton. */
html[lang="fa"] .section-archive-link,
html[lang="fa"] .section-archive-link a,
html[lang="fa"] .feature-meta,
html[lang="fa"] .feature-meta span,
html[lang="fa"] .project-tech-tags,
html[lang="fa"] .tech-tag,
html[lang="fa"] .project-technology-chip,
html[lang="fa"] .project-kicker,
html[lang="fa"] .project-section-heading > span,
html[lang="fa"] .tutorial-card-date,
html[lang="fa"] .tutorial-page-date,
html[lang="fa"] .tutorial-downloads-heading > span,
html[lang="fa"] .tutorial-download-copy small,
html[lang="fa"] .tutorial-download-action,
html[lang="fa"] .breadcrumbs,
html[lang="fa"] .pagination,
html[lang="fa"] .nav-links a,
html[lang="fa"] .mobile-header-lang-switcher,
html[lang="fa"] .cta-button,
html[lang="fa"] .read-more-button,
html[lang="fa"] .show-more-button,
html[lang="fa"] .tutorial-back-button,
html[lang="fa"] .project-links a,
html[lang="fa"] .project-action-button,
html[lang="fa"] .copy-button,
html[lang="fa"] .like-button,
html[lang="fa"] .comment-submit-button {
    font-family: var(--font-fa) !important;
    letter-spacing: 0;
}

/* Keep the English code-style brand mark on its dedicated Lekton Bold face. */
html[lang="fa"] .logo,
html[lang="fa"] .logo *,
html[lang="fa"] .logo-code,
html[lang="fa"] .logo-code * {
    font-family: 'Lekton Logo', 'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Actual source code remains monospace; Persian UI around it stays Ravi. */
html[lang="fa"] .code-block,
html[lang="fa"] .code-block code,
html[lang="fa"] .code-block * {
    font-family: var(--font-mono) !important;
    letter-spacing: normal;
}


/* Persian project typography refinements — v1.2.25 */
html[lang="fa"] .project-card .project-description {
    font-size: 0.78rem !important;
    line-height: 1.9 !important;
    text-align: justify;
    text-justify: inter-word;
}

html[lang="fa"] .feature-description,
html[lang="fa"] .tutorial-card .project-description,
html[lang="fa"] .project-detail-card p,
html[lang="fa"] .project-introduction {
    text-align: justify;
    text-justify: inter-word;
}

html[lang="fa"] .project-detail-card p,
html[lang="fa"] .project-introduction {
    font-size: 0.79rem;
    line-height: 1.9;
}

html[lang="fa"] .tech-tag,
html[lang="fa"] .feature-meta span,
html[lang="fa"] .project-technology-chip {
    font-size: 0.64rem !important;
}

html[lang="fa"] .project-links a,
html[lang="fa"] .project-links .project-link--live {
    color: #f8faf9;
}

html[lang="fa"] .project-links a:hover,
html[lang="fa"] .project-links a:focus-visible {
    color: var(--accent-color-1);
}

@media (max-width: 768px) {
    html[lang="fa"] .project-card .project-description {
        font-size: 0.75rem !important;
        line-height: 1.85 !important;
    }

    html[lang="fa"] .project-detail-card p,
    html[lang="fa"] .project-introduction {
        font-size: 0.76rem;
        line-height: 1.85;
    }
}


/* v1.2.27 — More compact Persian project-card headings. */
html[lang="fa"] .project-card .project-title,
html[lang="fa"] .archive-card .project-title {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
}

@media (max-width: 768px) {
    html[lang="fa"] .project-card .project-title,
    html[lang="fa"] .archive-card .project-title {
        font-size: 0.86rem !important;
        line-height: 1.7 !important;
    }
}