/*
 * theme.css — Krishna Palace design tokens.
 * Quiet-luxury boutique hotel: warm ivory ground, deep charcoal ink and
 * action fill, a muted gold used only for links and thin accents.
 */

:root {
  --canvas: #f8f5ef;
  --surface: #fcfbf8;
  --surface-2: #e8e0d3;
  --border: #e2d9c8;
  --border-strong: #cabc9f;
  --ink: #25231f;
  --muted: #666461;

  --accent: #25231f;
  --accent-hover: #3a3630;
  --accent-ink: #f8f5ef;
  --accent-text: #7f653a;
  --accent-strong: #25231f;
  --accent-soft: #efe6d3;
  --accent-border: #cbb98d;

  --success: #3f6b4b;
  --success-ink: #ffffff;
  --success-soft: #e4ebe1;
  --success-strong: #35573d;
  --warning: #9c6b23;
  --warning-ink: #ffffff;
  --warning-soft: #f1e6d4;
  --warning-strong: #85591b;
  --danger: #8a3b32;
  --danger-ink: #ffffff;
  --danger-soft: #f1e0dc;
  --danger-strong: #7a3129;

  --chart-1: #7f653a;
  --chart-2: #25231f;
  --chart-3: #9c6b23;
  --chart-4: #6c7a63;
  --chart-5: #8a3b32;
  --chart-6: #4f5b6a;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.16em;

  --radius-btn: 10px;
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px rgba(37, 35, 31, 0.05);
  --shadow-raised: 0 20px 44px -20px rgba(37, 35, 31, 0.28);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 500;
  --measure: 62ch;

  --x-gold: #b99a62;
  --x-charcoal: #17150f;
  --x-band: #211f1a;
  --x-band-ink: #f2ece0;
  --x-band-muted: #b7ae9c;
  --x-hairline: rgba(37, 35, 31, 0.14);
  --x-hairline-on-dark: rgba(242, 236, 224, 0.16);
  --x-overlay-strong: rgba(20, 18, 14, 0.62);
  --x-overlay-soft: rgba(20, 18, 14, 0.22);
}

html[data-theme="dark"] {
  --canvas: #19170f;
  --surface: #211e17;
  --surface-2: #2a261c;
  --border: #38321f;
  --border-strong: #4c4429;
  --ink: #f1ebde;
  --muted: #a89c85;

  --accent: #efe6d3;
  --accent-hover: #ffffff;
  --accent-ink: #201c14;
  --accent-text: #c9a768;
  --accent-strong: #f1ebde;
  --accent-soft: #332c1c;
  --accent-border: #5a4c2c;

  --success: #6f9c79;
  --success-ink: #12271a;
  --success-soft: #223226;
  --success-strong: #9ccaa5;
  --warning: #cf9c4f;
  --warning-ink: #241a0a;
  --warning-soft: #332a17;
  --warning-strong: #e0b877;
  --danger: #c17b6d;
  --danger-ink: #241210;
  --danger-soft: #362320;
  --danger-strong: #dba295;

  --chart-1: #c9a768;
  --chart-2: #f1ebde;
  --chart-3: #cf9c4f;
  --chart-4: #9db292;
  --chart-5: #c17b6d;
  --chart-6: #8fa3bd;

  --x-gold: #c9a768;
  --x-charcoal: #0f0e0a;
  --x-band: #100f0b;
  --x-band-ink: #f1ebde;
  --x-band-muted: #948a72;
  --x-hairline: rgba(241, 235, 222, 0.14);
  --x-hairline-on-dark: rgba(241, 235, 222, 0.14);
  --x-overlay-strong: rgba(6, 5, 3, 0.68);
  --x-overlay-soft: rgba(6, 5, 3, 0.3);
}

/*
 * app.css — Krishna Palace's own screens: the transparent-to-solid header,
 * the hero photograph and its scrim, the dark statement bands, the floating
 * booking bar, the masonry gallery and its lightbox, and the one entrance
 * this page uses (the hero, and the gallery grid — nothing else moves).
 */

/* ---- Header: transparent over the hero, solid once the page has moved. --- */
.navbar {
  transition: background-color 220ms var(--ease, ease), border-color 220ms var(--ease, ease), color 220ms var(--ease, ease);
}
.navbar-ghost {
  /* A real, opaque backing (not the literal transparent keyword) so the
     wordmark and nav links always have guaranteed contrast, in every mode
     and at every viewport — not just wherever the hero photo happens to be
     light or dark underneath. */
  background: var(--x-charcoal);
  border-bottom: 1px solid transparent;
  color: var(--x-band-ink);
}
html[data-scrolled] .navbar-ghost {
  background: var(--surface);
  border-bottom-color: var(--x-hairline);
  color: var(--ink);
}
.navbar-solid {
  background: var(--surface);
  border-bottom: 1px solid var(--x-hairline);
  color: var(--ink);
}
.navbar .nav-link { color: inherit; opacity: 0.86; }
.navbar .nav-link:hover { opacity: 1; text-decoration: none; }
.navbar .nav-toggle { color: inherit; }

/* ---- Hero photograph + scrim ---------------------------------------------- */
.hero-media { z-index: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .hero-scrim {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--x-charcoal) 55%, transparent) 0%, transparent 32%, transparent 55%, var(--x-overlay-strong) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--x-charcoal) 35%, transparent) 0%, transparent 45%);
}

/* Hero entrance — the ONE moment that moves on load. */
.hero-eyebrow, .hero-title { opacity: 1; transform: none; }
@media not (prefers-reduced-motion: reduce) {
  html:not(.reduced-motion) .hero-eyebrow { animation: kp-rise 700ms var(--ease-out, ease) both 120ms; }
  html:not(.reduced-motion) .hero-title { animation: kp-rise 800ms var(--ease-out, ease) both 260ms; }
  html:not(.reduced-motion) .booking-bar { animation: kp-rise 700ms var(--ease-out, ease) both 460ms; }
}
@keyframes kp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---- Floating booking bar --------------------------------------------------- */
.booking-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  padding: 1.5rem;
}

/* ---- Dark statement bands (Location, Closing) ------------------------------ */
.band-dark {
  background: var(--x-band);
}
.band-dark .icon { color: inherit; }

/* ---- Map graphic (Location section) ---------------------------------------- */
.map-graphic { height: auto; }

/* ---- Rooms: amenity icon fills ---------------------------------------------- */
#rooms .icon { color: var(--muted); }

/* ---- Masonry gallery --------------------------------------------------------- */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 11rem;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .masonry-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 9.5rem; gap: 1rem; }
}
.masonry-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  cursor: zoom-in;
  padding: 0;
  border: none;
}
.masonry-item .masonry-caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--x-band-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 180ms ease;
}
.masonry-item:hover .masonry-caption, .masonry-item:focus-visible .masonry-caption { opacity: 1; }
.masonry-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.masonry-item:hover::after, .masonry-item:focus-visible::after { opacity: 1; }

/* Gallery grid entrance — the other moment that moves; staggered per tile.
   Resting state is always visible: app.js only adds .will-reveal (the hidden
   offset) right before it observes each tile, so a visitor whose script
   never ran simply sees the grid, already in place. */
.masonry-item.will-reveal { opacity: 0; transform: translateY(14px); }
.masonry-item.will-reveal.is-in { animation: kp-rise 560ms var(--ease-out, ease) both; }

/* ---- Lightbox ------------------------------------------------------------------ */
.lightbox {
  background: color-mix(in srgb, var(--x-charcoal) 96%, transparent);
}
.lightbox.is-open { display: block; }

/* ---- Review carousel: hide the scrollbar, keep the scroll. -------------------- */
.review-track { scrollbar-width: none; }
.review-track::-webkit-scrollbar { display: none; }

/* html.reduced-motion kill-switch, mirrored here for the two animations above. */
html.reduced-motion .hero-eyebrow,
html.reduced-motion .hero-title,
html.reduced-motion .booking-bar,
html.reduced-motion .masonry-item {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}