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

/* =============================================================================
   Header — CLEAN / FLAT (no blur, no glass)
   ============================================================================= */

.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;
  padding:0;
  height:var(--h-header);
  flex:0 0 auto;
}

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

.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;
}

/* burger — clean */
.Header__burger{
  width:40px; height:40px;
  border:1px solid var(--divider-2);
  background:transparent;
  color:var(--text);
  border-radius:var(--r-s);
  font-size:22px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}

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

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

/* ===== Desktop header pieces: hidden by default (mobile-first) ===== */
[data-header-desktop]{ display:none; }

/* 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); }

/* Desktop nav (mobile-first: hidden) */
.HeaderNav{
  display:none;
  align-items:center;
  gap:10px;
  min-width:0;
}

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

.HeaderNav__item{
  position:relative;
}

/* невидимый мостик между кнопкой и dropdown,
   чтобы меню не закрывалось при движении мышки вниз */
.HeaderNav__item--dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
  display:none;
}

.HeaderNav__link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:9px 12px;
  border-radius:999px;

  color:var(--text-2);
  background:transparent;
  border:1px solid transparent;

  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
  white-space:nowrap;
}

@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{
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}

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

/* Dropdown panel — CLEAN */
.HeaderNav__dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;

  min-width:240px;
  padding:10px;
  border-radius:var(--r-m);

  background:var(--surface);
  border:1px solid var(--divider-2);

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;

  display:none;
  z-index:80;
}

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

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

/* Open states (JS sets .is-open) */
.HeaderNav__item.is-open > .HeaderNav__dropdown{
  display:block;
}

/* Hover open for desktop pointers */
@media (hover:hover){
  .HeaderNav__item--dropdown:hover::after{
    display:block;
  }

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

/* Overflow */
.HeaderNav__overflow{
  position:relative;
}

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

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

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

.HeaderNav__overflowPanel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;

  width:min(360px, 92vw);
  border-radius:var(--r-m);

  background:var(--surface);
  border:1px solid var(--divider-2);

  box-shadow:none;
  padding:10px;
  display:none;
  z-index:90;
}

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

.HeaderNav__overflowList{
  display:grid;
  gap:8px;
}

.HeaderNav__overflowPanel.is-open{
  display:block;
}

/* links inside overflow become “rows” */
.HeaderNav__overflowList .HeaderNav__link{
  width:100%;
  justify-content:flex-start;
  background:transparent;
  border:1px solid var(--divider-2);
  border-radius:var(--r-s);
  padding:12px 12px;
}

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

/* When dropdown items move into overflow, panel becomes accordion */
.HeaderNav__overflowList .HeaderNav__item--dropdown{
  position:static;
}

.HeaderNav__overflowList .HeaderNav__item--dropdown > .HeaderNav__dropdown{
  position:static;
  top:auto;
  left:auto;
  min-width:0;

  box-shadow:none;
  border:0;
  background:transparent;
  backdrop-filter:none;

  padding:6px 0 0;
}

.HeaderNav__overflowList .HeaderNav__item--dropdown > .HeaderNav__dropdown{
  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;
}

/* ===== Desktop breakpoint: show desktop header pieces, hide mobile burger ===== */
@media (min-width:1024px){
  .HeaderNav{
    display:flex;
  }

  .Header__cta{
    display:flex;
  }

  [data-header-desktop]{
    display:block;
  }

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

  .Header__logo{
    max-width:none;
  }
}

/* Small screens tuning */
@media (max-width:360px){
  .Header__logo{
    padding:7px 0;
  }

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