/* ============================================================
   Mobile app typography polish  (skrin telefon: <= 767.98px)

   BUKAN satu saiz. Tujuannya kemaskan hierarki teks supaya nampak
   cantik & konsisten:
     - hadkan tajuk yang terlalu besar
     - naikkan teks yang terlalu kecil (elak < 10px)
     - tetapkan garis dasar badan yang selesa
   Laras nilai di :root untuk tune keseluruhan skala.
   Desktop tidak tersentuh.
   ============================================================ */
@media (max-width: 767.98px) {
    :root {
        --m-text:      13px;   /* teks badan / perenggan */
        --m-text-sm:   11px;   /* nota, meta, caption, badge */
        --m-title-sm:  14px;   /* tajuk kad, tajuk kecil (h4-h6) */
        --m-title:     16px;   /* tajuk seksyen (h2-h3) */
        --m-title-lg:  19px;   /* tajuk halaman / hero (h1) */
        --m-lh:        1.5;
    }

    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    body {
        font-size: var(--m-text);
        line-height: var(--m-lh);
    }

    /* ---- Tajuk: hadkan yang terlalu besar ---- */
    h1, .h1 { font-size: var(--m-title-lg) !important; line-height: 1.3 !important; }
    h2, .h2,
    h3, .h3 { font-size: var(--m-title) !important;    line-height: 1.35 !important; }
    h4, .h4,
    h5, .h5,
    h6, .h6 { font-size: var(--m-title-sm) !important; line-height: 1.4 !important; }

    .display-1, .display-2, .display-3,
    .display-4, .display-5, .display-6 {
        font-size: var(--m-title-lg) !important;
        line-height: 1.3 !important;
    }

    /* ---- Utiliti saiz Bootstrap: skala turun untuk telefon ---- */
    .fs-1 { font-size: 19px !important; }
    .fs-2 { font-size: 17px !important; }
    .fs-3 { font-size: 16px !important; }
    .fs-4 { font-size: 15px !important; }
    .fs-5 { font-size: 14px !important; }
    .fs-6 { font-size: 13px !important; }
    .lead { font-size: 14px !important; line-height: 1.5 !important; }

    /* ---- Teks kecil: naikkan supaya tak terlalu halus ---- */
    small, .small, .text-muted, .form-text, figcaption, .badge {
        font-size: var(--m-text-sm) !important;
    }

    /* ---- Komponen biasa: garis dasar selesa ---- */
    .card-title, .modal-title { font-size: var(--m-title-sm) !important; }
    p, li, dd, dt, label, .form-label,
    .btn, .nav-link, .dropdown-item, .alert, .card-text,
    input, select, textarea, .form-control, .form-select {
        font-size: var(--m-text) !important;
        line-height: var(--m-lh) !important;
    }

    /* ---- Ikon kekal ikut saiz sendiri ---- */
    i[class*="fa-"], .fa, .fas, .far, .fab, .fal, .fad, .bi,
    .material-icons, .material-symbols-outlined, svg {
        font-size: revert !important;
    }
}