/* ==========================================================================
 Arabic and Hindi
 Loaded only on /ar/ and /hi/ pages (templates/parts.mjs), so the English pages are exactly as before.
 Fonts are served from this site, as the security policy allows no outside fonts. Each covers only its own
 script (unicode-range), so Latin letters, digits, the business name and phone numbers keep the site's own fonts.
 Licences: all four fonts are under the SIL Open Font License.
 ========================================================================== */

@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/noto-sans-arabic.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
    U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/amiri-arabic.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
    U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/noto-sans-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Tiro Devanagari Hindi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/tiro-devanagari-hindi.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* The same pairing as English: a clean sans for reading, a classic face for headings */
:root[lang='ar'] body {
  font-family: 'Manrope', 'Noto Sans Arabic', system-ui, sans-serif;
  line-height: 1.8;
}
:root[lang='ar'] .display {
  font-family: 'Instrument Serif', 'Amiri', Georgia, serif;
}
:root[lang='hi'] body {
  font-family: 'Manrope', 'Noto Sans Devanagari', system-ui, sans-serif;
  line-height: 1.8;
}
:root[lang='hi'] .display {
  font-family: 'Instrument Serif', 'Tiro Devanagari Hindi', Georgia, serif;
}

/* Arabic letters join and Hindi letters hang from one headline, so any letter spacing breaks the words apart.
   The English design tightens and widens spacing in many places; both scripts keep their natural spacing */
:root:is([lang='ar'], [lang='hi']) * {
  letter-spacing: 0 !important;
}
/* Both scripts are taller than Latin (Arabic marks, Hindi vowel signs above and below), so the tight English
   heading lines would make them touch */
:root:is([lang='ar'], [lang='hi']) .display {
  line-height: 1.32;
}
:root:is([lang='ar'], [lang='hi']) .works-head h2 {
  line-height: 1.2;
}
/* Amiri's final letters sweep well below the line, so Arabic headings need more room underneath */
:root[lang='ar'] .display {
  line-height: 1.45;
}
:root[lang='ar'] .works-head h2 {
  line-height: 1.6;
}
/* Neither script has an italic: the accent stays upright, in its colour */
:root:is([lang='ar'], [lang='hi']) :is(.display, .footer-title) em {
  font-style: normal;
}
/* The big "Made by us" heading: these scripts set wider than the narrow English serif, so a little smaller */
:root:is([lang='ar'], [lang='hi']) .works-head h2 {
  font-size: clamp(52px, 10vw, 120px);
}
/* Small labels: neither script has capitals, so they need a little more size to read as a label */
:root:is([lang='ar'], [lang='hi']) :is(.kicker, .before-after-kicker, .group-title) {
  font-size: 14px;
}

/* ==========================================================================
 Right to left (Arabic)
 Most of the layout uses logical properties, grid and flex, which turn round by themselves with dir="rtl".
 These rules turn round the few things set with left and right.
 ========================================================================== */

/* The car animation keeps its geometry, which is planned around where the car sits in each shot. Only the
   text inside the cards reads right to left, and the progress line fills from the right */
[dir='rtl'] .caption-step b {
  margin-right: 0;
  margin-left: 6px;
}
[dir='rtl'] .step-rail li.is-on::after {
  margin-left: 0;
  margin-right: 10px;
}
[dir='rtl'] .hero-progress i {
  transform-origin: 100% 50%;
}
@media (max-width: 899px), (max-width: 1100px) and (orientation: portrait) {
  [dir='rtl'] .step-rail li {
    text-align: right;
  }
  [dir='rtl'] .step-rail li.is-on::after {
    margin-right: 7px;
  }
}

/* The works carousel and the before/after picture are laid out in pixels from the left by their scripts, and their
   arrows point at the photos they move to, so they stay left to right. Their words still read right to left */
[dir='rtl'] :is(.carousel-stage, .carousel-controls, .before-after-media) {
  direction: ltr;
}

/* The header: the logo plate scales from its own edge */
[dir='rtl'] .brand {
  transform-origin: right center;
}
[dir='rtl'] .on-dark .brand {
  margin-left: 0;
  margin-right: -12px;
}
[dir='rtl'] .skip {
  left: auto;
  right: 12px;
}

/* The red signature line starts at the right and fades to the left. Everything that uses it (labels, title lines,
   card lines) follows from these two values; the card lines also move to the right edge */
[dir='rtl'] {
  --accent-line: linear-gradient(270deg, var(--red) 0%, var(--red) 30%, rgba(200, 50, 43, 0) 100%);
  --accent-line-dark: linear-gradient(270deg, var(--red-light) 0%, var(--red-light) 30%, rgba(240, 122, 112, 0) 100%);
}
[dir='rtl'] .card-body {
  background-position: right 24px top 0;
}
[dir='rtl'] .photo-card figcaption {
  background-position: right 20px top 0;
}
@media (max-width: 559px) {
  [dir='rtl'] .photo-card figcaption {
    background-position: right 12px top 0;
  }
}
[dir='rtl'] .group-title::after {
  transform: scaleX(-1);
}
[dir='rtl'] .card-more::after {
  content: '←';
  content: '←' / '';
}
[dir='rtl'] .card:hover .card-more::after {
  transform: translateX(-4px);
}

/* Inner pages */
[dir='rtl'] .breadcrumb li + li::before {
  margin-right: 0;
  margin-left: 8px;
}
/* Bulleted lists only: the numbered steps are laid out with logical properties and turn round by themselves */
[dir='rtl'] .page-article ul {
  padding-left: 0;
  padding-right: 22px;
}
[dir='rtl'] .faq summary {
  padding-right: 22px;
  padding-left: 64px;
}
[dir='rtl'] .faq summary::after {
  right: auto;
  left: 16px;
}
[dir='rtl'] .number-choice summary::after {
  margin-right: 0;
  margin-left: 6px;
}
[dir='rtl'] .before-after-more {
  margin-left: 0;
  margin-right: 16px;
}

/* Arrows point the way the text reads, and hover nudges move with them */
[dir='rtl'] :is(.footer-arrow, .link-arrow, .footer-directions span) {
  transform: scaleX(-1);
}
[dir='rtl'] .photo-card-link:hover span,
[dir='rtl'] .footer-directions:hover span {
  transform: scaleX(-1) translateX(4px);
}
[dir='rtl'] .footer-links a:hover {
  transform: translateX(-4px);
}
[dir='rtl'] .contact-row:hover {
  transform: translateX(-2px);
}
@media (min-width: 768px) {
  [dir='rtl'] .footer-policies {
    margin-right: 0;
    margin-left: auto;
  }
}

/* ==========================================================================
 Services and prices (css/service-chapters.css) and the tint packages (css/services.css)
 ========================================================================== */
:root:is([lang='ar'], [lang='hi']) :is(.chapter-label, .packages-kicker) {
  font-size: 14px;
}
/* Package names are set in the heading face, so they need the script's own heading font as well */
:root[lang='ar'] .package-name {
  font-family: 'Instrument Serif', 'Amiri', Georgia, serif;
  line-height: 1.4;
}
:root[lang='hi'] .package-name {
  font-family: 'Instrument Serif', 'Tiro Devanagari Hindi', Georgia, serif;
  line-height: 1.3;
}
[dir='rtl'] .packages-kicker::after {
  transform: scaleX(-1);
}
/* The red line at the top of each card sits on the right, and the heat bar fills from the right */
[dir='rtl'] .package {
  background-position:
    right 26px top 0,
    0 0,
    0 0;
}
[dir='rtl'] .package.is-featured {
  background-position:
    right 26px top 0,
    0 0,
    0 0,
    0 0,
    0 0;
}
[dir='rtl'] .quote-card {
  background-position:
    right 24px top 0,
    0 0;
}
[dir='rtl'] .package-meter {
  transform: scaleX(-1);
}
[dir='rtl'] .chapter-link:hover .link-arrow {
  transform: scaleX(-1) translateX(4px);
}