/* ==========================================================================
   GDH UNIFIED NAVBAR
   Loaded LAST in <head> on every MySpace brand, MySpace Kadison and VIVIDUS
   page so their header renders exactly like the Great Destinations homepage
   header (index.html). Each site keeps its own logo, links and Book Now.

   Values mirror the parent header: assets/css/styles.css §7 (masthead + nav)
   and assets/css/home.css (destinations mega-dropdown). If the parent header
   changes, update this file to match.

   The child stylesheets carry many !important nav rules, hence the
   `html body .site-header` prefix and !important throughout.
   ========================================================================== */

/* ---- Wrapper: white, no rules, soft shadow always (a touch deeper once scrolled) ---- */
html body .site-header {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 18px -6px rgba(42, 40, 35, .14) !important;
  transition: box-shadow 300ms ease, top 380ms cubic-bezier(.4, 0, .2, 1) !important;
}
html body .site-header.is-scrolled {
  box-shadow: 0 6px 24px -8px rgba(42, 40, 35, .18) !important;
}
/* Page film-grain texture stays under the header (it tinted the bar grey on Kadison) */
html body .grain { z-index: 50 !important; }

/* ---- Logo strip (66px, logo centred) ---- */
html body .site-header .masthead {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 66px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 56px !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center;
}
html body .site-header .masthead .wordmark {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .site-header .masthead .wordmark img,
html body .site-header .masthead .nav-logo {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Back-to-GDH link — pinned far-left of the logo strip, logo stays centred */
html body .site-header .masthead .back-to-gdh {
  position: absolute !important;
  left: clamp(20px, 5vw, 64px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: 'Playfair Display', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: rgba(42, 40, 35, .82) !important;
  transition: color 200ms ease, gap 200ms ease !important;
}
html body .site-header .masthead .back-to-gdh svg { width: 9px !important; height: 9px !important; transition: transform 200ms ease; }
html body .site-header .masthead .back-to-gdh:hover { color: #9D8345 !important; gap: 11px !important; }
html body .site-header .masthead .back-to-gdh:hover svg { transform: translateX(-3px); }

/* ---- Primary nav row (52px): Menu left · links centre · actions right ---- */
html body .site-header .nav,
html body .site-header .nav.is-scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body .site-header .nav-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  height: 52px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 5vw, 64px) !important;
  background: transparent !important;
  border: 0 !important;
}

/* Menu trigger */
html body .site-header .nav .menu-trigger {
  position: relative;
  justify-self: start;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Playfair Display', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: rgba(42, 40, 35, .75) !important;
}
html body .site-header .nav .menu-trigger:hover { color: #2C1810 !important; }
html body .site-header .nav .menu-trigger .t-word {
  font-family: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
html body .site-header .nav .menu-trigger .t-mark { width: 22px !important; height: 14px !important; }
html body .site-header .nav .menu-trigger .t-mark .ln { height: 1px !important; background: currentColor !important; }

/* Centre links */
html body .site-header .nav .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(62px, calc(2.6vw + 40px), 84px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .site-header .nav .nav-links > li:not(.nav-active-prop-item) {
  margin: 0 !important;
  padding: 0 !important;
}
html body .site-header .nav .nav-links > li {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  color: #2A2823 !important;
}
html body .site-header .nav .nav-links > li > a,
html body .site-header .nav .nav-links > li > .mega-label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: none !important;
  border: 0 !important;
  opacity: 1 !important;
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  color: rgba(42, 40, 35, .75) !important;
}
html body .site-header .nav .nav-links > li > a:hover,
html body .site-header .nav .nav-links > li > a.is-active,
html body .site-header .nav .nav-links > li > a[aria-current],
html body .site-header .nav .nav-links > li > .mega-label:hover,
html body .site-header .nav .nav-links > li > .mega-label.is-active,
html body .site-header .nav .nav-links > li > .mega-label[aria-current] {
  color: #9D8345 !important;
}

/* Dropdown caret (inline ▾ span, and VIVIDUS' split label + caret button) */
html body .site-header .nav .nav-links .nav-drop .caret {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 0 5px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
}
html body .site-header .nav .nav-links > li:has(> .mega-label) {
  display: inline-flex !important;
  align-items: center !important;
}
html body .site-header .nav .nav-links > li > button.mega-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 5px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: rgba(42, 40, 35, .75) !important;
}

/* ---- Destinations mega-dropdown (same card + grid as the parent) ----
   4 hotels per row, 940px wide (the longest name, "MySpace Express Pushap Villa", still
   fits on one line). It is centred on the nav bar (not pinned to the Destinations link)
   and capped at the window width, so it never runs off-screen.
   Only the Destinations item gives up its positioning: the Rooms item is also a .nav-mega, and its
   small dropdown must stay anchored under "Rooms". */
html body .site-header .nav .nav-links > li.nav-mega:has(> .mega-menu--dest) { position: static !important; }
html body .site-header .nav .mega-menu--dest {
  --mega-w: min(940px, calc(100vw - 48px));
  top: 100% !important;
  left: 50% !important;
  width: var(--mega-w) !important;
  min-width: 0 !important;
  margin: 0 0 0 calc(var(--mega-w) / -2) !important;   /* centre without transform (the open animation uses it) */
  padding: 0 !important;
  z-index: 65 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Hover bridge: the open panel sits 7-8px below the Destinations link. This invisible strip
   (part of the panel, so the menu still counts as hovered) fills that gap, so the menu stays
   open while the pointer moves from the link down into it. Only active while the panel is open. */
html body .site-header .nav .mega-menu--dest::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 100% !important;
  height: 12px !important;
  background: transparent !important;
}
html body .site-header .nav .mega-menu--dest::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-top: 2px solid #C8A968 !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 48px rgba(46, 40, 24, .12) !important;
}
html body .site-header .nav .nav-links .mega-dest-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 24px 12px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #9D8345 !important;
}
html body .site-header .nav .nav-links .mega-dest-brand::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: currentColor !important;
  flex-shrink: 0;
}
html body .site-header .nav .nav-links .mega-dest-brand--vv { color: #9D8345 !important; }
html body .site-header .nav .nav-links a.mega-dest-brand--ms-link {
  background: #ffffff !important;
  line-height: 26px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 160ms;
}
html body .site-header .nav .nav-links a.mega-dest-brand--ms-link:hover { color: #9D8345 !important; }
/* VIVIDUS Sleek heading reuses the MySpace link styling but keeps its gold */
html body .site-header .nav .nav-links a.mega-dest-brand--ms-link.mega-dest-brand--vv-link { color: #9D8345 !important; }
html body .site-header .nav .nav-links a.mega-dest-brand--ms-link.mega-dest-brand--vv-link:hover { color: #7A6130 !important; }
html body .site-header .nav .nav-links .mega-dest-vv-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 0 4px !important;
  padding: 0 16px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(46, 40, 24, .1) !important;
  background: transparent !important;
}
/* Top band: VIVIDUS Sleek (columns 1-2) and VIVIDUS (columns 3-4) side by side; each heading
   spans its two columns and sits above its hotels (heading text 24px in, as before) */
html body .site-header .nav .nav-links .mega-dest-brands-row > .mega-dest-brand {
  grid-column: span 2 !important;
  justify-self: start !important;
  padding: 16px 8px 12px !important;
  background: transparent !important;   /* lets the panel's gold top line run the full width */
}
html body .site-header .nav .nav-links .mega-dest-ms-section {
  margin: 0 !important;
  padding: 0 16px 16px !important;
  background: #ffffff !important;
}
html body .site-header .nav .nav-links .mega-dest-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
html body .site-header .nav .nav-links a.mega-dest-link {
  display: block !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-family: 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2A2823 !important;
  transition: background 160ms ease, box-shadow 160ms ease;
}
html body .site-header .nav .nav-links a.mega-dest-link:hover {
  background: #FAF7ED !important;
  border-color: rgba(46, 40, 24, .1) !important;
}
html body .site-header .nav .nav-links a.mega-dest-link--vv:hover {
  background: rgba(157, 131, 69, .1) !important;
  border-color: rgba(157, 131, 69, .25) !important;
}
html body .site-header .nav .nav-links .mega-dest-name {
  display: block !important;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2A2823 !important;
}
html body .site-header .nav .nav-links .mega-dest-loc {
  display: block !important;
  margin-top: 3px !important;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(46, 40, 24, .55) !important;
}
html body .site-header .nav .nav-links .mega-dest-link--vv .mega-dest-name { color: #9D8345 !important; }

/* ---- Header → hero spacing: hero sits flush under the nav, like the parent ----
   The parent starts content 98px down and tucks its hero 4px under the header's
   bottom edge (hero top = 114px, header = 118px), at every screen size. */
html body main.body-stack { padding-top: 98px !important; }
/* MySpace brand pages use the parent's page shell (<main> sits 26px down) */
html body main.body-stack > :is(.ms-hero-carousel, .ms-inner-hero) { margin-top: -10px !important; }
/* Kadison + VIVIDUS page shells start at 0, so their heroes need +16px */
html body main.body-stack > :is(.kd-hero, .hero-slider, .about-hero, .page-hero, .fac-hero,
                                .gal-page-hero, .loc-hero, .me-hero, .spa-hero) { margin-top: 16px !important; }

/* ---- Hotel-name label after Destinations (CN Windsor, Aarya Mansion) ----
   Same as MySpace Kadison's "• MySpace Kadison Hotel": a text marker, not a link, set off by a
   hairline; in the brand ochre of the Book Now button. */
html body .site-header .nav .nav-links > li.nav-active-prop-item {
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 4px !important;
  padding: 0 0 0 16px !important;
  border-left: 1px solid rgba(46, 40, 24, .18) !important;
}
html body .site-header .nav .vs-active-prop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #9D8345;
}
html body .site-header .nav .vs-active-prop-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9D8345;
  flex-shrink: 0;
  opacity: .85;
}

/* ---- Responsive ---- */
/* Child sites carry a Book Now button the parent doesn't, so tighten the link
   spacing on mid-size screens to keep everything on one line. */
@media (max-width: 1320px) {
  html body .site-header .nav .nav-links { gap: clamp(18px, calc(6vw - 36px), 62px) !important; }
}
/* The hotel-name label after Destinations is hidden on small laptops. 1180px, not Kadison's
   1100px: "Vividus Sleek Aarya Mansion" is longer, and between 1101 and ~1130px it pushed the
   header Book Now onto two lines. */
@media (max-width: 1180px) {
  html body .site-header .nav .nav-links > li.nav-active-prop-item { display: none !important; }
}
@media (max-width: 900px) {
  html body .site-header .nav .nav-links { display: none !important; }
  html body .site-header .nav-inner { gap: 0 !important; }
  html body .site-header .nav .menu-trigger { font-size: 16px !important; gap: 4px !important; }
}
@media (max-width: 768px) {
  html body .site-header .masthead { padding: 0 24px !important; }
}
/* Phones: logo strip + Menu row only, like the parent (Back to GDH lives in the menu) */
@media (max-width: 760px) {
  html body .site-header .masthead .back-to-gdh { display: none !important; }
}
@media (max-width: 600px) {
  html body .site-header .nav .menu-trigger { gap: 8px !important; }
}
@media (max-width: 480px) {
  html body .site-header .nav-inner { padding: 0 20px !important; }
}