/*-----------------------------------*\
  #HEADER.CSS
\*-----------------------------------*/

/* Topbar */
.topbar { display: none; }

/* Header */
.header .btn { display: none; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  padding-block: 40px;
  z-index: 4;
  border-block-end: 1px solid transparent;
  transition: var(--transition-1);
}

.header.active {
  padding-block: 20px;
  background-color: var(--eerie-black-4);
  border-color: var(--black-alpha-15);
}

.header.hide {
  transform: translateY(-100%);
  transition-delay: 250ms;
}

.header .container {
  padding-inline: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* User info displayed after login */
.header-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-user-info .user-name {
  color: var(--gold-crayola);
  font-size: var(--fontSize-label-2);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-5);
  font-family: var(--fontFamily-dm_sans);
}

/* Hamburger */
.nav-open-btn { padding: 12px; padding-inline-end: 0; }
.nav-open-btn .line {
  width: 30px;
  height: 2px;
  background-color: var(--white);
  margin-block: 4px;
  transform-origin: left;
  animation: menuBtn 400ms ease-in-out alternate infinite;
}
@keyframes menuBtn {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0.5); }
}
.nav-open-btn .line-2 { animation-delay: 150ms; }
.nav-open-btn .line-3 { animation-delay: 300ms; }

/* Navbar drawer */
.navbar {
  position: fixed;
  background-color: var(--smoky-black-1);
  top: 0;
  left: -360px;
  bottom: 0;
  max-width: 360px;
  width: 100%;
  padding-inline: 30px;
  padding-block-end: 50px;
  overflow-y: auto;
  visibility: hidden;
  z-index: 2;
  transition: var(--transition-2);
}
.navbar.active      { visibility: visible; transform: translateX(360px); }

.navbar .close-btn {
  color: var(--white);
  border: 1px solid currentColor;
  padding: 4px;
  border-radius: var(--radius-circle);
  margin-inline-start: auto;
  margin-block: 30px 20px;
}
.navbar .close-btn ion-icon { --ionicon-stroke-width: 40px; }
.navbar .close-btn:is(:hover, :focus-visible) { color: var(--gold-crayola); }

.navbar .logo {
  max-width: max-content;
  margin-inline: auto;
  margin-block-end: 60px;
}

.navbar-list {
  border-block-end: 1px solid var(--white-alpha-20);
  margin-block-end: 100px;
}
.navbar-item { border-block-start: 1px solid var(--white-alpha-20); }

.navbar-link {
  position: relative;
  font-size: var(--fontSize-label-2);
  text-transform: uppercase;
  padding-block: 10px;
  max-width: unset;
}
.navbar-link::after { display: none; }
.navbar-link .span  { transition: var(--transition-1); }

.navbar-link:is(:hover, :focus-visible, .active) .span {
  color: var(--gold-crayola);
  transform: translateX(20px);
}

.navbar-link .separator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: var(--transition-1);
}
.navbar-link:is(:hover, :focus-visible, .active) .separator { opacity: 1; }

.navbar-title  { margin-block-end: 15px; }
.navbar-text   { margin-block: 10px; }
.navbar .body-4 { color: var(--quick-silver); }

.sidebar-link { transition: var(--transition-1); }
.sidebar-link:is(:hover, :focus-visible) { color: var(--gold-crayola); }

.navbar .text-center .separator { margin-block: 30px; margin-inline: auto; }
.navbar .contact-label { margin-block-end: 10px; }
.navbar::-webkit-scrollbar-thumb { background-color: var(--white-alpha-10); }

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background-color: var(--black-alpha-80);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-2);
  z-index: 1;
}
.overlay.active { opacity: 1; pointer-events: all; }

/*--- Responsive ---*/
@media (min-width: 575px) {
  .topbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-block: 10px;
    border-block-end: 1px solid var(--white-alpha-20);
    z-index: 4;
    transition: var(--transition-1);
  }
  .topbar:has(~ .header.active) { transform: translateY(-100%); }
  .topbar-item:not(.link), .topbar .separator { display: none; }
  .topbar .container,
  .topbar-item { display: flex; align-items: center; }
  .topbar .container { justify-content: center; gap: 30px; }
  .topbar-item { gap: 6px; }
  .topbar-item ion-icon { --ionicon-stroke-width: 60px; }
  .topbar-item .span { font-size: var(--fontSize-label-1); }
  .topbar .link { transition: var(--transition-1); }
  .topbar .link:is(:hover, :focus-visible) { color: var(--gold-crayola); }

  .header { top: 51px; }
  .header.active { top: 0; }
  .header .btn { display: block; margin-inline-start: auto; }
}

@media (min-width: 992px) {
  .topbar-item:not(.link) { display: flex; }
  .topbar .item-2 { margin-inline-end: auto; }
}

@media (min-width: 1200px) {
  .topbar .container { max-width: unset; }
  .topbar .separator { display: block; }

  .nav-open-btn,
  .navbar > *:not(.navbar-list),
  .header .overlay { display: none; }

  .header .container { max-width: unset; }

  .navbar,
  .navbar.active,
  .navbar-list { all: unset; }
  .navbar,
  .navbar.active { margin-inline: auto 20px; }

  .navbar-list { display: flex; gap: 30px; }
  .navbar-item { border-block-start: none; }
  .navbar .separator { display: none; }
  .navbar-link:is(:hover, :focus-visible, .active) .span { transform: unset; }
  .navbar-link { font-weight: var(--weight-bold); letter-spacing: var(--letterSpacing-1); }
  .navbar-link::after { display: block; }
  .navbar-link.active::after { transform: scaleX(1); opacity: 1; }
  .header .btn { margin-inline-start: 0; }
}

@media (min-width: 1400px) {
  .navbar { margin-inline: auto; }
}