/* ==========================================================================
   Mobile chrome — matches the Great Destinations Hospitality parent site on phones:
   one-row header, side menu, hero frame, footer type. Desktop is untouched.
   Loaded last on every page (VIVIDUS Sleek parent + each hotel's pages).
   Breakpoints follow the GDH site: header 900px, side menu 768px.
   ========================================================================== */

/* ---------- 1. Header: Menu, logo and Book Now share one 66px row ---------- */
@media (max-width: 900px) {
  /* a light shadow at the top so the header stands apart from the page, deeper once the page
     scrolls (main.js toggles .is-scrolled) */
  html body .site-header { box-shadow: 0 2px 12px -4px rgba(42, 40, 35, .14) !important; transition: box-shadow 300ms ease; }
  html body .site-header.is-scrolled { box-shadow: 0 6px 24px -8px rgba(42, 40, 35, .18) !important; }

  /* logo left-aligned, 12px right of "Menu ≡" (row padding + the 65px Menu button + 12px) */
  html body .site-header .masthead { height: 66px !important; padding: 0 20px 0 calc(20px + 65px + 12px) !important; justify-content: flex-start !important; }
  html body .site-header .masthead .back-to-gdh { display: none !important; }
  html body .site-header .masthead img,
  html body .site-header .masthead .nav-logo { height: 40px !important; width: auto !important; }

  /* the nav bar lies over the logo row: Menu on the left, Book Now on the right */
  html body .site-header .nav {
    position: absolute !important; top: 0; left: 0; right: 0; height: 66px !important;
    background: transparent !important; border: 0 !important; overflow: visible !important; pointer-events: none;
  }
  html body .site-header .nav-inner { height: 66px !important; padding: 0 20px !important; pointer-events: none; }
  html body .site-header .menu-trigger,
  html body .site-header .nav-actions { pointer-events: auto; }

  html body .site-header .nav-book-now {
    min-height: 0 !important; height: auto !important; padding: 10px 14px !important;
    font-size: 11px !important; letter-spacing: .16em !important; line-height: 1 !important;
  }

  /* content starts 46px down: the 66px header less the 20px tuck, same as GDH */
  html body main.body-stack { padding-top: 46px !important; }

  /* home hero: starts right under the header, framed with the same 16px sides as the GDH cover
     (inner page heroes already follow GDH via design-system.css) */
  html body #main > .hero-slider { margin: 20px 16px 0 !important; height: calc(100dvh - 86px) !important; min-height: 420px !important; }
}
@media (max-width: 600px) {
  /* the Menu button is 69px here (its word/lines gap grows to 8px) */
  html body .site-header .masthead { padding-left: calc(20px + 69px + 12px) !important; }
}
@media (max-width: 480px) {
  html body #main > .hero-slider { height: 70vh !important; min-height: 0 !important; }
}
@media (max-width: 360px) {
  html body .site-header .masthead img,
  html body .site-header .masthead .nav-logo { height: 34px !important; }
  html body .site-header .nav-inner { padding: 0 16px !important; }
  html body .site-header .masthead { padding-left: calc(16px + 69px + 12px) !important; }
  html body .site-header .nav-book-now { padding: 9px 10px !important; letter-spacing: .1em !important; }
}
@media (max-width: 340px) {
  html body .site-header .masthead img,
  html body .site-header .masthead .nav-logo { height: 30px !important; }
  html body .site-header .nav-book-now { padding: 8px 8px !important; font-size: 10px !important; letter-spacing: .06em !important; }
}

/* ---------- 2. Side menu ---------- */
@media (max-width: 768px) {
  html body .menu-topbar { padding: 12px 20px !important; border-bottom: 1px solid #E3D9C3; }

  /* Close: round icon button, no label; fills dark on hover / focus */
  html body .menu-close-btn {
    width: 36px !important; height: 36px !important; padding: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
    background: transparent !important; color: #2A2823 !important;
    border: 1px solid #E3D9C3 !important; border-radius: 50% !important;
  }
  html body .menu-close-btn:hover,
  html body .menu-close-btn:focus-visible { background: #2A2823 !important; color: #FFFFFF !important; border-color: #2A2823 !important; }
  html body .menu-close-btn span { display: none !important; }

  /* rows run edge to edge */
  html body .idx-links { padding: 8px 0 !important; width: 100%; }
  html body .idx-links .idx-link,
  html body .idx-links .idx-drop-trigger {
    width: 100% !important; padding: 14px 20px !important; box-sizing: border-box;
    border-bottom: 1px solid #ECE4D0 !important; color: #2A2823;
  }
  html body .idx-links .idx-title { font-size: 20px !important; letter-spacing: -.01em; }
  html body .idx-links .idx-link:not(.is-active) .idx-title { color: #2A2823; }
  html body .idx-links .idx-link:last-child { border-bottom: none !important; }
  html body .idx-drop-trigger .idx-drop-caret { color: #2A2823 !important; }

  /* Back to Great Destinations: a menu row in the GDH back-link style */
  html body .idx-links .idx-link.idx-back-gdh {
    display: flex !important; align-items: center; gap: 8px;
    font-family: var(--fd, 'Playfair Display', serif) !important; font-style: italic; font-size: 16px !important;
    font-weight: 400; letter-spacing: .01em !important; text-transform: none !important;
    color: rgba(42, 40, 35, .82) !important;
  }
  html body .idx-links .idx-link.idx-back-gdh .idx-back-text { border-bottom: 0 !important; }

  /* Destinations list: tinted panel, brand rows and hotel rows full width */
  html body .idx-drop-panel {
    width: 100% !important; padding: 0 0 4px !important; box-sizing: border-box;
    background: rgba(46, 40, 24, .03) !important; border-bottom: 1px solid #ECE4D0 !important;
  }
  html body .idx-drop-panel .idx-sub-flat { width: 100%; margin: 0 !important; padding: 0 !important; }
  html body .idx-drop-panel .idx-sub-heading {
    width: 100% !important; padding: 10px 20px !important; box-sizing: border-box; color: rgba(46, 40, 24, .65);
  }
  html body .idx-prop-list {
    width: 100% !important; margin: 4px 0 0 !important; padding: 4px 0 0 !important;
    border-top: 1px solid rgba(46, 40, 24, .08) !important;
  }
  html body .idx-prop-list .idx-hotel-card {
    width: 100% !important; padding: 10px 20px !important; gap: 12px !important; box-sizing: border-box;
    border: 0 !important; border-bottom: 1px solid rgba(46, 40, 24, .06) !important; border-radius: 0 !important;
  }
  html body .idx-prop-list .idx-hotel-info { gap: 1px !important; padding: 0 !important; }
  html body .idx-prop-list .idx-hotel-brand { display: none !important; }
  html body .idx-prop-list .idx-hotel-name {
    font-size: 16px !important; line-height: 1.2 !important; color: #2A2823;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body .idx-prop-list .idx-hotel-loc { font-size: 12px !important; color: #8F887C; margin-top: 0; }

  /* brand rows open their hotel list (dest-menu.js): arrow right when closed, down when open,
     the same as the Destinations row */
  html body .idx-drop-panel .idx-brand-filter { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
  html body .idx-drop-panel .idx-brand-filter::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform 220ms ease;
  }
  html body .idx-drop-panel .idx-brand-filter[aria-expanded="true"]::after { transform: rotate(45deg) translate(-2px, -2px); }

  /* floating chat / back-to-top buttons step aside while the menu is open */
  html body .gdh-fab { transition: opacity 200ms ease, visibility 200ms ease; }
  html body.menu-open .gdh-fab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

  /* no email / brand line / phone bar at the foot of the menu on phones */
  html body .menu-bottombar { display: none !important; }
}

/* ---------- 3. Footer: Manrope text, credit above copyright ---------- */
@media (max-width: 900px) {
  /* base.css sets every p / li in Playfair; the GDH footer reads in Manrope */
  html body .dls-footer :is(p, li, a, span) { font-family: var(--fb, 'Manrope', sans-serif); }
  html body .dls-footer .dls-footer-nav a { font-size: 13px; }

  html body .dls-footer-bottom { display: block !important; text-align: center; line-height: 1.8; }
  html body .dls-footer-credit { display: inline; text-align: center; }
  html body .dls-footer-copy {
    display: block; width: 100%; margin: 10px 0 0; text-align: center; font-size: 11px; color: #FFFFFF;
  }
}
@media (max-width: 600px) {
  html body .dls-footer-bottom { padding: 12px 20px 24px !important; }
}

/* ---------- 4. Phones: section headings, intros and the buttons under them read left-aligned.
   Logos, testimonials, stat / amenity tiles, tab and filter bars, buttons inside cards and the
   footer stay centred. ---------- */
@media (max-width: 768px) {
  html body #main :is(.vs-head, .vs-about-cta, .section-head, .r-head--center, .r-head--center .r-head-right,
    .rm-intro-inner, .dn-header, .gl-page-intro, .loc-page-intro, .loc-intro-right, .story-section .story-copy, .enq-copy,
    .cnw-timings-group, .cnw-dn-cta, .cnw-fac-cta, .cnw-about-strip div[style*="text-align"]) {
    text-align: left !important; align-items: flex-start !important;
  }
  html body #main :is(.vs-head, .section-head, .r-head--center, .rm-intro-inner, .dn-header, .gl-page-intro,
    .loc-page-intro, .story-section .story-copy, .enq-copy, .cnw-timings-group, .sleek-faq-section) :is(h1, h2, h3, p, .lede, .label) {
    text-align: left !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  html body #main :is(.vs-head .vs-btn-row, .r-head--center .r-head-cta, .loc-intro-btns,
    .cnw-timings-group .dn-reserve-hours, .cnw-timings-group .dn-reserve-btns) { justify-content: flex-start !important; }
  html body #main .cnw-timings-group .dn-reserve-hour-item { align-items: flex-start !important; }
}

/* ---------- 5. Phones: every content button is solid (ink fill, white text; gold on tap) ---------- */
@media (max-width: 768px) {
  html body #main :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .rm-card-cta, .fc-card-btn, .enq-submit, .formSubmitButton,
                     .ip-cta, .ip-job-apply, .ip-offer-book, .ip-form-submit, .ch-dev-cta,
                     .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .pg-card-cta, .btn-link, .kd-dn-cta) {
    background: var(--ds-btn-color, #2A2823) !important; border-color: var(--ds-btn-color, #2A2823) !important; color: #FFFFFF !important;
  }
  html body #main :is(.vv-btn, .vv-btn-ghost, .vv-btn-dir, .rc-cta, .fac-intro-cta, .rm-card-cta, .fc-card-btn, .enq-submit, .formSubmitButton,
                     .ip-cta, .ip-job-apply, .ip-offer-book, .ip-form-submit, .ch-dev-cta,
                     .ms-btn, .ms-hc-cta, .kd-btn-outline, .kd-btn-solid, .kd-rx-panel-cta, .pg-card-cta, .btn-link, .kd-dn-cta):is(:hover, :focus-visible, :active) {
    background: var(--vv-gold-deep, #9D8345) !important; border-color: var(--vv-gold-deep, #9D8345) !important; color: #FFFFFF !important;
  }
}

/* ---------- 6. Phones: every slider shows dots in place of arrows (the hero's dots: 8px,
   gold when active); swiping still works on all of them ---------- */
.vs-slider-dots { display: none; }
@media (max-width: 767px) {
  /* card sliders: dots built by main.js */
  html body .vs-slider > .vs-slider-nav { display: none !important; }
  html body .vs-slider > .vs-slider-track { margin-bottom: 0 !important; }
  html body .vs-slider-dots:not([hidden]) { display: flex; justify-content: center; margin-top: 20px; }

  /* photo slider in an image column (home dining): it already has dots, the arrows go */
  html body .vs-imgslider > .vs-imgslider-nav { display: none !important; }

  /* room photo slider: the thumbnail row becomes the dots; arrows and the 1 / 5 count go */
  html body .rs-panel-nav { display: none !important; }
  html body .rs-vthumbs {
    display: flex !important; justify-content: center; align-items: center; gap: 0 !important;
    width: 100% !important; height: auto !important; margin: 16px 0 0 !important; padding: 0 !important; overflow: visible !important;
  }

  /* one dot style for both: a 16px tap area around an 8px dot */
  html body .vs-slider-dot,
  html body .rs-vthumbs .rs-vthumb {
    flex: none !important; box-sizing: content-box !important; width: 8px !important; height: 8px !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 4px solid transparent !important; border-radius: 50% !important; outline-offset: 0;
    background: rgba(42, 40, 35, .22) !important; background-clip: content-box !important;
    opacity: 1 !important; box-shadow: none !important; cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
  }
  html body .vs-slider-dot.is-active,
  html body .rs-vthumbs .rs-vthumb.is-active { background-color: var(--vv-gold-deep, #9D8345) !important; transform: scale(1.3); }
  html body .rs-vthumbs .rs-vthumb::before,
  html body .rs-vthumbs .rs-vthumb::after { content: none !important; }
}