/* ===== Homepage re-skin — "Quiet luxury, held in firelight" =====
   Scoped to index.html only (the one page that loads it). Redeclares the
   shared styles.css / glass-theme.css custom properties on `body` — they
   cascade to every component that already reads var(--charcoal) / var(--gold)
   / etc. — instead of editing those shared files, so admin / investor /
   front-desk / kiosk keep their own palette. Loaded after styles.css and
   glass-theme.css so it wins the cascade.

   Phase 6a of the frontend rework: the previous teal "Glassmorphism Mist"
   palette is swapped for the warm brass / charcoal / ember firelight system,
   matching tokens.css so the guest-facing homepage reads as the same hotel
   as every staff-facing surface. The legacy token *names* below are unchanged
   — only their values move from teal to gold — so every existing
   var(--gold) / var(--gold-soft) / etc. rule in styles.css picks up the warm
   tone automatically. Values are taken from tokens.css. */

body {
    /* styles.css tokens — warm firelight, from tokens.css */
    --charcoal: #14110d;
    --charcoal-soft: #1e1a14;
    --gold: #d3a866;
    --gold-soft: #e7c28c;
    --cream: #14110d;
    --white: #1e1a14;
    --text-dark: #f0e7d8;
    --text-light: #ab9d89;
    --on-gold: #1c150c;
    --glass-bg: rgba(240, 231, 216, 0.05);
    --glass-border: rgba(240, 231, 216, 0.12);
    --hair: rgba(240, 231, 216, 0.13);
    --gold-glow: rgba(211, 168, 102, 0.4);
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);

    /* glass-theme.css tokens */
    --bg-primary: #14110d;
    --bg-secondary: #1e1a14;

    /* Palette shift only — glass-theme.css sets a hardcoded body
       color/gradient rather than reading these vars, so both are
       re-declared directly here too. The top-left glow is ember, echoing
       the --firelight signature in tokens.css. */
    background: radial-gradient(90% 60% at 15% -10%, rgba(217, 126, 82, 0.10) 0%, transparent 55%), linear-gradient(135deg, var(--bg-primary) 0%, #1a1511 100%) !important;
    color: rgba(240, 231, 216, 0.92);
}

/* ---------- Typography: Instrument Serif display, Hanken Grotesk body -------
   styles.css sets 'Playfair Display' directly on ~20 heading/price selectors,
   many at a higher specificity than a bare h1-h6, and those fonts are no
   longer loaded — so these rules use !important to make sure every heading
   lands on Instrument Serif rather than a raw serif fallback. Instrument
   Serif ships weight 400 only; forcing 400 avoids a synthesized faux-bold. */
body {
    font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6,
legend,
.hero-content h1,
.room-card .tier-price,
.catering-item-row .ci-price {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
}
h1, h2, h3, h4, h5, h6, legend, .hero-content h1 {
    font-weight: 400 !important;
}
.hero-content h1 em,
h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

/* ---------- Text color cleanup for glass-theme's hardcoded whites ---------- */
input, textarea, select {
    color: var(--text-dark) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(240, 231, 216, 0.4) !important;
}
.glass-card, .kiosk-card {
    border-color: var(--glass-border) !important;
}

/* Native <select> dropdown popups: most browsers ignore the select's own
   background:transparent for the opened option list and fall back to a
   plain white popup. Combined with the page's near-white text color, every
   opened dropdown (Room Type, Purpose of Stay, Marital Status, Payment
   Method, Guests) was rendering white text on a white popup — invisible
   until you drag-selected it. Styling <option> directly fixes the popup
   without changing the closed control's seamless transparent look. */
.form-group select option {
    background-color: #14110d;
    color: #f0e7d8;
}

/* The hero availability search (Arrival/Departure/Guests) is its own glass
   panel with light-on-dark text already handled in styles.css's
   .hero-search-field rules — nothing extra needed here for it. */

/* Form field labels (FULL NAME, PHONE NUMBER, MARITAL STATUS, etc. on the
   booking/contact/review forms) were --text-light, a muted taupe that
   photographs and low-brightness screens wash out to near-invisible.
   Brightened to the same near-white used for body text. */
.form-group label {
    color: var(--text-dark);
}

/* ---------- Hero: swap the leftover accent gradients/outlines for the warm
   gold + ember used everywhere else on the page, and tint the glass panels
   so they read as one firelit scene with the photo. ---------- */
.glass-panel {
    background: rgba(20, 16, 11, 0.42) !important;
    border-color: rgba(224, 180, 92, 0.16) !important;
}
.hero-booking-panel {
    background: rgba(20, 16, 11, 0.5) !important;
}
.hero-action-btn {
    color: var(--gold-soft) !important;
    border-color: rgba(211, 168, 102, 0.45) !important;
}
.hero-action-btn:hover {
    background: rgba(211, 168, 102, 0.14) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}
.hero-search-btn {
    background: linear-gradient(135deg, #e0b45c 0%, #bf5f33 100%) !important;
    color: #1c150c !important;
    box-shadow: 0 8px 20px rgba(191, 95, 51, 0.32) !important;
}
.hero-search-btn:hover {
    box-shadow: 0 12px 25px rgba(191, 95, 51, 0.42) !important;
}

/* ---------- Phase 6b: PESHAWAR — place, stated plainly ----------
   The far parallax layer becomes a Peshawar skyline silhouette (fort
   battlement, the Mahabat Khan dome and minarets, the Cunningham clock
   tower, old-city rooftops, the Khyber hills) instead of generic peaks,
   and a large ghosted wordmark names the city along the base of the hero.
   Both sit behind .hero-content (z-index 2) and never take pointer events. */
.hero-layer-mountains-far {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20400'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23241b12'%20d='M0,400%20L0,300%20L30,300%20L30,286%20L54,286%20L54,300%20L88,300%20L88,286%20L112,286%20L112,300%20L150,300%20L150,266%20L210,266%20L210,256%20L262,256%20L262,230%20L338,230%20L338,262%20L426,262%20L426,130%20L442,116%20L458,130%20L458,238%20L474,238%20A52%2052%200%200%201%20578,238%20L594,238%20L594,130%20L610,116%20L626,130%20L626,262%20L690,262%20L690,150%20L700,150%20L708,132%20L716,150%20L726,150%20L726,262%20L800,262%20L800,290%20L876,290%20L876,266%20L980,266%20L1052,212%20L1120,236%20L1200,180%20L1200,400%20Z'/%3E%3C/svg%3E") !important;
    opacity: 0.9;
}

.hero-wordmark {
    position: absolute;
    left: 50%;
    bottom: 2.5vh;
    transform: translateX(-50%);
    z-index: 1;
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(3.5rem, 15vw, 12rem);
    line-height: 0.8;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(224, 180, 92, 0.28);
    text-stroke: 1px rgba(224, 180, 92, 0.28);
    pointer-events: none;
    user-select: none;
}
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
    .hero-wordmark { color: rgba(224, 180, 92, 0.12); }
}
[data-theme="light"] .hero-wordmark {
    -webkit-text-stroke-color: rgba(133, 93, 29, 0.30);
    text-stroke-color: rgba(133, 93, 29, 0.30);
}
@media (max-width: 640px) {
    .hero-wordmark { bottom: 1.5vh; letter-spacing: 0.04em; }
}

/* ---------- Phase 6c: Explore Peshawar — the inn as a base for the city.
   Photo-free for now: icon + a line of context + a Maps link. The full
   list is on explore-peshawar.html. ---------- */
.explore {
    padding: 110px 0;
    position: relative;
    background:
        radial-gradient(circle at 12% 15%, rgba(211, 168, 102, 0.06), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(217, 126, 82, 0.05), transparent 42%),
        var(--charcoal-soft);
}
.explore > .container { position: relative; z-index: 1; }
.explore h2 { text-align: center; }
.explore .section-intro {
    text-align: center;
    max-width: 62ch;
    margin: 14px auto 52px;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
}
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.explore-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.explore-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-glow);
    box-shadow: var(--shadow);
}
.explore-card i {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 2px;
}
.explore-card h3 { font-size: 1.5rem; }
.explore-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.65;
    flex: 1;
    margin: 0;
}
.explore-dist {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-light);
    opacity: 0.85;
}
.explore-card a {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.88rem;
    align-self: flex-start;
    transition: color 0.2s ease;
}
.explore-card a:hover { color: var(--gold-soft); }
.explore-all {
    display: block;
    text-align: center;
    margin-top: 44px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}
.explore-all:hover { color: var(--gold-soft); }

[data-theme="light"] .explore {
    background:
        radial-gradient(circle at 12% 15%, rgba(169, 123, 46, 0.05), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(191, 95, 51, 0.04), transparent 42%),
        var(--charcoal-soft);
}

/* ---------- Room pricing display — gold accents, matching the homepage
   carousel's price-tag treatment (the price itself still comes straight
   from the live API; this only restyles how it's shown). ---------- */
.room-card .price,
.room-card .tier-price {
    color: var(--gold);
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
}
.room-card .pricing-tier.tier-highlight {
    background: rgba(211, 168, 102, 0.09);
    border-color: var(--gold-glow);
}
.book-btn.primary {
    background: linear-gradient(155deg, #f0c877, var(--gold));
    color: var(--on-gold);
}

/* ---------- Nav ---------- */
.navbar.scrolled {
    background: rgba(20, 17, 13, 0.88) !important;
}

/* ---------- Hardcoded overlays that don't read var(--charcoal) at all, so
   the body-level token override above can't reach them ---------- */
.hero-overlay {
    background: linear-gradient(rgba(20, 17, 13, 0.5), rgba(20, 17, 13, 0.35)) !important;
}
.gallery-item::after {
    background: linear-gradient(to top, rgba(20, 17, 13, 0.85) 0%, rgba(20, 17, 13, 0) 45%) !important;
}
.sticky-cta-bar {
    background: rgba(20, 17, 13, 0.92) !important;
}
/* Crescent Grove facilities carries its own always-dark sub-theme (a
   deliberate "evening venue" mood) — only its base tone and primary accent
   shift so it doesn't read as a seam between the sections either side. */
.crescent-zone {
    background:
        radial-gradient(circle at 15% 20%, rgba(211, 168, 102, 0.08), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(217, 126, 82, 0.07), transparent 45%),
        #14110d !important;
}
.facility-view-btn:hover,
.facility-modal-gallery .fm-dots span.active,
.catering-tab.active, .catering-tab:hover,
.facility-modal-cta {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--on-gold) !important;
}

/* Scroll-reveal animations are handled entirely by the existing
   .reveal / .reveal-title / .reveal-stagger system in script.js and
   styles.css — those already read var(--gold) etc., so they pick up the
   new warm tone automatically. Nothing to duplicate here. */

/* ============================================================
   LIGHT THEME
   Toggled by the nav's .theme-toggle switch (see theme-toggle.js), which
   sets [data-theme="light"] on <html> and persists the choice.
   glass-theme.css ships a light theme, but it's a cool gray-blue SaaS
   palette — wrong brand for this page. book-theme.css loads after it, so
   this block wins and gives the toggle a warm ivory firelight light mode,
   mirroring the tokens.css light palette.
   ============================================================ */
[data-theme="light"] body {
    --charcoal: #f7f3ec;
    --charcoal-soft: #fffdf9;
    --gold: #a97b2e;
    --gold-soft: #855d1d;
    --cream: #f7f3ec;
    --white: #fffdf9;
    --text-dark: #211a12;
    --text-light: #665a4a;
    --on-gold: #1c150c;
    --glass-bg: rgba(33, 26, 18, 0.03);
    --glass-border: rgba(33, 26, 18, 0.1);
    --hair: rgba(33, 26, 18, 0.1);
    --gold-glow: rgba(169, 123, 46, 0.22);
    --shadow: 0 20px 50px rgba(33, 26, 18, 0.1);
    --shadow-lg: 0 30px 70px rgba(33, 26, 18, 0.14);

    --bg-primary: #f7f3ec;
    --bg-secondary: #fffdf9;

    background: radial-gradient(90% 60% at 15% -10%, rgba(169, 123, 46, 0.06) 0%, transparent 55%), linear-gradient(135deg, var(--bg-primary) 0%, #efe8dc 100%) !important;
    color: rgba(33, 26, 18, 0.92);
}

[data-theme="light"] .form-group select option {
    background-color: #fffdf9;
    color: #211a12;
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(247, 243, 236, 0.92) !important;
}

[data-theme="light"] .sticky-cta-bar {
    background: rgba(247, 243, 236, 0.95) !important;
}

/* Crescent Grove keeps its own always-dark sub-theme in both site themes —
   it's a deliberate "evening venue" mood, not meant to flip light. */

/* ============================================================
   AMBIENT GLOW — continuous motion below the hero
   The hero has drifting cloud/sky layers; every section past it was flat,
   static color with only a one-shot fade-in on scroll. Each major section
   now carries the same atmosphere as the hero: a slow-breathing firelight
   glow plus a horizontally drifting warm wisp, both purely decorative
   (behind the content, never affecting layout or readability).
   ============================================================ */
.about, .rooms, .gallery, .reviews-section, .contact, .booking {
    position: relative;
    overflow: hidden;
}
.about > .container,
.rooms > .container,
.gallery > .container,
.reviews-section > .container,
.contact > .container,
.booking > .container {
    position: relative;
    z-index: 1;
}

.about::before, .rooms::before, .gallery::before, .reviews-section::before, .contact::before, .booking::before,
.about::after, .rooms::after, .gallery::after, .reviews-section::after, .contact::after, .booking::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* Firelight glow — a warm gold blob and a dimmer ember blob per section that
   slowly breathe and drift, echoing the hero's mood. */
.about::before, .rooms::before, .gallery::before, .reviews-section::before, .contact::before, .booking::before {
    inset: -25%;
    background:
        radial-gradient(ellipse 46% 34% at 14% 18%, rgba(211, 168, 102, 0.12), transparent 65%),
        radial-gradient(ellipse 38% 30% at 88% 78%, rgba(217, 126, 82, 0.08), transparent 65%);
    animation: auroraDrift 26s ease-in-out infinite alternate;
    will-change: transform;
}
.rooms::before { animation-duration: 32s; animation-delay: -6s; }
.gallery::before { animation-duration: 22s; animation-delay: -12s; }
.reviews-section::before { animation-duration: 28s; animation-delay: -3s; }
.contact::before { animation-duration: 34s; animation-delay: -18s; }
.booking::before { animation-duration: 30s; animation-delay: -9s; }

@keyframes auroraDrift {
    0%   { transform: translate(0%, 0%) scale(1); }
    50%  { transform: translate(3%, -4%) scale(1.12); }
    100% { transform: translate(-2%, 3%) scale(1.05); }
}

/* Warm wisps — thin, blurred streaks that drift sideways across the top of
   each section, the same shape language as the hero's .cloud elements, so
   the glow reads as one continuous layer running the length of the page. */
.about::after, .rooms::after, .gallery::after, .reviews-section::after, .contact::after, .booking::after {
    inset: -10% -40%;
    height: 55%;
    background:
        radial-gradient(ellipse 14% 40% at 10% 30%, rgba(224, 180, 92, 0.08), transparent 70%),
        radial-gradient(ellipse 10% 30% at 45% 55%, rgba(224, 180, 92, 0.05), transparent 70%),
        radial-gradient(ellipse 16% 45% at 78% 20%, rgba(224, 180, 92, 0.06), transparent 70%);
    filter: blur(6px);
    animation: mistDrift 46s linear infinite;
}
.rooms::after { animation-duration: 58s; animation-delay: -10s; }
.gallery::after { animation-duration: 40s; animation-delay: -22s; }
.reviews-section::after { animation-duration: 52s; animation-delay: -5s; }
.contact::after { animation-duration: 60s; animation-delay: -30s; }
.booking::after { animation-duration: 48s; animation-delay: -16s; }

@keyframes mistDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(18%); }
}

@media (prefers-reduced-motion: reduce) {
    .about::before, .rooms::before, .gallery::before, .reviews-section::before, .contact::before, .booking::before,
    .about::after, .rooms::after, .gallery::after, .reviews-section::after, .contact::after, .booking::after {
        animation: none !important;
    }
}

/* ---------- Livelier scroll reveals — the shared .reveal / .reveal-title /
   .reveal-stagger system (styles.css) only fades + slides up; on this page
   it also eases in from a very slight blur and scale, so cards feel like
   they're condensing out of the light rather than just sliding into place. ---------- */
.reveal, .reveal-stagger {
    filter: blur(6px);
    transform: translateY(28px) scale(0.98);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.9s ease;
}
.reveal.is-visible, .reveal-stagger.is-visible {
    filter: blur(0);
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger { filter: none !important; }
}