/* ═══════════════════════════════════════════════════════════════════
   Header/footer integration fixes.
   Separate from vlad-chrome.css, which is generated from the design
   stylesheet and is overwritten whenever that is regenerated.
   ═══════════════════════════════════════════════════════════════════ */

/* The design scopes its dropdown positioning to `#menu-main-menu li`, the ID
   of the menu on the design site. This site's menu renders as
   `#menu-primary-menu`, so that rule never matched and submenus positioned
   against .vlad-chrome instead of their parent item. Rebound to the class so
   it holds whatever menu is assigned. */
.vlad-chrome .headerMenu li,
.vlad-chrome .menuMobScroll li {
  position: relative;
}

/* The header sat at `position: static` with no stacking context while the
   parent theme gives #wrapper_content `position: relative; z-index: 1`, so
   page content painted over the header and its dropdowns. */
.vlad-chrome header {
  position: relative;
  z-index: 500;
}

.vlad-chrome .topBar {
  position: relative;
  z-index: 501;
}

.vlad-chrome .headerMenu ul.sub-menu {
  z-index: 510;
}

/* Mobile drawer and its backdrop sit above everything. */
.vlad-chrome .menuMobWrap {
  z-index: 1000;
}

.vlad-chrome .mobMenuBack {
  z-index: 999;
}

/* Let the header own the top of the stack. */
#wrapper_content {
  z-index: auto;
}

/* The parent wrapper clips overflow, which would cut a dropdown that extends
   past the content column. */
#site-wrapper {
  overflow: visible;
}

/* ── Header fits this site's menu ──────────────────────────────────────
   The design sized .headerInner to `max-width: 671px` with a 56px gap for its
   own seven short labels. This site's menu ("Information", "Our Resorts", …)
   needs ~777px, so the Contact button was pushed past the container edge and
   "Our Resorts" wrapped onto two lines. */
.vlad-chrome .headerInner {
  max-width: none;
  gap: 28px;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.vlad-chrome .headerMenu {
  flex: 0 1 auto;
  min-width: 0;
}

.vlad-chrome .header-menu {
  flex-wrap: nowrap;
}

.vlad-chrome .header-menu > li > a {
  white-space: nowrap;
}

.vlad-chrome .headerBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Tighten before anything is forced to wrap. */
@media (max-width: 1400px) {
  .vlad-chrome .headerInner { gap: 18px; }
  .vlad-chrome .header-menu { gap: 18px; }
}

@media (max-width: 1280px) {
  .vlad-chrome .headerInner { gap: 12px; }
  .vlad-chrome .header-menu { gap: 12px; }
  .vlad-chrome .header-menu > li > a { font-size: 13.5px; }
}