سلام،

1. بخاطر height ای هست که گرفته میتونید یک border: 1px solid red برای .topnav بگذارید و تا محدوده ی ارتفاعش مشخص شود.
2. میتونید با کمک جاوااسکریپت پیاده کنید:

کدهای جاوااسکریپت:

// When the page is fully loaded, 
// the codes inside the brackets will be interpreted
document.addEventListener("DOMContentLoaded", function() {
  const inputSearch = document.querySelector(".input-search");
  const searchBtn = document.querySelector(".search-btn");
  searchBtn.addEventListener("click", function() {
    // Add or remove "active" class based on input class
    inputSearch.classList.toggle("active");
    searchBtn.classList.toggle("active");
    // Input focus cursor
    if (inputSearch.classList.contains("active")) {
      inputSearch.focus();
    }
  });
});

کدهای css:

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    position: relative; /* relative position */
}
.input-search {
    background: transparent;
    color: var(--black-color-100);
    border-bottom: 1px solid var(--black-color-100);
    opacity: 0.6;
    display: none; /* none display */
}
.search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 0.2rem;
    /* ============ */
    /* The following codes have been added */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    /* ============ */
}
.input-search::placeholder {
  color: var(--pale-blue-color-100);
  font-size: 0.75rem;
  letter-spacing: 1.1px;
}
/* ============ */
/* The following codes have been added */
/* Icon when activated */
.input-search.active {
    padding-right: 5px;
    display: block;
}
/* Icon when disabled */
.search-btn.active .fa-magnifying-glass {
    display: none;
}
.search-btn.active::after {
    content: "✕"; /* X character to input */
}

میتونید تغییراتی که مد نظر دارید را روی کدها انجام دهید و position را به حالت قبل برگردانید و یک سری کدهارا حذف کنید تا تغییرات را ببینید. این یک مثال بوده است.

مورد 3: براساس نیازتون و تفاوت هایی که بین این دو وجود دارد انتخاب میکنید که از چه ویژگی استفاده کنید، هردو گرید و فلکس کاربردی و مورد استفاده هستند.

مورد 4: شما آیکون را زیر مجموعه کلاس menu قرار دادید و وقتی menu را display: none میکنید آیکون هم حذف خواهد شد. باید همبرگر منو رو بیارید خارج از ul.menu

متاسفانه مورد 1 و 2 درست نشد با این روش

درود

راه حل جناب موحد درست هست، منتها اگر هنوز مشکل رفع نشده بفرمایید که کدوم دو مورد مونده (1و 2 یا A,B) تا شاید با راه دیگری بهبود پیدا کنه.