﻿@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — Global scale
   ═══════════════════════════════════════════════════════════ */

h1 {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.15;
}
h2 {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.25;
}
h3 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.25;
}
h4 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500;
  line-height: 1.35;
}
h5 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.40;
}
h6 {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.40;
}
body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.60;
}
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.60;
}

/* Utility typography classes */
.body-lg {
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.60;
}
.body-sm {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.50;
}
.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.40;
}

/* Footer tagline */
.ft-tagline, .footer-tagline {
  letter-spacing: .22em !important;
}

/* Experiences section — gold accent */
.exp-discover,
.exp-card-eyebrow {
  color: #c9a96e !important;
}

/* Button text */
.btn-solid, .btn-reserve, .nav-book-btn,
.float-book-btn, .bn-cta, .exit-modal-cta {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR OVERRIDE — Two-row layout
   ═══════════════════════════════════════════════════════════ */

/* Reset existing nav shell */
.site-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 !important;
  height: auto !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(5, 5, 5, 0.00) 100%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.45s ease, box-shadow 0.45s ease !important;
}
.site-nav.scrolled {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.09) !important;
}

/* ── Top Row ─────────────────────────────────────────── */
.nav-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 48px;
}
.nav-left-slot,
.nav-right-slot {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-right-slot { justify-content: flex-end; }

/* Hotel selector */
.hotel-selector-wrap { position: relative; }
.hotel-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.35s ease, opacity 0.3s ease;
  white-space: nowrap;
}
.hotel-selector-btn:hover { opacity: 0.75; }
.site-nav.scrolled .hotel-selector-btn { color: #1c1c1a; }
.hotel-selector-btn .chev-icon {
  width: 14px; height: 14px;
  transition: transform 0.3s ease;
}
.hotel-selector-btn.open .chev-icon { transform: rotate(180deg); }

/* Hotel dropdown */
.hotel-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.13);
  min-width: 240px;
  padding: 12px 0;
  z-index: 300;
  animation: dropFadeIn 0.2s ease;
}
.hotel-dropdown.open,
.hotel-selector-wrap:hover .hotel-dropdown {
  display: block;
}
@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hdrop-group + .hdrop-group {
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 4px;
  padding-top: 4px;
}
.hdrop-region {
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b5522b;
  padding: 8px 20px 4px;
}
.hdrop-item {
  display: block;
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 300;
  color: #1c1c1a;
  padding: 8px 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.hdrop-item:hover { background: #faf7f2; color: #b5522b; }

/* Logo */
.nav-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-logo-img {
  height: 60px;
  width: auto;
  display: block;
  transition: filter 0.35s ease;
}
.site-nav:not(.scrolled) .nav-logo-img {
  filter: brightness(0) invert(1);
}

/* Book Now */
.nav-book-btn {
  display: inline-block;
  background: #c9a96e;
  color: #1c1c1a !important;
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 28px;
  text-decoration: none !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}
.nav-book-btn:hover {
  background: #d4b87c;
  box-shadow: 0 8px 24px rgba(201,169,110,0.45);
  color: #1c1c1a !important;
}

/* ── Divider ─────────────────────────────────────────── */
.nav-row-divider {
  height: 1px;
  margin: 0 48px;
  background: rgba(255,255,255,0.22);
  transition: background 0.45s ease;
}
.site-nav.scrolled .nav-row-divider { background: rgba(0,0,0,0.08); }

/* ── Bottom Row ──────────────────────────────────────── */
.nav-bottom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 48px 8px;
  position: relative;
}
.nav-links-row {
  display: flex;
  align-items: center;
  gap: 44px;
}
.nav-link {
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  margin-bottom: -2px;
}
.nav-link:hover { color: #c9a96e !important; }
.nav-link.active { color: #c9a96e !important; border-bottom-color: #c9a96e; }
.site-nav.scrolled .nav-link { color: #1c1c1a; }
.site-nav.scrolled .nav-link:hover { color: #c9a96e !important; }
.site-nav.scrolled .nav-link.active { color: #c9a96e !important; border-bottom-color: #c9a96e; }

/* More (≡) button */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 2px 4px;
  transition: color 0.35s ease, opacity 0.3s;
  line-height: 1;
}
.nav-more-btn:hover { opacity: 1; color: #b5522b !important; }
.site-nav.scrolled .nav-more-btn { color: #1c1c1a; }
.site-nav.scrolled .nav-more-btn:hover { color: #b5522b !important; }

/* More wrap — anchors panel to the button */
.nav-more-wrap {
  position: relative;
}

/* More panel */
.nav-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  min-width: 220px;
  padding: 6px 0 10px;
  z-index: 300;
  animation: dropFadeIn 0.2s ease;
}
/* small arrow caret pointing up, centered on the ≡ button */
.nav-more-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 9px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.08);
  border-top: 1px solid rgba(0,0,0,0.08);
  transform: rotate(45deg);
}
.nav-more-panel.open { display: block; }
.nav-more-panel a {
  display: block;
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1c1c1a;
  padding: 9px 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav-more-panel a:last-child { border-bottom: none; }
.nav-more-panel a:hover { background: #faf7f2; color: #b5522b; }

/* ── Hide old nav pieces ─────────────────────────────── */
.nav-left, .nav-right, .nav-logo-wrap,
.nav-toggle, .nav-back, .nav-prop-trigger,
.lang-switcher, .btn-reserve { display: none !important; }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-top-row { padding: 6px 20px; }
  .nav-logo-img { height: 56px; }
  .nav-book-btn { display: none; }
  .nav-bottom-row { padding: 6px 20px 7px; overflow-x: auto; }
  .nav-links-row { gap: 24px; }
  .nav-row-divider { margin: 0 20px; }
  .nav-more-panel { right: 0; }
}
@media (max-width: 600px) {
  .hotel-selector-btn .hs-label { display: none; }
  .nav-bottom-row { justify-content: flex-start; }
  .nav-links-row { gap: 18px; }
  .nav-link { font-size: 10px; letter-spacing: 0.1em; }
}

/* ── Full-screen Menu Overlay ──────────────────────────────── */
.fullmenu-overlay{position:fixed;inset:0;z-index:1999;display:flex;background:var(--ivory,#faf7f2);transform:translateX(-100%);transition:transform .52s cubic-bezier(.76,0,.24,1);overflow:hidden;}
.fullmenu-overlay.open{transform:translateX(0);}
.fullmenu-left{flex:0 0 42%;padding:32px 48px 32px;display:flex;flex-direction:column;overflow-y:auto;background:var(--ivory,#faf7f2);}
.fullmenu-logo-wrap{margin-bottom:28px;flex-shrink:0;}
.fullmenu-logo{height:56px;width:auto;display:block;}
.fullmenu-nav{display:flex;flex-direction:column;flex:1;}
.fullmenu-link{font-family:var(--font-d,'Cormorant Garamond',serif);font-size:clamp(16px,1.5vw,21px);font-weight:300;color:var(--ink,#1c1c1a);text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(0,0,0,0.07);display:flex;align-items:center;justify-content:space-between;transition:color .25s;}
.fullmenu-link:hover{color:var(--terracotta,#b5522b);}
.fml-arrow{font-size:18px;opacity:.35;font-family:Georgia,serif;}
.fullmenu-contact{margin-top:22px;display:flex;flex-direction:column;gap:9px;flex-shrink:0;}
.fullmenu-book{font-family:var(--font-b,'Inter',sans-serif);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta,#b5522b);text-decoration:none;margin-bottom:4px;}
.fullmenu-phone,.fullmenu-email{font-family:var(--font-b,'Inter',sans-serif);font-size:13px;font-weight:300;color:var(--stone,#6f5e49);text-decoration:none;}
.fullmenu-phone:hover,.fullmenu-email:hover{color:var(--ink,#1c1c1a);}
.fullmenu-vdivider{width:1px;background:rgba(0,0,0,0.10);flex-shrink:0;}
.fullmenu-right{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.fullmenu-close{position:absolute;top:20px;right:20px;z-index:10;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,0.18);background:#fff;cursor:pointer;font-size:17px;color:var(--ink,#1c1c1a);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;line-height:1;}
.fullmenu-close:hover{background:var(--ivory,#faf7f2);transform:rotate(90deg);}
.fullmenu-img{flex:1;min-height:0;overflow:hidden;}
.fullmenu-img img{width:100%;height:100%;object-fit:cover;display:block;}
.fullmenu-dest-wrap{padding:24px 32px 32px;flex-shrink:0;background:var(--ivory,#faf7f2);}
.fullmenu-dest-label{font-family:var(--font-d,'Cormorant Garamond',serif);font-size:15px;font-style:italic;font-weight:300;color:var(--stone,#6f5e49);margin:0 0 14px;}
.fullmenu-dest-btn{display:block;font-family:var(--font-b,'Inter',sans-serif);font-size:12.5px;font-weight:400;letter-spacing:.08em;color:var(--ink,#1c1c1a);text-align:center;padding:13px;border:1px solid rgba(0,0,0,0.13);text-decoration:none;margin-bottom:8px;background:#fff;transition:background .25s,color .25s,border-color .25s;}
.fullmenu-dest-btn:last-child{margin-bottom:0;}
.fullmenu-dest-btn:hover{background:#c9a96e;color:var(--ink,#1c1c1a);border-color:#c9a96e;}
@media(max-width:768px){
  .fullmenu-left{flex:0 0 100%;padding:36px 40px;}
  .fullmenu-vdivider{display:none;}
  .fullmenu-right{flex:0 0 0;overflow:hidden;padding:0;}
  .fullmenu-close{position:fixed;top:20px;right:20px;z-index:2100;}
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb{background:var(--ivory,#faf7f2);padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.06);}
.breadcrumb-list{display:flex;align-items:center;list-style:none;flex-wrap:wrap;padding:0;margin:0;}
.breadcrumb-item{display:flex;align-items:center;font-family:var(--font-b,'Inter',sans-serif);font-size:11px;font-weight:300;color:var(--stone,#6f5e49);letter-spacing:0.06em;}
.breadcrumb-item+.breadcrumb-item::before{content:'/';padding:0 8px;color:rgba(0,0,0,0.2);}
.breadcrumb-item a{color:var(--stone,#6f5e49);text-decoration:none;transition:color .2s;}
.breadcrumb-item a:hover{color:var(--terracotta,#b5522b);}
.breadcrumb-current{color:var(--ink,#1c1c1a);font-weight:400;}

/* ── Mobile: hide Our Properties footer column ───────────── */
@media(max-width:768px){
  .ft-grid > .ft-col:nth-child(2){display:none!important;}
}

/* ── Mobile .wrap padding: 20px across all pages ─────────── */
@media(max-width:768px){
  .wrap,.wrap-narrow{padding-left:20px!important;padding-right:20px!important;}
  .booking-bar{padding-top:20px!important;padding-left:20px!important;padding-right:20px!important;}
}

/* ── Desktop: footer pattern height ── */
@media(min-width:901px){
  .ft-pattern{height:100px!important;}
}

/* ── Mobile: 40px vertical section padding across all pages ── */
@media(max-width:900px){
  main section:not(.hero):not(.about-cine-hero):not(.props-hero):not(.offers-hero):not(.wed-hero):not(.exp-hero):not(.la-hero):not(.terms-hero):not(.dir-hero):not(.terms-section){
    padding-top:40px!important;
    padding-bottom:40px!important;
  }
  /* Div-based page content wrappers */
  .la-wrap,.dir-wrap{
    padding-top:40px!important;
    padding-bottom:40px!important;
  }
  .terms-wrap{
    padding-top:40px!important;
    padding-bottom:0!important;
  }
  /* Activities & Experiences page */
  .exp-intro{padding-top:40px!important;padding-bottom:40px!important;}
  .exp-filter-bar{padding-top:0!important;padding-bottom:0!important;}
  .exp-content{padding-bottom:40px!important;}
  .exp-dest{padding-top:40px!important;padding-bottom:40px!important;}

  /* Homepage sections — explicit override for high-padding sections */
  #page-home .off-section,
  #page-home .exp-section,
  #page-home .fp-section,
  #page-home .kl-section,
  #page-home .acq-section,
  #page-home .props-page,
  #page-home .about-section,
  #page-home section:not(.hero){
    padding-top:40px!important;
    padding-bottom:40px!important;
  }
}

/* ── Mobile: left-align all section content across all pages ── */
@media(max-width:768px){
  /* property sub-pages (property-styles.css overrides) */
  .cta-band,.cta-band-inner,.testimonial-section,
  .fg-testi-wrap,.about-intro,.fg-amen-header,
  .rooms-intro,.rooms-compare-header{text-align:left!important;}

  /* homepage */
  .fcc-text{text-align:left!important;align-items:flex-start!important;}
  .exp-hdr,.fp-header,.fp-pillar-content,
  .acq-section,.props-dest-hdr{text-align:left!important;}
  .exp-hdr,.fp-header,.props-dest-hdr{margin-left:0!important;}

  /* experiences.html */
  .exp-intro{text-align:left!important;}
  .exp-intro-desc{margin-left:0!important;}
  .exp-filter-bar{justify-content:flex-start!important;}

  /* media.html */
  .media-intro,.media-intro h2{text-align:left!important;}
  .media-intro h2{margin-left:0!important;}

  /* weddings-events.html */
  .wed-quote-section,.wed-quote-desc{text-align:left!important;}
  .wed-quote-text,.wed-quote-desc{margin-left:0!important;}
  .wed-stat{text-align:left!important;}
  .wed-catering-section{text-align:left!important;}
  .wed-catering-div{justify-content:flex-start!important;}
  .wed-catering-desc{margin-left:0!important;}
  .wed-venues-hdr,.wed-gallery-hdr{text-align:left!important;}
  .wed-venues-hdr-line,.wed-gallery-hdr-line{margin-left:0!important;}

  /* our-offers.html */
  .benefits-hdr,.benefit-item{text-align:left!important;}
  .benefit-icon{margin-left:0!important;}
}

/* ── Hamburger button (mobile only) ─────────────────────── */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 4px 2px;
  line-height: 1;
  transition: color 0.35s ease, opacity 0.3s;
}
.site-nav.scrolled .nav-hamburger { color: #1c1c1a; }
.nav-hamburger:hover { color: #c9a96e; opacity: 1; }
.site-nav.scrolled .nav-hamburger:hover { color: #c9a96e; }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .hotel-selector-wrap { display: none !important; }
  .nav-bottom-row, .nav-row-divider { display: none !important; }
  .nav-top-row { padding: 6px 20px; }
}

/* ── Our Hotels accordion inside fullmenu ─────────────────── */
.fullmenu-hotels-section { border-bottom: 1px solid rgba(0,0,0,0.07); }
.fullmenu-hotels-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 0;
  font-family: var(--font-d, 'Cormorant Garamond', serif);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 300;
  color: var(--ink, #1c1c1a);
  text-align: left;
  transition: color 0.25s;
}
.fullmenu-hotels-toggle:hover { color: var(--terracotta, #b5522b); }
.fullmenu-hotels-toggle .fml-arrow {
  font-size: 18px;
  opacity: 0.35;
  font-family: Georgia, serif;
  transition: transform 0.3s ease;
}
.fullmenu-hotels-toggle.open .fml-arrow { transform: rotate(90deg); }
.fullmenu-hotels-list { display: none; padding-bottom: 8px; }
.fullmenu-hotels-list.open { display: block; }
.fml-region {
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta, #b5522b);
  padding: 10px 0 4px 8px;
}
.fullmenu-hotel-link {
  display: block;
  font-family: var(--font-b, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink, #1c1c1a);
  text-decoration: none;
  padding: 7px 8px;
  transition: color 0.2s;
}
.fullmenu-hotel-link:hover { color: var(--terracotta, #b5522b); }