/* Shared dropdown styling for the TECH UP header. */
.site-header{height:96px}

.site-header .menu-icon-close{display:none}

.site-header nav{gap:24px}

.site-header nav>.nav-item{
  padding:24px 0;
  position:relative
}

.site-header nav>.nav-item>.nav-trigger{
  align-items:center;
  background:transparent;
  border:0;
  box-sizing:border-box;
  color:#d6d6de;
  cursor:pointer;
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  height:48px;
  line-height:24px;
  padding:12px;
  white-space:nowrap;
  transition:background-color .2s ease
}

.site-header nav>.nav-item>.nav-trigger:hover,
.site-header nav>.nav-item[data-open]>.nav-trigger{
  background:rgba(116,119,133,.16)
}

.site-header nav>.nav-item>.nav-trigger:focus{
  outline:1px solid #e9e9ee;
  outline-offset:1px
}

.site-header nav>.nav-item>.nav-trigger>span{
  align-items:center;
  background:rgba(239,68,68,.16);
  color:#f27e86;
  display:flex;
  font-size:12px;
  font-weight:500;
  height:24px;
  line-height:18px;
  padding:0 8px
}

.site-header nav .nav-dropdown{
  background:#141418;
  border:0;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.45),0 4px 6px -4px rgba(0,0,0,.45),0 0 0 1px #262930;
  box-sizing:border-box;
  display:none;
  left:50%;
  padding:16px;
  top:84px;
  transform:translateX(-50%);
  width:360px
}

.site-header nav .nav-item[data-open]>.nav-dropdown{display:block}
.site-header nav .nav-dropdown[hidden]{display:none!important}

.site-header nav .nav-dropdown>a{
  align-items:center;
  background:transparent;
  gap:12px;
  min-height:64px;
  padding:12px;
  position:relative;
  transition:background-color .2s ease
}

.site-header nav .nav-dropdown>a+a{
  margin-top:16px
}

.site-header nav .nav-dropdown>a:hover,
.site-header nav .nav-dropdown>a:focus-visible{
  background:rgba(116,119,133,.16)
}

.site-header nav .nav-course-image{
  align-items:center;
  background:#1b1e23;
  color:inherit;
  flex:0 0 40px;
  height:40px;
  justify-content:center;
  padding:0;
  width:40px
}

.site-header nav .nav-course-image,
.site-header nav .nav-course-copy{
  display:flex
}

.site-header nav .nav-course-copy{
  align-items:flex-start;
  background:transparent;
  color:inherit;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding:0
}

.site-header nav .nav-course:hover .nav-course-image{background:#141418}

.site-header nav .nav-dropdown img{
  height:32px;
  object-fit:cover;
  width:32px
}

.site-header nav .nav-dropdown b{
  color:#e8e8ed;
  font-size:14px;
  font-weight:700;
  line-height:24px
}

.site-header nav .nav-dropdown small{
  color:#85858f;
  font-size:12px;
  font-weight:400;
  line-height:16px;
  margin-top:0;
  white-space:nowrap
}

@media(max-width:900px){
  .site-header nav{display:none}

  .site-header.mobile-menu-open{
    align-content:start;
    align-items:center;
    background:#131315;
    border:0;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-rows:72px auto;
    height:100vh;
    height:100dvh;
    inset:0;
    margin:0;
    max-width:none;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
    position:fixed;
    width:100%;
    z-index:1000
  }

  .site-header.mobile-menu-open .brand{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin-left:16px
  }

  .site-header.mobile-menu-open .brand img{width:149px;height:36px}

  .site-header.mobile-menu-open .header-actions{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    margin-right:6px
  }

  .site-header.mobile-menu-open .menu{
    align-items:center;
    color:#d4d4d8;
    display:flex;
    height:44px;
    justify-content:center;
    padding:0;
    width:44px
  }

  .site-header.mobile-menu-open .menu-icon-open{display:none}
  .site-header.mobile-menu-open .menu-icon-close{display:block}

  .site-header.mobile-menu-open nav{
    border-bottom:1px solid #2c2c31;
    display:flex;
    flex-direction:column;
    gap:8px;
    grid-column:1 / -1;
    grid-row:2;
    padding:8px 16px 24px;
    width:100%
  }

  .site-header.mobile-menu-open nav>.nav-item{padding:0;width:100%}

  .site-header.mobile-menu-open nav>.nav-item>.nav-trigger{
    color:#d4d4d8;
    font-size:16px;
    gap:8px;
    height:44px;
    line-height:28px;
    padding:8px 0;
    text-align:left;
    width:100%
  }

  .site-header.mobile-menu-open nav>.nav-item>.nav-trigger>span{
    background:rgba(239,68,68,.16);
    color:#f27e86;
    flex-shrink:0;
    height:24px;
    padding:0 8px
  }

  .site-header.mobile-menu-open .nav-trigger>svg{
    flex-shrink:0;
    height:20px;
    margin-left:auto;
    transition:transform .2s ease;
    width:20px
  }

  .site-header.mobile-menu-open .nav-item[data-open]>.nav-trigger>svg{transform:rotate(180deg)}

  .site-header.mobile-menu-open .nav-trigger:focus:not(:focus-visible){outline:none}

  .site-header.mobile-menu-open nav .nav-dropdown{
    background:transparent;
    border:0;
    box-shadow:none;
    left:auto;
    padding:4px 0;
    position:static;
    top:auto;
    transform:none;
    width:100%
  }

  .site-header.mobile-menu-open nav .nav-dropdown>a{
    min-height:44px;
    padding:12px;
    white-space:normal
  }

  .site-header.mobile-menu-open nav .nav-dropdown>a+a{margin-top:8px}
  .site-header.mobile-menu-open nav .nav-course-image,
  .site-header.mobile-menu-open nav .nav-dropdown small{display:none}
  .site-header.mobile-menu-open nav .nav-dropdown b{color:#d4d4d8;line-height:20px}
}

@media(max-width:640px){
  .site-header{height:72px}
}