/**
 *  @package michael-travels-theme
 *
 *  The site header.
 *
 *  Sticky, and transparent while it sits over a feature image. Everywhere else
 *  it is one of the site's dark sections, which is why the type inside it is
 *  always the light-on-dark set — only the background changes.
 */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: var(--mt-header-height);
  background: var(--mt-dark);
  color: var(--mt-on-dark);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/*  A page with no photograph behind the header has to make room for it.  */
body.no-hero {
  padding-top: var(--mt-header-height);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-5);
  width: 100%;
  max-width: var(--fuse-site-max-width);
  margin: 0 auto;
  padding: 0 var(--fuse-container-padding-x);
}




/*  ----------  Over a feature image  ----------  */

.site-header--over-image {
  background: transparent;
}

/**
 *  A photograph cannot be relied on to be dark where the header sits, so the
 *  transparent state carries its own scrim. It is a gradient rather than a
 *  flat tint so the header does not read as a bar.
 */
.site-header--over-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--mt-dark-rgb), 0.55), rgba(var(--mt-dark-rgb), 0));
  pointer-events: none;
}

.site-header--over-image.is-scrolled {
  background: var(--mt-dark);
  box-shadow: 0 1px 0 var(--mt-line-dark);
}

.site-header--over-image.is-scrolled::before {
  opacity: 0;
}




/*  ----------  Brand  ----------  */

.site-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.site-brand-name {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-3);
  color: var(--mt-on-dark);
  font-family: var(--mt-font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/*  Sized off the brand token, not off this line's own text: see
    --mt-brand-mark. The name here is smaller than the footer's, and the mark
    is meant to be the same in both.  */
.site-brand .site-logo {
  width: var(--mt-brand-mark);
  height: var(--mt-brand-mark);
}

.site-brand-name:hover,
.site-brand-name:focus {
  color: var(--mt-bright);
}

.site-brand .custom-logo {
  display: block;
  width: auto;
  max-height: 40px;
}




/*  ----------  Actions: navigation, search and the toggle  ----------  */

.site-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--mt-space-4);
}

.header-search-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mt-on-dark);
  border-radius: 50%;
}

.header-search-link:hover,
.header-search-link:focus {
  color: var(--mt-bright);
  background: rgba(var(--mt-bright-rgb), 0.08);
}

.mt-icon {
  display: block;
}




/*  ============================================================================
    The search panel

    Without the script this is an ordinary search form sitting at the top of
    the page, which is what the header's anchor jumps to. Everything below only
    applies once the script has claimed the page and made it a dialog.
    ============================================================================  */

.site-search {
  padding: var(--mt-space-7) var(--fuse-container-padding-x);
  background: var(--mt-ground-alt);
}

.site-search-inner {
  max-width: 640px;
  margin: 0 auto;
}

.site-search-title {
  margin: 0 0 var(--mt-space-3);
  font-family: var(--mt-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.site-search .mt-search-form {
  max-width: none;
  margin: 0;
}

.site-search-close {
  display: none;
}

.has-js .site-search {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--fuse-container-padding-x);
  background: rgba(var(--mt-dark-rgb), 0.82);
  visibility: hidden;
  opacity: 0;

  /**
   *  Visibility is delayed rather than transitioned, so it flips the instant
   *  the panel opens and only waits on the way out, once the fade has run.
   *
   *  Transitioning it outright meant the panel was still hidden in the moment
   *  after the class was added — and a hidden field cannot take focus, so the
   *  script's focus () call was silently refused and the cursor never landed
   *  in the search box.
   */
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.has-js .site-search.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.has-js .site-search-inner {
  position: relative;
  width: 100%;
  margin-top: min(22vh, 200px);
  padding: var(--mt-space-7);
  background: var(--mt-ground);
  border-radius: var(--mt-radius);
  box-shadow: 0 24px 60px rgba(var(--mt-dark-rgb), 0.35);
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.has-js .site-search.is-open .site-search-inner {
  transform: translateY(0);
}

.has-js .site-search-close {
  position: absolute;
  top: var(--mt-space-3);
  right: var(--mt-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--mt-muted);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.has-js .site-search-close:hover {
  background: var(--mt-ground-alt);
  color: var(--mt-text);
}

/*  Nothing behind the panel should scroll while it is open.  */
body.has-search-open {
  overflow: hidden;
}




/*  ----------  Navigation  ----------  */

.site-nav-list {
  display: flex;
  align-items: center;
  gap: var(--mt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-list a {
  display: block;
  padding: var(--mt-space-2) 0;
  color: var(--mt-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav-list a:hover,
.site-nav-list a:focus {
  color: var(--mt-bright);
}

.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a,
.site-nav-list .current-menu-ancestor > a {
  color: var(--mt-accent-light);
}




/*  ----------  The toggle  ----------  */

.menu-toggle {
  --fuse-button-padding-x: 0;
  --fuse-button-padding-y: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: var(--mt-radius);
  cursor: pointer;
}

.menu-toggle:hover {
  background: rgba(var(--mt-bright-rgb), 0.08);
}

.menu-toggle-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--mt-on-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(4) {
  transform: translateY(-6.5px) rotate(-45deg);
}




/*  ============================================================================
    Small screens: the navigation becomes a panel behind the toggle.
    ============================================================================  */

@media screen and (max-width: 991px) {

  /**
   *  Only once the script has claimed the page. Without it the toggle would
   *  be a button that does nothing in front of a menu nobody can reach, so
   *  the list simply stays visible instead.
   */
  .has-js .site-nav {
    position: fixed;
    top: var(--mt-header-height);
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--mt-header-height));
    padding: 0 var(--fuse-container-padding-x);
    overflow-y: auto;
    background: var(--mt-dark);
    border-top: 1px solid var(--mt-line-dark);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .has-js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /*  With no script there is no panel, so there is nothing to open.  */
  html:not(.has-js) .menu-toggle {
    display: none;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--mt-space-4) 0 var(--mt-space-7);
  }

  .site-nav-list li + li {
    border-top: 1px solid var(--mt-line-dark);
  }

  .site-nav-list a {
    padding: var(--mt-space-4) 0;
    font-size: 0.875rem;
  }

  .site-nav-list .sub-menu {
    margin: 0 0 var(--mt-space-3) var(--mt-space-4);
    padding: 0;
    list-style: none;
  }

}




@media screen and (min-width: 992px) {

  .menu-toggle {
    display: none;
  }

  .site-header-actions {
    gap: var(--mt-space-6);
  }

  /*  Sub-menus, on a pointer.  */
  .site-nav-list li {
    position: relative;
  }

  .site-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    min-width: 200px;
    margin: 0;
    padding: var(--mt-space-3) 0;
    background: var(--mt-dark);
    border: 1px solid var(--mt-line-dark);
    border-radius: var(--mt-radius);
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  .site-nav-list li:hover > .sub-menu,
  .site-nav-list li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .site-nav-list .sub-menu a {
    padding: var(--mt-space-2) var(--mt-space-5);
    letter-spacing: 0.06em;
    text-transform: none;
  }

}