:root {
  --display: "Playfair Display", Georgia, serif;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --graphite: #343331;
  --graphite-hover: #2b2b2b;
}

button.bg-black,
a.bg-black,
button.bg-gray-900,
a.bg-gray-900,
button.bg-\[\#191b1f\],
a.bg-\[\#191b1f\] {
  background-color: var(--graphite) !important;
}

button.bg-black:hover,
a.bg-black:hover,
button.bg-gray-900:hover,
a.bg-gray-900:hover,
button.bg-\[\#191b1f\]:hover,
a.bg-\[\#191b1f\]:hover {
  background-color: var(--graphite-hover) !important;
}

/* Booking actions keep the stronger black treatment. */
#desktop-menu > a.book-now-btn,
#fullscreen-menu nav > a[data-i18n="nav_book"],
#hero-cta,
#submit-btn,
.submit-btn,
#confirm-booking,
a[href^="/booking"].bg-gray-900 {
  background: #191b1f !important;
  background-color: #191b1f !important;
}

#desktop-menu > a.book-now-btn:hover,
#fullscreen-menu nav > a[data-i18n="nav_book"]:hover,
#hero-cta:hover,
#submit-btn:hover,
.submit-btn:hover,
#confirm-booking:hover,
a[href^="/booking"].bg-gray-900:hover {
  background: #111317 !important;
  background-color: #111317 !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Montserrat", Arial, sans-serif !important;
}

body {
  font-weight: 300;
  color: #2b2b2b;
}

h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: 0 !important;
}

/* Keep controls and navigation distinct while body copy remains Montserrat Light. */
button,
input,
select,
textarea,
nav,
.btn,
.book-now-btn {
  font-family: "Montserrat", Arial, sans-serif !important;
}

.site-footer {
  font-family: "Montserrat", Arial, sans-serif !important;
}

/* Navigation stays compact and highly legible across all languages. */
#desktop-menu > a,
#fullscreen-menu nav > a,
.header-card > .nav > a {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0 !important;
}

#desktop-menu > a,
.header-card > .nav > a {
  font-size: 1rem !important;
  color: #2b2b2b !important;
  white-space: nowrap;
}

#fullscreen-menu nav > a {
  font-weight: 700;
}

/* Animated menu accents repeat the restrained shimmer of the main booking CTA. */
#desktop-menu > a.book-now-btn,
#fullscreen-menu nav > a[data-i18n="nav_book"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0.65rem 0.95rem;
  border-radius: 8px;
  background: linear-gradient(110deg, #292826, #454440, #343331, #292826);
  background-size: 280% 280%;
  color: #fff !important;
  animation: nbh-menu-shimmer 4.5s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#desktop-menu > a.book-now-btn::after,
#fullscreen-menu nav > a[data-i18n="nav_book"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 55%;
  transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: nbh-menu-shine 3.8s ease-in-out infinite;
  pointer-events: none;
}

#desktop-menu > a.book-now-btn:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -13px rgba(28,27,25,0.8);
}

#fullscreen-menu nav > a[data-i18n="nav_book"] {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 0 22px rgba(255,255,255,0.3);
}

@keyframes nbh-menu-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes nbh-menu-shine {
  0%, 45% { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
  55% { opacity: 1; }
  75%, 100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #desktop-menu > a.book-now-btn,
  #desktop-menu > a.book-now-btn::after,
  #fullscreen-menu nav > a[data-i18n="nav_book"],
  #fullscreen-menu nav > a[data-i18n="nav_book"]::after {
    animation: none;
  }
}

/* Increase contrast of light utility copy on public page backgrounds. */
main .text-gray-400 {
  color: #686763 !important;
}

main .text-gray-500,
main .text-gray-600 {
  color: #4f4e4b !important;
}