/* =========================================================
   MAIN MENU
   ========================================================= */

.main-nav {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-left: 80px;
}

.main-nav a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 72px;
  padding: 0 16px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 500;

  text-decoration: none;

  transition:
    color var(--transition-fast);
}

.main-nav a::after {
  content: "";

  position: absolute;

  left: 16px;
  right: 16px;
  bottom: 0;

  height: 2px;

  background: var(--accent);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform var(--transition);
}

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

.main-nav a.active {
  color: var(--text);
}

.main-nav a.active::after {
  transform: scaleX(1);
}


/* =========================================================
   MENU TOGGLE
   ========================================================= */

.menu-toggle,
.menu-btn {
  display: none;

  width: 38px;
  height: 38px;

  padding: 8px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: var(--surface);

  cursor: pointer;
}

.menu-toggle span,
.menu-btn i {
  display: block;

  width: 100%;
  height: 2px;

  margin: 4px 0;

  background: var(--text);

  border-radius: 2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .main-nav {
    display: none;
  }

  .menu-toggle,
  .menu-btn {
    display: block;
  }
}