/* =======================
   ROOT VARIABLES
   ======================= */
:root {
  /* Primary Accent - warm, earthy */
  --accent: #a77f52;      /* warm brown-gold */
  
  /* Dark Text - softer than black */
  --dark: #3a352c;        /* deep warm brown */
  
  /* Muted Text - soft, cozy tone */
  --muted: #7a7163;       /* warm gray-brown */
  
  /* Card / Section Background */
  --card-bg: #f7f3ee;     /* soft cream / off-white */
  
  /* Page Background */
  --bg: #f2ece4;          /* light warm beige */
  
  /* Hero Overlay Gradient */
  --hero-overlay: rgba(58, 53, 44, 0.5);  /* slightly darker for better text contrast */
  
  /* Subtle Patterns / Lines */
  --pattern-line: rgba(0,0,0,0.02);      /* very soft for textured background */
}

/* =======================
   GLOBAL STYLES
   ======================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(45deg, var(--pattern-line) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pattern-line) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pattern-line) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pattern-line) 75%);
  background-size: 10px 10px;
  z-index: 0;
}

/* =======================
   TYPOGRAPHY
   ======================= */
.h-font {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.4px;
  color: #5e4d3d; /* soft warm brown for headings */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dark);
  margin: 0.5em 0;
}

p, span, li {
  color: var(--dark);
}

.muted {
  color: var(--muted);
}

/* =======================
   NAVBAR - FULL FIX
   ======================= */
.navbar {
  position: absolute;  /* stays on top of hero */
  width: 100%;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, color 0.3s ease, padding 0.3s ease;
  z-index: 10;
  padding: 1rem 2rem;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #ffffff;  /* white for contrast over hero */
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar .navbar-brand {
  font-weight: 700;
}

.navbar .nav-link:hover {
  color: var(--accent);  /* accent on hover */
}

.navbar.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(247, 243, 238, 0.95) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  padding: 0.75rem 2rem;
}

.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav-link {
  color: var(--dark);
}

.navbar.scrolled .nav-link:hover {
  color: var(--accent);
}

.navbar-toggler {
  border: none;
  background: rgba(255,255,255,0.2);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/ %3E%3C/svg%3E");
}

.navbar-collapse .nav-link {
  padding: 0.5rem 1rem;
}

.navbar,
.navbar .nav-link,
.navbar .navbar-brand {
  transition: all 0.3s ease;
}

.navbar.sticky-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* =======================
   BUTTONS
   ======================= */
.btn-accent {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 0.5em 1em;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-accent:hover {
  opacity: 0.95;
}

/* =======================
   HERO / TOP SLIDER
   ======================= */
.hero-swiper .swiper-slide {
  height: 100vh;        /* full viewport height */
  min-height: 420px;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.swiper-hero .swiper-slide {
  position: relative;
  display: flex !important;
  align-items: center !important;
  height: 100vh;
  min-height: 420px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-swiper .hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
  pointer-events: none;
}

.hero-swiper .hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  color: #ffffff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.45);
  top: 50%;
  transform: translateY(-50%);
}

.hero-swiper .hero-content h1,
.hero-swiper .hero-content h2,
.hero-swiper .hero-content h3,
.hero-swiper .hero-content h4,
.hero-swiper .hero-content h5,
.hero-swiper .hero-content h6 {
  color: #ffffff;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.hero-swiper .hero-content p,
.hero-swiper .hero-content span {
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 1em;
}

/* override muted only for hero */
.hero-swiper .hero-content p.muted {
  color: #ffffff;
  opacity: 0.9;
}

.hero-swiper .hero-content .btn {
  font-weight: 600;
  border-radius: 8px;
}

.hero-swiper .hero-content .btn-outline-light {
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.8);
  background: transparent;
  transition: all 0.3s ease;
}

.hero-swiper .hero-content .btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

/* =======================
   HERO / RESPONSIVE TYPOGRAPHY
   ======================= */
.hero-swiper .hero-content h1 {
  font-size: 2.6rem;       /* default mobile */
  line-height: 1.2;
}

.hero-swiper .hero-content h2 {
  font-size: 2rem;
}

.hero-swiper .hero-content p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5em;
}

.hero-swiper .hero-content .btn {
  font-size: 0.95rem;
  padding: 0.55em 1.25em;
}

.hero-swiper .hero-content .btn i {
  margin-right: 0.5em;
}

@media (min-width: 576px) {
  .hero-swiper .hero-content h1 { font-size: 3rem; }
  .hero-swiper .hero-content p { font-size: 1.05rem; }
  .hero-swiper .hero-content .btn { font-size: 1rem; }
}

@media (min-width: 992px) {
  .hero-swiper .hero-content h1 { font-size: 3.6rem; }
  .hero-swiper .hero-content h2 { font-size: 2.4rem; }
  .hero-swiper .hero-content p { font-size: 1.15rem; }
  .hero-swiper .hero-content .btn { font-size: 1.05rem; padding: 0.65em 1.5em; }
}

@media (min-width: 1200px) {
  .hero-swiper .hero-content h1 { font-size: 4rem; }
  .hero-swiper .hero-content h2 { font-size: 2.6rem; }
  .hero-swiper .hero-content p { font-size: 1.2rem; }
  .hero-swiper .hero-content .btn { font-size: 1.1rem; padding: 0.75em 1.75em; }
}

/* Swiper adjustments */
.swiper-hero .swiper-wrapper { overflow: hidden; }
.swiper-hero .swiper-button-next,
.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-pagination { z-index: 3; }
.swiper-hero .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; opacity: 0.9; }
.swiper-hero .swiper-button-next,
.swiper-hero .swiper-button-prev { display: none !important; }

/* Gallery Swiper */
.gallery-swiper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.gallery-swiper .swiper-pagination {
  position: absolute !important;
  bottom: 10px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10;
}

.gallery-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--muted);
  opacity: 0.6;
  margin: 0 5px;
}

.gallery-swiper .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
}

/* =======================
   SECTIONS & CARDS
   ======================= */
section { padding: 60px 0; }

.section-title { 
  font-size: 1.6rem; 
  margin-bottom: 14px; 
  color: var(--dark);
}

.card-ghost {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(58, 53, 44, 0.06);
  padding: 22px;
  transition: all 0.3s ease;
}

.card-ghost:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(58, 53, 44, 0.1);
}

/* =======================
   ROOMS / SERVICES
   ======================= */
.room-card img {
  border-radius: 10px;
  object-fit: cover;
  height: 220px;
}

.room-card .card-body { padding: 14px; }

/* =======================
   GALLERY
   ======================= */
.gallery .img {
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(58,53,44,0.08);
}

.gallery .grid-gap { gap: 12px; }

/* =======================
   FOOTER
   ======================= */
footer {
  background: #3a352c;
  color: #fff3e6;
  padding: 40px 0;
}

footer p {
  color: #fff3e6;
}

footer .footer-contact .footer-text {
  color: #fff3e6;
}

footer a { 
  color: #ffe8c9;
  text-decoration: none; 
}

footer a:hover { color: var(--accent); }

footer small { 
  color: #f5dec8;
}

/* =======================
   MODAL / FORMS / PROGRESS
   ======================= */
.modal .form-control { border-radius: 8px; }
.modal .btn { border-radius: 8px; }

.progress {
  height: 10px;
  border-radius: 8px;
  background: #e9e3dc;
}

.progress .progress-bar { border-radius: 8px; background: var(--accent); }

/* =======================
   UTILITY
   ======================= */
.badge-accent {
  background: rgba(167, 127, 82, 0.12);
  color: var(--accent);
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 600;
}
/* Soften bottom edges of small carousels (Pavilion & Garden) */
/* (carousel-specific styles removed) */
/* =======================
   HERO FIX (NAVBAR + POSITIONING)
   ======================= */

/* Remove the fake height spacer you added in HTML */
#home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Let hero sit behind the navbar */
.swiper-hero {
  margin-top: -72px; /* navbar height */
}

/* Make each hero slide the correct height */
.swiper-hero .swiper-slide {
  height: calc(100vh + 72px); /* compensate the -72 so bottom isn't cut */
  display: flex;
  align-items: center;
}

/* REPLACE old hero-content positioning */
.hero-swiper .hero-content {
  position: relative;
  top: 0 !important;
  transform: none !important;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =======================
   SECTIONS
   ======================= */
section {
  padding: 50px 0;
  position: relative;
}

#gallery {
  padding: 50px 0 30px 0 !important;
}

section:nth-child(even) {
  background: rgba(247, 243, 238, 0.5);
}

.section-title {
  font-size: 2.5rem;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* =======================
   TESTIMONIALS SECTION
   ======================= */
#testimonials {
  background: rgba(247, 243, 238, 0.8);
  padding: 60px 0;
}

#testimonials .card-ghost {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#testimonials .card-ghost:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

#testimonials .card-ghost p {
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--dark);
  line-height: 1.8;
}

#testimonials .card-ghost .fw-bold {
  font-size: 1.05rem;
  color: var(--accent);
}