/* =========================================================================
   Aster — site frame (header)
   The header is fixed and transparent over the hero; a hairline and a paper
   backdrop fade in once the page has scrolled (.is-stuck, set by
   aster-frame.js). Below 62rem the nav collapses into a dropdown panel
   anchored under the bar.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. THE BAR
   ------------------------------------------------------------------------- */
.aster-header {
  --aster-header-top: 0px;
  position: fixed;
  inset: var(--aster-header-top) 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: var(--wp--custom--line-hairline) solid transparent;
  transition: background var(--wp--custom--duration-base) var(--wp--custom--ease-out),
              border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.aster-header.is-stuck {
  background: var(--wp--preset--color--base);
  border-bottom-color: var(--wp--preset--color--line);
}

/* The admin bar is itself fixed at the top — sit under it, not behind it. */
body.admin-bar .aster-header { --aster-header-top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .aster-header { --aster-header-top: 46px; }
}

/* The template part wrapper must not reserve space: the bar is out of flow
   and the hero carries the clearance itself. */
.aster-header-part { margin: 0; }

/* Core's blockGap puts a 24px top margin on the second child of a flow group,
   which pushed the whole bar down inside its own fixed wrapper. Core applies
   it with a zero-specificity :where() rule, so one plain class wins. */
.aster-header > * { margin-block-start: 0; }

.aster-header .aster-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--60);
  height: var(--wp--custom--header-height);
  max-width: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}


/* -------------------------------------------------------------------------
   2. WORDMARK
   ------------------------------------------------------------------------- */
.aster-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-semibold);
  line-height: var(--wp--custom--leading-relaxed);
  letter-spacing: var(--wp--custom--tracking-tight);
  white-space: nowrap;
}
.aster-wordmark__mark {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--wp--preset--color--accent);
}
.aster-wordmark__light {
  font-weight: var(--wp--custom--weight-regular);
  color: var(--wp--preset--color--ink-muted);
}


/* -------------------------------------------------------------------------
   3. NAVIGATION — desktop
   ------------------------------------------------------------------------- */
/* Core wraps the nav in three positioned elements that would otherwise
   become the containing block for the dropdown panel. Neutralise all three
   so the panel anchors to the fixed header instead. */
.aster-header .aster-nav,
.aster-header .aster-nav .wp-block-navigation__responsive-dialog,
.aster-header .aster-nav .wp-block-navigation__responsive-close {
  position: static;
  max-width: none;
}

/* Core reserves room for the admin bar at the top of its full-screen
   overlay. A panel hanging off the bar needs none of that offset — and the
   rule to beat is `.has-modal-open .admin-bar .is-menu-open:where(…) …`
   at 0,4,0, so this one is deliberately five classes deep. (It only bites
   logged-in users, which is exactly who reviews the site.) */
.aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  margin: 0;
}

.aster-header .aster-nav {
  margin-left: auto;
  font-family: var(--wp--preset--font-family--body);
}

.aster-header .aster-nav .wp-block-navigation__container {
  display: flex;
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}

.aster-header .aster-nav .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-regular);
  color: var(--wp--preset--color--ink-secondary);
  text-decoration: none;
  padding: 0 0 3px;
  border-bottom: var(--wp--custom--line-hairline) solid transparent;
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
              border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-header .aster-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--contrast);
}
.aster-header .aster-nav .wp-block-navigation-item.is-current .wp-block-navigation-item__content {
  color: var(--wp--preset--color--contrast);
  border-bottom-color: var(--wp--preset--color--accent);
}


/* -------------------------------------------------------------------------
   4. HEADER ACTIONS
   ------------------------------------------------------------------------- */
.aster-header .aster-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
}


/* -------------------------------------------------------------------------
   5. THE HAMBURGER / CLOSE CONTROL
   Core ships a three-bar icon; the design uses two hairlines that cross
   into an X. Both buttons share one square, so the X lands exactly where
   the hamburger was.
   ------------------------------------------------------------------------- */
.aster-header .wp-block-navigation__responsive-container-open,
.aster-header .wp-block-navigation__responsive-container-close {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-sm);
  color: var(--wp--preset--color--contrast);
  place-items: center;
  cursor: pointer;
}
.aster-header .wp-block-navigation__responsive-container-open svg,
.aster-header .wp-block-navigation__responsive-container-close svg { display: none; }

.aster-header .wp-block-navigation__responsive-container-open::before,
.aster-header .wp-block-navigation__responsive-container-open::after,
.aster-header .wp-block-navigation__responsive-container-close::before,
.aster-header .wp-block-navigation__responsive-container-close::after {
  content: "";
  grid-area: 1 / 1;
  width: 1.05rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.aster-header .wp-block-navigation__responsive-container-open::before { transform: translateY(-3px); }
.aster-header .wp-block-navigation__responsive-container-open::after  { transform: translateY(3px); }
.aster-header .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); }
.aster-header .wp-block-navigation__responsive-container-close::after  { transform: rotate(-45deg); }

/* The close control is inside the panel, so pin it back over the
   hamburger's square rather than letting it sit in the panel's flow.
   It only exists while the panel is open — the base rule above hides it,
   and without this it stays hidden and the menu cannot be closed. */
.aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  display: grid;
}

/* Positioned against the panel, not the viewport: the panel's top edge IS
   the bottom of the bar, so this needs no admin-bar arithmetic. (A fixed
   position would also be wrong — an element running a transform animation
   becomes the containing block for fixed descendants.) */
.aster-header .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: calc((var(--wp--custom--header-height) / 2 + var(--wp--custom--line-hairline)) * -1);
  right: var(--wp--custom--gutter);
  transform: translateY(-50%);
  z-index: 2;
}

/* Hide the hamburger while the panel is open — the X now occupies its spot. */
.aster-header .aster-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
  visibility: hidden;
}


/* -------------------------------------------------------------------------
   6. MOBILE — the dropdown panel
   The design collapses the nav at 62rem; core collapses at 600px, so the
   breakpoint is moved here rather than left at core's default.
   ------------------------------------------------------------------------- */
@media (max-width: 61.9375rem) {

  .aster-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: grid;
  }
  .aster-header .aster-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  /* Order: wordmark, booking action, hamburger. */
  .aster-header .aster-header__inner { gap: var(--wp--preset--spacing--40); }
  .aster-header .aster-nav { order: 3; margin-left: 0; }
  .aster-header .aster-header__actions { order: 2; margin-left: auto; }

  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute;
    inset: 100% 0 auto 0;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    /* The close X sits above the panel's top edge — clipping it would leave
       a visible but unclickable control. */
    overflow: visible;
    z-index: 90;
    background: var(--wp--preset--color--base);
    border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
    animation: aster-panel-in var(--wp--custom--duration-base) var(--wp--custom--ease-out) both;
  }

  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    display: block;
    width: 100%;
    max-height: calc(100dvh - var(--aster-header-top, 0px) - var(--wp--custom--header-height));
    overflow-y: auto;
    /* Vertical padding zeroed explicitly — core's overlay adds its own. */
    padding: 0 var(--wp--custom--gutter);
  }

  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: block;
    gap: 0;
  }

  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    display: block;
    border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
  }
  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:last-child { border-bottom: 0; }

  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: block;
    padding: var(--wp--preset--spacing--50) 0;
    font-size: var(--wp--preset--font-size--md);
    border-bottom: 0;
  }
  .aster-header .aster-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.is-current .wp-block-navigation-item__content {
    color: var(--wp--preset--color--accent);
    border-bottom: 0;
  }

  /* While the panel is open the bar itself is opaque, but the hairline
     belongs to the panel's bottom edge, not the bar's. */
  .aster-header.is-nav-open {
    background: var(--wp--preset--color--base);
    border-bottom-color: transparent;
  }
}

/* Opacity only — animating transform here would make the panel a containing
   block for the positioned close control inside it. */
@keyframes aster-panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* -------------------------------------------------------------------------
   7. PHONE — the booking action shrinks to its icon
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .aster-header .aster-header__actions .aster-button__label { display: none; }
  .aster-header .aster-header__actions .aster-button {
    padding-inline: var(--wp--preset--spacing--40);
  }
  .aster-header .aster-header__actions .aster-button .aster-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}