/* styles.css
   Full stylesheet with MOD markers for changes you requested.
*/

/* --------------------------------------------------
   :root variables
   -------------------------------------------------- */
   :root {
    --primary-teal: #1e5c54;
    --primary-teal-dark: #143e39;
    --primary-teal-light: #D1EDEC;
  
    --secondary-orange: #f48050;
    --secondary-orange-hover: #e06d3d;
  
    --bg-peach: #fcf1eb;
    --bg-light: #f9fbfb;
    --white: #ffffff;
  
    --text-dark: #1d1d1d;
    --text-muted: #666666;
    --text-light: #ffffff;
  
    --font-headline: 'Montserrat', Georgia, "Times New Roman", serif;
    --font-body: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
  
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  /* --------------------------------------------------
     Global resets & typography
     -------------------------------------------------- */
  * { box-sizing: border-box; }
  html,body { height: 100%; }
  body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
  }
  
  /* utility */
  .z-top { z-index: 1030; }
  
  /* --------------------------------------------------
     Navbar (base)
     -------------------------------------------------- */
  /* MOD: navbar default overlays hero using absolute positioning */
  .navbar {
    top: 20px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: background .25s ease, box-shadow .25s ease, top .15s ease, padding .15s ease;
    position: absolute; /* overlay hero by default (MOD) */
  }
  
  /* MOD: desktop nav-item spacing narrowed per request */
  @media (min-width: 992px) {
    .navbar-nav .nav-item { margin-right: 0.9rem; } /* MOD: narrower spacing */
  }
  
  /* MOD: sticky state (added by JS via IntersectionObserver) */
  .navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--primary-teal) !important; /* MOD: background when sticky */
    box-shadow: 0 6px 24px rgba(20,62,57,0.12);
    z-index: 1100;
    padding-top: 0.75rem;   /* MOD: increase padding so background fully covers centered logo */
    padding-bottom: 0.75rem;
  }
  
  /* MOD: when sticky, vertically center logo inside navbar */
  .navbar.sticky .logo-center {
    top: 50%;
    transform: translate(-50%, -50%); /* vertical center inside fixed navbar */
  }
  
  /* Default logo placement when NOT sticky (over hero) */
  .logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    top: 12px;
  }
  .logo-img {
    display: block;
    max-height: 64px;
    width: auto;
    transition: max-height .15s ease, transform .15s ease;
  }
  /* ensures logo fits inside sticky bar */
  .navbar.sticky .logo-img { max-height: 44px; }
  
  /* Links & logo styles */
  .navbar .nav-link { font-weight: 500; letter-spacing: 0.02em; color: var(--white); }
  .navbar .navbar-brand { font-family: var(--font-headline); color: var(--white); }
  .serif-logo { font-family: var(--font-headline); color: var(--white); }
  
  /* MOD: nav-link hover effect */
  .navbar .nav-link:hover { color: var(--secondary-orange) !important; }
  
  /* --------------------------------------------------
     Buttons
     -------------------------------------------------- */
  .btn-book-visit {
    background-color: var(--secondary-orange);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    border-radius: var(--border-radius-sm);
    border: none;
    transition: var(--transition-smooth);
  }
  .btn-book-visit:hover { background-color: var(--secondary-orange-hover); color: var(--white); transform: translateY(-1px); }
  
  .btn-explorer-now {
    background-color: var(--primary-teal);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 500;
    padding: 12px 30px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
  }
  .btn-explorer-now:hover { background-color: var(--primary-teal-dark); color: var(--white); }
  
  .btn-outline-teal {
    background-color: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    padding: 10px 24px;
    font-family: var(--font-body);
    transition: var(--transition-smooth);
  }
  .btn-outline-teal:hover { background-color: var(--white); color: var(--primary-teal); }
  
  /* --------------------------------------------------
     WhatsApp floating
     -------------------------------------------------- */
  .whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    background-color: #25d366;
    color: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
  }
  .whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); color: var(--white); }
  .whatsapp-float i { font-size: 20px; margin-right: 8px; }
  
  /* --------------------------------------------------
     Custom toggler and mobile slide-in panel
     -------------------------------------------------- */
  /* Custom toggler: white outlined box */
  .custom-toggler {
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0;
  }
  .custom-toggler i { color: #ffffff; font-size: 1.05rem; line-height: 1; }
  
  /* close button inside panel */
  .close-panel-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    color: var(--primary-teal-dark);
    z-index: 1065;
    padding: 6px;
  }
  .close-panel-btn i { pointer-events: none; }
  
  /* Mobile / tablet slide-in */
  @media (max-width: 991.98px) {
    .navbar-collapse {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 300px;
      max-width: 85%;
      background: #ffffff;
      transform: translateX(-100%);
      transition: transform 0.35s ease;
      padding-top: 4.75rem;
      z-index: 1050;
      overflow-y: auto;
      box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    .navbar-collapse.show { transform: translateX(0); }
    .navbar-collapse .nav-link { color: var(--primary-teal-dark) !important; padding: 0.85rem 1.25rem; font-weight: 500; }
    .navbar-collapse .navbar-nav { flex-direction: column; padding-left: 0; }
    .text-teal-dark { color: var(--primary-teal-dark); }
    .logo-center { z-index: 1060; }
    .navbar-toggler { background: transparent; border: none; }
    .close-panel-btn { display: block; }
  }
  
  /* Restore inline behavior on desktop */
  @media (min-width: 992px) {
    .navbar-collapse { position: static; transform: none !important; height: auto; width: auto; background: transparent; padding-top: 0; box-shadow: none; }
    .navbar .navbar-nav { flex-direction: row; }
  }
  
  /* --------------------------------------------------
     Hero
     -------------------------------------------------- */
  .hero-section { position: relative; height: 80vh; overflow: hidden; }
  .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: none; }
  .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%); }
  .hero-content { position: relative; z-index: 2; padding-left: 1rem; padding-right: 1rem; }
  .display-heading { font-family: var(--font-headline); font-weight: 600; font-size: clamp(2.2rem, 4.5vw, 4.5rem); line-height: 1.02; margin: 0; letter-spacing: 0.02em; }
  .hero-sub { font-family: var(--font-body); font-weight: 300; letter-spacing: 0.08em; }
  
  /* --------------------------------------------------
     Collage / overview / amenities
     -------------------------------------------------- */
  .rounded-16 { border-radius: 16px !important; }
  .rounded-8 { border-radius: 8px !important; }
  
  .bg-white { background: var(--white); }
  .badge.bg-light-teal { background: var(--primary-teal-light) !important; color: var(--primary-teal) !important; font-weight: 600; font-family: var(--font-body); padding: 6px 12px; }
  .section-title { font-family: var(--font-headline); font-weight: 600; font-size: 1.8rem; color: var(--text-dark); }
  
  .amenities-section { background: var(--primary-teal); color: var(--white); padding-top: 4rem; padding-bottom: 4rem; }
  .amenities-list li { margin-bottom: 0.9rem; font-family: var(--font-body); letter-spacing: 0.02em; }
  .text-orange { color: var(--secondary-orange); }
  .fa-check-circle.text-orange { color: var(--secondary-orange); }
  
  /* --------------------------------------------------
     Location & Community (MOD: alternating 2x2)
     - No gap, no radius
     - On mobile/tablet stack: ImageA -> SplitCard1 -> ImageB -> SplitCard2
     -------------------------------------------------- */
  .section-heading { font-size: 1.8rem; font-weight: 600; }
  
  .split-card {
    display: flex;
    border-radius: 0; /* MOD: remove radius */
    overflow: hidden;
    min-height: 280px;
    background: #fff;
  }
  .split-card .split-text {
    background: var(--primary-teal);
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
  .split-card .split-image { background-size: cover; background-position: center; flex: 1 1 50%; }
  
  /* helper for full-bleed image columns */
  .location-image { min-height: 280px; background-size: cover; background-position: center; }
  
  /* Mobile stacking order and sizing adjustments */
  @media (max-width: 991.98px) {
    .location-image { min-height: 220px; }
    .split-card { min-height: auto; flex-direction: column; }
    .split-card .split-text { min-width: auto; width: 100%; }
  }
  
  /* --------------------------------------------------
     Choose a Room
     -------------------------------------------------- */
  #choose-room .display-6 { font-family: var(--font-headline); color: var(--primary-teal-dark); }
  
  /* --------------------------------------------------
     CTA Orange / Footer
     -------------------------------------------------- */
  .cta-orange { background: var(--secondary-orange); padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .btn-white-cta { background: var(--white); color: var(--primary-teal-dark); border-radius: var(--border-radius-sm); padding: 10px 22px; font-weight: 600; }
  
  .footer-dark { background: var(--primary-teal-dark); }
  .border-white-10 { border-color: rgba(255,255,255,0.08) !important; }
  .text-white-50 { color: rgba(255,255,255,0.75); }
  
  /* MOD: center footer logo wrapper */
  .footer-logo-wrap { display:flex; justify-content:center; align-items:center; }
  .footer-logo { display:block; max-height:56px; width:auto; }
  
  /* --------------------------------------------------
     Responsive adjustments & helpers
     -------------------------------------------------- */
  @media (max-width: 991.98px) {
    .navbar { top: 12px; }
    .hero-content { padding-left: 0.5rem; }
  }
  @media (max-width: 575.98px) {
    .display-heading { font-size: 2rem; }
    .hero-section { height: 62vh; }
    .whatsapp-float { right: 16px; bottom: 16px; padding: 10px 14px; }
    .navbar .nav-link { font-size: 0.95rem; }
  }
  
  .shadow-sm { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
  .text-teal { color: var(--primary-teal); }
  .text-white-75 { color: rgba(255,255,255,0.75); }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon { filter: invert(1); background-size: 2rem 2rem; }