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

:root {
  --nav-bg: #435335;
  --nav-shadow: rgba(0, 0, 0, 0.12);

  --nav-text: var(--text-white);
  --nav-text-hover: #F58220;
  --nav-text-active: #f26b6b;

  --nav-toggler-bg: #ffffff;
  --nav-home-hover-bg: #3b3b3b;

  --nav-height: 80px; /* used for mobile spacing */
}


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

#navbar {
  background-color: var(--nav-bg);
  box-shadow: 0 4px 6px var(--nav-shadow);
}

#navbar ul {
  font-weight: 400;
}

.navbar-brand {
  color: var(--nav-text);
  font-weight: 600;
}

.nav-link {
  color: var(--nav-text);
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: var(--nav-text-hover);
}

.nav-link.active,
.active {
  color: var(--nav-text-active);
}


/* =========================================================
   HOME BUTTON
========================================================= */

#home-btn {
  transition: transform 0.2s ease-out,
              background-color 0.2s ease-out;
}

#home-btn:hover {
  background-color: var(--nav-home-hover-bg);
  transform: scale(1.05);
}


/* =========================================================
   TOGGLER
========================================================= */

.navbar-toggler {
  background-color: var(--nav-toggler-bg);
  border-radius: 8px;
  padding: 6px 10px;
}


/* =========================================================
   MOBILE (<= 991px)
========================================================= */

@media (max-width: 768px) {

  #navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--nav-height);
    display: flex;
    align-items: center;
  }

  #navbar .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .navbar-collapse {
    background-color: var(--nav-bg);
    padding: 1rem 0;
  }

  .nav-link {
    padding: 0.75rem 1rem;
  }

  body {
    padding-top: var(--nav-height);
    overflow-x: hidden;
  }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {
  #navbar {
    border-radius: 0;
  }
}