// 5.  Header

/*  ----------------------------------------------------------------------------
    header grid container
*/
.td-header-container {
  width: 1021px;
  margin-right: auto;
  margin-left: auto;
  position: relative;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
     width: 756px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    width: 100%;
  }
}

.td-header-main-menu {
  background-color: #222;
  position: relative;
  z-index: 3;

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    height: 53px;
  }
}

.td-header-menu-wrap { // for affix to keep the space
  min-height: 44px;
  /* responsive phone */
  @media (max-width: 767px) {
    min-height: 53px;
  }
}


// full width setup grid
body .td-make-full {
  width: 1021px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: table;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 756px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    width: 100%;
  }

  .sub-menu {
    border-top: 0; // fix alignment when top menu is full
  }
}

/* header rows */
.td-header-row {
  .mx-row-and-span(td-header-sp);
}



/*  ----------------------------------------------------------------------------
    main menu
*/
#td-header-menu .td-container-border:after {
  background-color: @td_grid_border_color;
}

// main menu gradient = shadow
.td-header-gradient:before {
  content:"";
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAHCAYAAADJTCeUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMjViOTdiYS1kZjJlLTNlNDUtYjk3Yi00N2I1NjQyOTRjODQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQ3M0QzQTVFNzE5MTFFMzk1RTdCODk0MTJBMEZFMUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQ3M0QzQTRFNzE5MTFFMzk1RTdCODk0MTJBMEZFMUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmZiZjM2Y2ExLTgzODYtMDE0Mi05NTU2LWNiZTFmMzg5YmM3NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphMjViOTdiYS1kZjJlLTNlNDUtYjk3Yi00N2I1NjQyOTRjODQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7mNy80AAAAI0lEQVR42mJgYGBgZQISnCCCn+H///8MIJY8iMUOYv0BCDAAU6YHQs4scEAAAAAASUVORK5CYII=);
  background-color: transparent;
  width: 100%;
  height: 7px;
  position: absolute;
  top: -3px;
  z-index: 1;
}

// header border
.td-header-border:before {
  content:"";
  background-color: @td_theme_color;
  display: block;
  height: 4px;

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    display: none;
  }
}

// h1 logo title seo
.td-visual-hidden {
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.td-logo {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: inherit !important;
  font-family: @font2;
}



/*  ----------------------------------------------------------------------------
    header
*/
.td-header-container {
  clear: both;
}

/*  ----------------------------------------------------------------------------
    logo
*/
.td-header-sp-logo {
  width: 272px;
  position: relative;
  margin-bottom: 8px;
  margin-top: 8px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 248px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    margin-bottom: 0;
  }

  a {
    height: 114px;
    display: block;

    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      height: 90px;
    }
  }
}


// WPML plugin
.td-wpml {

  .wpml-ls-menu-item .wpml-ls-flag {
    vertical-align: middle;
    top: -1px;
    position: relative;
    margin-right: 3px;
  }

  // footer menu
  .td-subfooter-menu {

    .wpml-ls-item.menu-item-has-children {
      /* responsive portrait phone */
      @media (max-width: @responsive_p_phone_max) {
        position: relative;
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 16px;

        > a {
          pointer-events: none;
        }
      }

      .sub-menu {
        position: absolute;
        display: block;
        bottom: 100%;
        padding: 12px 20px;
        margin: 0 -20px 10px;
        visibility: hidden;
        opacity: 0;
        .transition(all 0.2s ease);
        .transform(translate3d(0, -10px, 0));

        /* responsive portrait phone */
        @media (max-width: @responsive_p_phone_max) {
          margin: 10px 0;
          right: 0;
          left: 0;
        }

        li {
          display: block;
          padding: 3px 0;
          white-space: nowrap;
          text-align: center;
          /* responsive portrait phone */
          @media (max-width: @responsive_p_phone_max) {
            padding: 6px 0;
          }
        }
      }

      &:hover {
        .sub-menu {
          visibility: visible;
          opacity: 1;
          .transform(translate3d(0, 0, 0));
        }
      }
    }

    .menu-item-first a {
      /* responsive portrait phone */
      @media (max-width: @responsive_p_phone_max) {
        margin-left: 16px;
      }
    }

    .wpml-ls-first-item.menu-item-first {
      /* responsive portrait phone */
      @media (max-width: @responsive_p_phone_max) {
        margin-top: 0;
        margin-bottom: 16px;
      }
    }
  }

  // top menu
  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {

    .td-header-style-1 .td-header-top-menu {
      top: 0;
    }
    .td_data_time {
      line-height: 29px;
      margin:0 !important;
    }
    .td-top-menu-full, .td-header-top-menu {
      display: block !important;
    }
    .td-header-sp-top-menu {
      width: 100%;
    }
    .td-header-top-menu {
      // background-color: #3c3c3c !important;
      padding-left: 17px;
      padding-right: 17px;
    }
    .td_ul_logout,
    .td_ul_login,
    .td-header-sp-top-widget,
    .td-weather-top-widget {
      display: none !important;
    }

    .menu-top-container {
      margin-right: 0;
      float: right;

      .top-header-menu {
        > li {
          display: none;
          a {
            margin-right: 0;
          }
        }
        .wpml-ls-item {
          display: inline-block;
          margin-top: 0;
        }
        li ul {
          border-top: 0;
        }
      }

      .wpml-ls-item.menu-item-has-children {

        > a {
          pointer-events: none;
        }

        .sub-menu {
          position: absolute;
          display: block;
          visibility: hidden;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          transition: all 0.2s ease;
          transform: translate3d(0, 10px, 0);
          -webkit-transform: translate3d(0, 10px, 0);
          -moz-transform: translate3d(0, 10px, 0);
          -ms-transform: translate3d(0, 10px, 0);
          -o-transform: translate3d(0, 10px, 0);
          right: 0;
          left: auto;
          margin: 0;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);

          li {
            display: block;
            padding: 3px 0;
            white-space: nowrap;
          }
          a {
            margin: 0 10px;
            padding: 0;
          }
          .wpml-ls-menu-item .wpml-ls-flag {
            top: -2px;
          }

        }

        &:hover .sub-menu {
          visibility: visible;
          opacity: 1;
          transform: translate3d(0, 0, 0);
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
        }

      }

    }

  }
}