/*
Komponen Navigasisi
---------------------
Menguruskan menu navigasi halaman

Format:
Untuk navigasi dengan menu terselindung(hamburger), gunakan sebarang elemen dengan
atribut data-cc-butang-terselindung sebagai butang untuk memaparkan/menyembunyikan
menu tersebut. Manakala atribut aria-controls pula menghubungkan butang ini dengan
elemen yang mengandungi menu berkaitan.
    <button aria-controls="Menu" data-cc-butang-terselindung>Menu</button>
    <nav id="Menu">
        <a href="">Utama</a>
    </nav>
*/

nav {
    display: flex;
    padding: 0;
    font-family: var(--rupa-taip);
    font-size: 0.9rem;
    font-weight: normal;
    background-color: transparent;
    position: relative;
}
*:has(nav[data-cc-disembunyikan="ya"]) {
    overflow-x: hidden;
}
nav[data-cc-disembunyikan] {
    gap: var(--saiz-penuh);
    position: fixed;
    top: calc( var(--saiz-penuh) * 3 + var(--saiz-separuh) - 2px );
    left: 0;
    right: 0;
    bottom: calc( var(--saiz-ganda) * 2 - var(--saiz-separuh));
    padding: var(--saiz-penuh) 0;
    background-color: var(--warna-perdana);
    color: var(--warna-cerah);
}
nav[data-cc-disembunyikan] a{
    color: var(--warna-cerah);
}
nav[data-cc-disembunyikan] a:hover {
    background-color: var(--warna-perdana-gelap);
    color: var(--warna-cerah);
}
nav[data-cc-disembunyikan="ya"] {
    transition: transform 0.3s ease-out;
    transform: translateX(110%);
}
nav[data-cc-disembunyikan="tidak"] {
    transition: transform 0.3s ease-out;
    transform: translateX(0);
}
nav [data-cc-lajur] {
    flex-direction: column;
}
nav [data-cc-disembunyikan] a {
    padding: var(--saiz-separuh) 0;
}
nav[data-cc-disembunyikan] > ul{
    gap: var(--saiz-penuh);
    padding: 0 var(--saiz-penuh);
    flex-wrap: wrap;
    flex-direction: row;
    overflow-y: auto;
}
nav[data-cc-disembunyikan] ul li {
    display: flex;
    flex-direction: column;
    background-color: hsla( from var(--warna-perdana-gelap) h s l / 0.4);
    color: var(--warna-cerah);
    width: calc( 100% / var(--bilangan-kolum) - var(--saiz-separuh));
}
nav[data-cc-disembunyikan] ul li > *:first-child {
    background-color: hsla( from var(--warna-perdana-gelap) h s l / 0.6);
}

nav a, nav span {
    padding: var(--saiz-separuh);
}

nav [data-cc-semasa="halaman"] {
    background-color: var(--warna-lebih-gelap);
}

[data-cc-butang-terselindung] {
    display: flex;
    flex-direction: column;
    gap: var(--saiz-suku);
    position: fixed;
    padding: calc( var(--saiz-penuh) + var(--saiz-suku) ) var(--saiz-separuh);
    top: 0;
    right: var(--saiz-penuh);
    width: calc( var(--saiz-ganda) + var(--saiz-separuh) );
    background-color: var(--warna-perdana);
    outline: 0;
    border: 0;
}
[data-cc-butang-terselindung]:hover,
[data-cc-butang-terselindung]:focus,
[data-cc-butang-terselindung]:active {
    outline: 0;
    border: 0;
    box-shadow: none;
    background-color: var(--warna-perdana);
}
[data-cc-butang-terselindung] span {
    width: 100%;
    height: 2px;
    background-color: var(--warna-cerah);
    transition: transform 0.3s ease-out;
    position: relative;
}

[data-cc-butang-terselindung][data-cc-dikembangkan="ya"] span:first-child {
    transform: translateY(100%) rotate(45deg);
    top: 0.3rem;
}
[data-cc-butang-terselindung][data-cc-dikembangkan="ya"] span:nth-child(2) {
    transform: translateY(100%) scale(0);
}
[data-cc-butang-terselindung][data-cc-dikembangkan="ya"] span:last-child {
    transform: rotate(-45deg);
    top: -0.3rem;
}




/* use */


@media only screen and (min-width: 480px) {}

@media only screen and (min-width: 1024px) {
    [data-cc-butang-terselindung] {
        display: none;
    }
}