/* ==========================================================
   main.css — Shared styles · All pages
   The Mount View Castle Hotels & Resorts
   ========================================================== */

/* ----------------------------------------------------------
   1. CSS VARIABLES
   ---------------------------------------------------------- */
:root {
  --green-dark:      #102c25;
  --green-primary:   #173f35;
  --green-mid:       #1C3530;
  --green-card:      #254038;
  --green-hover:     #2d4d43;
  --green-light-bg:  #edf5f1;
  --gold:            #c99b37;
  --gold-light:      #e0b54a;
  --gold-pale:       rgba(201,155,55,.14);
  --cream:           #fffaf2;
  --cream-alt:       #f4f8f5;
  --white:           #ffffff;
  --text-dark:       #2b2b2b;
  --text-muted:      #5a5a5a;
  --border-light:    rgba(0,0,0,.07);
  --shadow-xs:       0 2px 8px  rgba(0,0,0,.06);
  --shadow-sm:       0 4px 16px rgba(0,0,0,.07);
  --shadow-md:       0 8px 30px rgba(0,0,0,.10);
  --shadow-lg:       0 14px 42px rgba(0,0,0,.14);
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  40px;
/*  --font-heading: 'Oswald', sans-serif;                     */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Lato', Arial, sans-serif;
  --t: .22s ease;
}

/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--font-body); color:var(--text-dark); background:var(--cream); line-height:1.7; }
h1,h2,h3,h4 { font-family:var(--font-heading); }
a    { text-decoration:none; }
img  { max-width:100%; display:block; }
ul   { list-style:none; padding:0; margin:0; }

/* ----------------------------------------------------------
   3. NAVBAR  (Bootstrap extended)
   ---------------------------------------------------------- */
#main-nav {
  background: var(--green-primary);
  padding: 10px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

#main-nav .navbar-brand img { height:72px; display:block; }

#main-nav .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-size: 15px;
  font-weight: 400;
  padding: 7px 13px !important;
  border-radius: var(--r-xl);
  transition: color var(--t), background var(--t);
  letter-spacing: .2px;
}

#main-nav .nav-link:hover,
#main-nav .nav-link.active-page {
  color: var(--white) !important;
  background: rgba(255,255,255,.13);
}

/* Hamburger — white on dark bg */
#main-nav .navbar-toggler {
  border-color: rgba(255,255,255,.4);
  padding: 6px 10px;
}

#main-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#main-nav .btn-book {
  background: var(--gold);
  color: var(--white) !important;
  padding: 9px 22px;
  border-radius: var(--r-xl);
  font-weight: 700;
  font-size: 14px;
  display: inline-block;
  transition: background var(--t);
  margin-left: 6px;
  white-space: nowrap;
}

#main-nav .btn-book:hover { background: var(--gold-light); }

@media (max-width:991.98px) {
  #main-nav .navbar-collapse {
    background: var(--green-primary);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 10px 0 8px;
    margin-top: 10px;
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
  #main-nav .nav-item { text-align:center; }
  #main-nav .btn-book { display:block; width:fit-content; margin:10px auto; }
}

/* ----------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------- */
.btn-gold {
  background: var(--gold);
  color: var(--white) !important;
  padding: 11px 26px;
  border-radius: var(--r-xl);
  font-weight: 700;
  font-size: 15px;
  border: none;
  display: inline-block;
  transition: background var(--t), transform .15s, box-shadow var(--t);
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201,155,55,.38);
  color: var(--white) !important;
}

.btn-sm-gold { font-size:13.5px; padding:9px 20px; }

.btn-outline-w {
  background: rgba(255,255,255,.15);
  color: var(--white) !important;
  padding: 11px 22px;
  border-radius: var(--r-xl);
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid rgba(255,255,255,.42);
  display: inline-block;
  transition: background var(--t);
}
.btn-outline-w:hover { background:rgba(255,255,255,.27); color:var(--white) !important; }

.btn-outline-green {
  background: transparent;
  color: var(--green-primary) !important;
  padding: 11px 24px;
  border-radius: var(--r-xl);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--green-primary);
  display: inline-block;
  transition: background var(--t), color var(--t);
}
.btn-outline-green:hover { background:var(--green-primary); color:var(--white) !important; }

.btn-whatsapp {
  background: #25d366;
  color: var(--white) !important;
  padding: 11px 24px;
  border-radius: var(--r-xl);
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  transition: background var(--t), transform .15s;
}
.btn-whatsapp:hover { background:#1ebe5c; transform:translateY(-1px); color:var(--white) !important; }

/* ----------------------------------------------------------
   5. SECTION SHARED
   ---------------------------------------------------------- */
.section-tag {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px,4vw,38px);
  color: var(--green-primary);
  margin-bottom: 14px;
}

.section-intro {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 760px;
  margin: 0 auto;
}

.gold-divider {
  width: 55px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 12px auto 0;
}
.gold-divider.left { margin-left:0; }

/* Page hero shared (rooms / amenities / contact) */
.page-hero {
  height: 52vh; min-height:340px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(10,30,25,.80) 0%,rgba(0,0,0,.40) 100%);
  z-index:1;
}

.page-hero::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:80px;
  background:linear-gradient(to top,var(--cream),transparent);
  z-index:2; pointer-events:none;
}

.page-hero-content { position:relative; z-index:3; color:#fff; padding-bottom:30px; }

.page-hero-breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.65); margin-bottom:14px;
}
.page-hero-breadcrumb a { color:rgba(255,255,255,.65); transition:color var(--t); }
.page-hero-breadcrumb a:hover { color:var(--gold-light); }
.page-hero-breadcrumb i { font-size:14px; color:var(--gold); }

.page-hero-content h1 {
  font-family:var(--font-heading);
  font-size:clamp(30px,5vw,52px);
  color:#fff; margin-bottom:12px;
  text-shadow:0 2px 22px rgba(0,0,0,.3);
}

.page-hero-content p {
  font-size:clamp(14px,2vw,17px);
  color:rgba(255,255,255,.82);
  font-weight:300; max-width:540px;
}

@media (max-width:767.98px) {
  .page-hero { height:55vh; min-height:300px; }
}

/* ----------------------------------------------------------
   6. ROOM CARDS  (shared)
   ---------------------------------------------------------- */
.room-card {
  background:var(--white);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.room-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.room-card-img { width:100%; height:215px; object-fit:cover; display:block; }

.room-card-body {
  padding:22px 24px 26px;
  flex:1; display:flex; flex-direction:column; gap:10px;
}
.room-card-body h3 { font-family:var(--font-heading); color:var(--green-primary); font-size:19px; margin:0; }
.room-card-body p  { font-size:14.5px; color:var(--text-muted); line-height:1.7; flex:1; margin:0; }

/* ----------------------------------------------------------
   7. CONTACT BOX  (shared)
   ---------------------------------------------------------- */
.contact-section { background:var(--cream); padding:75px 0; }

.contact-box {
  background:var(--white);
  padding:52px 48px;
  border-radius:var(--r-lg);
  text-align:center;
  box-shadow:var(--shadow-lg);
  border-top:5px solid var(--gold);
}
.contact-box .section-heading { margin-bottom:12px; }
.contact-box .lead-text {
  font-size:16.5px; color:var(--text-muted);
  margin-bottom:30px;
  max-width:620px; margin-left:auto; margin-right:auto;
}
.contact-meta {
  display:flex; justify-content:center; align-items:center;
  gap:8px; color:var(--text-muted); font-size:15px; margin-top:6px;
}
.contact-meta i { color:var(--gold); font-size:18px; }

@media (max-width:575.98px) { .contact-box { padding:34px 20px; } }

/* ----------------------------------------------------------
   8. FOOTER
   ---------------------------------------------------------- */
footer {
  background: var(--green-dark);
  color: rgba(255,255,255,.65);
  padding: 36px 0;
}
.footer-brand { font-family:var(--font-heading); font-size:19px; color:var(--white); margin-bottom:10px; }
.footer-info {
  font-size:14px; margin:0 0 4px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
}
.footer-info a { color:var(--gold-light); transition:color var(--t); }
.footer-info a:hover { color:var(--white); }
.footer-sep { color:rgba(255,255,255,.3); }
.footer-copy { font-size:13px; margin-top:14px; color:rgba(255,255,255,.4); }
.footer-links {
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-links a { color:rgba(255,255,255,.55); font-size:13px; transition:color var(--t); }
.footer-links a:hover { color:var(--gold-light); }

/* ----------------------------------------------------------
   9. FLOATING CTA
   ---------------------------------------------------------- */
.floating-cta {
  position:fixed; right:20px; bottom:24px;
  z-index:2000;
  display:flex; flex-direction:column; gap:10px;
}
.floating-cta a {
  display:flex; align-items:center; gap:8px;
  color:var(--white);
  padding:12px 18px;
  border-radius:var(--r-xl);
  font-weight:700; font-size:14px;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
  text-decoration:none;
  transition:transform .18s, box-shadow .18s;
}
.floating-cta a:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.33); color:var(--white); }
.floating-cta a.fcta-whatsapp { background:#25d366; }
.floating-cta a.fcta-call     { background:var(--gold); }
.floating-cta i { font-size:18px; flex-shrink:0; }

@media (max-width:767.98px) {
  .floating-cta a { padding:13px 15px; border-radius:50%; }
  .floating-cta .fcta-label { display:none; }
}

/* ----------------------------------------------------------
   10. FEATURE TAGS
   ---------------------------------------------------------- */
.feature-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-light-bg);
  color:var(--green-primary);
  font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-xl);
}