.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ✅ Connect Wallet Button (shared style for ID & class) */
#connectWalletButton,
.connect-wallet {
  background-color: #111;
  color: cyan;
  border: 2px solid cyan;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: fit-content;
  transition: 0.3s ease-in-out;
  border-radius: 5px;
}

#connectWalletButton:hover,
.connect-wallet:hover {
  background-color: cyan;
  color: black;
  box-shadow: 0 0 10px cyan;
}

iframe[title="Netlify status badge"] {
  display: none !important;
}

/* Hide admin-only menu items by default */
.admin-only {
  display: none;
}

/* 🔶 keeps Sign In visually consistent in the upper right */
.nav-auth-btn{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Compact Home dropdown */
#homeDropdown {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#homeDropdown li {
  margin: 0 !important;
  padding: 0 !important;
}

#homeDropdown li a {
  padding: 7px 14px !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
}

.navbar-menu .dropdown-content li a {
  padding: 7px 14px !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
}

.navbar ul li a {
  text-decoration: none;
  color: cyan;
  font-weight: bold;
  padding: 10px 15px;
  transition: 0.3s ease-in-out;
  font-size: 16px;
}

.navbar ul li a:hover {
  background-color: cyan;
  color: black;
  border-radius: 5px;
}

.navbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  justify-content: center;
  gap: 15px;
  flex-grow: 1;
}

.navbar ul li {
  display: inline;
  margin: 0 15px;
}

/* 🔽 Navigation Dropdown list appears vertically */
.navbar ul li .dropdown-content {
  display: none;
  position: absolute;
  background-color: #111;
  min-width: 160px;
  z-index: 1;
  border: 1px solid cyan;
  border-radius: 6px;
  flex-direction: column;
}

/* Each link stacks and stretches full width */
.dropdown-content li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 16px;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.dropdown-content li a:hover {
  background-color: cyan;
  color: black;
  box-shadow: 0 0 5px cyan;
}

/* Navigation Bar */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 19px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-menu li {
  position: relative;
}

.navbar-menu a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* 🔹 General dropdown menu style */
.dropdown,
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown a,
.dropdown-toggle {
  color: cyan;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s, color 0.3s;
}

/* 🔹 Dropdown Menu Layout */
.dropdown-content,
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #111;
  min-width: 200px;
  z-index: 2000;
  right: 0;
  border: 1px solid cyan;
  border-radius: 6px;
  box-shadow: 0 0 10px cyan;
}

.dropdown-content:empty,
.dropdown-menu:empty {
  display: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 🔹 Reveal dropdown on hover */
.dropdown:hover .dropdown-content,
.dropdown-container:hover .dropdown-menu {
  display: block;
  flex-direction: column;
}

/* 🔹 Menu Items */
.dropdown-menu a,
.dropdown-menu button,
.dropdown-content li {
  padding: 10px 16px;
  color: white;
  text-decoration: none;
  display: block;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* 🔹 Hide empty items */
.dropdown-menu a:empty,
.dropdown-menu button:empty,
.dropdown-content li:empty {
  display: none !important;
}

.dropdown:hover .dropdown-toggle {
  background-color: cyan;
  color: black;
  border-radius: 6px;
}

/* My Account dropdown panel */
#accountDropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;

  background-color: #111;
  border: 1px solid cyan;
  border-radius: 6px;
  box-shadow: 0 0 10px cyan;

  min-width: 220px;
  z-index: 2000;

  padding: 6px 0;
}

.dropdown:hover #accountDropdown {
  display: flex;
}

#accountDropdown li a {
  display: flex;
  align-items: center;

  width: 86%;

  padding: 6px 18px !important;
  line-height: 1.15 !important;

  color: cyan;
  text-decoration: none;
  border-radius: 6px;

  font-size: 14px;
  font-weight: bold;
  text-align: left;

  box-sizing: border-box;

  transition: background 0.3s, color 0.3s;
}

#accountDropdown li a:hover {
  background-color: cyan;
  color: black;
  box-shadow: 0 0 5px cyan;
}

/* ===== NAVBAR BASE ===== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;
  z-index: 1000;
  overflow: visible !important;

  background-color: black;
  color: cyan;

  padding: 10px 20px;
  border-bottom: 2px solid cyan;
  box-shadow: 0 0 10px cyan;

  text-align: center;
}

.navbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-text {
  font-size: 24px; /* was 24 */
  color: cyan;
  text-shadow: 0 0 8px cyan;
  margin-left: 2px;
}

.navbar-menu li a {
  color: cyan;
  text-decoration: none;
  font-weight: bold;
}

/* Ensure the toggle class works */
.navbar-menu.show {
  display: flex !important;
}
.logo{ display:flex; align-items:center; gap:6px; } /* controls spacing */
.logo-image{ margin-right:0; }
.logo-text{ margin-left:0; }
/*
footer {
  margin-top: 90px;   /* adjust 60 → 80 if you want more space */
/*}
*/
#accountDropdown li {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* Logged-in user greeting */
.nav-user-name {
  font-size: 0.9rem;
  font-weight: 400;
  color: #b8ffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Right-side navbar greeting/account area */
.nav-right {
  position: absolute;
  top: 6px;
  right: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  padding-right: 10px;
}


/* Hide hamburger by default */
#hamburgerBtn {
  display: none;
}

/* =========================================
   DESKTOP/LAPTOP PAGE SCALE: 1024px+
   ========================================= */
@media (min-width: 1024px) {
  body {
    zoom: 0.8;
  }

  @supports not (zoom: 1) {
    body {
      transform: scale(.8);
      transform-origin: top center;
    }

    html,
    body {
      width: 125%;
    }
  }
}


/* =========================================
   MOBILE + TABLET: UNDER 1000px
   ========================================= */
/*@media (max-width: 999px) {*/
/*
    @media (max-width: 1366px) {
*/
@media (max-width: 1366px) and (hover: none) and (pointer: coarse) {

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  #hamburgerBtn {
    display: block !important;
  }

  .navbar-menu {
    display: none !important;
    flex-direction: column;
    width: 100%;
    background-color: black;
    padding: 10px;
    margin: 0;
    position: relative;
    z-index: 1000;
  }

  .navbar-menu.show {
    display: flex !important;
  }

  .navbar-menu li {
    width: 100%;
    text-align: center;
  }

  .dropdown-content {
    position: static;
    background: black;
    box-shadow: none;
    padding: 10px 0;
  }

  .navbar-left .logo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    text-decoration: none;
  }

  .navbar-left .logo img {
    width: 52px !important;
    height: 52px !important;
    object-fit: cover;
    margin: 0;
  }
}

/* =========================================
   IPAD — center account area and dropdown
   ========================================= */
@media (min-width: 768px) and (max-width: 1366px)
       and (hover: none) and (pointer: coarse) {

  .nav-right {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 4px auto !important;
    align-items: center !important;
  }

  .nav-right-dropdown {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 4px auto !important;
    text-align: center !important;
  }

  #accountDropdownToggle {
    display: inline-block !important;
    margin: 0 auto !important;
  }

  #accountDropdown {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    inset: auto !important;

    width: min(260px, 90%) !important;
    min-width: 0 !important;

    margin: 6px auto 0 !important;
    transform: none !important;
  }
}
/* =========================================
   DESKTOP NAVBAR: 1000px AND ABOVE
   ========================================= */
/*@media (min-width: 1000px) {*/

    @media (min-width: 1367px) {


  #hamburgerBtn {
    display: none;
  }

  .navbar-menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
  }
}