/**
 * typography.css - Bilingual Editorial & Storybook Typography
 * Local @font-face declarations + RTL Egyptian Arabic & LTR English rules
 */

/* Local Font Declarations: Cinzel (Latin Headings) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin.woff2') format('woff2');
}

/* Local Font Declarations: IBM Plex Sans Arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-300.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base Body Typography */
body {
  font-family: var(--font-arabic);
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  font-feature-settings: "kern" 1, "liga" 1;
}

/* English / Latin Titles & Display Elements */
.latin-heading,
.hero-title,
.chapter-header__title,
.site-header__title,
.letter-salutation {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Hero / Opening Title */
.hero-eyebrow {
  font-family: var(--font-latin);
  direction: ltr;
  font-size: var(--font-size-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-warm-gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.hero-title {
  font-size: var(--font-size-4xl);
  color: var(--color-soft-ivory);
  line-height: var(--line-height-tight);
  text-shadow: 0 4px 24px rgba(16, 20, 43, 0.85), 0 0 32px rgba(232, 189, 117, 0.18);
  margin-bottom: var(--space-sm);
}

.hero-subtitle-ar {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--color-muted-lavender);
  margin-bottom: var(--space-xl);
}

/* Chapter Header Typography */
.chapter-header__number {
  font-family: var(--font-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-warm-gold);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.chapter-header__number::before,
.chapter-header__number::after {
  content: "✦";
  font-size: 0.65rem;
  opacity: 0.7;
}

.chapter-header__title {
  font-size: var(--font-size-2xl);
  color: var(--color-soft-ivory);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
  line-height: 1.3;
  text-align: center;
}

/* Arabic Narrative Text (Strictly RTL) */
.story-text,
.chapter-body,
.narrative-paragraph {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-soft-ivory);
  letter-spacing: 0;
  word-spacing: 0.04em;
}

.narrative-paragraph {
  margin-bottom: var(--space-lg);
  max-width: 62ch;
  margin-inline: auto;
  color: var(--color-ivory-muted);
}

.narrative-paragraph:first-of-type {
  color: var(--color-soft-ivory);
  font-weight: 500;
}

.narrative-paragraph:last-child {
  margin-bottom: 0;
}

/* Chapter 13 Personal Letter Typography */
.chapter-section--climax .letter-salutation {
  font-family: var(--font-latin);
  font-size: var(--font-size-2xl);
  color: var(--color-warm-gold);
  direction: ltr;
  text-align: center;
  margin: var(--space-md) 0 var(--space-xl);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 0 24px rgba(232, 189, 117, 0.28);
}

.chapter-section--climax .narrative-paragraph {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-letter);
  color: var(--color-soft-ivory);
  margin-bottom: var(--space-xl);
  text-align: right;
  direction: rtl;
}

.chapter-section--climax .narrative-paragraph:first-of-type {
  font-size: var(--font-size-xl);
  color: var(--color-warm-gold);
  font-weight: 600;
}

.chapter-section--climax .narrative-paragraph:last-of-type {
  font-size: var(--font-size-xl);
  color: var(--color-warm-gold);
  font-weight: 500;
  text-align: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gold-border);
}

/* Directional & Alignment Helpers */
.text-center {
  text-align: center;
}

.text-rtl {
  direction: rtl;
  text-align: right;
}

.text-ltr {
  direction: ltr;
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}