/*  === MAIN 1280 px / 80 rem (x 16px) ===
       --------------------------------      */
.nav-div {
    min-width: 40rem;
    max-width: 96rem;
    width: 100%;
    background: transparent;
    display: flex; /* Flexbox */
    flex-direction: column; /* Smer toku prvkov, prvky budú pod sebou */
    justify-content: space-around; /* Vycentrovanie pozdĺž hlavnej osi (vertikálne) */
    justify-content: flex-start; /* Vycentrovanie pozdĺž priečnej osi (horizontálne) */
    /*border: 1px solid #068399; /* Len pre kontrolu */
    position: relative;
}

/* --- Skrytie samotného checkboxu --- */
.menu-checkbox {
    display: none;
}

/* --- Tlačidlo Hamburgeru (tri čiary) --- */
.hamburger-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 101; /* Musí byť nad vysunutou plochou, aby sa dalo kliknúť na X */
}

/* Tri vodorovné čiary hamburgeru */
.hamburger-btn .bar {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* --- Vysúvacia plocha cez celé okno (z-index 100) --- */
.nav-overlay {
    position: fixed;
    top: -100%; /* Schované nad horným okrajom obrazovky */
    left: 0;
    width: 100%;
    height: 100vh;
    background: hsla(var(--clr-0) / 1); /* Svetlé pozadie s jemnou priehľadnosťou */
    z-index: 100; /* Presne podľa zadania */
    transition: top 0.4s ease-in-out; /* Plynulé vysúvanie */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Zoznam 6 odkazov */
.nav-links {
    list-style: none;
    text-align: center;
    padding: 0;
}

/* --- MAGICKÁ ČASŤ: Čo sa stane po kliknutí (keď je checkbox checked) --- */

/* 1. Vysunutie plochy zhora nadol */
.menu-checkbox:checked ~ .nav-overlay {
    top: 0;
}

/* 2. Transformácia hamburgeru na znak 'X' */
/* Horná čiara sa otočí o 45 stupňov doprava */
.menu-checkbox:checked ~ .hamburger-btn .bar:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}

/* Stredná čiara zmizne */
.menu-checkbox:checked ~ .hamburger-btn .bar:nth-child(2) {
    opacity: 0;
}

/* Spodná čiara sa otočí o 45 stupňov doľava */
.menu-checkbox:checked ~ .hamburger-btn .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}