/* ══════════════════════════════════════════════════════════════════════════
   The Balkrishna Palace — shared styles
   Loaded by index.html and every page under rooms/.
   Tailwind (Play CDN) handles layout; this file holds the bits Tailwind
   cannot express: gradients-as-text, the ornament rule, and hover choreography.
   ══════════════════════════════════════════════════════════════════════════ */

* { scroll-behavior: smooth; box-sizing: border-box; }

body { background: #080808; color: #F5F0E8; font-family: 'Inter', sans-serif; }

/* ── Gold gradient text ── */
.gold-text {
  background: linear-gradient(135deg, #D09A55 0%, #AD7535 50%, #7A4F1E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Ornament divider ── */
.ornament { display: flex; align-items: center; gap: 16px; }
.ornament::before, .ornament::after {
  content: ''; height: 1px; width: 60px;
}
.ornament::before { background: linear-gradient(90deg, transparent, #AD7535); }
.ornament::after  { background: linear-gradient(90deg, #AD7535, transparent); }
.ornament.center  { justify-content: center; }

/* ── Nav ── */
#navbar { transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.3s ease; }
.nav-scrolled {
  background: rgba(8, 8, 8, 0.96) !important;
  backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(173,117,53,0.15);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ── Gold border button ── */
.btn-gold {
  position: relative; overflow: hidden;
  border: 1px solid #AD7535; color: #AD7535;
  transition: color 0.3s ease;
}
.btn-gold::before {
  content: ''; position: absolute; inset: 0;
  background: #AD7535; transform: scaleX(0);
  transform-origin: left; transition: transform 0.3s ease; z-index: 0;
}
.btn-gold span, .btn-gold i { position: relative; z-index: 1; }
.btn-gold:hover { color: #080808; }
.btn-gold:hover::before { transform: scaleX(1); }

/* ── Hero ── */
.hero-title { text-shadow: none; }
.hero-title .hero-line-white { text-shadow: 0 2px 24px rgba(0,0,0,0.85); }

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.4; }
}
.scroll-indicator { animation: scroll-bounce 2.2s ease infinite; }

/* ── Room cards ── */
.room-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.room-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(173,117,53,0.12);
}

/* ── Amenity hover ── */
.amenity-item { transition: border-color 0.3s ease, background 0.3s ease; }
.amenity-item:hover { border-color: rgba(173,117,53,0.4); background: rgba(173,117,53,0.04); }
.amenity-icon { transition: color 0.3s ease, transform 0.3s ease; }
.amenity-item:hover .amenity-icon { color: #AD7535; transform: scale(1.15); }

/* ── Gallery ── */
.gallery-item {
  overflow: hidden; cursor: pointer; display: block;
  padding: 0; border: 0; background: none; width: 100%;
}
.gallery-item img { transition: transform 0.6s ease; display: block; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay { opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }

/* ── Booking platform cards ── */
.booking-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.booking-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(173,117,53,0.15);
  border-color: rgba(173,117,53,0.5);
}

/* ── Mobile menu ── */
#mobile-menu {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  background: #080808;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
#mobile-menu.open { max-height: 640px; opacity: 1; }

/* ── WhatsApp pulse ── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.pulse-green { animation: pulse-ring 2.2s infinite; }

/* ── Lightbox ── */
#lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.96); z-index: 9999;
  align-items: center; justify-content: center;
}
#lightbox.active { display: flex; }

/* ── Swiper dots color ── */
.swiper-pagination-bullet-active { background: #AD7535 !important; }
.swiper-pagination-bullet { background: rgba(173,117,53,0.3) !important; }

/* ── FAQ accordion ──
   Native <details> so every answer sits in the HTML at crawl time; an
   accordion that hides its answers behind JavaScript is worth nothing to the
   FAQ rich result the JSON-LD on this page asks for. */
.faq > summary { list-style: none; cursor: pointer; }
.faq > summary::-webkit-details-marker { display: none; }
.faq-plus { transition: transform 0.3s ease; }
.faq[open] .faq-plus { transform: rotate(45deg); }
.faq[open] .faq-q { color: #AD7535; }

/* ── Nearby cards ── */
.nearby-card { transition: border-color 0.3s ease; }
.nearby-card:hover { border-color: rgba(173,117,53,0.3); }