@charset "utf-8";
/* =========================
   DESKTOP + MOBILE BOTTOM NAV
   Desktop: pill menu + hover dropdown on Valuations (left aligned + visible gap + no flicker)
   Mobile: toggle button + popup
   ========================= */

/* Anchor + desktop pill */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:9999;
}

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

/* Desktop pill container (UL)
   IMPORTANT: vertical padding moved to the <a> so the hover target is full height */
.nav-list{
  list-style:none;
  margin:0;
  padding:0 28px;
  border-radius:12px;
  display:inline-block;
  white-space:nowrap;
  border:0;
  position:relative; /* positioning parent for submenu + bridge */
}

/* Pill background layer */
.nav-list:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background:#1F1F1F;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  z-index:2;
  pointer-events:none;
}

/* Desktop items */
.nav-list li{
  display:inline-block;
  white-space:nowrap;
  position:relative;
  z-index:3;
}
.nav-list li + li{ margin-left:40px; }

/* ✅ Deeper desktop pill (+5px top/bottom vs your previous 12px) */
.nav-list > li > a{
  display:block;
  padding:17px 0;          /* was 12px 0 */
  color:#cccccc;
  font-weight:600;
  font-size:16px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:color 0.2s ease;
  position:relative;
  z-index:3;
}
.nav-list > li > a:hover{ color:#ffffff; }

/* =========================
   DESKTOP DROPDOWN (VALUATIONS)
   ========================= */

/* Position submenu from the Valuations <li> itself */
.nav-list li.has-submenu{
  position:relative;
}

/* Dropdown panel */
.nav-submenu{
  display:none;
  position:absolute;

  /* centre directly above Valuations */
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);

  width:250px;
  max-width:250px;
  background:#fff;
  border-radius:12px;
  padding:14px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  z-index:5;
  text-align:left;
}

/* Sub links */
.nav-submenu a{
  display:block;
  padding:12px 6px;
  border-radius:12px;
  color:#111;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}
.nav-submenu a + a{ margin-top:8px; }
.nav-submenu a:hover{
  background:#f5f5f5;
  color:#000;
}

/* Gap bridge + show rules (desktop only) */
@media only screen and (min-width:701px){
  .nav-list li.has-submenu:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:100%;
    transform:translateX(-50%);
    width:320px;
    height:10px;
    background:transparent;
    z-index:4;
  }

  .nav-list li.has-submenu:hover .nav-submenu,
  .nav-list li.has-submenu .nav-submenu:hover{
    display:block;
  }
}


/* Hide checkbox */
.nav-toggle{ display:none; }

/* =========================
   MOBILE TOGGLE BUTTON
   ========================= */
.menu-button{
  display:none;
  cursor:pointer;
  padding:13px 26px 13px 22px;
  border-radius:12px;
  background-color:#1F1F1F;
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  z-index:10001;
  border:0;
}
.menu-button:focus{ outline:none; }

.menu-text{ display:inline-block; vertical-align:middle; }

/* ✅ Burger icon restored */
.menu-icon{
  display:inline-block;
  width:22px;
  height:16px;
  margin-left:10px;
  position:relative;
  vertical-align:middle;
}
.menu-icon:before,
.menu-icon:after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:3px;
  background:#fff;
  border-radius:3px;
}
.menu-icon:before{ top:3px; }
.menu-icon:after{ bottom:3px; }

/* =========================
   MOBILE POPUP
   ========================= */
.mobile-popup{
  display:none;
  position:fixed;
  left:50%;
  bottom:30px;                 /* sits just above the button */
  transform:translateX(-50%);
  z-index:10000;
  width:calc(100vw - 32px);
  max-width:420px;
}
.popup-inner{
  background:#fff;
  border-radius:28px;
  padding:14px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  text-align:left;
}
.popup-link{
  display:block;
  padding:12px 6px;
  border-radius:12px;
  color:#111;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.popup-link + .popup-link{ margin-top:8px; }
.popup-link:hover{ background:#f5f5f5; }

/* Backdrop (tap to close) */
.mobile-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  z-index:9998;
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */

/* Tighten spacing before switch so it never wraps */
@media only screen and (max-width:780px) and (min-width:701px){
  .nav-list{ padding:0 22px; }
  .nav-list li + li{ margin-left:28px; }
  .nav-list > li > a{ font-size:15px; padding:15px 0; }
}

/* Switch to mobile at 700px */
@media only screen and (max-width:700px){
  .nav-list{ display:none; }
  .menu-button{ display:inline-block; }

  /* ✅ Mobile open state restored */
  .nav-toggle:checked ~ .mobile-popup{ display:block; }
  .nav-toggle:checked ~ .mobile-backdrop{ display:block; }

  /* ✅ Turn burger into X when open */
  .nav-toggle:checked + .menu-button .menu-icon:before{
    top:50%;
    transform:translateY(-50%) rotate(45deg);
  }
  .nav-toggle:checked + .menu-button .menu-icon:after{
    top:50%;
    bottom:auto;
    transform:translateY(-50%) rotate(-45deg);
  }

  /* Never show desktop dropdown on mobile */
  .nav-submenu{ display:none !important; }
}

/* Optional extra tweaks for very small phones */
@media only screen and (max-width:481px){
  /* add any micro-adjustments here if needed */
}