/**
 * DrCtg Mobile App Typography
 * Unified font scale for screens below Tailwind sm (640px).
 *
 * Scale:
 * - app-title    17px  page / doctor name
 * - app-section  16px  section headings
 * - app-subtitle 15px  card subtitles
 * - app-body     14px  body, buttons, lists
 * - app-caption  12px  meta, labels
 * - app-micro    10px  badges
 */

@media (max-width: 639px) {
  :root {
    --app-micro: 10px;
    --app-caption: 12px;
    --app-body: 14px;
    --app-subtitle: 15px;
    --app-section: 16px;
    --app-title: 17px;

    --p-size: 14px;
    --p-line-height: 22px;
    --mini-size: 12px;
    --title-size: 17px;
    --mini-title-size: 15px;
    --heading-one: 17px;
    --heading-two: 16px;
    --heading-three: 16px;
    --heading-four: 15px;
    --heading-five: 14px;
    --heading-six: 14px;
  }

  body {
    font-size: var(--app-body);
    line-height: 1.5;
  }

  /* Normalize common Tailwind text utilities */
  .text-xs {
    font-size: var(--app-caption) !important;
    line-height: 1.45 !important;
  }

  .text-sm,
  .text-base {
    font-size: var(--app-body) !important;
    line-height: 1.5 !important;
  }

  .text-lg {
    font-size: var(--app-subtitle) !important;
    line-height: 1.45 !important;
  }

  .text-xl,
  .\!text-lg,
  .\!text-xl {
    font-size: var(--app-section) !important;
    line-height: 1.4 !important;
  }

  .text-2xl,
  .text-3xl,
  .text-4xl,
  .text-5xl {
    font-size: var(--app-title) !important;
    line-height: 1.35 !important;
  }

  .text-app-micro,
  .text-\[10px\] {
    font-size: var(--app-micro) !important;
    line-height: 1.4 !important;
  }

  .text-app-caption {
    font-size: var(--app-caption) !important;
    line-height: 1.45 !important;
  }

  .text-app-body {
    font-size: var(--app-body) !important;
    line-height: 1.5 !important;
  }

  .text-app-subtitle,
  .text-\[15px\] {
    font-size: var(--app-subtitle) !important;
    line-height: 1.45 !important;
  }

  .text-app-section {
    font-size: var(--app-section) !important;
    line-height: 1.4 !important;
  }

  .text-app-title,
  .text-\[17px\] {
    font-size: var(--app-title) !important;
    line-height: 1.35 !important;
  }

  /* Semantic headings inside main content */
  main h1:not(.hero-title) {
    font-size: var(--app-title);
    line-height: 1.35;
  }

  main h2 {
    font-size: var(--app-section);
    line-height: 1.4;
  }

  main h3 {
    font-size: var(--app-subtitle);
    line-height: 1.45;
  }

  main h4,
  main h5,
  main h6 {
    font-size: var(--app-body);
    line-height: 1.5;
  }

  /* Prose content blocks */
  .single-content-area {
    font-size: var(--app-body);
    line-height: 1.5;
  }

  .single-content-area h2 {
    font-size: var(--app-section);
  }

  .single-content-area h3 {
    font-size: var(--app-subtitle);
  }

  .single-content-area h4,
  .single-content-area h5,
  .single-content-area h6 {
    font-size: var(--app-body);
  }

  /* Keep form fields readable on iOS (prevent zoom) */
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not(
      [type='button']
    ):not([type='hidden']),
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
  }

  /* Compact line heights — smaller fonts need tighter leading */
  .leading-relaxed {
    line-height: 1.45 !important;
  }

  .leading-normal {
    line-height: 1.4 !important;
  }

  /* Doctor single page — tighter section spacing */
  body.single-doctors section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  body.single-doctors .doctor-mobile-ratings {
    line-height: 1.3;
  }

  .single-content-area p {
    font-size: var(--p-size);
    margin-bottom: 15px;
    line-height: 25px;
  }
  .single-content-area h2 {
    margin-bottom: 5px;
  }

  body.single-doctors .doctor-mobile-ratings * {
    line-height: inherit;
  }
}