/* DESKTOP NAV */
/* Styling for the logo in the navbar */
.logo
{
  font-size: 2rem;
  text-decoration: none; /* Removes underline */
  color: inherit;
  cursor: default;
}

.logo:hover
{
  cursor: default;
  cursor: pointer;
}

/* HAMBURGER MENU */
/* Hide hamburger icon by default (mobile device only) */
#hamburger-nav
{
  display: none;
}

/* Container for the hamburger menu button */
.hamburger-menu
{
  position: relative;
  display: inline-block;
}

/* Styling for the hamburger icon (three lines) */
.hamburger-icon
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 30px;
  cursor: pointer;
}

/* hamburger line icon styling */
.hamburger-icon span
{
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.3s ease-in-out; /* Smooth transition for state changes */
}

/* Menu that appears when hamburger icon is clicked */
.menu-links
{
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0; /* Hidden by default */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* Links inside the menu */
.menu-links a
{
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: black;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* Removes bullet points (the '-' in a ball form) from list items in dropdown menu */
.menu-links li
{
  list-style: none;
}

/* Shows hamburger menu when clicked*/
.menu-links.open
{
  max-height: 300px; /* How much to expand the menu when is open */
}

/* Styling hamburger icon when opened */
.hamburger-icon.open span:first-child
{
  transform: rotate(45deg) translate(10px, 5px); /* Top line transforms */
}

.hamburger-icon.open span:nth-child(2)
{
  opacity: 0; /* Hides middle line when opened */
}

.hamburger-icon.open span:last-child
{
  transform: rotate(-45deg) translate(10px, -5px); /* Bottom line transforms */
}

/* Reset transformations on default icon state */
.hamburger-icon span:first-child
{
  transform: none;
}

.hamburger-icon span:first-child
{
  opacity: 1;
}

.hamburger-icon span:first-child
{
  transform: none;
}

/* NAV-LINKS */
nav, .nav-links
{
  display: flex;
}

/* Main navigation layout */
nav
{
  justify-content: space-around; /* Show options in a row */
  align-items: center;
  height: 17vh; /* Sets navbar height */
}

/* Styles for navigation links */
.nav-links
{
  gap: 2rem; /* Space between links */
  list-style: none; /* Removes bullet points (same explained before) from links */
  font-size: 1.5rem;
}

/* Links appearance and hover effect */
.nav-links a
{
  color: black;
  text-decoration: none; /* Removes underline */
  text-decoration-color: white;
}

.nav-links a:hover
{
  color: black;
  text-decoration: underline;
  text-underline-offset: 1rem;
}