/* Nav links container */
.nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0px); 
    left: 0;                 
    width: 100vw;            
    max-width: 100%;        
    padding: 0;
    background: #ffffffea;
    text-align: left;
    box-sizing: border-box; 
}

.nav-links.active {
    display: flex;
}
nav{
    width: 100vw;
    position: relative;
    z-index: 10;
}

/* Each link */
.nav-links a {
    display: block;
    box-sizing: border-box;
    padding: 1rem 2rem; 
    font-size: 1.2rem;
    border-bottom: 1px solid #ddd;
    white-space: nowrap; 
    text-align: left;   

}

/* Hamburger icon */
.icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 35px;
    height: 28px;
    cursor: pointer;
    position: relative;
}

.icon span {
    display: block;
    width: 100%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center; /* ensures rotation is symmetrical */
}

.icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.icon.active span:nth-child(2) {
    opacity: 0;
}
.icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* General body padding for mobile */
body {
    padding: 4vw;
    font-size: 1.05rem;
}

/* Posts and comments */
.post, .comment {
    width: 95%;
    margin: 2vh auto;
    padding: 2vh 4vw;
}

.post img:not(.profile-pic) {
    margin: 2vh auto;
    width: 100%;
}

.post p,
.comment p {
    font-size: 1.05rem;
    margin: 1vh 0;
}

/* Profile pics scale better on mobile */
.profile-info .profile-pic,
.settings-profile .profile-pic {
    width: 20vw;
    height: 20vw;
}

.user .profile-pic {
    width: 14vw;
    height: 14vw;
}

.notification .profile-pic {
    width: 10vw;
    height: 10vw;
}

/* Form scaling */
form {
    width: 95%;
    padding: 5vw;
}

input[type="submit"],
.edit-post {
    font-size: 1.1rem;
    padding: 1.2vh;
}


/* Action icons like like/resplooge/comment */
.like-img, .resplooge-img, .comment-img {
    width: 8vw;
    height: 8vw;
}

/* Adjust user list layout */
.users-list, .notifications-list {
    max-width: 95%;
}

/* Update section on profile */
.update {
    width: 95%;
}

ul.updates-list {
    margin-left: 0;
    align-items: center;
}


.logged-out-p{
    margin: auto;
}