/* Lussoro sitewide navbar + footer styles — 2026-10-16
   Loaded on every page so the header and footer render the same everywhere,
   whatever each page's own inline styles say. */
nav#nav .nav-links a {
  font-size: .69rem !important;
  letter-spacing: .17em !important;
  position: relative;
  white-space: nowrap;
}

nav#nav .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--bronze-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

nav#nav .nav-links a:hover::after,
nav#nav .nav-links a:focus-visible::after {
  transform: scaleX(1);
}

nav#nav .nav-cta {
  font-size: .64rem !important;
  letter-spacing: .18em !important;
}

.mobile-menu a {
  font-size: 1.75rem !important;
  letter-spacing: .055em !important;
}

.mobile-menu .mob-cta {
  font-size: .65rem !important;
  letter-spacing: .18em !important;
}

/* Laptops: tighten spacing so the full menu fits on one line */
@media (min-width: 1241px) and (max-width: 1680px) {
  nav#nav {
    padding-left: 40px !important;
    padding-right: 40px !important;
    column-gap: 24px;
  }

  nav#nav .nav-logo img {
    width: 210px !important;
  }

  nav#nav .nav-links {
    gap: 22px !important;
  }

  nav#nav .nav-links a {
    letter-spacing: .12em !important;
  }

  nav#nav .nav-cta {
    padding: 12px 22px !important;
    letter-spacing: .14em !important;
    white-space: nowrap;
  }
}

/* Smaller laptops (1280-1440 wide) need a little more room */
@media (min-width: 1241px) and (max-width: 1439px) {
  nav#nav {
    grid-template-columns: auto 1fr auto !important;
  }

  nav#nav .nav-links {
    justify-self: center;
    gap: 18px !important;
  }

  nav#nav .nav-links a {
    font-size: .64rem !important;
    letter-spacing: .1em !important;
  }

  nav#nav .nav-logo img {
    width: 190px !important;
  }
}

/* Tablets and landscape phones: the links don't fit, so use the menu button */
@media (min-width: 769px) and (max-width: 1240px) {
  nav#nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  nav#nav .nav-links {
    display: none !important;
  }

  nav#nav .nav-logo img {
    width: 220px !important;
  }

  nav#nav .nav-right {
    margin-left: auto !important;
    gap: 20px;
  }

  nav#nav .nav-cta {
    display: inline-block !important;
    white-space: nowrap;
  }

  nav#nav .hamburger {
    display: flex !important;
  }
}

/* Open menu: keep the close button tappable above the overlay, and let a
   tall menu scroll on short screens */
body:has(.mobile-menu.open) nav#nav {
  z-index: 200 !important;
}

body:has(.mobile-menu.open) nav#nav .nav-cta {
  visibility: hidden;
}

body:has(.mobile-menu.open) #sticky-cta {
  display: none !important;
}

.mobile-menu.open {
  overflow-y: auto;
}

@media (max-height: 700px) and (max-width: 1240px) {
  .mobile-menu {
    justify-content: flex-start !important;
    padding-top: 96px;
    padding-bottom: 32px;
  }

  .mobile-menu a {
    font-size: 1.45rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .mobile-menu .mob-cta {
    margin-top: 20px !important;
  }
}

@media (max-width: 1240px) {
  .mobile-menu.open ~ .lussoro-chat-root {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Footer: one type scale on every page */
footer {
  padding: 72px clamp(24px, 6vw, 64px) 44px !important;
}

footer .footer-col-head {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase;
  color: #a97c50 !important;
}

footer .footer-tagline,
footer .footer-col-links a,
footer .footer-col-links span {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .84rem !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  color: rgba(247, 242, 234, .72) !important;
}

footer .footer-col-links a:hover {
  color: var(--bronze-pale, #ddb98a) !important;
}

footer .footer-copy {
  font-size: .74rem !important;
  font-weight: 300 !important;
  letter-spacing: .06em !important;
}

footer .footer-social a {
  font-size: .7rem !important;
  font-weight: 300 !important;
  letter-spacing: .2em !important;
}

@media (max-width: 768px) {
  footer {
    padding: 56px 24px 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav#nav .nav-links a::after {
    transition: none;
  }
}