/* ==========================
| navigation bar styling
| =========================== */
header { 
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2000;
        background: var(--off-white-color);
        color: rgba(0,0,0,0.87);
        font-family: 'Inter', sans-serif;
        margin: 0; 
        padding: 0; 
        /* Hardware acceleration smooth transition */
        transition: transform 0.3s ease-in-out;
        transform: translateY(0); 
}
/* Slide up and perfectly hide the header */
header.header-hidden {
    transform: translateY(-100%);
}
header nav {
    background: var(--white-color);
    padding: 0.5rem 1rem; /* Expanded breathing room vertically and horizontally */
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Adds a subtle separation barrier over the background content */
}
.nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
}
.nav-logo {
        display: flex;
        align-items: center;
        gap: 0.5em;
}
.nav-links {
        display: flex;
        align-items: center;
        gap: 2em;
        padding-right: 1em;
}

/* ======================================
| navigation bar styling - Hamburger
| ======================================= */
.hamburger {
    display: none; /* Invisible on desktop screens */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger span {
    width: 100%;
    height: 3.2px;
    background-color: var(--red-color);
    transition: all 0.3s ease;
    
    /* Forces the browser to render the rendering bounding boxes sharply */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =================================
| Logout Button
| ================================== */

.logout-button {
        display: inline-block; 
        padding: 12px 30px; /* Top/Bottom and Left/Right */
        text-decoration: none;
        background-color: var(--red-color);
        color: var(--white-color);
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        border: none;
        border-radius: 3px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
        .logout-button:hover {
        background-color: var(--red-color);
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.4);
        }
        .logout-button:active {
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
        transform: translateY(1px);
        }  

        .prolongedActive {
            background-color: var(--accent-gray-color);
            pointer-events: none /* prevents clicking a second time while waiting */
        }
        .prolongedActive:hover {
            background-color: var(--accent-gray-color);
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.4);
        }