/**
 * Merrick navigation
 *
 * Responsive adjustments for Exponent/Tatsu header navigation.
 */

/* Tatsu generates the logo wrapper; verify after rebuilding the mobile header. */
@media (max-width: 600px) {
  .tatsu-header-logo img.logo-img { width: 150px !important; max-width: 150px !important; height: auto !important; }
}

/* Anchor the returning smart header to the viewport at hamburger breakpoints.
 * Let Tatsu control its transform so it hides on scroll down and returns on
 * scroll up. The placeholder preserves the original header space. */
@media (max-width: 1024px) {
  #tatsu-header-container {
    position: relative !important;
    z-index: 99999 !important;
  }

  #tatsu-header-wrap.smart.sticky {
    width: 100% !important;
  }

  #tatsu-header-wrap.smart.sticky.pre-stuck,
  #tatsu-header-wrap.smart.sticky.stuck {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }
}

/* Apply the same anchoring correction to the desktop smart header. Without
 * this override, Tatsu reuses the header's original page offset when it
 * becomes fixed, leaving page content visible above the returned navigation. */
@media (min-width: 1025px) {
  #tatsu-header-container {
    position: relative !important;
    z-index: 99999 !important;
  }

  #tatsu-header-wrap.smart.sticky {
    width: 100% !important;
  }

  #tatsu-header-wrap.smart.sticky.pre-stuck,
  #tatsu-header-wrap.smart.sticky.stuck {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }

  body.admin-bar #tatsu-header-wrap.smart.sticky.pre-stuck,
  body.admin-bar #tatsu-header-wrap.smart.sticky.stuck {
    top: 32px !important;
  }
}

/* Keep navigation reachable when a keyboard user tabs into the hidden header. */
#tatsu-header-wrap.smart.sticky:focus-within {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  #tatsu-header-wrap.smart.sticky {
    transition: none;
  }
}

/* Account for the toolbar at tablet widths; below 601px it scrolls away. */
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar #tatsu-header-wrap.smart.sticky.pre-stuck {
    top: 46px !important;
  }
}

@media (min-width: 783px) and (max-width: 1024px) {
  body.admin-bar #tatsu-header-wrap.smart.sticky.pre-stuck {
    top: 32px !important;
  }
}

/* The fixed-width mobile logo cannot fit inside Tatsu's generated 25% column.
 * Keep the logo and menu columns on one row and let the menu use the remainder. */
@media (max-width: 767px) {
  #tatsu-header-container .tatsu-header > .tatsu-header-row {
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  #tatsu-header-container .tatsu-header > .tatsu-header-row > .tatsu-header-col:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  #tatsu-header-container .tatsu-header > .tatsu-header-row > .tatsu-header-col:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
  }
}

/* Translated desktop labels need slightly more room than the default 75%
 * menu column provides. Reclaim unused logo-column space so the navigation
 * and Get Help button remain on the same row. */
@media (min-width: 1025px) {
  #tatsu-header-container .tatsu-header > .tatsu-header-row > .tatsu-header-col:first-child {
    flex-basis: 20% !important;
  }

  #tatsu-header-container .tatsu-header > .tatsu-header-row > .tatsu-header-col:last-child {
    flex-basis: 80% !important;
  }

  #tatsu-header-container .tatsu-header-navigation > ul:first-of-type > li > a {
    white-space: nowrap;
  }

  #tatsu-header-container.merrick-header-menu-collapsed .tatsu-header > .tatsu-header-row > .tatsu-header-col:last-child > .tatsu-header-navigation,
  #tatsu-header-container.merrick-header-menu-collapsed .tatsu-header > .tatsu-header-row > .tatsu-header-col:last-child > .tatsu-button-wrap {
    display: none !important;
  }

  #tatsu-header-container.merrick-header-menu-collapsed .tatsu-header > .tatsu-header-row > .tatsu-header-col:last-child > .tatsu-hamburger[data-slide-menu][role="button"] {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* Center and enlarge the logo inside the slide-out menu without changing the
 * primary header logo. */
.tatsu-slide-menu .tatsu-header-logo {
  width: 100% !important;
}

.tatsu-slide-menu .tatsu-header-logo > a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.tatsu-slide-menu .tatsu-header-logo img.logo-img {
  width: 200px !important;
  max-width: 200px !important;
  max-height: none !important;
  height: auto !important;
  transform: translateX(-8px);
}

/* Keep the visible hamburger unchanged while giving touch and switch users a
 * dependable target at every breakpoint where Tatsu shows the mobile menu. */
@media (max-width: 1024px) {
  .tatsu-hamburger[data-slide-menu][role="button"] {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* GTranslate does not support Karen, so the child theme adds one shared
 * language submenu with a curated Karen resource link. */
.merrick-language-menu > a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.merrick-language-menu__icon {
  display: block;
  width: 22px;
  height: 22px;
}

.merrick-language-menu__item > a {
  display: flex !important;
  width: 100%;
  align-items: center !important;
  justify-content: flex-start;
  flex-direction: row !important;
  gap: 9px;
  box-sizing: border-box;
  white-space: nowrap;
}

.merrick-language-menu__item > a > img {
  display: block !important;
  flex: 0 0 auto;
  width: 22px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(53, 53, 45, 0.15);
}

.merrick-language-menu__item > a > span {
  display: block;
  line-height: 1.2;
}

/* Tatsu places the slide-menu navigation before its Get Help module. The
 * navigation script moves the language list into this dedicated wrapper so
 * the control follows the button without affecting the desktop menu. */
.tatsu-slide-menu .merrick-mobile-language {
  width: 100%;
  margin: 0 !important;
}

.tatsu-slide-menu .merrick-mobile-language__menu {
  width: 100% !important;
  margin: 0 !important;
}

.tatsu-slide-menu .merrick-mobile-language__menu > ul > .merrick-language-menu {
  margin: 0 !important;
}

.tatsu-slide-menu .merrick-mobile-language .merrick-language-menu > .sub-menu-indicator {
  right: auto !important;
  left: 27px !important;
  display: inline-flex !important;
  width: 20px !important;
  height: 44px !important;
  align-items: center;
  justify-content: center;
}

.tatsu-slide-menu .merrick-mobile-language .merrick-language-menu > .sub-menu-indicator > svg {
  transform: translateY(-5px);
}

.tatsu-slide-menu .merrick-mobile-social-links {
  display: flex !important;
  align-items: flex-end;
}

.tatsu-slide-menu .merrick-mobile-social-links .tatsu-icon {
  color: #35352d !important;
  font-size: 22px !important;
}

.tatsu-slide-menu .merrick-mobile-follow-us {
  flex: 0 0 auto;
  margin-right: 18px;
  color: #35352d;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

/* On desktop, Tatsu renders Get Help as a separate module after the menu.
 * Take the language control out of the menu flow and anchor it immediately to
 * the button's right so both controls share the same vertical center. */
@media (min-width: 1025px) {
  .tatsu-header-col:has(> .tatsu-header-navigation .merrick-language-menu) {
    position: relative;
  }

  .tatsu-header-col:has(> .tatsu-header-navigation .merrick-language-menu) > .tatsu-button-wrap {
    margin-right: 76px !important;
  }

  .tatsu-header-navigation .merrick-language-menu {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  .tatsu-header-navigation .merrick-language-menu > .tatsu-sub-menu {
    right: 0 !important;
    left: auto !important;
    width: 205px !important;
    min-width: 205px !important;
  }
}

.tatsu-slide-menu .sub-menu-indicator[role="button"]:focus-visible {
  outline: 2px solid #5c4b9e;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Leave the Hmong flag space blank while preserving language-label alignment. */
.merrick-language-menu__item > a[data-gt-lang="hmn"] > img {
  visibility: hidden;
}