/***********
*************** HEADER SECTION
*****************************************/

/*************************************************************         HEADER LAYOUT          ********************/

/* #region HEADER LAYOUT */

/*==========================================================================
|                                HEADER WRAPPER                            |
==========================================================================*/

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(7,7,7,0.82);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 200ms ease, background 200ms ease;
  scroll-padding-top: var(--scroll-offset);
}

/*==========================================================================
|                               HEADER INTERNAL LAYOUT                     |
==========================================================================*/

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
  
/*==========================================================================
|                               HEADER SCROLL ELEVATION                    |
==========================================================================*/

.site-header.is-elevated{
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  background: rgba(7,7,7,0.68);
}



/* #endregion HEADER LAYOUT */


/*************************************************************         HEADER BRANDING LINK          ********************/

/* #region HEADER BRANDING */

/*==========================================================================
|                            HEADER LOGO IMAGE                             |
==========================================================================*/

.brand-logo{
  display: block;
  width: auto;
  height: 32px;
  max-width: min(52vw, 220px);
  object-fit: contain;
}

/*==========================================================================
|                            HEADER LOGO LINK                              |
==========================================================================*/

.home-link{
  display: inline-flex;
  align-items: center;
  gap: 0px;
  text-decoration: none;
  cursor: pointer;

  /* ====== BELOW PREVENTS DRAG AND HIGHLIGHT ====== */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}



/* #endregion HEADER BRANDING */


/***********
*************** HEADER RESPONSIVE
*****************************************/

/* #region HEADER RESPONSIVE */

@media (min-width: 860px){
  .brand-logo{
    height: 38px;
  }
}

@media (max-width: 720px){
  .header-inner{
    padding: 10px 0;
  }

  .brand-logo{
    height: 24px;
    max-width: min(58vw, 180px);
  }
}

/* #endregion HEADER RESPONSIVE */