/* Locally hosted language subsets: no render-blocking third-party font request. */
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/naat-hindi/fonts/hind-400-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/naat-hindi/fonts/noto-sans-arabic-400.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-FEFC;
}

/* Hind is deliberately compact at text sizes, while Urdu uses a clean Naskh sans. */
body {
  font-family: "Hind", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.urdu,
.brand-mark,
.hero h1 em,
.naat-card .urdu,
.language-glyph.urdu,
.lyrics.urdu {
  font-family: "Noto Sans Arabic", "Hind", "Geeza Pro", serif;
  font-weight: 400;
}

.hero h1 {
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.1;
}

.naat-card .urdu {
  font-size: 22px;
  line-height: 1.65;
}

.reader-head h1 {
  font-size: clamp(29px, 4vw, 48px);
  line-height: 1.18;
}

.reader-title-hindi {
  font-size: 18px;
}

.lyrics {
  font-size: var(--lyric-size, 24px);
  line-height: 1.9;
}

.lyrics.urdu {
  font-size: calc(var(--lyric-size, 24px) * 1.04);
  line-height: 2.05;
}

/* Semantic stanza grouping preserves reading order; refrains use weight as well as color (WCAG 1.4.1). */
.lyrics .lyric-stanza {
  margin: 0 0 28px;
}

.lyrics .lyric-stanza:last-child {
  margin-bottom: 0;
}

.lyric-line {
  display: block;
}

.lyric-stanza--refrain {
  color: var(--gold);
  font-weight: 600;
}

.lyric-stanza--emphasis {
  font-weight: 600;
}

/* Ghazal couplets remain distinct at every reading size; matla/maqta use more than color alone. */
.reader-title-urdu {
  color: var(--green);
  font-family: "Noto Sans Arabic", "Hind", "Geeza Pro", serif;
  font-size: 19px;
  line-height: 1.9;
  margin: 8px 0;
  text-align: right;
}

.lyrics .poetry-couplet {
  border-inline-start: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  margin-bottom: 24px;
  padding-inline-start: 16px;
}

/* The explicit break is a layout fallback for cached or unavailable CSS; one sher always reads as two lines. */
.poetry-couplet .lyric-line {
  display: inline;
}

.couplet-break {
  display: block;
  content: "";
}

.lyrics .poetry-couplet.lyric-stanza--matla,
.lyrics .poetry-couplet.lyric-stanza--maqta {
  border-inline-start-width: 4px;
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 800px) {
  .reader-head h1 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .lyrics {
    font-size: var(--lyric-size, 22px);
    line-height: 1.85;
  }

  .lyrics.urdu {
    font-size: calc(var(--lyric-size, 22px) * 1.06);
    line-height: 2;
  }

  .lyrics .lyric-stanza {
    margin-bottom: 22px;
  }

  .lyrics .poetry-couplet {
    margin-bottom: 20px;
    padding-inline-start: 12px;
  }

  .naat-card .urdu {
    font-size: 20px;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: 34px;
  }
}