/* 1. The Container */
details {
    position: relative; /* Essential for positioning the dropdown list */
    width: fit-content;
}

.nav-dropdown {
    display: none;
}

/* 2. The Trigger Button (Summary) */
summary {
    list-style: none; /* Hides the default arrow */
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    user-select: none;
}

/* Chrome/Safari fix to hide the triangle */
summary::-webkit-details-marker { display: none; }

/* Nav-specific dropdown trigger inherits nav-link styling */
.nav-dropdown summary.nav-menu-btn {
    padding: 0.6rem 1.1rem;
    border: 3px solid #000;
    background-color: #ffffff;
    box-shadow: 6px 6px 0px #000;
    text-decoration: none;
    color: #000;
    display: inline-block;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}

.nav-dropdown summary.nav-menu-btn:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px #000;
    background-color: #FF4400;
}

.nav-dropdown summary.nav-menu-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

/* 3. The Dropdown Menu (The List) */
.dropdown-menu {
    position: absolute;
    top: 115%; /* Pushes it slightly below the button */
    left: 0;
    min-width: 200px;
    z-index: 10;
    
    /* Box styling */
    background-color: #ffffff;
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    
    /* Padding for the list inside */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Dropdown Items */
.dropdown-menu li a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 12px 20px;
    font-weight: bold;
    border-bottom: 3px solid #000;
    transition: background 0.2s;
}

/* Remove border from the last item */
.dropdown-menu li:last-child a {
    border-bottom: none;
}

/* Hover effect for items */
.dropdown-menu li a:hover {
    background-color: #ff90e8; /* Neo-Brutalist Pink */
}

/* 4. Open State Logic */
/* When the details tag is open, keep the summary pressed? 
    Or just let it be? Let's make it look "Active" */
details[open] summary {
    background-color: #ffeba0;
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .nav-dropdown {
        display: block;
    }

    .dropdown-menu {
        width: min(90vw, 260px);
    }
}