/*
 * Header and Navigation
 * Path: /assets/css/header.css
 */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(229,226,243,.8);
}

.nav-wrap{
  position:relative;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:26px;
}

.site-branding{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:Manrope,Inter,Arial,sans-serif;
  font-size:23px;
  font-weight:800;
  line-height:1;
  color:var(--ink,#15131f);
}

.brand>span:last-child>span,
.brand-text>span{
  color:var(--primary,#2f20ff);
}

.brand-mark{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary,#2f20ff),#7864ff);
  border-radius:9px;
  font-size:16px;
}

.custom-logo-wrap,
.custom-logo-link{
  display:flex;
  align-items:center;
}

.custom-logo{
  display:block;
  width:auto;
  max-width:230px;
  max-height:54px;
}

.site-header a,
.site-header a:visited,
.site-header a:hover,
.site-header a:focus{
  text-decoration:none;
}

.main-nav{
  margin-left:auto;
}

.main-nav>ul,
.main-nav .menu,
.main-nav .primary-menu-fallback>ul{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  padding:0;
  margin:0;
}

.main-nav li{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
}

.main-nav a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:#4f4b61;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav .current-menu-item>a,
.main-nav .current-menu-ancestor>a,
.main-nav .current_page_item>a,
.main-nav .current_page_ancestor>a{
  color:var(--primary,#2f20ff);
}

.main-nav .sub-menu,
.main-nav .children{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  z-index:100;
  display:none;
  min-width:210px;
  margin:0;
  padding:12px;
  background:#fff;
  border:1px solid var(--line,#e7e5f1);
  border-radius:12px;
  box-shadow:var(--shadow,0 12px 34px rgba(48,32,157,.10));
  list-style:none;
}

.main-nav .sub-menu li,
.main-nav .children li{
  width:100%;
}

.main-nav .sub-menu a,
.main-nav .children a{
  display:flex;
  width:100%;
  padding:9px 10px;
  border-radius:8px;
  white-space:nowrap;
}

.main-nav .sub-menu a:hover,
.main-nav .children a:hover{
  background:var(--soft,#f4f2ff);
}

.main-nav li:hover>.sub-menu,
.main-nav li:focus-within>.sub-menu,
.main-nav li:hover>.children,
.main-nav li:focus-within>.children{
  display:block;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.icon-btn{
  width:34px;
  height:34px;
  border:1px solid var(--line,#e7e5f1);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--primary,#2f20ff);
  background:#fff;
}

.icon-btn:hover,
.icon-btn:focus{
  background:var(--primary,#2f20ff);
  border-color:var(--primary,#2f20ff);
  color:#fff;
}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:7px;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#222;
  margin:5px 0;
  transition:transform .25s ease,opacity .25s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:980px){
  .main-nav{
    position:absolute;
    left:20px;
    right:20px;
    top:74px;
    z-index:100;
    display:none;
    margin-left:0;
    padding:20px;
    background:#fff;
    border:1px solid var(--line,#e7e5f1);
    border-radius:12px;
    box-shadow:var(--shadow,0 12px 34px rgba(48,32,157,.10));
  }

  .main-nav.open,
  .main-nav.is-open,
  .main-nav.toggled{
    display:block;
  }

  .main-nav>ul,
  .main-nav .menu,
  .main-nav .primary-menu-fallback>ul{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
  }

  .main-nav li{
    width:100%;
  }

  .main-nav a{
    width:100%;
    padding:10px 8px;
  }

  .main-nav .sub-menu,
  .main-nav .children{
    position:static;
    display:block;
    min-width:0;
    margin:4px 0 0;
    padding:6px 0 6px 15px;
    border:0;
    border-left:2px solid var(--line,#e7e5f1);
    border-radius:0;
    box-shadow:none;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
  }

  .nav-actions{
    display:none;
  }
}

@media (max-width:480px){
  .custom-logo{
    max-width:180px;
    max-height:46px;
  }

  .brand{
    font-size:20px;
  }

  .main-nav{
    left:12px;
    right:12px;
  }
}