/*
menu
*/
:where(html) {
  --menu-font: 'Barlow Condensed', sans-serif;
  --menu-weight: 700;
  --menu-color:var(--black);
  --menu-color-hover:var(--black);
  --menu-icon-open-color:var(--black);
  --header-height:93px;
}

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

  }
}
.site-header {

  padding-block: 0px;
  padding-inline: 20px;background-color: var(--white);position: relative;z-index: 10;
  box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 15%);
  .header-container {
    display: flex;justify-content: space-between;align-items: center;position: relative;

  }
  .brand-wrap {
    display: grid; gap:0; justify-items: center;
    .slogan {font-size: 12px;}
  }
  .brand-image {height: 48px;width: auto;}
  &.fixed {position: fixed; top: 0; left: 0; right: 0; animation: fadeInDown 0.3s ease;}
}
body:has(.site-header.fixed) {
  padding-top:var(--header-height);
}
/*body.page-template-template-niv2 {
  padding-top: 0;
  #smooth-content{padding-top:var(--header-height)}
}*/
@media (min-width: 992px) {
  :where(html) {
    --header-height:135px;
  }

  .site-header {
    padding-block: 0px;
    .header-container {
      margin-inline: 0;
      display: grid;
      grid-template-columns: auto 1fr auto;
    }
    .brand-wrap {padding-block: 20px; }
    .brand-image {height: 65px;}
    .main-navigation {margin-inline: auto;}
    .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;

    }
    .brand-image {height: 95px;}
  }
}

/*
main navigation
*/
.main-navigation {
  .social-items {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;}
.main-navigation .menu-item >a {display: block;
  color:var(--menu-color);
  padding:17px 15px;
  text-decoration: none;
  text-underline-offset: 6px;
}


@media (min-width: 992px) {
  .main-navigation
  {

    .nav-mobile-header {display: none;}
    .menu {flex-wrap: wrap;font-size: 34px}
    .current-menu-item>a,
    .menu-item>a:is(:hover,:active,:focus-visible) {text-decoration: underline;}
  }

}
/* 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 {width: calc(30px + 18px);height: 36px;padding:9px 5px;border:0;background: none;display: flex;cursor: pointer;}
.menu-icon {
    display: block;
    background: var(--menu-icon-open-color);
    width: 30px;
    height: 3px;
    box-shadow: 0 8px 0px var(--menu-icon-open-color),0 16px 0px var(--menu-icon-open-color);

}
@media (min-width: 992px) {
  .menu-toggle {display: none;}
  .main-navigation .sub-menu .menu-item>a {padding:10px 20px;font-family: var(--font-secondary);font-weight: 700;font-size: 22px; transition: .3s;letter-spacing: normal;}
  .main-navigation .sub-menu .menu-item>a:where(:hover,:focus,:active) {
    text-decoration: underline;
  }
}

/*
 mobile
*/
/*
 main mobile
*/
@media (max-width: 991px) {
  .site-header {
    padding: 10px;
    box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 15%);
    .header-container {
      flex-direction: column;
      gap:10px;
      .header-top-menu {
        display: none;
        font-size: 12px;
        font-weight: 300;
        p {line-height: 1; }
      }
    }
  }

  .main-navigation {
    margin: 0;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 100%;
    overflow-y: scroll;
    position: fixed;
    z-index: 2;
    transition:.3s;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    background-color: var(--black);
    color:var(--white);
    .nav-mobile-header {display: flex; align-items: center; justify-content: space-between;padding: 14px 15px}
    .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: 32px;  }
  }
  .menu-toggle {
    position: absolute;
    right: 0;
  }
  body.main-menu-is-open {overflow: hidden; }
  .menu-toggle[aria-expanded="true"]+.main-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:.3s;
  }
  .main-navigation .menu {flex-direction: column;}
  .main-navigation .menu-item>a {
    font-family: var(--font-base);font-weight: 800;font-size: 20px;
    /*letter-spacing: normal;*/
    padding:15px 20px 15px 27px;
    transition: .3s;
    color:inherit;
    /*border: 1px solid var(--grey-6);
    border-left: 4px solid transparent;
    border-right:0px;*/
  }
  /*.main-navigation .menu-item+.menu-item>a{border-top:0}*/
  .main-navigation .current-menu-item>a,
  .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;  }
}