/* ==========================================================================
   "Our Destinations" menus (client, 18 Oct 2026) - the same design as the MySpace site, in the VIVIDUS palette
   (ink #2A2823, gold #C8A968, deep gold #9D8345, dark gold #7A6130 for small text so it stays readable).
   1. Side menu: the brand chosen under "Destinations" on the left shows its hotels in the panel on the right,
      two columns, each with a small photo tile. Phones (768px and under) keep the lists under each brand.
   2. Header "Destinations" dropdown: brands on the left with their property counts, the chosen brand's hotels
      on the right in two columns, names and cities only.
   Logic: dest-browser.js. Loaded last, after the site's own stylesheets.
   ========================================================================== */

/* ---------- 1. Side menu ---------- */
html body .menu-overlay .idx-brands-wrap { margin-top: 18px; border-top: 1px solid var(--vv-line, #E3D9C3); }
html body .menu-overlay .idx-brand-panel[hidden] { display: none !important; }
html body .menu-overlay .idx-chev { flex-shrink: 0; color: #2A2823; }
html body .menu-overlay .idx-brand-panel { padding-top: 24px; min-width: 0; }
html body .menu-overlay .idx-brand-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--vv-line, #E3D9C3);
}
/* !important: the site sets every heading italic and every menu paragraph to body size with !important */
html body .menu-overlay .idx-brand-title { margin: 0; font-family: var(--fd); font-size: 32px; font-weight: 400; font-style: normal !important; line-height: 1.15; color: #2A2823; }
html body #menu-overlay .idx-brand-panel .idx-brand-head p.idx-brand-sub { margin: 8px 0 0; font-family: var(--fb); font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; color: #5A554C; }
html body .menu-overlay .idx-brand-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
  font-family: var(--fb); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6130;
}
html body .menu-overlay .idx-brand-link .idx-chev { color: #7A6130; }
html body .menu-overlay .idx-brand-link:is(:hover, :focus-visible),
html body .menu-overlay .idx-brand-link:is(:hover, :focus-visible) .idx-chev { color: #2A2823; }
html body .menu-overlay .idx-brand-hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
html body .menu-overlay .idx-brand-hotels li { margin: 0; border-bottom: 1px solid var(--vv-line, #E3D9C3); }
html body .menu-overlay .idx-brand-hotels a {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 12px 4px; color: inherit; text-decoration: none;
}
html body .menu-overlay .idx-bh-img {
  flex: 0 0 64px; width: 64px; height: 48px; border-radius: 2px;
  background: #F4EFE4 center / cover no-repeat; transition: box-shadow 200ms ease;
}
html body .menu-overlay .idx-bh-txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
html body .menu-overlay .idx-bh-name { font-family: var(--fd); font-size: 18px; line-height: 1.3; color: #2A2823; transition: color 200ms ease; }
html body .menu-overlay .idx-bh-loc { font-family: var(--fb); font-size: 13px; color: #5A554C; }
html body .menu-overlay .idx-brand-hotels .idx-chev { opacity: .55; transition: opacity 200ms ease, transform 200ms ease; }
html body .menu-overlay .idx-brand-hotels a:is(:hover, :focus-visible) .idx-bh-name { color: #7A6130; }
html body .menu-overlay .idx-brand-hotels a:is(:hover, :focus-visible) .idx-bh-img { box-shadow: 0 0 0 1px #C8A968; }
html body .menu-overlay .idx-brand-hotels a:is(:hover, :focus-visible) .idx-chev { opacity: 1; transform: translateX(3px); }
@media (max-width: 1100px) { html body .menu-overlay .idx-brand-hotels { grid-template-columns: 1fr; } }
/* phones: the brand lists under "Destinations" are names only (no photos, no brand line) */
html body .menu-overlay .idx-drop-panel .idx-hotel-img,
html body .menu-overlay .idx-drop-panel .idx-hotel-brand { display: none !important; }
/* desktop: the brand names under "Destinations" choose what the panel shows - a list with the chosen one marked
   (dark gold, gold rule); the hotel lists under each brand are for phones only */
@media (min-width: 769px) {
  html body .menu-overlay .idx-drop-panel .idx-prop-list { display: none !important; }
  html body .menu-overlay .idx-drop-panel .idx-sub-heading.idx-brand-filter {
    position: relative; padding-left: 14px; border-left: 2px solid transparent; transition: color 200ms ease, border-color 200ms ease;
  }
  html body .menu-overlay .idx-drop-panel .idx-sub-heading.idx-brand-filter:is(:hover, :focus-visible) { background: none; color: #7A6130; }
  html body .menu-overlay .idx-drop-panel .idx-sub-heading.idx-brand-filter.is-active { color: #7A6130; border-left-color: #C8A968; }
}

/* ---------- 2. Header "Destinations" dropdown ---------- */
html body .site-header .nav .mega-menu--dest { --mega-w: min(960px, calc(100vw - 48px)) !important; }
html body .site-header .nav .mega-menu--dest::before { border-top-color: #C8A968 !important; }
html body .site-header .nav .nav-links .ms-dd { display: grid; grid-template-columns: 260px minmax(0, 1fr); text-align: left; }
html body .site-header .nav .nav-links .ms-dd-brands { padding: 22px 0 24px; background: #FAF7F0; border-right: 1px solid #ECE4D0; }
html body .site-header .nav .nav-links .ms-dd-eyebrow {
  margin: 0 0 10px !important; padding: 0 24px !important;
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important; color: #5A554C !important;
}
html body .site-header .nav .nav-links .ms-dd-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin: 0; padding: 14px 20px 14px 21px; background: none; border: 0; border-left: 3px solid transparent;
  text-align: left; cursor: pointer; color: #2A2823; transition: background-color 180ms ease, border-color 180ms ease;
}
html body .site-header .nav .nav-links .ms-dd-brand:is(:hover, :focus-visible) { background: #FFFFFF; outline: none; }
html body .site-header .nav .nav-links .ms-dd-brand.is-active { background: #FFFFFF; border-left-color: #C8A968; }
html body .site-header .nav .nav-links .ms-dd-brand svg { flex-shrink: 0; opacity: .6; }
html body .site-header .nav .nav-links .ms-dd-brand.is-active svg { opacity: 1; color: #9D8345; }
html body .site-header .nav .nav-links .ms-dd-brand-txt { display: flex; flex-direction: column; gap: 3px; }
html body .site-header .nav .nav-links .ms-dd-brand-name {
  font-family: var(--fd, 'Playfair Display', serif) !important; font-size: 18px !important; font-style: normal !important;
  line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #2A2823 !important;
}
html body .site-header .nav .nav-links .ms-dd-brand-count {
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: .02em !important;
  text-transform: none !important; color: #5A554C !important;
}
html body .site-header .nav .nav-links .ms-dd-panels { display: grid; padding: 22px 28px 24px; min-width: 0; }
html body .site-header .nav .nav-links .ms-dd-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 160ms ease; }
html body .site-header .nav .nav-links .ms-dd-panel.is-active { visibility: visible; opacity: 1; }
html body .site-header .nav .nav-links .ms-dd-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid #ECE4D0;
}
html body .site-header .nav .nav-links .ms-dd-title {
  font-family: var(--fd, 'Playfair Display', serif) !important; font-size: 22px !important; font-style: normal !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #2A2823 !important;
}
html body .site-header .nav .nav-links a.ms-dd-all {
  display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; white-space: nowrap;
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important; color: #7A6130 !important;
}
html body .site-header .nav .nav-links a.ms-dd-all:is(:hover, :focus-visible) { color: #2A2823 !important; }
html body .site-header .nav .nav-links .ms-dd-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none;
}
html body .site-header .nav .nav-links .ms-dd-list li { margin: 0; padding: 0; border-bottom: 1px solid #F1EBDD; }
html body .site-header .nav .nav-links .ms-dd-list a {
  display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 2px; padding: 11px 0 !important;
  text-align: left !important; text-decoration: none !important;   /* the header centres its links; these read as a list */
}
html body .site-header .nav .nav-links .ms-dd-name {
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; line-height: 1.35 !important; color: #2A2823 !important;
  transition: color 160ms ease;
}
html body .site-header .nav .nav-links .ms-dd-loc {
  font-family: 'Manrope', system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: .01em !important;
  text-transform: none !important; color: #5A554C !important;
}
html body .site-header .nav .nav-links .ms-dd-list a:is(:hover, :focus-visible) .ms-dd-name { color: #7A6130 !important; }