/* floating-header.css
   Collapses the sticky top header into a slim left-side navigation while scrolling.
   Designed to blend into TAC-Firearms' existing theme variables.
*/

body.header-collapsed header.site-header{
  position:fixed !important;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  width:auto;
  padding:12px;
  border-radius: var(--radius, 18px);
  border:1px solid var(--line, rgba(255,255,255,.15));
  background: var(--bg, rgba(0,0,0,.8));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.55));
  z-index: 9999;
}

body.header-collapsed header.site-header .header-inner{
  display:none !important;
}

body.header-collapsed header.site-header .nav{
  display:flex !important;
  flex-direction:column !important;
  gap:10px;
  padding:0;
  margin:0;
}

body.header-collapsed header.site-header .nav .btn{
  width:100%;
  white-space:nowrap;
}

/* Keep the header compact and non-intrusive */
body.header-collapsed header.site-header .nav .btn{
  padding:10px 12px;
}

/* Ensure the spacer doesn't accidentally show anything */
#headerSpacer{
  width:100%;
}


/* Category quick-switch: show only in collapsed left navigation */
header.site-header .nav .nav-categories{
  display:none;
}

body.header-collapsed header.site-header .nav .nav-categories{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
  margin:0;
}

/* Hide the currently active category in the collapsed left navigation
   (always show only the *other* categories). */
body.header-collapsed header.site-header .nav .nav-categories .btn.active{
  display:none !important;
}

/* --- Notebook UX: auto-hide the collapsed left navigation until mouse-over ---
   On smaller laptop displays the fixed left nav can cover reading width.
   We keep a slim "handle" visible at the screen edge and slide the menu out on hover.
   Only applies to desktop-ish viewports (mobile keeps the normal top header).
*/

@media (min-width: 981px) and (max-width: 1400px){
  body.header-collapsed header.site-header{
    left:0 !important;
    transform: translate(calc(-100% + 18px), -50%) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }
  body.header-collapsed header.site-header:hover,
  body.header-collapsed header.site-header:focus-within{
    transform: translate(12px, -50%) !important;
  }

  /* Small visible grip so users discover the hover behavior */
  body.header-collapsed header.site-header::after{
    content:"";
    position:absolute;
    top:50%;
    right:-10px;
    transform:translateY(-50%);
    width:10px;
    height:72px;
    border-radius: 0 12px 12px 0;
    border:1px solid var(--line, rgba(255,255,255,.15));
    background: var(--bg, rgba(0,0,0,.8));
    box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.35));
  }
}

@media (min-width: 981px) and (max-height: 820px){
  body.header-collapsed header.site-header{
    left:0 !important;
    transform: translate(calc(-100% + 18px), -50%) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }
  body.header-collapsed header.site-header:hover,
  body.header-collapsed header.site-header:focus-within{
    transform: translate(12px, -50%) !important;
  }

  body.header-collapsed header.site-header::after{
    content:"";
    position:absolute;
    top:50%;
    right:-10px;
    transform:translateY(-50%);
    width:10px;
    height:72px;
    border-radius: 0 12px 12px 0;
    border:1px solid var(--line, rgba(255,255,255,.15));
    background: var(--bg, rgba(0,0,0,.8));
    box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.35));
  }
}

/* On narrow screens, keep normal top header (better UX on mobile) */
@media (max-width: 980px){
  body.header-collapsed header.site-header{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    transform:none !important;
    width:auto !important;
    padding:0 !important;
    border-radius:0 !important;
  }
  body.header-collapsed header.site-header .header-inner{
    display:flex !important;
  }
  body.header-collapsed header.site-header .nav{
    flex-direction:row !important;
    gap:10px;
  }
  body.header-collapsed header.site-header .nav .btn{
    width:auto;
  }
  body.header-collapsed header.site-header .nav .nav-categories{
    display:none !important;
  }
}