/* =============================================================================
   Sedra5 Syriac Script Styles
   Font faces, RTL text rules, and Syriac-specific typography.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Font Faces
   Syriac fonts are served from the same S3/CloudFront origin.
   Themes can override --font-syriac to use a different face.
   --------------------------------------------------------------------------- */

/* The Meltho fonts from Beth Mardutho - the same 15 families (and bold /
   italic cuts) V4 offered, from web/fonts/. A face is only downloaded when
   something uses it, so declaring all of them costs nothing. The families
   are listed on About -> Fonts; web/resources/fonts.css is the copy other
   sites can use. */
@font-face {
  font-family: 'EastSyriacAdiabene';
  src: url('/assets/8eb05318fd82/fonts/syrcomadiabene.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EastSyriacCtesiphon';
  src: url('/assets/8eb05318fd82/fonts/syrcomctesiphon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloEdessa';
  src: url('/assets/8eb05318fd82/fonts/syrcomedessa.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloAntioch';
  src: url('/assets/8eb05318fd82/fonts/syrcomantioch.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoBatnan';
  src: url('/assets/8eb05318fd82/fonts/syrcombatnan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoBatnan';
  src: url('/assets/8eb05318fd82/fonts/syrcombatnanbold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoJerusalem';
  src: url('/assets/8eb05318fd82/fonts/syrcomjerusalem.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoJerusalem';
  src: url('/assets/8eb05318fd82/fonts/syrcomjerusalembold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoJerusalem';
  src: url('/assets/8eb05318fd82/fonts/syrcomjerusalemitalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SertoKharput';
  src: url('/assets/8eb05318fd82/fonts/syrcomkharput.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoMalankara';
  src: url('/assets/8eb05318fd82/fonts/syrcommalankara.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoMardin';
  src: url('/assets/8eb05318fd82/fonts/syrcommardin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoMardin';
  src: url('/assets/8eb05318fd82/fonts/syrcommardinbold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloMidyat';
  src: url('/assets/8eb05318fd82/fonts/syrcommidyat.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloNisibin';
  src: url('/assets/8eb05318fd82/fonts/syrcomnisibin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloQuenneshrin';
  src: url('/assets/8eb05318fd82/fonts/syrcomqenneshrin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloTalada';
  src: url('/assets/8eb05318fd82/fonts/syrcomtalada.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstrangeloTurAbdin';
  src: url('/assets/8eb05318fd82/fonts/syrcomturabdin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoUrhoy';
  src: url('/assets/8eb05318fd82/fonts/syrcomurhoy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SertoUrhoy';
  src: url('/assets/8eb05318fd82/fonts/syrcomurhoybold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Syriac text utility classes
   --------------------------------------------------------------------------- */

/* Base Syriac text — applies to any element with lang="syr" or class="syriac" */
[lang="syr"],
.syriac,
.syc {
  font-family: var(--font-syriac);
  direction: rtl;
  unicode-bidi: embed;
  line-height: var(--line-height-syriac, 1.8);
}

/* Size variants */
.syriac-xs   { font-size: var(--font-size-syriac-xs);   }
.syriac-sm   { font-size: var(--font-size-syriac-sm);   }
.syriac-base { font-size: var(--font-size-syriac-base); }
.syriac-lg   { font-size: var(--font-size-syriac-lg);   }
.syriac-xl   { font-size: var(--font-size-syriac-xl);   }
.syriac-2xl  { font-size: var(--font-size-syriac-2xl);  }
.syriac-3xl  { font-size: var(--font-size-syriac-3xl);  }
.syriac-4xl  { font-size: var(--font-size-syriac-4xl);  }

/* Mixed RTL/LTR — used when Syriac appears inline within Latin text */
.syriac-inline {
  font-family: var(--font-syriac);
  direction: rtl;
  unicode-bidi: isolate;
  display: inline-block;
  line-height: var(--line-height-syriac, 1.8);
}

/* Vocalized Syriac — slightly more line height to accommodate diacritics */
.syriac-vocalized {
  font-family: var(--font-syriac);
  direction: rtl;
  line-height: var(--line-height-syriac-vocalized, 2.2);
}

/* Transliteration — italic Latin */
.translit {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Input fields for Syriac text entry
   --------------------------------------------------------------------------- */

input.syriac-input,
textarea.syriac-input {
  font-family: var(--font-syriac);
  font-size: var(--font-size-syriac-lg);
  direction: rtl;
  text-align: right;
  line-height: var(--line-height-syriac, 1.8);
}

/* ---------------------------------------------------------------------------
   Syriac keyboard toggle button (shown near Syriac input fields)
   --------------------------------------------------------------------------- */

.keyboard-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Print styles for Syriac text
   --------------------------------------------------------------------------- */

@media print {
  [lang="syr"], .syriac, .syc {
    font-family: var(--font-syriac), serif;
  }
}