/* ============================================================
   Blockpulse — Shared Site Header
   Single source of truth for the public marketing header.
   Edit only this file + assets/js/site-header.js.
   Class prefix: bp-  (avoids collision with main.css)
   ============================================================ */

#bp-header {
  --bp-bg:          #FFFFFF;
  --bp-bg-alt:      #F9FAFB;
  --bp-fg:          #0C111D;
  --bp-fg-soft:     #344054;
  --bp-fg-muted:    #667085;
  --bp-fg-dim:      #98A2B3;
  --bp-line:        #EAECF0;
  --bp-line-bright: #D0D5DD;
  --bp-primary:     #0040FF;
  --bp-font:        "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--bp-line);
  font-family: var(--bp-font);
  color: var(--bp-fg-soft);
}

#bp-header *,
#bp-header *::before,
#bp-header *::after { box-sizing: border-box; }

.bp-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-brand {
  display: flex; align-items: center;
  text-decoration: none; color: inherit;
}
.bp-brand svg { height: 26px; width: auto; display: block; fill: var(--bp-fg); }

.bp-links {
  display: flex; gap: 4px;
  font-size: 14px; font-weight: 400; letter-spacing: -0.005em;
  color: var(--bp-fg-soft);
  list-style: none; margin: 0; padding: 0;
}

.bp-item { position: relative; }
.bp-item > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 6px;
  font-weight: 400;
  color: var(--bp-fg-soft);
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.bp-item > a:hover { background: var(--bp-bg-alt); color: var(--bp-fg); }
.bp-caret { width: 10px; height: 10px; transition: transform .2s ease; }
.bp-item:hover > a .bp-caret,
.bp-item:focus-within > a .bp-caret { transform: rotate(180deg); }

.bp-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 320px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  box-shadow: 0 24px 48px -16px rgba(12,17,29,0.12), 0 4px 12px -2px rgba(12,17,29,0.06);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
  z-index: 110;
}
.bp-item:hover .bp-dropdown,
.bp-dropdown:hover,
.bp-item:focus-within .bp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.bp-dropdown-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.bp-dropdown.bp-wide { min-width: 540px; }
.bp-dropdown.bp-wide .bp-dropdown-grid { grid-template-columns: 1fr 1fr; }

.bp-link-row {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 12px; align-items: start;
  padding: 12px;
  border-radius: 6px;
  transition: background .15s ease;
  text-decoration: none;
  color: inherit;
}
.bp-link-row:hover { background: var(--bp-bg-alt); }
.bp-link-row .bp-icon {
  width: 28px; height: 28px;
  border: 1px solid var(--bp-line-bright);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--bp-fg);
}
.bp-link-row .bp-icon svg { width: 14px; height: 14px; }
.bp-link-row .bp-title { font-size: 14px; font-weight: 500; color: var(--bp-fg); margin-bottom: 2px; }
.bp-link-row .bp-sub { font-size: 12px; color: var(--bp-fg-muted); line-height: 1.45; }

.bp-cta { display: flex; gap: 10px; align-items: center; font-size: 13px; }

/* On desktop, the drawer-shell is transparent so links + cta sit inline with the brand */
.bp-drawer-shell { display: contents; }

.bp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  line-height: 1;
}
.bp-btn-ghost {
  background: transparent;
  color: var(--bp-fg-soft);
}
.bp-btn-ghost:hover { background: var(--bp-bg-alt); color: var(--bp-fg); }
.bp-btn-primary {
  background: var(--bp-fg);
  color: var(--bp-bg);
}
.bp-btn-primary:hover { background: #1F2937; }

/* ===========  Mobile burger + drawer  =========== */
.bp-burger {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px; margin-left: auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.bp-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--bp-fg);
  position: relative;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.bp-burger span::before,
.bp-burger span::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 2px; background: var(--bp-fg);
  transition: transform .25s ease, top .25s ease;
}
.bp-burger span::before { top: -7px; }
.bp-burger span::after  { top:  7px; }
#bp-header.bp-open .bp-burger span { background: transparent; }
#bp-header.bp-open .bp-burger span::before { top: 0; transform: rotate(45deg); }
#bp-header.bp-open .bp-burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  /* Removing backdrop-filter on mobile lets the drawer (position:fixed)
     position relative to viewport rather than to #bp-header's containing block. */
  #bp-header {
    background: var(--bp-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .bp-inner { padding: 14px 20px; }
  .bp-burger { display: inline-flex; }

  /* Drawer overlays page below the header. position:fixed avoids ancestor clip issues. */
  #bp-header .bp-drawer-shell {
    position: fixed; left: 0; right: 0;
    top: var(--bp-header-h, 60px);
    bottom: 0;
    background: var(--bp-bg);
    border-top: 1px solid var(--bp-line);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 90;
  }
  #bp-header.bp-open .bp-drawer-shell { opacity: 1; visibility: visible; transform: translateY(0); }

  .bp-links {
    display: block;
    padding: 8px 20px 0;
  }
  .bp-item { display: block; width: 100%; border-bottom: 1px solid var(--bp-line); }
  .bp-item:last-child { border-bottom: 0; }
  .bp-item > a {
    display: flex; width: 100%;
    padding: 18px 4px; font-size: 16px;
    justify-content: space-between; align-items: center;
    border-radius: 0;
  }
  .bp-item > a:hover { background: transparent; }

  /* Mobile dropdowns: inline accordion-style */
  .bp-dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 12px 4px;
    min-width: 0; width: 100%; max-width: none;
    background: transparent;
    display: none;
  }
  .bp-item:hover .bp-dropdown,
  .bp-item:focus-within .bp-dropdown { display: none; }
  .bp-item.bp-open-sub .bp-dropdown { display: block; }
  .bp-item.bp-open-sub > a .bp-caret { transform: rotate(180deg); }
  .bp-dropdown.bp-wide { min-width: 0; }
  .bp-dropdown-grid,
  .bp-dropdown.bp-wide .bp-dropdown-grid { display: block; grid-template-columns: 1fr; }
  .bp-link-row { display: flex; gap: 12px; padding: 10px 8px; }

  .bp-cta {
    display: flex; gap: 10px;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bp-line);
    margin-top: 16px;
  }
  .bp-cta .btn-ghost { display: none; }
  .bp-cta .btn-primary { flex: 1 1 auto; width: 100%; }
  .bp-cta .btn-primary .face,
  .bp-cta .btn-primary .invisible-sizer { width: 100%; }
}

/* Lock body scroll while menu open */
body.bp-menu-open { overflow: hidden; }