/*navbar*/
/*====================================================================*/
  /*COLORS*/
/*====================================================================*/

:root {
  --accent-pink: #b8749b;      /* Main accent (text like PORTFÓLIO) */
  --light-pink: #f3cde1;       /* Decorative backgrounds/elements */
  --very-light-pink: #f9eef6;  /* Page background */
  --dark-grey: #595959;        /* Text or nav/footer background */
}

/*====================================================================*/
  /*NAVBAR*/
/*====================================================================*/

/* Navbar styles */
.navbar {
   font-family: 'Montserrat';
  display: flex;
  width: 100%;
  background-color: var(--dark-grey);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  z-index: 1000;

}

.logo {
  font-weight: 700;
  font-size: 1.8rem;
  color:white;              /* your purple #b8749b */
  letter-spacing: 0.1em;
  cursor: default;
  user-select: none;
  text-transform: uppercase;
  transition: color 0.3s ease;

}
.logo:hover {
  color: var(--light-pink);  /* slightly darker purple on hover */
}

/* Apply layout styles to the container, not each link */
.nav-links {
  display: flex;
  gap: 30px; /* spacing between links */
  justify-content: flex-end; /* ADD THIS */
  flex: 0.95;                   /* ADD THIS to push it to the right */
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #888;
}

/*====================================================================*/

/* Responsive behavior */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
  }
}

/*====================================================================*/

/* Language toggle */
.lang-toggle select {
  background-color: transparent;
  border: 1px solid var(--light-pink);
  color: var(--light-pink);
  padding: 4px 10px;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}

.lang-toggle select:focus {
  outline: none;
}

.lang-toggle option {
  background-color: var(--dark-grey);
  color: var(--light-pink);
}