/*
 * Astra switches to its desktop header at 922px, but HHOSA's eight-item
 * navigation needs more room. Keep it on one line by using the compact
 * header until the full navigation fits comfortably.
 */
@media (min-width: 922px) and (max-width: 1359px) {
  #ast-desktop-header {
    display: none !important;
  }

  #ast-mobile-header {
    display: block !important;
  }

  .ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content {
    display: block !important;
    position: absolute;
    right: 14px;
    left: auto;
    width: min(360px, calc(100vw - 28px));
    padding: 8px 0;
    border: 1px solid #d5e7e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(16, 48, 41, 0.12);
  }

  #ast-mobile-header .main-header-menu {
    display: block !important;
  }

  #ast-mobile-header .main-header-menu > li {
    width: 100%;
  }

  #ast-mobile-header .main-header-menu > li > .menu-link {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 1359px) {
  #ast-mobile-header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 98px;
    min-height: 50px;
    padding: 8px 14px;
    border: 1px solid #b8d9d1;
    border-radius: 999px;
    background: #eef7f4;
    color: #08705f;
    box-shadow: 0 4px 12px rgba(16, 72, 61, 0.1);
  }

  #ast-mobile-header .menu-toggle::after {
    content: "メニュー";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }

  #ast-mobile-header .menu-toggle.toggled::after {
    content: "閉じる";
  }

  #ast-mobile-header .menu-toggle .ast-mobile-svg {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 480px) {
  #ast-mobile-header .menu-toggle {
    min-width: 56px;
    min-height: 50px;
    padding: 8px 12px;
  }

  #ast-mobile-header .menu-toggle::after {
    content: none;
  }

  #ast-mobile-header .menu-toggle .ast-mobile-svg {
    width: 31px;
    height: 31px;
  }
}

@media (max-width: 921px) {
  .ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content {
    right: 14px;
    left: auto;
    width: calc(100vw - 28px);
    padding: 8px 0;
    border: 1px solid #d5e7e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(16, 48, 41, 0.12);
  }

  #ast-mobile-header .main-header-menu > li > .menu-link {
    padding-right: 20px;
    padding-left: 20px;
  }
}