/* ==========================================================================
   Header CSS — H&T Library Theme
   Transparent by default, dark solid on scroll.
   ========================================================================== */

/* ── Header shell ────────────────────────────────────────────────────────── */
.bpt-header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          1000;
  height:           var(--bpt-header-h);
  background:       transparent;
  transition:       background var(--bpt-t-slow), box-shadow var(--bpt-t-slow);
}

/* Scrolled state — dark warm background */
.bpt-header.bpt-header--scrolled {
  background-color:  rgba(26, 20, 12, .96);
  backdrop-filter:  blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:   0 2px 20px rgba(0, 0, 0, .25);
}

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

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

/* Nav-drawer shop button hidden everywhere except mobile nav drawer */
.ht-library-header__shop-btn--mobile-nav { display: none !important; }

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

/* Logo image — dark version by default, white filter when header is scrolled */
.ht-library-logo {
  height:     42px;
  width:      auto;
  display:    block;
  transition: filter var(--bpt-t-slow);
  filter:     none; /* dark SVG visible over transparent / light header */
}

.bpt-header--scrolled .ht-library-logo {
  filter: brightness(0) invert(1); /* convert to white over dark bg */
}

/* Also handle custom logo uploaded via Customizer */
.ht-library-header__logo-wrap img {
  height:     50px;
  width:      auto;
  transition: filter var(--bpt-t-slow);
}
.bpt-header--scrolled .ht-library-header__logo-wrap img {
  filter: brightness(0) invert(1);
}

/* ── Dark page-header pages (Shop, About, Contact, FAQ, etc.) ─────────────
   These render .ht-library-page-header (dark gradient) right at the top,
   so the nav should start in its light/scrolled colors immediately instead
   of waiting for the user to scroll. Home keeps the default dark-on-light
   nav since its hero background is light. ────────────────────────────── */
body.has-dark-page-header .ht-library-logo { filter: brightness(0) invert(1); }
body.has-dark-page-header .ht-library-header__logo-wrap img { filter: brightness(0) invert(1); }
body.has-dark-page-header .bpt-menu-link         { color: rgba(255, 255, 255, .85); }
body.has-dark-page-header .bpt-menu-link::before { background: rgba(255, 255, 255, .6); }
body.has-dark-page-header .bpt-menu-link:hover,
body.has-dark-page-header .bpt-menu-link:focus-visible { color: #fff; }
body.has-dark-page-header .bpt-menu-link--active { color: #fff !important; }
body.has-dark-page-header .bpt-header__search-btn { color: rgba(255, 255, 255, .7); }
body.has-dark-page-header .bpt-header__search-btn:hover { color: #fff; }
body.has-dark-page-header .ht-library-cart-btn   { color: rgba(255, 255, 255, .7); }
body.has-dark-page-header .ht-library-cart-btn:hover { color: #fff; }
body.has-dark-page-header .bpt-nav-toggle__bar   { background: rgba(255, 255, 255, .85); }
@media (min-width: 1025px) {
  body.has-dark-page-header .bpt-menu-item--parent > .bpt-menu-link::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}

/* ── Nav links — dark by default, light when header is scrolled ──────────── */
.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 .9rem;
  font-size:       .9rem;
  font-weight:     500;
  color:           var(--dark-ink);
  text-decoration: none;
  white-space:     nowrap;
  position:        relative;
  transition:      color var(--bpt-t);
  letter-spacing:  .01em;
}

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

.bpt-menu-link--active { color: var(--dark-ink) !important; }
.bpt-menu-link--active::before { width: 65% !important; }

/* Scrolled state — switch nav links to light */
.bpt-header--scrolled .bpt-menu-link             { color: rgba(255, 255, 255, .85); }
.bpt-header--scrolled .bpt-menu-link::before     { background: rgba(255, 255, 255, .6); }
.bpt-header--scrolled .bpt-menu-link:hover,
.bpt-header--scrolled .bpt-menu-link:focus-visible { color: #fff; }
.bpt-header--scrolled .bpt-menu-link--active     { color: #fff !important; }

/* ── Shop Now button ─────────────────────────────────────────────────────── */
.ht-library-header__shop-btn {
  display:         inline-flex;
  align-items:     center;
  padding:         .55rem 1.35rem;
  background:      var(--primary);
  color:           #fff !important;
  font-size:       .875rem;
  font-weight:     600;
  border-radius:   50px;
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  letter-spacing:  .02em;
  transition:      background var(--bpt-t), transform var(--bpt-t), box-shadow var(--bpt-t);
  box-shadow:      0 2px 10px rgba(183, 83, 61, .35);
}
.ht-library-header__shop-btn:hover {
  background:  var(--primary-dark);
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(183, 83, 61, .4);
  color:       #fff !important;
}
.ht-library-header__shop-btn:active { transform: translateY(0); }

/* ── Submenu toggle (mobile only) ────────────────────────────────────────── */
.bpt-submenu-toggle {
  display:       none;
  background:    transparent;
  border:        none;
  padding:       .2rem;
  color:         rgba(255, 255, 255, .6);
  border-radius: var(--bpt-radius-sm);
  transition:    color var(--bpt-t), transform var(--bpt-t);
  flex-shrink:   0;
}
.bpt-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); color: #fff; }

/* ── Desktop submenu ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .bpt-menu-item--parent { display: flex; align-items: center; }
  .bpt-menu-item--parent > .bpt-menu-link { padding-right: .5rem; }

  .bpt-menu-item--parent > .bpt-menu-link::after {
    content:          '';
    display:          inline-block;
    width:            10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232A1B10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size:  contain;
    background-color: transparent;
    height:           10px;
    bottom:           auto; left: auto; right: auto;
    border-radius:    0;
  }

  .bpt-submenu {
    position:       absolute;
    top:            calc(100% + .5rem);
    left:           0;
    min-width:      220px;
    background:     rgba(26, 20, 12, .97);
    border:         1px solid rgba(255, 255, 255, .1);
    border-radius:  var(--bpt-radius);
    box-shadow:     0 8px 32px rgba(0, 0, 0, .35);
    padding:        .5rem;
    list-style:     none;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(.5rem);
    transition:     opacity var(--bpt-t), transform var(--bpt-t);
    z-index:        100;
  }
  .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:       .875rem;
    color:           rgba(255, 255, 255, .7);
    text-decoration: none;
    transition:      color var(--bpt-t), background var(--bpt-t);
    white-space:     nowrap;
  }
  .bpt-submenu__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }

  /* Chevron turns white when scrolled */
  .bpt-header--scrolled .bpt-menu-item--parent > .bpt-menu-link::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}

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

/* ── Search ──────────────────────────────────────────────────────────────── */
.bpt-header__search-wrap {
  display: none;
}

.bpt-header__search-bar {
  position:   absolute;
  right:      100%;
  top:        50%;
  transform:  translateY(-50%);
  max-width:  0;
  overflow:   hidden;
  z-index:    10;
  background: rgba(26, 20, 12, .97);
  border:     none;
  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: rgba(255, 255, 255, .15);
  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:        #fff;
  font-size:    .9rem;
  white-space:  nowrap;
}
.bpt-header__search-input::placeholder { color: rgba(255, 255, 255, .4); }
.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(--dark-ink);
  transition:      color var(--bpt-t);
  flex-shrink:     0;
}
.bpt-header__search-btn:hover                     { color: var(--dark-ink); }
.bpt-header--scrolled .bpt-header__search-btn     { color: rgba(255, 255, 255, .7); }
.bpt-header--scrolled .bpt-header__search-btn:hover { color: #fff; }

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

/* ── Cart icon ───────────────────────────────────────────────────────────── */
.ht-library-cart-btn {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--bpt-radius-sm);
  color:           var(--dark-ink);
  text-decoration: none;
  transition:      color var(--bpt-t);
  flex-shrink:     0;
}
.ht-library-cart-btn:hover                       { color: var(--primary); }
.bpt-header--scrolled .ht-library-cart-btn       { color: rgba(255, 255, 255, .7); }
.bpt-header--scrolled .ht-library-cart-btn:hover { color: #fff; }

.ht-library-cart-count {
  position:      absolute;
  top:           5px;
  right:         4px;
  min-width:     16px;
  height:        16px;
  border-radius: 50px;
  background:    var(--primary);
  color:         #fff;
  font-size:     .62rem;
  font-weight:   700;
  line-height:   16px;
  text-align:    center;
  padding:       0 3px;
  pointer-events: none;
  transition:    transform .2s ease, opacity .2s ease;
}
.ht-library-cart-count[hidden] { display: none; }

/* ── Account icon + dropdown ─────────────────────────────────────────────── */
.ht-library-account-btn {
  position:    relative;
  flex-shrink: 0;
}

.ht-library-account-btn__toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border:          none;
  border-radius:   var(--bpt-radius-sm);
  background:      transparent;
  color:           var(--dark-ink);
  cursor:          pointer;
  transition:      color var(--bpt-t);
  padding:         0;
}
.ht-library-account-btn__toggle:hover           { color: var(--primary); }
body.has-dark-page-header .ht-library-account-btn__toggle { color: rgba(255,255,255,.7); }
body.has-dark-page-header .ht-library-account-btn__toggle:hover { color: #fff; }
.bpt-header--scrolled .ht-library-account-btn__toggle       { color: rgba(255,255,255,.7); }
.bpt-header--scrolled .ht-library-account-btn__toggle:hover { color: #fff; }

.ht-library-account-dropdown {
  position:       absolute;
  top:            calc(100% + 10px);
  right:          0;
  min-width:      168px;
  background:     #fff;
  border-radius:  14px;
  box-shadow:     0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  border:         1px solid rgba(0,0,0,.06);
  list-style:     none;
  margin:         0;
  padding:        6px;
  z-index:        9999;
  opacity:        0;
  transform:      translateY(-6px);
  pointer-events: none;
  /* delay on hide so mouse can cross the gap without the menu vanishing */
  transition:     opacity .18s ease .22s, transform .18s ease .22s;
}

/* Transparent bridge fills the gap between button and dropdown */
.ht-library-account-btn::after {
  content:  '';
  position: absolute;
  top:      100%;
  left:     0;
  right:    0;
  height:   14px;
}

.ht-library-account-dropdown::before {
  content:      '';
  position:     absolute;
  top:          -6px;
  right:        14px;
  width:        12px;
  height:       12px;
  background:   #fff;
  border-left:  1px solid rgba(0,0,0,.06);
  border-top:   1px solid rgba(0,0,0,.06);
  transform:    rotate(45deg);
  border-radius: 2px 0 0 0;
}

.ht-library-account-btn[data-open] .ht-library-account-dropdown,
.ht-library-account-btn__toggle[aria-expanded="true"] + .ht-library-account-dropdown,
.ht-library-account-btn:hover .ht-library-account-dropdown {
  opacity:           1;
  transform:         translateY(0);
  pointer-events:    auto;
  transition-delay:  0s;
}

.ht-library-account-dropdown__link {
  display:         flex;
  align-items:     center;
  gap:             .55rem;
  padding:         .55rem .75rem;
  border-radius:   9px;
  font-size:       .875rem;
  font-weight:     500;
  color:           var(--dark-ink);
  text-decoration: none;
  transition:      background .15s, color .15s;
  white-space:     nowrap;
}
.ht-library-account-dropdown__link:hover {
  background: #F9F4EF;
  color:      var(--primary);
}
.ht-library-account-dropdown__link--logout:hover {
  background: rgba(220,38,38,.07);
  color:      #c0392b;
}

.ht-library-account-dropdown__sep {
  height:     1px;
  background: #F0EAE3;
  margin:     5px 6px;
}

/* ── Hamburger ───────────────────────────────────────────────────────────── */
.bpt-nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           36px;
  height:          36px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         .2rem;
  transition:      opacity var(--bpt-t);
}
.bpt-nav-toggle:hover { opacity: .7; }

.bpt-nav-toggle__bar {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--dark-ink);
  border-radius:    2px;
  transition:       transform .3s cubic-bezier(.4, 0, .2, 1),
                    opacity .3s ease,
                    width .3s ease,
                    background var(--bpt-t-slow);
  transform-origin: center;
}
.bpt-header--scrolled .bpt-nav-toggle__bar { background: rgba(255, 255, 255, .85); }

.bpt-nav-toggle[aria-expanded="true"] .bpt-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bpt-nav-toggle[aria-expanded="true"] .bpt-nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bpt-nav-toggle[aria-expanded="true"] .bpt-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile CTA (Shop Now inside mobile menu) ────────────────────────────── */
.ht-library-nav__mobile-cta {
  display: none;
}

/* ── Tablet / Mobile nav (<= 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  .bpt-nav-toggle     { display: flex; }
  .bpt-submenu-toggle { display: flex; }

  /* Hide search and Shop Now from header actions — show Shop Now in nav drawer */
  .bpt-header__search-wrap,
  .ht-library-header__shop-btn:not(.ht-library-header__shop-btn--mobile-nav) {
    display: none !important;
  }

  /* Tighten icon gap */
  .bpt-header__actions {
    gap: .1rem;
  }

  /* Reduce logo size */
  .ht-library-logo,
  .ht-library-header__logo-wrap img {
    height: 30px;
  }

  /* Shop Now inside nav drawer — sits flush after the last menu item */
  .ht-library-header__shop-btn--mobile-nav {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    margin-top:      1rem;
    margin-bottom:   .25rem;
    width:           100%;
    padding:         .8rem 1.5rem;
    font-size:       .95rem;
  }

  .bpt-nav {
    position:     fixed;
    top:          var(--bpt-header-h);
    left:         0;
    right:        0;
    height:       calc(100dvh - var(--bpt-header-h));
    background:   rgba(26, 20, 12, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow:     hidden;
    padding:      1.5rem 1.25rem;
    opacity:      0;
    transform:    translateY(-10px);
    pointer-events: none;
    transition:   opacity .28s ease, transform .28s ease;
    z-index:      999;
    margin-left:  0;
    justify-content: flex-start;
    flex-direction:  column;
    overflow-y:   auto;
  }

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

  .bpt-nav__list {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    width:          100%;
  }

  .bpt-menu-item {
    width:        100%;
    display:      block;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .bpt-menu-item:first-child { border-top: 1px solid rgba(255, 255, 255, .08); }
  .bpt-menu-item--parent { flex-direction: column; align-items: stretch; }

  .bpt-menu-link {
    display:         flex;
    width:           100%;
    padding:         .9rem .25rem .9rem .75rem;
    font-size:       1rem;
    font-weight:     500;
    border-radius:   0;
    justify-content: space-between;
    color:           rgba(255, 255, 255, .75);
    border-left:     2px solid transparent;
    transition:      color var(--bpt-t), border-color var(--bpt-t);
  }
  .bpt-menu-link::before { display: none; }
  .bpt-menu-link:hover,
  .bpt-menu-link:focus-visible { color: #fff; background: transparent; }
  .bpt-menu-link--active {
    color:             #fff !important;
    background:        transparent !important;
    border-left-color: var(--bpt-accent);
    border-radius:     0;
  }

  .bpt-submenu {
    position:       static;
    opacity:        1;
    transform:      none;
    pointer-events: auto;
    background:     transparent;
    border-radius:  0;
    margin:         0 0 .25rem .75rem;
    padding:        0;
    display:        none;
    box-shadow:     none;
    border:         none;
    border-left:    2px solid rgba(255, 255, 255, .12);
  }
  .bpt-submenu.bpt-submenu--open { display: block; }
  .bpt-submenu__link {
    padding:    .65rem 1rem;
    font-size:  .9rem;
    color:      rgba(255, 255, 255, .5);
    display:    block;
    transition: color var(--bpt-t);
  }
  .bpt-submenu__link:hover { color: #fff; background: transparent; }

  /* 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 rgba(255, 255, 255, .1);
    border-radius: 0;
    background: rgba(26, 20, 12, .98);
    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;
  }
  .bpt-header__search-form {
    width:   100%;
    padding: 0;
    gap:     .5rem;
  }
  .bpt-header__search-input {
    background:   rgba(255, 255, 255, .08);
    border:       1px solid rgba(255, 255, 255, .15);
    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);
  }
}

/* ── Back-to-top (overrides global) ──────────────────────────────────────── */
.bpt-back-to-top {
  background: var(--bpt-dark);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
}
.bpt-back-to-top:hover {
  background: var(--bpt-accent);
  border-color: var(--bpt-accent);
  color: #fff;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes bpt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}