/*
menu
*/
:where(html) {
  --menu-font: 'Poppins', sans-serif;
  --menu-weight: 500;
  --menu-color:var(--black);
  --menu-color-hover:var(--black);
  --menu-icon-open-color:var(--black);
  --header-height:56px;
  scroll-margin-top:var(--header-height);
}

@media (prefers-color-scheme: dark) {
  :where(html) {

  }
}
.site-header {
  padding-block: 0px;
  padding-inline: 20px;background-color: var(--white);position: relative;z-index: 10;
    border-bottom: 1px solid rgba(235, 235, 235, .4);
  .header-container {
    display: flex;justify-content: space-between;align-items: center;position: relative;
  }
  .home-link {height: auto;max-width: min(100%, 356px);flex:1;}
  .brand-image {height: auto;width: 100%;}
  &.fixed {position: fixed; top: 0; left: 0; right: 0; animation: fadeInDown 0.3s ease;}
}
body:has(.site-header.fixed) {
  padding-top:var(--header-height);
}

@media (min-width: 992px) {
  :where(html) {
    --header-height:90px;
  }

  .site-header {
    padding: 13px 0;
    .header-top-menu {
      display: grid;
      justify-self: center;
      align-items: center;
      background-color: var(--black);
      color:var(--primary);
      align-self: stretch;
      font-size: 34px;
      font-family: var(--menu-font);
      font-weight: var(--menu-weight);
      line-height: 1;
      .widget {padding: 10px 20px; width: 17ch;}
    }
  }
}

/*@media (min-width: 1250px) {
  .site-header {
    .header-container {
      margin-inline:auto;
    }
  }
}*/

/*
main navigation
*/
.main-navigation {
  .social-items {display: none;}
  .menu-close {display: none;}
}
.main-navigation .menu {
  display: flex;gap:0;font-family: var(--menu-font);font-weight: var(--menu-weight);font-size: 19px;letter-spacing: 1px;line-height: 30px;
}

.main-navigation .menu-item  {
  display: block;
  padding:17px 15px;
  >a {
    display: block;
    color:var(--menu-color);
    text-decoration: none;
    letter-spacing: -.02em;
    --link-background-position: calc(100% - 2px);

      background-repeat: no-repeat;
      background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
      background-size: 0 var(--link-background-position);
      transition: .4s background-size;
      background-position-x: 100%;

    &:hover {
      background-size: 100% var(--link-background-position);
      background-position-x: 0;
    }
  }
}


@media (min-width: 990px) {
  .main-navigation
  {
    .nav-mobile-header {display: none;}
    .menu {flex-wrap: wrap;font-size: 15px}
  }

}
/* sub menu */

@media (min-width: 992px) {
  .sub-menu {
    position: absolute;
    display: block;
    z-index: 2;
    visibility: hidden;
    top: 100%;
    left: 0;
    opacity: 0;
    margin-top: -1px;
    /*transition: transform .1s linear .5s,opacity .1s linear .5s,visibility .1s linear .5s;*/
    transition: .3s linear ;
    transform: translateY(-10px);

    border: 1px solid #EFF0F1;
    min-width: 290px;
    background-color: var(--white);
    padding: 15px 20px;
    border-right: 12px;
  }
}
.menu-item-has-children {position: relative;}
.menu-item-has-children>a:where(:hover,:focus,:active)+.sub-menu ,
.menu-item-has-children:where(:hover,:focus,:active,:focus-within)>.sub-menu {visibility: visible;opacity: 1;
  transition:  .3s linear;
  transform: translateY(0);
}

.submenu-arrow {vertical-align: middle;font-size: 15px;margin-left: 5px;}


.menu-toggle {
  flex:0 0 32px;
  width: 32px;height: 32px;padding:0;border:0;background: none;display: flex;cursor: pointer;
  > svg {width: 100%;height: 100%;translate: 0 1px}
  @media (min-width: 993px) {
    display: none;
  }
}



/*
 mobile
*/
/*
 main mobile
*/
@media (max-width: 992px) {
  .site-header {
    padding: 10px 0;
    /*box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 15%);*/
    .header-container {

      gap:20px;
      .header-top-menu {
        display: none;
        font-size: 12px;
        font-weight: 300;
        p {line-height: 1; }
      }
    }
  }

  .main-navigation {
    display: grid;
    margin: 0;
    width: 340px;
    right: 0px;
    top: 0px;
    height: 100%;
    overflow-y: scroll;
    position: fixed;
    z-index: 2;
    transition:.6s;
    opacity: 0;
    pointer-events: none;
    transform: translateX(340px);
    background-color: var(--white);
    color:var(--text);
    .nav-mobile-header {display: flex; align-items: center; justify-content: end;padding: 22px 40px}
    .social-items {
      margin-inline: 15px;
      display: flex;gap:20px;align-items: center;justify-content: end;
      .social-link {padding: 10px;  }
    }
    .menu-close {color: inherit;background: none;border:0;font-size: 20px; position: absolute;top: 40px; right: 40px;display: block; }
  }
  .menu-toggle {
    /*position: absolute;
    right: 0;top: 13px;*/
  }
  body.main-menu-is-open {overflow: hidden; }
  .menu-toggle[aria-expanded="true"]+.main-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: all .6s cubic-bezier(.77, 0, .175, 1);


  }
  .main-navigation .menu {flex-direction: column;padding-inline: 60px;margin-block: auto;}
  .main-navigation .menu-item {padding: 15px 0;}
  .main-navigation .menu-item>a {
    font-family: var(--font-base);font-weight: 500;font-size: 24px;
    letter-spacing:-0.48px;
    padding:0;
    color:inherit;
  }
  /*.main-navigation .menu-item+.menu-item>a{border-top:0}*/
  /*.main-navigation .menu-item>a:where(:hover,:focus,:active) {text-decoration: underline;}*/
  /*.menu-item-has-children >a{pointer-events: none}*/


}
/*
 submenu mobile
*/
@media (max-width: 991px) {
  .sub-menu {
    display: block;
  }
  .submenu-arrow {/*transform: rotate(-90deg);*/}
  .main-navigation .menu-item-has-children>a{display: flex; justify-content: space-between; align-items: center;}
    .main-navigation .sub-menu .menu-item>a{padding-left: 4ch;  }
}