/**
 * P4 - Mobile nav accordion (S2) + sticky Book Now footer.
 * Shared parent rules; skins token-pass drawer chrome only.
 */

/* --- Submenu row + toggle --------------------------------------------------- */

.nav-main__item-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.nav-main__item-row > a {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}

.nav-main__submenu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nav-main__submenu-caret {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.nav-main__submenu-toggle[aria-expanded="true"] .nav-main__submenu-caret,
.menu-item-has-children.is-submenu-open > .nav-main__item-row .nav-main__submenu-caret {
  transform: rotate(-135deg);
}

/* --- Drawer scroll body + sticky footer ------------------------------------- */

.nav-main__drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden;
}

.nav-main__drawer-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--dv-mobile-nav-footer-border, rgba(0, 0, 0, .12));
}

.nav-main__drawer-footer .button {
  width: 100%;
  justify-content: center;
}

/* --- S2 accordion (mobile only - do not apply at desktop during resize) ----- */

@media (max-width: 991.98px) {
  body.nav-open .nav-main .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  body.nav-open .nav-drawer .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  #nav-main.is-open .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  .nav-main.is-open .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  .nav-drawer.is-open .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  .nav-main--drawer.is-open .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown,
  .menu-container.is-open .menu-item-has-children:not(.is-submenu-open) > .nav-main__dropdown {
    display: none !important;
  }

  body.nav-open .nav-main .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  body.nav-open .nav-drawer .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  #nav-main.is-open .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  .nav-main.is-open .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  .nav-drawer.is-open .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  .nav-main--drawer.is-open .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  .menu-container.is-open .menu-item-has-children.is-submenu-open > .nav-main__dropdown {
    display: block !important;
  }

  /* Retire chip/wrap submenus inside open mobile surfaces - stacked list instead. */
  body.nav-open .nav-main__dropdown,
  .nav-drawer.is-open .nav-main__dropdown,
  .nav-main--drawer.is-open .nav-main__dropdown,
  .menu-container.is-open .nav-main__dropdown {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* Strip desktop dropdown panel chrome inside mobile surfaces. */
  body.nav-open .nav-main .nav-main__dropdown,
  body.nav-open .nav-main .nav-main__dropdown.nav-main__dropdown--nested,
  .nav-drawer.is-open .nav-main__dropdown,
  .nav-main--drawer.is-open .nav-main__dropdown,
  .menu-container.is-open .nav-main .nav-main__dropdown {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 .75rem !important;
    border: 0 !important;
    border-left: 1px solid var(--dv-mobile-nav-submenu-rule, rgba(0, 0, 0, .15)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body.nav-open .nav-main .nav-main__dropdown > li + li,
  .nav-drawer.is-open .nav-main__dropdown > li + li,
  .nav-main--drawer.is-open .nav-main__dropdown > li + li,
  .menu-container.is-open .nav-main .nav-main__dropdown > li + li {
    margin: 0 !important;
  }
}

/* Desktop: hide accordion toggles; hover/focus dropdowns unchanged. */
@media (min-width: 992px) {
  .nav-main:not(.nav-main--drawer) .nav-main__submenu-toggle {
    display: none;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__item-row {
    display: inline-flex;
    align-items: center;
    width: auto;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__item-row > a {
    flex: none;
    width: auto;
  }

  /*
   * Desktop bar: submenu parents wrap the anchor in .nav-main__item-row (menu.twig).
   * Parent main.css bar typography targets li > a only, and inline-flex on the row
   * misaligns those links vs plain top-level items. Flatten the row (Tidewell §4).
   */
  .nav-main:not(.nav-main--drawer) .nav-main__list > li.menu-item-has-children > .nav-main__item-row {
    display: contents;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__list > li:not(.menu-button) {
    display: flex;
    align-items: center;
  }

  /*
   * Match main.css desktop bar padding on submenu parent anchors (menu.twig wraps
   * them in .nav-main__item-row; compiled main only pads li > a until SCSS rebuild).
   */
  .nav-main:not(.nav-main--drawer) .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
    padding: 0.5rem;
  }

  /* Flyouts above secondary header bands (booking strip, utility rows). */
  .site-header,
  .site-header > .container,
  .site-header__main,
  .menu-container,
  .menu-scroll-container {
    overflow: visible;
  }

  .site-header__main {
    position: relative;
    z-index: 10;
  }

  .site-header__booking {
    position: relative;
    z-index: 1;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__list > li.menu-item-has-children {
    z-index: 1;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__list > li.menu-item-has-children:hover,
  .nav-main:not(.nav-main--drawer) .nav-main__list > li.menu-item-has-children:focus-within {
    z-index: 80;
  }

  .nav-main:not(.nav-main--drawer) .nav-main__dropdown {
    z-index: 90;
  }

  /* Parent / Tidewell: inline Book Now in the header bar on desktop. */
  .menu-scroll-container .nav-main__drawer-footer {
    display: block;
    flex: 0 0 auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  .menu-scroll-container .nav-main__drawer-footer .button {
    width: auto;
  }

  .site-header__book-desktop {
    display: block;
  }

  /* Skins with a dedicated desktop CTA hide the drawer footer on large screens. */
  .menu-scroll-container:has(.site-header__book-desktop) .nav-main__drawer-footer {
    display: none;
  }

  /* Stale body.nav-open / .is-open after resize: mobile accordion rules must not apply. */
  body.nav-open .nav-main .menu-item-has-children > .nav-main__dropdown,
  body.nav-open .nav-main .menu-item-has-children.is-submenu-open > .nav-main__dropdown,
  .menu-container.is-open .nav-main .menu-item-has-children > .nav-main__dropdown {
    position: absolute !important;
    inset: auto !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1.5rem 2rem !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.05) !important;
    background: var(--dv-color-bg, #fff) !important;
    background-color: var(--dv-color-bg, #fff) !important;
    background-image: none !important;
    overflow: visible !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  body.nav-open .nav-main .menu-item-has-children:hover > .nav-main__dropdown,
  body.nav-open .nav-main .menu-item-has-children:focus-within > .nav-main__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    top: calc(100% + 0.5rem) !important;
  }

  /* Esplanade: inline .nav-main drawer - drop fixed chrome at lg+ (not menu-container skins). */
  body.skin-esplanade .site-header:not(:has(.menu-container)) .nav-main,
  body.skin-esplanade .site-header:not(:has(.menu-container)) #nav-main.nav-main {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  body.nav-open .menu-container,
  .menu-container.is-open {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    background: transparent !important;
    color: inherit !important;
  }
}

@media (max-width: 991.98px) {
  /*
   * Parent _nav-main.scss sets mobile `> ul { display: block }`. Skins often force
   * dropdowns visible at lg-down. Hide submenus until the drawer is open so resize
   * at 991/992 does not flash the full tree.
   */
  body:not(.nav-open) .menu-container:not(.is-open) .nav-main .nav-main__dropdown,
  body:not(.nav-open) .menu-container:not(.is-open) .nav-main .nav-main__list > li:not(.menu-button) > ul,
  body:not(.nav-open) .site-header:not(:has(.hamburger.is-active)) .nav-main:not(.is-open) .nav-main__dropdown,
  body:not(.nav-open) .site-header:not(:has(.hamburger.is-active)) #nav-main:not(.is-open) .nav-main__dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /*
   * Closed drawer: snap off-screen with no transition. Animating from desktop
   * (transform: none) when crossing 992 -> 991 looked like the menu opening then
   * sliding away. Open state keeps the parent _menu.scss / skin drawer transition.
   * Skins without .menu-container (Ironmonger, Esplanade, etc.) slide #nav-main
   * directly - include those surfaces here.
   */
  .menu-container:not(.is-open),
  body:not(.nav-open) .site-header:not(:has(.hamburger.is-active)) #nav-main.nav-main:not(.is-open),
  body:not(.nav-open) .site-header:not(:has(.hamburger.is-active)) .nav-main.nav-main:not(.is-open),
  body:not(.nav-open) .site-header:not(:has(.hamburger.is-active)) .nav-main--drawer:not(.is-open) {
    transition: none !important;
  }

  .nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after,
  .nav-main__list > li.menu-item-has-children > a::after {
    display: none !important;
    content: none !important;
  }

  .menu-container:not(.is-open) .nav-main__drawer-footer {
    display: none;
  }

  .site-header__book-desktop {
    display: none !important;
  }

  .menu-container.is-open {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }

  .nav-main.is-open,
  .nav-drawer.is-open,
  .nav-main--drawer.is-open {
    display: flex !important;
    flex-direction: column;
  }

  #nav-main.nav-main .nav-main__drawer-body,
  .nav-main--drawer .nav-main__drawer-body {
    align-self: stretch;
  }

  body.nav-open #nav-main.nav-main .nav-main__list,
  body.nav-open .nav-main--drawer .nav-main__list,
  .nav-main.is-open > .nav-main__drawer-body > .nav-main__list,
  .nav-drawer.is-open .nav-main__list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .menu-scroll-container.is-open,
  .nav-drawer__inner,
  .nav-main__drawer-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .nav-main__drawer-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-main__item-row {
    min-height: 3.25rem;
  }

  .nav-main__item-row > a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0;
    font-size: 1.25rem !important;
    line-height: 1.2;
  }

  .nav-main__submenu-toggle {
    min-width: 3.25rem;
    min-height: 3.25rem;
    color: var(--dv-mobile-nav-caret, rgba(255, 255, 255, .92));
  }

  .nav-main__submenu-caret {
    width: .5rem;
    height: .5rem;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  body.skin-esplanade .site-header .nav-main .nav-main__list > li > a,
  body.skin-esplanade .site-header .nav-main .nav-main__list > li > .nav-main__item-row > a {
    font-size: 1.25rem !important;
  }

  .nav-main__list > li:not(.menu-item-has-children) > a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0;
    font-size: 1.25rem !important;
    line-height: 1.2;
  }

  body.nav-open .nav-main__dropdown > li > a,
  .nav-main.is-open .nav-main__dropdown > li > a,
  #nav-main.is-open .nav-main__dropdown > li > a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0 0 .5rem;
    font-size: 1.125rem !important;
    line-height: 1.25;
  }
}