/* Custom fluid typography for mobile phones (Bootstrap 4 friendly) */

/* Root variables for easy tweaks */
:root {
  --fs-base: 16px; /* Default body */

  /* Fluid body text: min 16px (small phones) → max 18px (larger phones) */
  --fs-body: clamp(1rem, calc(1rem + 0.5 * (100vw - 320px) / (768 - 320)), 1.125rem);

  /* Headings: conservative fluid scale */
  --fs-h1: clamp(2rem, calc(2rem + 1 * (100vw - 320px) / (768 - 320)), 3rem);
  --fs-h2: clamp(1.75rem, calc(1.75rem + 0.8 * (100vw - 320px) / (768 - 320)), 2.5rem);
  --fs-h3: clamp(1.5rem, calc(1.5rem + 0.6 * (100vw - 320px) / (768 - 320)), 2rem);
  --fs-h4: clamp(1.25rem, calc(1.25rem + 0.4 * (100vw - 320px) / (768 - 320)), 1.75rem);
  --fs-h5: clamp(1rem, calc(1rem + 0.3 * (100vw - 320px) / (768 - 320)), 1.375rem);
  --fs-h6: clamp(0.875rem, calc(0.875rem + 0.2 * (100vw - 320px) / (768 - 320)), 1.125rem);
}

/* Apply to Bootstrap classes */
body {
  font-size: var(--fs-body) !important; /* Override Bootstrap's fixed 1rem */
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

/* For smaller text like captions */
small, .small { font-size: clamp(0.8rem, calc(0.8rem + 0.1 * (100vw - 320px) / (768 - 320)), 0.95rem); }