/* =========================================================
 * MUSK - TYPOGRAPHY DÙNG CHUNG CHO MỌI ELEMENT
 *
 * Một chỗ duy nhất quyết định cỡ chữ của toàn bộ element.
 * CSS riêng của từng element KHÔNG đặt font-size cho các vai
 * trò dưới đây nữa — đã gỡ hết.
 *
 * Chỉ hai mốc: desktop và mobile ≤767px.
 *
 *   Tiêu đề element    35px  ->  25px
 *   Tiêu đề phụ        20px  ->  18px
 *   Mô tả / nội dung   16px  ->  14px
 *
 * THỨ TỰ KHỐI RẤT QUAN TRỌNG.
 * Chọn theo chuỗi con nên một class có thể khớp nhiều nhóm.
 * Ví dụ musk-x__content-title khớp cả "__content" lẫn
 * "__content-title". Nhóm hẹp hơn phải đứng SAU để thắng.
 *
 * Thứ tự: text -> tiêu đề phụ -> tiêu đề chính.
 * ========================================================= */

:root {
  --musk-fs-heading: 35px;
  --musk-fs-subheading: 20px;
  --musk-fs-text: 16px;

  --musk-lh-heading: 1.25;
  --musk-lh-text: 1.7;
}

/* =========================================================
 * 1. MÔ TẢ - NỘI DUNG - TEXT
 * ========================================================= */

[class*="musk-"][class*="__description"],
[class*="musk-"][class*="__content"],
[class*="musk-"][class*="__text"],
[class*="musk-"][class*="__intro"],
[class*="musk-"][class*="__introduction"],
[class*="musk-"][class*="__excerpt"],
[class*="musk-"][class*="__quote"],
[class*="musk-"][class*="__answer"],
[class*="musk-"][class*="__role"],
[class*="musk-"][class*="__position"],
[class*="musk-"][class*="__point-text"] {
  font-size: var(--musk-fs-text);
  line-height: var(--musk-lh-text);
}

/* Khối bọc layout, không phải khối chữ. */

[class*="musk-"][class*="__content-column"],
[class*="musk-"][class*="__text-container"],
[class*="musk-"][class*="__intro-content"],
[class*="musk-"][class*="__intro-main"],
[class*="musk-"][class*="__intro-bottom"] {
  line-height: inherit;
}

/* =========================================================
 * 2. TIÊU ĐỀ PHỤ - TÊN THẺ, TÊN NGƯỜI, TIÊU ĐỀ CARD
 * ========================================================= */

[class*="musk-"][class*="__card-title"],
[class*="musk-"][class*="__card-name"],
[class*="musk-"][class*="__featured-title"],
[class*="musk-"][class*="__secondary-title"],
[class*="musk-"][class*="__active-title"],
[class*="musk-"][class*="__feature-title"],
[class*="musk-"][class*="__block-title"],
[class*="musk-"][class*="__subheading"],
[class*="musk-"][class*="__subtitle"],
[class*="musk-"][class*="__name"],
[class*="musk-"][class*="__question"] {
  font-size: var(--musk-fs-subheading);
  line-height: 1.35;
}

/* =========================================================
 * 3. TIÊU ĐỀ CHÍNH CỦA ELEMENT
 * ========================================================= */

.musk-title__heading,
[class*="musk-"][class*="__title"],
[class*="musk-"][class*="__heading"],
[class*="musk-"][class*="__content-title"] {
  font-size: var(--musk-fs-heading);
  line-height: var(--musk-lh-heading);
}

/* .musk-title là khối bọc, không phải chữ. */

.musk-title {
  font-size: inherit;
}

/* =========================================================
 * ĐOẠN VĂN TRONG KHỐI CHỮ
 *
 * wpautop bọc nội dung trong <p>. Gộp khoảng cách đoạn về
 * một mối để mọi element giống nhau.
 * ========================================================= */

[class*="musk-"][class*="__description"] p,
[class*="musk-"][class*="__content"] p,
[class*="musk-"][class*="__text"] p,
[class*="musk-"][class*="__intro"] p,
[class*="musk-"][class*="__answer"] p {
  margin: 0;
}

[class*="musk-"][class*="__description"] p + p,
[class*="musk-"][class*="__content"] p + p,
[class*="musk-"][class*="__text"] p + p,
[class*="musk-"][class*="__intro"] p + p,
[class*="musk-"][class*="__answer"] p + p {
  margin-top: 16px;
}

/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 767px) {
  :root {
    --musk-fs-heading: 24px;
    --musk-fs-subheading: 16px;
    --musk-fs-text: 14px;

    --musk-lh-heading: 1.6;
    --musk-lh-text: 1.6;
  }

  [class*="musk-"][class*="__description"] p + p,
  [class*="musk-"][class*="__content"] p + p,
  [class*="musk-"][class*="__text"] p + p,
  [class*="musk-"][class*="__intro"] p + p,
  [class*="musk-"][class*="__answer"] p + p {
    margin-top: 12px;
  }
}