/* nav left */

.nav {
  position:fixed;
  top:50%;
  left:1px;
  transform:translateY(-50%);
  background:#1F3526;
  padding:15px 20px;
  border-radius:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  color: #E5C9A2;
}

/* ---------- MINI PROFILE ---------- */
.mini-profile{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.1rem;
  font-size:1rem;
  font-weight:600;
}
.mini-profile img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #111;
}
.mini-profile span{
  white-space:nowrap;
}
body.dark .mini-profile img{
  border-color:#ff2cfd;
}


.nav-toggle { display:none; font-size:1.4rem; cursor:pointer; }
.nav-links {
  list-style:none;
  padding: 0;
  margin: 10px;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  text-align:center;
}
.nav-links a {
  color: #E5C9A2;
  font-weight:600;
  font-size:1.0rem;
  position:relative;
}
.nav-links a:hover{
    color: #fff;
}
.nav-links a::after {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  height:2px;
  width:0;
  background:#fff;
  transition:.3s;
}
.nav-links a:hover:after { width:100%; color:#fff; }

/* Social icons at bottom of nav */
.nav-socials {
  display:flex;
  gap:1rem;
  font-size:1.2rem;
}
.nav-socials a {
   color: #E5C9A2;
  transition:.3s;
}
.nav-socials a:hover { color: #fff; }

/* ---------- TABLET / LAPTOP FIX (stop overlap) ---------- */
/* 
@media (max-width: 1400px) {
  .wrapper {
    margin-left: 120px;   
  }
}

@media (max-width: 1300px) {
  .wrapper {
    margin-left: 120px;   
  }
}


@media (max-width: 1000px) {
  .wrapper {
    margin-left: 120px;   
  }
} */

@media (max-width: 1510px) {
  /* nav becomes a small floating card top-left */

  .wrapper{
    margin-left: 0px;
  }
  .nav {
    position: fixed;
    top: 33px;
    left: 0px;
    width: auto;
    padding: 10px 14px;
    border-radius: 12px;
    flex-direction: row;
    gap: 0;
    z-index: 999;
  }

   .mini-profile{ margin-bottom:0; }

  /* hamburger inside the card */
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #111;
    margin-left: 5px;
  }

  /* links panel slides out from the left */
  .nav-links {
    position: fixed;
    top: 40px;              /* just below the nav card */
    left: 15px;
    width: 220px;
    background: #1F3526;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    transform: translateX(-110%);
    transition: transform .3s ease;
    z-index: 998;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  /* social icons inside the same panel */
  .nav-socials {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
  }
}