/* ------------------------------------------------------------------
   Pembetulan paparan responsif e-Tauliah
   Dimuatkan selepas style.css dan custom.css supaya menimpa tema.
   ------------------------------------------------------------------

   Masalah: #header-wrap ialah position:fixed dengan height:auto, manakala
   ruang untuk header ditempah oleh .header-wrap-clone yang tingginya tetap
   (var(--cnvs-header-height)). Apabila menu utama melimpah ke baris kedua,
   header menjadi lebih tinggi daripada ruang yang ditempah lalu menutup
   tajuk halaman di bawahnya.

   Penyelesaian di sini: kecilkan jarak menu supaya ia kekal satu baris.
   js/responsif.js pula menyelaraskan tinggi ruang tempahan jika ia tetap
   melimpah (contohnya apabila pengguna membesarkan zum pelayar).
*/

/* Menu utama mempunyai label panjang: CARIAN PENCERAMAH, PENTADBIR SISTEM.
   Guna pembolehubah tema supaya jarak dan saiz teks mengecil dengan kemas. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    #header {
        --cnvs-primary-menu-padding-x: 8px;
        --cnvs-primary-menu-font-size: .82rem;
    }

    #header .menu-container > .menu-item > .menu-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .82rem;
    }

    #header #logo img {
        max-height: 62px;
        width: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1319.98px) {
    #header {
        --cnvs-primary-menu-padding-x: 5px;
        --cnvs-primary-menu-font-size: .74rem;
    }

    #header .menu-container > .menu-item > .menu-link {
        padding-left: 5px;
        padding-right: 5px;
        font-size: .74rem;
    }
}

/* Jalur tajuk halaman: padding dan saiz tajuk mengikut lebar skrin supaya
   tajuk tidak terpotong pada skrin sederhana atau ketika zum dibesarkan. */
#page-title,
.page-title {
    --cnvs-page-title-padding: clamp(1.5rem, 3.2vw, 4rem);
}

.page-title-row {
    min-height: 0;
}

.page-title-content h1,
.page-title-content .h1 {
    font-size: clamp(1.2rem, .9rem + 1.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Kandungan utama: kurangkan padding tepi pada skrin kecil. */
@media (max-width: 767.98px) {
    #content .container-fluid.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Tajuk halaman sejajar dengan kandungan di bawahnya. Setiap halaman
   membalut tajuknya dalam container-fluid > row > col, jadi gutter
   bersarang itu ditanggalkan supaya tajuk rapat ke kiri. */
.page-title-row .container-fluid,
.page-title-row .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.page-title-row .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Padding tepi sama seperti kandungan pada skrin kecil. */
@media (max-width: 767.98px) {
    .page-title > .container-fluid.px-5,
    #page-title > .container-fluid.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Jalur tajuk: tajuk di kiri, jejak halaman di kanan. */
.jalur-tajuk {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .35rem 1.5rem;
}

.jalur-tajuk-utama {
    flex: 1 1 20rem;
    min-width: 0;
}

.jejak-halaman {
    flex: 0 1 auto;
    padding-bottom: .4rem;
}

.jejak-senarai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 1.4;
}

.jejak-aras {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .6);
}

.jejak-aras + .jejak-aras::before {
    content: "\203A";
    margin: 0 .45rem;
    color: rgba(255, 255, 255, .35);
    font-size: .95rem;
    line-height: 1;
}

.jejak-aras a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .15s ease;
}

.jejak-aras a:hover,
.jejak-aras a:focus {
    color: #fff;
    text-decoration: underline;
}

.jejak-semasa {
    color: #fff;
    font-weight: 600;
}

/* Skrin kecil: jejak turun ke bawah tajuk dan rapat ke kiri. */
@media (max-width: 767.98px) {
    .jalur-tajuk {
        align-items: flex-start;
    }

    .jejak-halaman {
        padding-bottom: 0;
    }

    .jejak-senarai {
        font-size: .74rem;
    }
}