/* ============================================================
   STANDARD PUBLIC NAVBAR  —  single source of truth
   Shared across: home.html, about_us.html, massage.html,
                  booking.html, policies.html
   Edit here to change the navbar on every public page.
   (admin.html is intentionally excluded — it has its own layout.)
   ============================================================ */

.nav{
  position:sticky;top:0;z-index:997;
  display:flex;align-items:center;
  height:76px;gap:28px;padding:0 28px;
  background:rgba(23,17,14,0.94);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid rgba(198,166,106,.22);
  transition:box-shadow .18s ease,background .18s ease;
}

.brand{
  font-family:"Playfair Display",serif;font-weight:700;font-size:2.05rem;
  color:#C6A66A;letter-spacing:.3px;text-decoration:none;
}

.nav-links{margin-left:auto;display:flex;gap:28px}

.nav-links a{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-decoration:none;text-transform:uppercase;font-weight:600;font-size:0.98rem;
  color:#F4EBDD;letter-spacing:.45px;padding:8px 2px;min-height:44px;
  display:flex;align-items:center;position:relative;transition:color .3s ease;
}

.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;
  background:#C6A66A;border-radius:2px;transform:translateX(-50%);
  transition:width .3s ease;
}
.nav-links a:hover{color:#C6A66A}
.nav-links a:hover::after{width:80%}

.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45);background:rgba(16,11,8,0.97)}

/* ===== Hamburger button ===== */
.hamburger-btn{
  display:none;background:none;border:none;cursor:pointer;padding:10px 12px;
  color:#F4EBDD;z-index:999;width:48px;height:48px;flex-direction:column;
  justify-content:center;align-items:center;gap:5px;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;position:relative;
}
.hamburger-btn:focus{outline:2px solid #C6A66A;outline-offset:2px}
.hamburger-btn:active{opacity:.8}
.hamburger-btn span{display:block;width:26px;height:3px;background:#F4EBDD;border-radius:2px;transition:all .3s ease}
.hamburger-btn.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.hamburger-btn.active span:nth-child(2){opacity:0}
.hamburger-btn.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* ===== Mobile — single shared breakpoint ===== */
@media(max-width:900px){
  .brand{font-size:1.4rem}
  .nav-links{
    display:none;position:absolute;top:76px;left:0;right:0;
    flex-direction:column;background:rgba(23,17,14,0.98);backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(198,166,106,.22);padding:0;gap:0;margin-left:0;
    max-height:calc(100vh - 76px);overflow-y:auto;box-shadow:0 8px 16px rgba(0,0,0,.1);
    z-index:998;pointer-events:auto;max-width:100%;
  }
  .nav-links.active{display:flex;visibility:visible}
  .nav-links a{
    display:flex;align-items:center;flex-direction:row;width:100%;
    padding:18px 28px;font-size:0.9rem;letter-spacing:.3px;min-height:52px;
    border-bottom:1px solid rgba(198,166,106,.10);box-sizing:border-box;
    touch-action:manipulation;pointer-events:auto;-webkit-user-select:none;user-select:none;
  }
  .nav-links a::after{display:none}
  .nav-links a:hover{color:#C6A66A;background:rgba(198,166,106,.06)}
  .nav-links a:active{background:rgba(198,166,106,.12)}
  .hamburger-btn{display:flex;margin-left:auto}
}