/* path: src/core/static/ui/css/layout/header.css */

/* =============================================================================
   Header
   ============================================================================= */

.Header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--h-header);
  display:flex;
  align-items:center;
  z-index:50;
  background:transparent;
  transition:
    transform .2s ease,
    background .2s ease;
  box-sizing:border-box;
}

.Header--solid{
  background:var(--bg);
  border-bottom:1px solid var(--divider-2);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.Header--hidden{
  transform:translateY(-100%);
}

.Header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:var(--h-header);
}

.Header__logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:var(--h-header);
  padding:0;
}

.Header__logoImg{
  display:block;
  width:auto;
  height:40px;
}

.Header__logoText{
  font-weight:600;
  letter-spacing:-.01em;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =============================================================================
   Header controls
   ============================================================================= */

.Header__burger,
.HeaderNav__overflowBtn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border:1px solid var(--divider-2);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .08s ease;
}

.Header__burger{
  border-radius:var(--r-s);
  font-size:22px;
}

.HeaderNav__overflowBtn{
  border-radius:var(--r-m);
}

@media (hover:hover){
  .Header__burger:hover,
  .HeaderNav__overflowBtn:hover{
    background:rgba(255,255,255,.03);
    border-color:var(--divider-3);
  }
}

.Header__burger:active,
.HeaderNav__overflowBtn:active{
  transform:translateY(1px);
}

/* =============================================================================
   Visibility
   ============================================================================= */

[data-header-tablet],
[data-header-desktop]{
  display:none;
}

.Header__audience,
.Header__phone,
.Header__cta{
  flex:0 0 auto;
}

/* =============================================================================
   Phone
   ============================================================================= */

.HeaderPhone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
  font-size:1rem;
  white-space:nowrap;
  user-select:text;
  cursor:text;
}

.HeaderPhone__icon{
  opacity:.6;
}

.HeaderPhone__text{
  letter-spacing:.01em;
}

.HeaderPhone--muted{
  color:var(--text-3);
}

/* =============================================================================
   Navigation
   ============================================================================= */

.HeaderNav{
  display:none;
  align-items:center;
  gap:10px;
  min-width:0;
}

.HeaderNav__list{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  gap:6px;
  margin:0;
  padding:0;
  overflow:visible;
  list-style:none;
  white-space:nowrap;
}

.HeaderNav__item{
  position:relative;
}

.HeaderNav__item--dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:12px;
  display:none;
}

.HeaderNav__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  white-space:nowrap;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .08s ease;
}

@media (hover:hover){
  .HeaderNav__link:hover{
    color:var(--text);
    background:rgba(255,255,255,.03);
    border-color:var(--divider-2);
  }
}

.HeaderNav__link:active{
  transform:translateY(1px);
}

.HeaderNav__link--btn{
  cursor:pointer;
}

.HeaderNav__chev{
  opacity:.85;
  font-size:.9em;
}

/* =============================================================================
   Dropdown panels
   ============================================================================= */

.HeaderNav__dropdown,
.HeaderNav__overflowPanel{
  position:absolute;
  top:calc(100% + 10px);
  padding:10px;
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  display:none;
}

.HeaderNav__dropdown{
  left:0;
  min-width:240px;
  z-index:80;
}

.HeaderNav__overflowPanel{
  right:0;
  width:min(360px, 92vw);
  z-index:90;
}

.HeaderNav__dropLink,
.HeaderNav__overflowList .HeaderNav__link{
  padding:10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  transition:
    background .15s ease,
    border-color .15s ease;
}

.HeaderNav__dropLink{
  display:block;
}

.HeaderNav__overflowList .HeaderNav__link{
  display:flex;
  width:100%;
  justify-content:flex-start;
}

@media (hover:hover){
  .HeaderNav__dropLink:hover,
  .HeaderNav__overflowList .HeaderNav__link:hover{
    background:var(--surface-2);
    border-color:var(--divider-2);
  }
}

.HeaderNav__item.is-open > .HeaderNav__dropdown,
.HeaderNav__overflowPanel.is-open{
  display:block;
}

@media (hover:hover){
  .HeaderNav__item--dropdown:hover::after{
    display:block;
  }

  .HeaderNav__item--dropdown:hover > .HeaderNav__dropdown{
    display:block;
  }
}

/* =============================================================================
   Overflow
   ============================================================================= */

.HeaderNav__overflow{
  position:relative;
  flex:0 0 auto;
}

.HeaderNav__overflowTitle{
  margin:6px 6px 8px;
  color:var(--text);
  font-weight:600;
}

.HeaderNav__overflowList{
  display:grid;
  gap:0;
}

.HeaderNav__overflowList .HeaderNav__item--dropdown{
  position:static;
}

.HeaderNav__overflowList .HeaderNav__item--dropdown > .HeaderNav__dropdown{
  position:static;
  top:auto;
  left:auto;
  min-width:0;
  padding:6px 0 0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  display:none;
}

.HeaderNav__overflowList .HeaderNav__item--dropdown.is-open > .HeaderNav__dropdown{
  display:block;
}

/* =============================================================================
   CTA
   ============================================================================= */

.Header__cta{
  display:none;
  align-items:center;
  gap:10px;
}

.HeaderCta{
  height:44px;
  padding:0 18px;
  border-radius:999px;
  font-size:1rem;
}

/* =============================================================================
   Tablet: 768–1119px
   ============================================================================= */

@media (min-width:768px){
  [data-header-tablet]{
    display:block;
  }
}

@media (min-width:768px) and (max-width:1119px){
  .Header__phone[data-header-tablet]{
    margin-left:auto;
  }
}

/* =============================================================================
   Desktop: 1120px+
   ============================================================================= */

@media (min-width:1120px){
  [data-header-desktop]{
    display:block;
  }

  .HeaderNav[data-header-desktop]{
    display:flex;
  }

  .Header__cta[data-header-desktop]{
    display:flex;
  }

  [data-header-mobile]{
    display:none;
  }

  .Header__logo{
    max-width:none;
  }
}

/* =============================================================================
   Small screens
   ============================================================================= */

@media (max-width:360px){
  .Header__logo{
    padding:7px 0;
  }

  .Header__logoImg{
    height:42px;
    max-width:200px;
  }
}