.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;

  width:100%;
  max-width:var(--max-width);
  min-height:clamp(100px, 8vw, 200px);
  margin:20px auto 0;
  padding:0 20px;
  position:relative;
}

.brand-container{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex:0 1 auto;
  min-width:0;
}

.logo{
  height:var(--brand-logo-height);
  width:var(--brand-logo-width);
  max-width:100%;
  flex-shrink:0;
  transition:var(--transition-basic);
  transform:scale(1) rotate(0deg);
}

@media (hover: hover) and (pointer: fine){
  .logo:hover{
    transform:scale(1.03) rotate(45deg);
  }
}

.title-container{
  line-height:var(--line-height-medium);
  min-width:0;
}

.title{
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-height);
  color:var(--text-color-dark-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.subtitle{
  font-size:var(--font-size-h3);
  color:var(--color-brand-secondary);
  opacity:var(--opacity-small);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-container{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--gap-small);
  flex:1 1 auto;
  min-width:0;
}

.nav-container a{
  text-decoration:none;
  padding:0.5rem 1rem;
  color:var(--color-brand-secondary);
  border-radius:var(--radius-menu-button);
  transition:var(--transition-basic);
  white-space:nowrap;
}

.nav-container a:hover{
  color:var(--color-brand-primary);
  background-color:var(--color-brand-secondary);
}

.hamburger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}

.hamburger span{
  display:block;
  width:24px;
  height:3px;
  margin:5px auto;
  border-radius:2px;
  background:var(--color-brand-secondary);
  transition:var(--transition-basic);
}






/* MOBILE */
@media (max-width: 768px){
  .header-container{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:0.75rem;
    margin-top:12px;
    padding:0 12px;
    min-height:auto;
  }

  .brand-container{
    flex:1 1 auto;
    min-width:0;
    align-items:center;
  }

  .logo{
    height:clamp(56px, 12vw, 72px);
    width:auto;
  }

  .title-container{
    flex:1 1 auto;
    min-width:0;
  }

  .title{
    font-size:clamp(1.25rem, 5vw, 1.8rem);
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    word-break:break-word;
  }

  .subtitle{
    font-size:clamp(0.9rem, 3.5vw, 1.05rem);
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    word-break:break-word;
  }

  .hamburger{
    display:block;
    margin-left:auto;
    align-self:center;
    color: var(--color-brand-secondary);
    font-size: large;
  }

  .nav-container{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0.5rem;
    margin-top:0.25rem;
    flex:0 0 100%;
  }

  .nav-container.active{
    display:flex;
  }

  .nav-container a{
    display:block;
    width:100%;
    padding:0.8rem 1rem;
    font-size:0.95rem;
    text-align:left;
    color:var(--color-brand-primary);
    background-color:var(--color-brand-secondary);
  }
}