/* ==========================================================================
   hi-style.css — Dedicated Typography & Layout for Hindi (Devanagari)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;600;700;900&display=swap');

/* 1. Global Font Family, Ligature Shaping & OpenType Conjuncts */
body, 
h1, h2, h3, h4, h5, h6, 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
p, li, td, th, 
.hindi, .SL3D, 
.breadcrumb, .breadcrumb-simple,
.hindi-script, .hindi-body-text, .devanagari-auto {
  font-family: 'Noto Serif Devanagari', 'Mangal', 'Kokila', Georgia, serif;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Protect the Shirorekha (Never allow letter-spacing to split Hindi ligatures) */
body, h1, h2, h3, h4, h5, h6, p, a, button, .btn,
.track-title, .lang-portal-title, .lang-portal-sub, .book-title {
  letter-spacing: normal !important;
}

/* 3. Base Body & Paragraph Readability */
body {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #2b2621;
}

p, .book-description, .hindi-body-text {
  line-height: 1.85 !important;
  margin-bottom: 14px;
}

/* 4. Heading Hierarchy (Scaled to match English optical size) */
h1, .h1 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

h2, .desktop-h2 {
  font-size: 2.15rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #2b2621 !important;
  padding-top: 0.5rem;
}

h3, .h3 {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

h4, .h4, .hindi-title-heading {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

/* 5. Mobile Heading Scaling */
@media screen and (max-width: 767px) {
  h1, .h1 { font-size: 1.95rem !important; }
  h2, .desktop-h2 { font-size: 1.65rem !important; margin-bottom: 8px !important; }
  h3, .h3 { font-size: 1.35rem !important; }
  h4, .h4 { font-size: 1.20rem !important; }
}

/* 6. Clean Emphasis (Devanagari has no native italics)
   FIX: Excluded FontAwesome icons [class*="fa"] so icons don't inherit bold font-weight & right padding */
i:not([class*="fa"]), 
em:not([class*="fa"]), 
.hindi i:not([class*="fa"]), 
.hindi em:not([class*="fa"]) {
  font-style: normal !important;
  font-weight: 700 !important;
  padding-right: 0.15rem;
  color: inherit;
}

/* 7. Breadcrumb Font Styling */
.breadcrumb-simple,
.breadcrumb {
  font-family: 'Noto Serif Devanagari', serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* 8. Spacing helpers retained from original site */
.hindi h2 {
  padding-top: 0.75rem;
}

/* ==========================================================================
   NEW: AUDIO & COMPONENT IMPROVEMENTS FOR HINDI (Devanagari Matra Shield)
   ========================================================================== */

/* 9. Prevent Vertical Clipping of Upper and Lower Matras 
   (e.g., मात्राएँ: े, ै, ी, ं, ु, ू, ृ, र् in single-line ellipsis text) */
.track-title,
#now-playing-track-name,
.lang-portal-sub,
.book-author-byline {
  line-height: 1.55 !important;
  padding-top: 2px;
  padding-bottom: 3px;
}

/* 10. Drawer Text & Background Information Box */
.order-drawer-box,
.order-drawer-box p {
  line-height: 1.8 !important;
  font-size: 0.95rem !important;
}

/* 11. Action Buttons in Devanagari */
.action-btn {
  font-family: 'Noto Serif Devanagari', sans-serif !important;
  font-size: 0.90rem !important;
  line-height: 1 !important;
}

/* 12. Punctuation & Danda (।) Spacing */
.hindi-body-text, 
p {
  hanging-punctuation: allow-end;
}

/* In hi-style.css under Section 4 */
h2, .desktop-h2 {
  font-family: 'Noto Serif Devanagari', Georgia, serif !important;
  font-size: 2.15rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #2b2621 !important;
  padding-top: 0.5rem;
}