/*
 * ============================================================
 *  PEACHTREE LODGE — HERO & HEADER SIZE PATCH
 *  Fixes: hero too tall, blank white background, mobile sizing
 *  Does NOT touch: cart popup, nav links, footer, room cards
 *  Does NOT add new text: only resizes and adds background
 * ============================================================
 */

/* ── 1. HEADER CONTAINER: fix the giant blank white space ────── */

/* Remove the 100vh height that creates the huge empty area */
#index header#header {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  /* Fallback gradient when no hero image is set in QloApps admin */
  background-color: #1A2820 !important;
  background-image:
    linear-gradient(
      160deg,
      #0D1E18 0%,
      #1A2820 35%,
      #243529 65%,
      #1A2820 100%
    ) !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle texture overlay on the header (decorative, no images needed) */
#index header#header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(196,151,58,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 40%, rgba(42,92,69,0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* All children above the overlay */
#index header#header > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ── 2. BANNER (the "Welcome To / Peachtree Lodge" text block) ── */

/* The banner hook wrapper — control vertical spacing */
#index header .banner {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 64px 24px 32px !important;
  text-align: center !important;
  background: transparent !important;
  min-height: 300px !important;     /* Enough room, not excessive */
}

/* Inner container */
#index header .banner .container {
  max-width: 680px !important;
}

/* The "Welcome To" label line */
#index header .banner .wk_hotel_banner_eyebrow,
#index header .banner p:first-child,
#index header .banner > .container > .row > div > *:first-child {
  color: rgba(196, 151, 58, 0.9) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* QloApps injects the hotel name / welcome text via its banner module.
   We target ANY text element inside .banner to apply the luxury style. */
#index header .banner h1,
#index header .banner h2,
#index header .banner h3,
#index header .banner .wk_hotel_banner_title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 16px !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3) !important;
}

/* The subtitle line */
#index header .banner p,
#index header .banner .wk_hotel_banner_subtitle {
  font-family: 'Jost', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.65) !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0 !important;
}

/* Decorative rule under title */
#index header .banner h1::after,
#index header .banner h2::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 1px !important;
  background: #C4973A !important;
  margin: 20px auto 0 !important;
}

/* ── 3. NAV BAR on index page: keep it visible over dark bg ──── */

/* With dark background on hero, the transparent nav is now readable.
   On scroll, it locks to solid dark as before. */
#index header #nav-main {
  background-color: rgba(13, 30, 24, 0.0) !important;
  border-bottom: 1px solid rgba(196, 151, 58, 0.0) !important;
}
#index header #nav-main.nav-scrolled {
  background-color: rgba(13, 30, 24, 0.97) !important;
  border-bottom-color: rgba(196, 151, 58, 0.25) !important;
}

/* Non-index pages: nav always solid */
body:not(#index) header #nav-main {
  background-color: #1A2820 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* ── 4. HEADER-TOP (logo row): not too tall ───────────────────── */

#index header .header-top {
  background: transparent !important;
  border-bottom: none !important;
  padding: 12px 0 24px !important;   /* Tighter padding */
}

/* Logo: smaller and inverted white on dark bg */
header #header_logo img {
  max-height: 48px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}

/* ── 5. SEARCH PANEL: polish the existing gray bar ───────────── */

/* The search panel sits at the bottom of the header-top on index */
/* Target common QloApps search panel class names */
#index .wk_hotel_search_block,
#index .hotel_search_block_container,
#index [class*="search_hotel"],
#index [class*="hotel_search"] {
  background: rgba(20, 30, 25, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(196, 151, 58, 0.22) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 0 auto 0 !important;
  max-width: 1100px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
}

/* Search inputs */
#index [class*="hotel_search"] input,
#index [class*="search_hotel"] input,
#index [class*="hotel_search"] select,
#index [class*="search_hotel"] select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  color: #FFFFFF !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}
#index [class*="hotel_search"] input::placeholder,
#index [class*="search_hotel"] input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
#index [class*="hotel_search"] input:focus,
#index [class*="search_hotel"] input:focus {
  border-color: #C4973A !important;
  box-shadow: 0 0 0 3px rgba(196,151,58,0.18) !important;
  outline: none !important;
}

/* Search button */
#index [class*="hotel_search"] button[type="submit"],
#index [class*="hotel_search"] .search_btn,
#index [class*="hotel_search"] input[type="submit"],
#index [class*="search_hotel"] button[type="submit"],
#index [class*="search_hotel"] .search_btn {
  background: #C4973A !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #1A2820 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(196,151,58,0.35) !important;
  text-shadow: none !important;
}
#index [class*="hotel_search"] button[type="submit"]:hover,
#index [class*="search_hotel"] button[type="submit"]:hover {
  background: #D4AA5A !important;
  transform: translateY(-1px) !important;
}

/* Search label */
#index [class*="hotel_search"] label,
#index [class*="search_hotel"] label {
  color: rgba(196, 151, 58, 0.85) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-family: 'Jost', sans-serif !important;
  margin-bottom: 6px !important;
  display: block !important;
}


/* ── 6. MOBILE FIXES ─────────────────────────────────────────── */

@media (max-width: 991px) {
  #index header .banner {
    min-height: 220px !important;
    padding: 48px 20px 24px !important;
  }
  #index header .banner h1,
  #index header .banner h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  #index header .banner p {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  /* Hero much more compact on mobile */
  #index header .banner {
    min-height: 160px !important;
    padding: 40px 16px 20px !important;
  }
  #index header .banner h1,
  #index header .banner h2,
  #index header .banner h3 {
    font-size: clamp(24px, 8vw, 36px) !important;
    margin-bottom: 10px !important;
  }
  #index header .banner p {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }
  /* Logo compact on mobile */
  header #header_logo img {
    max-height: 36px !important;
  }
  /* Header-top padding tighter */
  #index header .header-top {
    padding: 8px 0 16px !important;
  }
  /* Search panel full-width on mobile */
  #index [class*="hotel_search"],
  #index [class*="search_hotel"] {
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 !important;
  }
}


/* ── 7. COLUMNS CONTAINER: pages below header ────────────────── */

/* The main page content (room listings, etc.) */
.columns-container {
  background-color: #F9F6F1 !important;
}
#center_column {
  padding-top: 24px !important;
  padding-bottom: 40px !important;
}


/* ── 8. DO NOT TOUCH — cart popup isolation ──────────────────── */
/*
   The .blockcart and its dropdown/popup (#blockcart-content, etc.)
   retain their original QloApps/Webkul styles.
   These selectors are intentionally left out of this patch.
*/