/* ==========================================================================
   Header CSS — ByteCore Stack Theme
   ========================================================================== */

/* ── Header shell — transparent on load, solid after scroll ─────────────── */
.bpt-header {
  position:                sticky;
  top:                     0;
  left:                    0;
  right:                   0;
  z-index:                 1000;
  height:                  var(--bpt-header-h);
  background:              transparent;
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
  border-bottom:           1px solid transparent;
  box-shadow:              none;
  transition:              background .3s ease,
                           border-color .3s ease,
                           box-shadow .3s ease,
                           backdrop-filter .3s ease;
}

/* Scrolled — solid background kicks in */
.bpt-header.bpt-header--scrolled {
  background:              rgba(15, 17, 23, .96);
  backdrop-filter:         blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:              var(--bpt-shadow);
  border-color:            var(--bpt-border);
}

.bpt-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  gap:             1rem;
}

/* ── Brand / Logo ────────────────────────────────────────────────────────── */
.bpt-header__brand { flex-shrink: 0; }

.bpt-header__logo a,
.bpt-header__logo-text {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  transition:      opacity var(--bpt-t);
}
.bpt-header__logo a:hover,
.bpt-header__logo-text:hover { opacity: .85; }

.bpt-header__logo img,
.bpt-header__logo svg { height: 46px; width: auto; }

/* ── Primary nav ─────────────────────────────────────────────────────────── */
.bpt-nav {
  display:     flex;
  margin-left: auto;
}

.bpt-nav__list {
  display:     flex;
  align-items: center;
  gap:         .1rem;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.bpt-menu-item { position: relative; }

.bpt-menu-link {
  display:         inline-flex;
  align-items:     center;
  gap:             .35rem;
  padding:         .5rem .85rem;
  font-size:       .875rem;
  font-weight:     500;
  color:           var(--bpt-text-2);
  text-decoration: none;
  white-space:     nowrap;
  position:        relative;
  transition:      color var(--bpt-t);
}

.bpt-menu-link::before {
  content:       '';
  position:      absolute;
  bottom:        4px;
  left:          50%;
  transform:     translateX(-50%);
  width:         0;
  height:        2px;
  background:    var(--bpt-accent);
  border-radius: 1px;
  transition:    width .25s cubic-bezier(.4, 0, .2, 1);
}
.bpt-menu-link:hover,
.bpt-menu-link:focus-visible { color: var(--bpt-text); }
.bpt-menu-link:hover::before,
.bpt-menu-link:focus-visible::before { width: 55%; }

.bpt-menu-link--active {
  color:      var(--bpt-accent-h) !important;
  background: var(--bpt-accent-dim);
  border-radius: var(--bpt-radius-sm);
}
.bpt-menu-link--active::before { display: none; }

/* ── Submenu toggle (mobile only) ────────────────────────────────────────── */
.bpt-submenu-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  padding:         .4rem .5rem;
  color:           var(--bpt-text-3);
  border-radius:   var(--bpt-radius-sm);
  transition:      color var(--bpt-t), transform var(--bpt-t);
  flex-shrink:     0;
  cursor:          pointer;
  height:          100%;
}
.bpt-submenu-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  color:     var(--bpt-accent-h);
}

/* ── Desktop submenu ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /*
   * JS wraps <a> + <button.bpt-submenu-toggle> in a .bpt-menu-item__row div,
   * so ".bpt-menu-item--parent > .bpt-menu-link" never matches directly.
   * The row itself becomes the flex container — we just tighten it up and
   * show the toggle button as an inline desktop chevron.
   */
  .bpt-menu-item--parent { display: flex; align-items: stretch; }

  /* Row: collapse gap between link text and chevron */
  .bpt-menu-item--parent > .bpt-menu-item__row {
    display:     flex;
    align-items: center;
    gap:         0;
  }

  /* Link inside row — remove the extra right padding; chevron sits right after */
  .bpt-menu-item--parent > .bpt-menu-item__row > .bpt-menu-link {
    padding-right: .2rem;
  }

  /* Chevron toggle — show on desktop as a slim inline icon, no separate hit area */
  .bpt-menu-item--parent > .bpt-menu-item__row > .bpt-submenu-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          auto;
    padding:         0 .2rem 0 0;
    background:      transparent;
    border:          none;
    color:           var(--bpt-text-3);
    cursor:          pointer;
    transition:      color var(--bpt-t), transform .2s ease;
    flex-shrink:     0;
    pointer-events:  none; /* hover on the <li> opens submenu — button is visual only */
  }

  /* Rotate on hover / focus-within of the parent <li> */
  .bpt-menu-item--parent:hover > .bpt-menu-item__row > .bpt-submenu-toggle,
  .bpt-menu-item--parent:focus-within > .bpt-menu-item__row > .bpt-submenu-toggle {
    color:     var(--bpt-accent);
    transform: rotate(180deg);
  }

  /* Active parent — move the bg pill to the row so it covers link + arrow */
  .bpt-menu-item--parent > .bpt-menu-item__row:has(.bpt-menu-link--active) {
    background:    var(--bpt-accent-dim);
    border-radius: var(--bpt-radius-sm);
  }
  /* Strip the bg from the <a> itself — row owns it now */
  .bpt-menu-item--parent > .bpt-menu-item__row > .bpt-menu-link--active {
    background:    transparent !important;
    border-radius: 0;
  }
  /* Arrow colour for active parent */
  .bpt-menu-item--parent > .bpt-menu-item__row > .bpt-menu-link--active
  ~ .bpt-submenu-toggle {
    color: var(--bpt-accent-h);
  }

  .bpt-submenu {
    position:       absolute;
    top:            100%;
    left:           0;
    min-width:      220px;
    background:     var(--bpt-surface);
    border:         1px solid var(--bpt-border-light);
    border-radius:  var(--bpt-radius);
    box-shadow:     var(--bpt-shadow-lg);
    padding:        .4rem .4rem .5rem;
    list-style:     none;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(4px);
    transition:     opacity .2s ease, transform .2s ease;
    z-index:        100;
    margin-top:     0;
  }

  .bpt-submenu::before {
    content:  '';
    position: absolute;
    top:      -10px;
    left:     0;
    right:    0;
    height:   10px;
  }

  .bpt-menu-item--parent:hover > .bpt-submenu,
  .bpt-menu-item--parent:focus-within > .bpt-submenu {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
  }

  .bpt-submenu__link {
    display:         block;
    padding:         .55rem 1rem;
    border-radius:   var(--bpt-radius-sm);
    font-size:       .85rem;
    color:           var(--bpt-text-2);
    text-decoration: none;
    transition:      color var(--bpt-t), background var(--bpt-t);
    white-space:     nowrap;
  }
  .bpt-submenu__link:hover { color: var(--bpt-text); background: var(--bpt-surface-2); }
  .bpt-submenu__link--active {
    color:            var(--bpt-accent-h);
    background:       var(--bpt-accent-dim);
    border-left:      2px solid var(--bpt-accent);
    padding-left:     calc(1rem - 2px);
  }
  .bpt-submenu__link--active:hover { background: var(--bpt-accent-dim); }
}

/* ── Header actions ──────────────────────────────────────────────────────── */
.bpt-header__actions {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  flex-shrink: 0;
  position:    relative;
}

/* ── Expanding search ────────────────────────────────────────────────────── */
.bpt-header__search-wrap { display: flex; align-items: center; }

.bpt-header__search-bar {
  position:      absolute;
  right:         100%;
  top:           50%;
  transform:     translateY(-50%);
  max-width:     0;
  overflow:      hidden;
  z-index:       10;
  background:    rgba(15, 17, 23, .97);
  border:        1px solid transparent;
  border-radius: var(--bpt-radius);
  transition:    max-width .4s cubic-bezier(.4, 0, .2, 1),
                 border-color .4s ease,
                 box-shadow .4s ease;
}

.bpt-header--searching .bpt-header__search-bar {
  max-width:    clamp(280px, 45vw, 560px);
  border-color: var(--bpt-border-light);
  box-shadow:   var(--bpt-shadow);
}

.bpt-header__search-form {
  width:       420px;
  display:     flex;
  align-items: center;
  padding:     .4rem .5rem;
  gap:         .4rem;
}

.bpt-header__search-input {
  flex:        1;
  height:      40px;
  min-width:   0;
  padding:     0 1rem;
  background:  transparent;
  border:      none;
  color:       var(--bpt-text);
  font-size:   .9rem;
  white-space: nowrap;
}
.bpt-header__search-input::placeholder { color: var(--bpt-text-3); }
.bpt-header__search-input:focus        { outline: none; }

.bpt-header__search-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--bpt-radius-sm);
  background:      transparent;
  border:          none;
  color:           var(--bpt-text-2);
  transition:      color var(--bpt-t);
  flex-shrink:     0;
}
.bpt-header__search-btn:hover { color: var(--bpt-text); }

.bpt-icon-close                         { display: none; }
.bpt-header--searching .bpt-icon-search { display: none; }
.bpt-header--searching .bpt-icon-close  { display: block; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAV TOGGLE — pill button style
   ════════════════════════════════════════════════════════════════════════════ */
.bpt-nav-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  gap:             .45rem;
  height:          36px;
  padding:         0 .85rem 0 .7rem;
  background:      var(--bpt-surface-2);
  border:          1px solid var(--bpt-border-light);
  border-radius:   999px;
  cursor:          pointer;
  color:           var(--bpt-text-2);
  font-size:       .82rem;
  font-weight:     600;
  transition:      background var(--bpt-t), border-color var(--bpt-t), color var(--bpt-t);
}
.bpt-nav-toggle:hover {
  background:   var(--bpt-surface-3);
  border-color: var(--bpt-border-light);
  color:        var(--bpt-text);
}
.bpt-nav-toggle[aria-expanded="true"] {
  background:   var(--bpt-accent-dim);
  border-color: var(--bpt-accent);
  color:        var(--bpt-accent-h);
}

/* Icon inside toggle */
.bpt-nav-toggle__icon {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  position:     relative;
}

.bpt-nav-toggle__icon svg {
  position:   absolute;
  transition: opacity .2s ease, transform .2s ease;
}
.bpt-nav-toggle__icon .icon-menu  { opacity: 1;  transform: scale(1); }
.bpt-nav-toggle__icon .icon-close { opacity: 0;  transform: scale(.7); }

.bpt-nav-toggle[aria-expanded="true"] .bpt-nav-toggle__icon .icon-menu  { opacity: 0;  transform: scale(.7); }
.bpt-nav-toggle[aria-expanded="true"] .bpt-nav-toggle__icon .icon-close { opacity: 1;  transform: scale(1); }

/* Hide old bars — replaced by icon SVG approach */
.bpt-nav-toggle__bar { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAV PANEL
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bpt-nav-toggle     { display: flex; }
  .bpt-submenu-toggle { display: flex; }

  /* Full-screen drawer sliding down from header */
  .bpt-nav {
    position:        fixed;
    top:             var(--bpt-header-h);
    left:            0;
    right:           0;
    height:          calc(100dvh - var(--bpt-header-h));
    background:      rgba(13, 15, 21, .98);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-top:      1px solid var(--bpt-border);
    overflow-y:      auto;
    overflow-x:      hidden;
    padding:         0;
    opacity:         0;
    transform:       translateY(-6px);
    pointer-events:  none;
    transition:      opacity .22s ease, transform .22s ease;
    z-index:         999;
    margin-left:     0;
    display:         flex;
    flex-direction:  column;
  }

  .bpt-nav.bpt-nav--open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
  }

  /* ── Menu list ───────────────────────────────────────────────────────────── */
  .bpt-nav__list {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    width:          100%;
    padding:        .5rem .75rem 0;
    flex:           1;
  }

  /* Top-level <li> — plain block, no flex, so submenu expands naturally below */
  .bpt-nav__list > .bpt-menu-item {
    display:  block;
    width:    100%;
    position: static;
  }

  /* Non-parent links have no row wrapper — stretch them to full width */
  .bpt-nav__list > .bpt-menu-item:not(.bpt-menu-item--parent) > .bpt-menu-link {
    display: flex;
    width:   100%;
  }

  /* Row div injected by JS wrapping <a> + <button> */
  .bpt-menu-item__row {
    display:     flex;
    align-items: stretch;
    width:       100%;
  }

  /* Top-level link inside the row */
  .bpt-menu-item__row > .bpt-menu-link {
    flex:          1;
    width:         0;
    display:       flex;
    align-items:   center;
    padding:       .7rem .9rem;
    font-size:     .95rem;
    font-weight:   500;
    white-space:   normal;
    border-radius: var(--bpt-radius-sm);
    color:         var(--bpt-text-2);
    transition:    color var(--bpt-t), background var(--bpt-t);
    min-width:     0;
  }
  .bpt-menu-item__row > .bpt-menu-link::before { display: none; }

  .bpt-menu-item__row > .bpt-menu-link:hover,
  .bpt-menu-item__row > .bpt-menu-link:focus-visible {
    color:      var(--bpt-text);
    background: rgba(255, 255, 255, .05);
  }

  /* Active — background on the row so it spans full width */
  .bpt-menu-item--parent .bpt-menu-item__row:has(.bpt-menu-link--active) {
    background:    var(--bpt-accent-dim);
    border-radius: var(--bpt-radius-sm);
  }
  .bpt-menu-item__row > .bpt-menu-link--active {
    color:         var(--bpt-accent-h) !important;
    background:    transparent !important;
    border-radius: 0;
  }
  /* No toggle → background on the link itself (no row) */
  .bpt-nav__list > .bpt-menu-item:not(.bpt-menu-item--parent) .bpt-menu-link--active {
    background:    var(--bpt-accent-dim) !important;
    border-radius: var(--bpt-radius-sm) !important;
  }

  /* ── Chevron toggle inside the row ──────────────────────────────────────── */
  .bpt-menu-item__row > .bpt-submenu-toggle {
    width:           44px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    align-self:      center;
    padding:         15px;
    border:          none;
    border-radius:   var(--bpt-radius-sm);
    color:           var(--bpt-text-3);
    background:      transparent;
    cursor:          pointer;
    transition:      color var(--bpt-t), background var(--bpt-t), transform var(--bpt-t);
  }
  .bpt-menu-item__row > .bpt-submenu-toggle:hover {
    color:      var(--bpt-text-2);
    background: rgba(255, 255, 255, .05);
  }
  .bpt-menu-item__row > .bpt-menu-link--active + .bpt-submenu-toggle {
    background: transparent;
    color:      var(--bpt-accent-h);
  }
  .bpt-menu-item__row > .bpt-submenu-toggle[aria-expanded="true"] {
    color:      var(--bpt-accent-h);
    background: var(--bpt-accent-dim);
    transform:  rotate(180deg);
  }

  /* ── Submenu <ul> — hidden by default, block when open ──────────────────── */
  .bpt-nav__list > .bpt-menu-item > .bpt-submenu {
    display:        none;
    position:       static !important;
    opacity:        1 !important;
    transform:      none !important;
    pointer-events: none;
    background:     transparent;
    box-shadow:     none;
    border:         none;
    min-width:      unset;
    width:          100%;
    padding:        0;
    margin:         0;
  }
  .bpt-nav__list > .bpt-menu-item > .bpt-submenu::before { display: none; }
  .bpt-nav__list > .bpt-menu-item > .bpt-submenu.bpt-submenu--open {
    display:        block;
    pointer-events: auto;
  }

  /* Submenu indent strip */
  .bpt-nav__list > .bpt-menu-item > .bpt-submenu {
    padding-left: 0;
    border-left:  2px solid rgba(99, 102, 241, .2);
    margin:       2px 0 4px 1rem;
  }

  /* <li> items inside submenu — reset walker's bpt-menu-item flex styles */
  .bpt-submenu .bpt-menu-item {
    display: block;
    width:   auto;
  }

  /* Submenu links */
  .bpt-submenu__link {
    display:         block;
    padding:         .48rem .75rem;
    font-size:       .875rem;
    color:           var(--bpt-text-3);
    text-decoration: none;
    border-radius:   var(--bpt-radius-sm);
    white-space:     normal;
    transition:      color var(--bpt-t), background var(--bpt-t);
  }
  .bpt-submenu__link:hover {
    color:      var(--bpt-text);
    background: rgba(255, 255, 255, .05);
  }
  .bpt-submenu__link--active {
    color:      var(--bpt-accent-h);
    background: var(--bpt-accent-dim);
  }

  /* ── Nav footer CTAs ─────────────────────────────────────────────────────── */
  .bpt-nav__footer {
    padding:        1.25rem 1rem;
    border-top:     1px solid var(--bpt-border);
    margin-top:     auto;
    display:        flex;
    flex-direction: column;
    gap:            .6rem;
  }

  .bpt-nav__footer-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         .78rem 1rem;
    border-radius:   var(--bpt-radius);
    font-size:       .9rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background var(--bpt-t), border-color var(--bpt-t), color var(--bpt-t);
    cursor:          pointer;
    border:          1px solid transparent;
  }

  .bpt-nav__footer-btn--primary {
    background:   var(--bpt-accent);
    border-color: var(--bpt-accent);
    color:        #fff;
  }
  .bpt-nav__footer-btn--primary:hover {
    background:   var(--bpt-accent-h);
    border-color: var(--bpt-accent-h);
  }

  .bpt-nav__footer-btn--ghost {
    background:   transparent;
    border-color: var(--bpt-border-light);
    color:        var(--bpt-text-2);
  }
  .bpt-nav__footer-btn--ghost:hover {
    border-color: var(--bpt-accent);
    color:        var(--bpt-text);
    background:   rgba(99, 102, 241, .06);
  }

  /* ── Mobile search ───────────────────────────────────────────────────────── */
  .bpt-header__search-bar {
    position:      fixed;
    top:           var(--bpt-header-h);
    left:          0;
    right:         0 !important;
    max-width:     none !important;
    width:         100%;
    transform:     none;
    max-height:    0;
    overflow:      hidden;
    border:        none;
    border-bottom: 1px solid var(--bpt-border);
    border-radius: 0;
    background:    var(--bpt-surface);
    box-shadow:    none;
    transition:    max-height .3s ease, padding .3s ease !important;
    padding:       0 !important;
    z-index:       998;
  }

  .bpt-header--searching .bpt-header__search-bar {
    max-height:   72px;
    padding:      .75rem 1rem !important;
    border-color: var(--bpt-border-light);
    box-shadow:   var(--bpt-shadow);
  }

  .bpt-header__search-form {
    width:   100%;
    padding: 0;
    gap:     .5rem;
  }

  .bpt-header__search-input {
    background:    var(--bpt-surface-2);
    border:        1px solid var(--bpt-border-light);
    border-radius: var(--bpt-radius);
    padding:       0 1rem;
  }
  .bpt-header__search-input:focus {
    border-color: var(--bpt-accent);
    box-shadow:   0 0 0 3px var(--bpt-accent-dim);
  }
}

/* Hide nav footer on desktop */
@media (min-width: 1025px) {
  .bpt-nav__footer { display: none !important; }
}

@keyframes bpt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}