/* ---------------------------------------------------
   LUXURY SPA / BOUTIQUE NAVIGATION (Option A)
   Calm spacing, pill hover, soft dropdown
--------------------------------------------------- */

/* Remove bullets + default spacing for all WP menu lists (desktop + dropdown + mobile) */
.luxury-nav .nav-menu,
.luxury-nav .nav-menu ul,
.mobile-menu-nav .nav-menu,
.mobile-menu-nav .nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Safety: WP sometimes sets list-style on li */
.luxury-nav .nav-menu li,
.luxury-nav .nav-menu li ul li,
.mobile-menu-nav .nav-menu li,
.mobile-menu-nav .nav-menu li ul li {
  list-style: none;
}

/* Top-level nav container */
.luxury-nav .nav-menu {
  list-style: none;
  display: flex;
  gap: 2.4rem;
  align-items: center;
  padding: 0.75rem 0;
}

/* Top-level items */
.luxury-nav .nav-menu > li > a {
  text-decoration: none;
  color: #738d94;
  font-weight: 500;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.25s ease;
}

/* Hover text color */
.luxury-nav .nav-menu > li > a:hover {
  color: #d3a794;
}

/* Soft underline hover effect */
.luxury-nav .nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #d3a794;
  border-radius: 2px;
  transition: width 0.25s ease;
}

.luxury-nav .nav-menu > li > a:hover::after {
  width: 100%;
}

/* ----------------------------------------------
   Dropdown styling — boutique luxury (A1)
---------------------------------------------- */
.luxury-nav .nav-menu li {
  position: relative;
}



/* Open dropdown */
.luxury-nav .nav-menu li:hover > ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dropdown links */
.luxury-nav .nav-menu li ul li a {
  display: block;
  padding: 0.7rem 1.2rem;
  color: #738d94;
  font-size: 1rem;
  transition: background 0.25s ease, color 0.25s ease;
  border-radius: 6px;
}
/* ----------------------------------------------
   FULL SEDONA DROPDOWN (Luxury Spa)
---------------------------------------------- */
.luxury-nav .nav-menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;

  background: #d3a794;        /* FULL SEDONA BACKGROUND */
  border-radius: 12px;
  padding: 0.8rem 0;

  border: 1px solid #c49680;  /* soft border */
  box-shadow: 0 20px 40px rgba(0,0,0,0.09);

  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all 0.25s ease;
  z-index: 100;
}

/* Show dropdown */
.luxury-nav .nav-menu li:hover > ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dropdown text — white on Sedona */
.luxury-nav .nav-menu li ul li a {
  display: block;
  padding: 0.7rem 1.2rem;
  color: #fcf2eb;        
  font-size: 1rem;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* HOVER INVERT — white bg + Agave text + Agave border */
.luxury-nav .nav-menu li ul li a:hover {
  background: #fcf2eb;
  color: #738d94;             /* Agave text */
  box-shadow: inset 0 0 0 2px #738d94;  /* Agave outline */
}

/* No underline animation inside dropdown */
.luxury-nav .nav-menu li ul li a::after {
  display: none !important;
}


/* ---------------------------------------------------
   MOBILE MENU (for your markup + JS)
   Uses: .nav-toggle, .mobile-menu(.active), .mobile-menu-overlay(.active)
--------------------------------------------------- */

/* Hamburger button */
.nav-toggle {
  display: none; /* hidden on desktop */
  background: none;
  border: 0;
  padding: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 6px 0;
  background: #738d94;
}

/* Slide-in panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 350px;
  height: 100%;
  background: #ffffff;
  padding: 2rem 1.5rem;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.35s ease;
  z-index: 10000;
  overflow-y: auto;
  border-radius: 0 0 0 20px;
}

.mobile-menu.active {
  right: 0;
}

/* Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9998;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Close button */
.mobile-menu-close {
  background: none;
  border: none;
  font-size: 1.7rem;
  cursor: pointer;
  color: #738d94;
}

/* Mobile list reset */
.mobile-menu-nav .nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile links */
.mobile-menu-nav .nav-menu > li > a {
  display: block;
  padding: 1rem 0;
  color: #738d94;
  font-size: 1.15rem;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

/* Mobile submenus (accordion) */
.mobile-menu-nav .nav-menu ul {
  display: none;
  padding-left: 1rem;
  padding-top: 0.5rem;
  list-style: none;
}

.mobile-menu-nav .nav-menu ul li a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  text-decoration: none;
}

/* Highlight when expanded */
.mobile-menu-nav .nav-menu a.sub-open {
  color: #d3a794;
}

/* Mobile breakpoint behavior */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 10001; /* above overlay/menu */
  }

  /* Hide your desktop nav + icons on mobile */
  .site-nav.luxury-nav {
    display: none;
  }

  .nav-icons {
    display: none;
  }
}

/* Optional: prevent background scroll when open (JS adds this class) */
body.mobile-menu-open {
  overflow: hidden;
}

/* ------------------------------
   3-COLUMN NAV LAYOUT
------------------------------ */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Left / Center / Right alignments */
.nav-left,
.nav-center,
.nav-right {
  display: flex;
  align-items: center;
}

/* Center grows naturally */
.nav-center {
  flex: 1;
  justify-content: center;
}

/* ------------------------------
   SOCIAL ICONS (Right Column)
------------------------------ */
.nav-icons {
  display: flex;
  gap: 14px;
}

/* Icon base style */
.nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fcf2eb;     /* soft cream */
  color: #738d94;          /* Agave */
  font-size: 18px;
  transition: all 0.3s ease;
  border: 2px solid #d3a794; /* Sedona outline */
  text-decoration: none;
}

/* Hover effect: invert */
.nav-icons a:hover {
  background: #d3a794; /* Sedona */
  color: #ffffff;      /* White */
  border-color: #d3a794;
}

/* 3rd-level dropdown — flies out to the right */
.luxury-nav .nav-menu li ul li ul {
  top: 0;
  left: 100%;          /* opens to the right */
  margin-top: -0.8rem; /* aligns with the parent item */
  border-radius: 12px;
  transform: translateX(12px); /* slide from left */
}

/* Trigger on hover of the parent li */
.luxury-nav .nav-menu li ul li:hover > ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Show 3rd-level items when JS opens them */
.mobile-menu-nav .nav-menu ul ul {
  padding-left: 1.5rem;
}

.mobile-menu-nav .nav-menu ul ul li a {
  font-size: 0.95rem;
  color: #d3a794;
  padding: 0.4rem 0;
}

  /* Remove all nav link underlines */
  .luxury-nav a,
  .luxury-nav a:link,
  .luxury-nav a:visited,
  .luxury-nav a:hover,
  .luxury-nav a:focus,
  .luxury-nav a:active,
  .mobile-menu-nav a,
  .mobile-menu-nav a:link,
  .mobile-menu-nav a:visited,
  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus,
  .mobile-menu-nav a:active,
  .nav-icons a,
  .nav-icons a:link,
  .nav-icons a:visited,
  .nav-icons a:hover,
  .nav-icons a:focus,
  .nav-icons a:active {
    text-decoration: none !important;
  }