/*
   Persian site (/fa): hand-written fixes on top of the right-to-left copies of the stylesheets in rtl/.
   Loaded on the Persian pages only, after every other stylesheet.
*/

/* ---------- Font: IRANSans for everything ---------- */
:root,
.v-light,
.v-dark,
.v-dark-head {
    --body-font: "IRANSans", sans-serif;
    --heading-font: "IRANSans", sans-serif;
    --font-pre: "IRANSans", sans-serif;
}

body,
.arch__left .arch__info h2.header,
.Poem,
.mt-title,
.mt-marquee span,
body.maintenance {
    font-family: "IRANSans", sans-serif;
}

/* Persian letters are joined: spacing between letters tears the words apart. */
body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab) {
    letter-spacing: 0 !important;
}

/* ---------- Arrows point the other way ---------- */
/* ↗ becomes ↖ (the hover turn of the buttons is mirrored by the RTL stylesheet) */
.dsn-btn-shape .icon svg,
.header-page .contact-links a .icon svg {
    transform: scaleX(-1);
}

/* the "scroll down" arrow: ↖ turned a quarter the other way points down-left */
.dsn-btn-shape.rotate-icon .icon svg {
    rotate: -90deg;
}

/* the curved arrow of the home page's about block points from the title to the text */
.about-personal .svg-arrow > g {
    transform: scaleX(-1);
    transform-origin: 84px 84px;
}

/* ---------- Line height ---------- */
/* The English headings use a condensed font with lines packed tightly (0.9 - 1.1). Persian letters reach
   higher and lower, so the lines need more room or they run into each other. */
h1,
h2,
h3,
h4,
.title,
.title-lg,
.big-text,
.about-hero__title,
.about-display,
.about-purpose__heading,
.archive-hero__title,
.archive-display,
.PoemWrapper .Poem .title {
    line-height: 1.35;
}

p,
.sm-title-block,
.sub-heading {
    line-height: 1.9;
}

/* the ↗ arrows written as text */
.about-department__arrow,
.most-read-item__arrow,
.article-card__link span,
.featured-article .icon svg {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---------- Product specifications: no capital first letter (it would cut a joined Persian letter off) ---------- */
.product-details .dsn-style-list .spec-text::first-letter {
    text-transform: none;
}

/* ---------- Colour fill of the titles runs from right to left, inside each word too ---------- */
.dsn-fill span.word {
    background-position: right top;
}

/* ---------- Slider: the big "previous / next" word sits higher (Persian letters reach lower) ---------- */
.main-slider .dsn-nex-prev .prev.dsn-active h5,
.main-slider .dsn-nex-prev .next.dsn-active h5 {
    bottom: 16px;
    font-size: 100px;
}

.main-slider .dsn-nex-prev .prev:not(.dsn-active) h5,
.main-slider .dsn-nex-prev .next:not(.dsn-active) h5 {
    bottom: calc(50% + 10px);
}

/* ---------- Moving text (marquee): the plugin only works left to right; the Persian text moves to the right ---------- */
.dsn-marquee {
    direction: ltr;
}

.dsn-marquee .dsn-text-marquee {
    unicode-bidi: plaintext;
}

/* ---------- Heading sizes ----------
   Persian letters are wider and taller than the condensed English heading font, so the same size looks much
   bigger and long Persian titles break into many lines. Persian headings are about two thirds of the English size. */

/* About page */
html[dir="rtl"] .about-hero__title { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.4; }
html[dir="rtl"] .about-display { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.4; }
html[dir="rtl"] .about-purpose__heading { font-size: clamp(34px, 5vw, 76px); line-height: 1.4; }
html[dir="rtl"] .about-purpose__item h3 { font-size: clamp(22px, 2.4vw, 36px); line-height: 1.4; }
html[dir="rtl"] .about-department h3 { font-size: clamp(21px, 2.4vw, 34px); line-height: 1.4; }
html[dir="rtl"] .about-film__copy h2 { font-size: clamp(26px, 3.6vw, 52px); line-height: 1.4; }

/* Articles archive */
html[dir="rtl"] .archive-hero__title { font-size: clamp(44px, 6.4vw, 100px); line-height: 1.4; }
html[dir="rtl"] .archive-display { font-size: clamp(32px, 4.2vw, 66px); line-height: 1.4; }
html[dir="rtl"] .featured-article__content h2 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.4; }
html[dir="rtl"] .article-card h3 { font-size: clamp(19px, 1.55vw, 25px); line-height: 1.4; }
html[dir="rtl"] .most-read-item h3 { font-size: clamp(21px, 2.2vw, 32px); line-height: 1.4; }

/* Article page */
html[dir="rtl"] .article-hero h1 { font-size: clamp(32px, 4.2vw, 62px); line-height: 1.4; }
html[dir="rtl"] .article-body h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.4; }
html[dir="rtl"] .article-body h3 { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.4; }
html[dir="rtl"] .article-body blockquote { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.4; }
html[dir="rtl"] .article-nav-link strong { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; }
html[dir="rtl"] .related-articles .article-card h3 { font-size: clamp(19px, 1.55vw, 25px); line-height: 1.4; }