/* Navbar styles: simple comments added by me to explain sections. */

/* ===== Base bar ===== */
nav.navbar {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  background:#5C475B;
  padding:15px 30px;
  position:sticky;
  top:0;
  z-index:999;
  gap:18px;
}

/* ===== Left / Right groups ===== */
.nav-left {
  display:flex;
  align-items:center;
  gap:15px;
  position:relative;
}

.nav-left a,
.btn {
  color:#F6F3F6;
  text-decoration:none;
  font-weight:700;
}

.nav-left a:hover {
  color:#A68CA5;
}

.nav-right {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* ===== Search ===== */
.search-form {
  display:flex;
  align-items:center;
  border-radius:999px;
  overflow:hidden;
  background:transparent;
}

.search-input {
  padding:4px 12px;
  height:34px;
  font-size:14px;
  border:none;
  border-radius:999px 0 0 999px;
  background:#F6F3F6;
  color:#5C475B;
  font-weight:700;
  outline:none;
  width:130px;
}

.search-input::placeholder {
  color:#A68CA5;
  opacity:.8;
}

.search-btn {
  background:#A68CA5;
  color:#F6F3F6;
  border:none;
  height:34px;
  padding:4px 12px;
  font-size:14px;
  border-radius:0 999px 999px 0;
  font-weight:700;
  cursor:pointer;
  transition:background-color .3s;
}

.search-btn:hover {
  background:#7F627D;
}

/* ===== Dropdown (Supplies) ===== */
.dropdown-wrapper {
  position:relative;
  display:inline-block; /* ensure dropdown hugs the button */
}

/* Make the Supplies button look like your other pills */
nav.navbar .dropdown-title.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 16px;             /* same padding as other buttons */
  background:#6C566B;           /* pill background */
  color:#F6F3F6;
  border:none;
  border-radius:999px;          /* pill shape */
  line-height:1;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .02s;
}

nav.navbar .dropdown-title.btn:hover {
  background:#7F627D;
}

nav.navbar .dropdown-title.btn:active {
  transform:translateY(1px);
}

/* Align dropdown neatly under the pill */
.dropdown-list {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:#5C475B;
  min-width:220px;
  max-height:400px;
  overflow:auto;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  z-index:3000;
  flex-direction:column;
  scrollbar-width:thin;
  scrollbar-color:#888 #5C475B;
  border-radius:12px;
  padding:8px 0;
}

.dropdown-list::-webkit-scrollbar { width:8px; }
.dropdown-list::-webkit-scrollbar-thumb { background:#888; border-radius:4px; }

.dropdown-list a {
  color:#F6F3F6;
  padding:10px 16px;
  text-decoration:none;
  display:block;
  white-space:nowrap;
  border-radius:8px;            /* nicer hover highlight */
  margin:0 6px;
}

.dropdown-list a:hover {
  background:rgba(255,255,255,.12);
}

/* Desktop: show dropdown on hover (pointer devices only) */
@media (hover:hover) and (pointer:fine) {
  .dropdown-wrapper:hover .dropdown-list {
    display:flex;
    flex-direction:column;
  }
}

/* ===== Spacing tweak for large screens ===== */
@media (max-width:1200px) {
  nav.navbar { padding:12px 20px; }
}

/* ===== Hamburger button (hidden on desktop) ===== */
#nav-toggle,
.nav-toggle { display:none; }

/* ===== Mobile styles ===== */
@media (max-width:1024px) {
  nav.navbar {
    position:sticky;
    top:0;
    min-height:60px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
    padding-left:64px !important; /* space for hamburger */
    box-sizing:border-box;
  }

  /* show hamburger */
  #nav-toggle,
  .nav-toggle {
    display:block !important;
    position:absolute !important;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:36px;
    background:transparent;
    border:0;
    z-index:2002;
  }

  #nav-toggle .bar,
  .nav-toggle .bar {
    display:block;
    height:3px;
    margin:6px 0;
    background:#fff !important;
    border-radius:2px;
  }

  /* mobile dropdown lives inside the slide-down panel; static positioning */
  .dropdown-wrapper .dropdown-list {
    position:static;
    box-shadow:none;
    max-height:240px;
    overflow:auto;
    top:auto; left:auto;        /* reset offsets */
    padding:8px 0;
  }

  /* JS adds .open on the wrapper when the user taps "Supplies" */
  .dropdown-wrapper.open .dropdown-list { display:block !important; }

  /* make the Supplies pill span full width nicely in the panel */
  nav.navbar.open .dropdown-title.btn {
    width:100%;
    justify-content:flex-start;
  }
}

/* ===== Hide any legacy debug/controls ===== */
#header-debug-banner,
.header-debug-banner,
nav.navbar #dbg-w,
nav.navbar input[type="checkbox"],
nav.navbar details.mobile-nav,
nav.navbar summary,
nav.navbar summary::-webkit-details-marker {
  display:none !important;
}

nav.navbar {
  border-bottom:none !important;
  box-shadow:none !important;
}

nav.navbar::before,
nav.navbar::after { display:none !important; }