/* ==========================================================================
   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 once scrolled ---- */
html body .site-header {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 0 0 rgba(42, 40, 35, 0) !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: #C06B40 !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: #C06B40 !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 on one grid (VIVIDUS Sleek + VIVIDUS on the top row, MySpace below), up to
   1140px wide. 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: Rooms and Dining are also .nav-mega, and
   their small dropdowns must stay anchored under their own link (as on the CN Windsor site). */
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(1140px, 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: #C06B40 !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: #C06B40 !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; }

/* ---- 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; }
}
/* Kadison's "• MySpace Kadison Hotel" label: hidden on small laptops on every page,
   as the Kadison homepage already does */
@media (max-width: 1100px) {
  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; }
}