/*
 * Penyesuaian header (layouts/header.blade.php).
 */

/* Foto user pada menu dropdown akun */
.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--default-color, #333), transparent 80%);
}

/* Logo mengikuti rasio aslinya, tingginya dibatasi agar header tetap ramping */
.header .logo img {
    width: auto;
    max-height: 44px;
    margin-right: 0;
}

/*--------------------------------------------------------------
# Tampilan mobile / tablet
--------------------------------------------------------------*/
@media (max-width: 1199px) {

    /* Seluruh baris menu (nama + ikon panah) menjadi area sentuh sub menu */
    .navmenu .dropdown>a {
        cursor: pointer;
        gap: 12px;
    }

    /* Nama menu tidak boleh mendorong ikon panah keluar layar */
    .navmenu a>span {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navmenu a>span,
    .navmenu .dropdown>a {
        flex: 1 1 auto;
    }

    .navmenu a i,
    .navmenu a:focus i {
        flex: 0 0 auto;
    }

    /*
     * Arah ikon panah mengikuti status sub menu (aria-expanded), bukan class
     * .active dari halaman aktif, supaya panah tidak terlihat terbuka padahal
     * sub menunya masih tertutup.
     */
    .navmenu .dropdown>a[aria-expanded="false"] i {
        transform: rotate(0deg);
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
        color: inherit;
    }

    .navmenu .dropdown>a[aria-expanded="true"] i {
        transform: rotate(180deg);
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    /* Area sentuh menu lebih lega untuk jari */
    .navmenu a,
    .navmenu a:focus {
        padding: 12px 20px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
    }
}

@media (max-width: 575px) {
    .header .logo img {
        max-height: 34px;
    }

    /* Daftar menu memakai sisa layar, tidak menyisakan jarak berlebihan */
    .navmenu ul {
        inset: 56px 12px 12px 12px;
    }

    .navmenu a,
    .navmenu a:focus {
        font-size: 16px;
    }

    .navmenu .dropdown ul {
        margin: 8px 12px;
    }
}