/* ==========================================================
   The Indian Pharma — Sitewide Typography Scale
   Add this file as /assets/css/typography.css and link it
   in inc/header.php AFTER your existing theme CSS, so these
   rules take effect as sensible defaults/overrides.
   ========================================================== */

/* Base body text */
body {
  font-size: 13px;
  line-height: 1.65;
  color: #333;
}

p {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
}

/* Heading scale — fluid via clamp(min, preferred, max) so it
   scales smoothly between mobile and desktop without hard jumps.
   (Reduced 2px at both ends of every heading vs. the initial scale.) */

/* !important is required here: the theme applies font sizes via its
   own utility classes hardcoded onto headings in the markup itself
   (e.g. <h1 class="cs_hero_title cs_fs_72 cs_white_color">). A class
   selector always beats a plain tag selector on specificity, no matter
   which stylesheet loads later — so without !important these rules
   are silently overridden by cs_fs_72, cs_fs_48, cs_fs_28, etc.
   wherever the theme has added one of those classes to a heading. */

h1, .h1 {
  font-size: clamp(26px, 4vw, 42px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  color: #0f1b3d;
  margin-bottom: 0.5em;
}

h2, .h2 {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.25 !important;
  font-weight: 800;
  color: #0f1b3d;
  margin-bottom: 0.5em;
}

h3, .h3 {
  font-size: clamp(16px, 2.2vw, 22px) !important;
  line-height: 1.3 !important;
  font-weight: 700;
  color: #0f1b3d;
  margin-bottom: 0.4em;
}

h4, .h4 {
  font-size: clamp(14px, 1.8vw, 18px) !important;
  line-height: 1.35 !important;
  font-weight: 700;
  color: #0f1b3d;
  margin-bottom: 0.4em;
}

h5, .h5 {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #2563eb; /* accent — matches "eyebrow" labels like "Our Capabilities" */
  margin-bottom: 0.3em;
}

h6, .h6 {
  font-size: 10px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.3em;
}

/* Small print / captions / meta text (dates, tags) */
small, .cs_small_text {
  font-size: 11px;
  color: #777;
}

/* ----------------------------------------------------------
   Rich-text content areas (TinyMCE output from
   product/page/post descriptions) — inherits the same scale
   so editor-authored content stays visually consistent with
   the rest of the site.
   ---------------------------------------------------------- */
.cs_rich_content h1 { font-size: clamp(24px, 3.5vw, 34px); }
.cs_rich_content h2 { font-size: clamp(20px, 2.8vw, 26px); }
.cs_rich_content h3 { font-size: clamp(16px, 2.2vw, 20px); }
.cs_rich_content h4 { font-size: 15px; }
.cs_rich_content p  { font-size: 13px; line-height: 1.7; margin-bottom: 1em; }
.cs_rich_content ul, .cs_rich_content ol { font-size: 13px; line-height: 1.7; margin-bottom: 1em; padding-left: 20px; }