/*
 * Header terapung.
 *
 * header-terapung.js menetapkan header utama sebagai position: fixed
 * (.ikpkt-header-apung) dan meletakkan ruang kosong setinggi header asal di
 * belakangnya, supaya kandungan tidak terlompat.
 *
 * Selepas pengguna menatal, .is-padat dikenakan: header dinaikkan (top
 * negatif, --ikpkt-sorok) sehingga bar tarikh/jam dan crawler keluar dari skrin, dan
 * hanya baris logo (jata + nama portal) dan menu kekal terapung dalam saiz
 * yang lebih rendah. Bahagian dikenal pasti oleh JS melalui
 * data-ikpkt-bahagian="logo" dan "menu".
 *
 * Tanpa JavaScript, header kekal seperti biasa (tidak terapung).
 */
.ikpkt-header-apung {
    --ikpkt-admin: 0px;

    position: fixed;
    top: var(--ikpkt-admin);
    right: 0;
    left: 0;
    z-index: 999;
    transition: top 0.25s ease, box-shadow 0.25s ease;
}

/* Bar pentadbir WordPress (pengguna log masuk sahaja). */
body.admin-bar .ikpkt-header-apung {
    --ikpkt-admin: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .ikpkt-header-apung {
        --ikpkt-admin: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .ikpkt-header-apung {
        --ikpkt-admin: 0px;
    }
}

.ikpkt-header-ruang {
    display: block;
    margin: 0 !important;
    padding: 0;
}

.ikpkt-header-apung.is-padat {
    /* top, bukan transform: transform menjadikan header bekas bagi elemen
       position: fixed di dalamnya, lalu memecahkan menu mobile skrin penuh. */
    top: calc(var(--ikpkt-admin) - var(--ikpkt-sorok, 0px));
    box-shadow: 0 8px 20px -10px rgba(17, 24, 39, 0.35);
}

/*
 * Bahagian di atas logo (tarikh/jam, crawler) disembunyikan selepas ia
 * keluar dari skrin, supaya kekunci Tab tidak memfokus pautan yang tidak
 * kelihatan. Bila kembali ke atas, ia dipaparkan serta-merta.
 */
.ikpkt-header-apung > :not([data-ikpkt-bahagian]) {
    transition: visibility 0s linear 0s;
}

.ikpkt-header-apung.is-padat > :not([data-ikpkt-bahagian]) {
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}

/* Peralihan lancar antara saiz penuh dan padat. */
.ikpkt-header-apung [data-ikpkt-bahagian],
.ikpkt-header-apung [data-ikpkt-bahagian="logo"] img,
.ikpkt-header-apung [data-ikpkt-bahagian="menu"] .wp-block-button__link {
    transition: padding 0.25s ease, min-height 0.25s ease, width 0.25s ease;
}

/* Semasa mengukur saiz padat, peralihan dimatikan supaya ukuran serta-merta. */
.ikpkt-header-apung.is-ukur,
.ikpkt-header-apung.is-ukur * {
    transition: none !important;
}

/* --- Saiz padat: logo dan menu --- */
.ikpkt-header-apung.is-padat [data-ikpkt-bahagian="logo"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ikpkt-header-apung.is-padat [data-ikpkt-bahagian="logo"] img {
    width: 290px !important;
    height: auto !important;
}

/* 52px: kekal lebih rendah daripada saiz biasa bar menu (64px, lihat
   header-logo.css). */
.ikpkt-header-apung.is-padat [data-ikpkt-bahagian="menu"] {
    min-height: 52px !important;
}

.ikpkt-header-apung.is-padat [data-ikpkt-bahagian="menu"] .wp-block-button__link {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

@media (max-width: 781px) {
    .ikpkt-header-apung.is-padat [data-ikpkt-bahagian="logo"] {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .ikpkt-header-apung.is-padat [data-ikpkt-bahagian="logo"] img {
        width: 200px !important;
    }

    .ikpkt-header-apung.is-padat [data-ikpkt-bahagian="menu"] {
        min-height: 50px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ikpkt-header-apung,
    .ikpkt-header-apung * {
        transition: none !important;
    }
}