/* The public site's menu bar. Frappe draws the bar; this makes it the salon's. */
/* The bar follows her down the page: the booking button is the one thing she
   may want at any point, and making her scroll back to the top to reach it is
   the commonest reason a booking is abandoned halfway. */
/* Frappe core sets `html, body { height: 100% }` for its sticky footer, which
   makes the body box exactly one screen tall — and a sticky element only sticks
   inside its parent's box, so the navbar came unstuck the moment the page had
   scrolled one screen. The body still fills the screen, it is just allowed to
   grow past it. */
html { height: 100%; }
body { height: auto; min-height: 100%; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--bty-tint-1, #eee);
  transition: box-shadow .2s cubic-bezier(.2,.6,.35,1), padding .2s cubic-bezier(.2,.6,.35,1);
}
/* Once the page has moved, the bar tightens and lifts off the content. It is
   the one piece of motion that answers something she did, so it is allowed. */
.navbar.bty-stuck {
  box-shadow: 0 1px 0 var(--bty-tint-1, #eee), 0 10px 26px -20px rgba(36, 23, 19, .55);
  padding-top: 4px;
  padding-bottom: 4px;
}
.navbar.bty-stuck .navbar-brand img { max-height: 34px; transition: max-height .2s; }
@media (prefers-reduced-motion: reduce) { .navbar { transition: none; } }
.navbar .nav-link {
  font-weight: 700; font-size: 14.5px; color: var(--bty-deep, #3b0b32);
  padding: 8px 14px; border-radius: 9px;
}
.navbar .nav-link:hover { color: var(--bty-primary, #a3327f); background: var(--bty-wash, #fdf7fb); }
.navbar .nav-link.bty-here { color: var(--bty-primary, #a3327f); background: var(--bty-wash, #fdf7fb); }
/* Booking is the call to action — named, not "whatever happens to be last",
   which made Frappe's own Login button the loudest thing on the bar. */
.navbar .nav-link[href$="/book"] { background: var(--bty-primary, #a3327f); color: #fff; }
.navbar .nav-link[href$="/book"]:hover { background: var(--bty-primary, #a3327f); color: #fff; opacity: .92; }

/* Bootstrap's toggler draws nothing without its icon file */
.navbar-toggler { border-color: var(--bty-tint-2, #e7d7e3); padding: 5px 9px; }
.navbar-toggler .navbar-toggler-icon { display: none; }
.navbar-toggler:after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--bty-deep, #3b0b32); border-radius: 2px;
  box-shadow: 0 6px 0 var(--bty-deep, #3b0b32), 0 -6px 0 var(--bty-deep, #3b0b32);
}

.bty-lang { display: flex; gap: 6px; align-items: center; margin-inline-start: 14px; }
.bty-lang a {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--bty-tint-2, #e7d7e3); color: var(--bty-muted-2, #8a7583);
  text-decoration: none; cursor: pointer; line-height: 1.6;
}
.bty-lang a.on { background: var(--bty-primary, #a3327f); color: #fff; border-color: var(--bty-primary, #a3327f); }
@media (max-width: 991px) {
  .bty-lang { margin-inline-start: auto; margin-inline-end: 10px; }
  .navbar .nav-link { padding: 10px 6px; }
}