/* MRO Site Frame: top bar, sticky header, logo, navigation and the mobile dropdown menu. */

/* ---- Sticky frame: the top bar scrolls away, the header bar stays ---- */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--wp--custom--layout--topbar-h));
  z-index: var(--wp--custom--z--header);
}

/* ---- Top bar ---- */
.mro-topbar {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--custom--color--on-dark-muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--leading--tight);
}
.mro-topbar .mro-topbar__inner {
  min-height: var(--wp--custom--layout--topbar-h);
  flex-wrap: nowrap;
}
.mro-topbar .mro-topbar__item { margin: 0; }
.mro-topbar [class*="mro-ico-"]::before,
.mro-topbar .mro-stars::before,
.mro-topbar .wp-block-button__link::before { background-color: var(--wp--preset--color--mint); }
.mro-topbar .mro-stars::before { font-size: var(--wp--preset--font-size--xs); }

.mro-topbar .wp-block-buttons { gap: 0; }
.mro-topbar .mro-topbar__link .wp-block-button__link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wp--custom--color--on-dark-muted);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-decoration: none;
}
.mro-topbar .mro-topbar__link .wp-block-button__link:hover {
  background: transparent;
  box-shadow: none;
  color: var(--wp--preset--color--base);
}

/* ---- Header bar ---- */
.mro-header {
  position: relative; /* the mobile dropdown hangs from this bar */
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--line);
  transition: box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--standard);
}
.is-scrolled .mro-header { box-shadow: var(--wp--preset--shadow--md); }
.mro-header .mro-header__inner {
  min-height: var(--wp--custom--layout--header-h);
  flex-wrap: nowrap;
}

/* Logo placeholder: swap the "Logo" tag for a Site Logo block when the logo file is ready */
.mro-header .mro-logo {
  flex-shrink: 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px dashed var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--sm);
}
.mro-logo .mro-logo__tag {
  margin: 0;
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--mint-soft);
  color: var(--wp--preset--color--accent-deep);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
}
.mro-logo .wp-block-site-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--display);
  letter-spacing: var(--wp--custom--tracking--display);
}
.mro-logo .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }

.mro-header .mro-header__cta { flex-shrink: 0; }
.mro-header .mro-header__cta .wp-block-button__link { white-space: nowrap; }

/* ---- Navigation links ---- */
.mro-header .mro-nav .wp-block-navigation-item__content {
  position: relative;
  display: block;
  padding-block: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.mro-header .mro-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--standard);
}
.mro-header .mro-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); }
.mro-header .mro-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* Menu and close buttons share the header's square button look */
.mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container-open,
.mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wp--custom--icon--box);
  height: var(--wp--custom--icon--box);
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
.mro-header .mro-nav .wp-block-navigation__responsive-container-open svg,
.mro-header .mro-nav .wp-block-navigation__responsive-container-close svg {
  width: var(--wp--custom--icon--md);
  height: var(--wp--custom--icon--md);
}

/* The booking button inside the menu only shows in the phone dropdown */
.mro-header .wp-block-navigation.mro-nav .mro-nav__cta { display: none; }

/* ---- Desktop: the menu sits inline ---- */
@media (min-width: 1200px) {
  .mro-header .mro-header__inner > .mro-nav { margin-left: auto; }
  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container-open { display: none; }
  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    overflow: visible;
    z-index: auto;
  }
  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}

/* ---- Below desktop: menu button + dropdown panel under the header bar ---- */
@media (max-width: 1199.98px) {
  .mro-header .mro-header__cta { margin-left: auto; }
  .mro-header .mro-header__inner > .mro-nav { order: 3; }

  /* Core wraps the menu in three positioned layers; flatten them so the panel hangs from .mro-header */
  .mro-header .wp-block-navigation.mro-nav,
  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-dialog,
  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-close { position: static; }

  .mro-header .wp-block-navigation.mro-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute;
    inset: 100% 0 auto 0;
    z-index: var(--wp--custom--z--menu);
    overflow: visible;
    padding: var(--wp--preset--spacing--20) var(--wp--custom--layout--gutter) var(--wp--preset--spacing--60);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    border-bottom: 1px solid var(--wp--preset--color--line);
    box-shadow: var(--wp--preset--shadow--lg);
    animation: mro-menu-in var(--wp--custom--duration--base) var(--wp--custom--ease--standard);
  }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    max-height: calc(100dvh - var(--wp--custom--layout--header-h) - var(--wp-admin--admin-bar--height, 0px) - var(--wp--preset--spacing--70));
    overflow-y: auto;
  }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation-item__content {
    width: 100%;
    padding-block: var(--wp--preset--spacing--40);
    border-bottom: 1px solid var(--wp--preset--color--line);
    font-size: var(--wp--preset--font-size--md);
  }
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }

  /* The close X takes the menu button's spot in the header bar */
  .mro-header .wp-block-navigation.mro-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: calc((var(--wp--custom--layout--header-h) + var(--wp--custom--icon--box)) / -2 - 1px);
    right: var(--wp--custom--layout--gutter);
    z-index: 2;
  }
  .mro-header:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
}

@media (max-width: 767.98px) {
  .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
  .mro-topbar { display: none; }
  .mro-header .mro-header__cta { display: none; }
  .mro-header .mro-header__inner > .mro-nav { margin-left: auto; }
  .mro-logo .wp-block-site-title { font-size: var(--wp--preset--font-size--base); }

  .mro-header .wp-block-navigation.mro-nav .is-menu-open .mro-nav__cta {
    display: flex;
    width: 100%;
    margin-top: var(--wp--preset--spacing--50);
  }
  .mro-header .mro-nav .is-menu-open .mro-nav__cta .wp-block-button,
  .mro-header .mro-nav .is-menu-open .mro-nav__cta .wp-block-button__link { width: 100%; }
}

/* Phones: the admin bar scrolls away with the page here */
@media (max-width: 600px) {
  .wp-site-blocks > header.wp-block-template-part { top: 0; }
}

@keyframes mro-menu-in {
  from { opacity: 0; transform: translateY(calc(var(--wp--preset--spacing--20) * -1)); }
  to { opacity: 1; transform: none; }
}