/*
 * Clever Prep — Site Header
 * Renders inside the Bricks header template. Floats above page content.
 *
 * NOTE on Bricks defaults: Bricks sets EVERY .brxe-section / .brxe-container /
 * .brxe-block to `display: flex; flex-direction: column; width: 100%; align-items: flex-start`.
 * So any time we want a row layout we MUST explicitly override flex-direction
 * AND child width: auto.
 */

/* Section wrapper — fixed at top of viewport */
.brxe-section.cp-header-wrap {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;            /* match Bricks default; we just need width:100% */
  align-items: center;
  width: 100%;
  pointer-events: none;              /* let interior receive clicks */
  padding: 0 var(--spacing-space-xs, 2rem);
  background: transparent;
}

/* Container — the floating glass pill */
.brxe-container.cp-header {
  pointer-events: auto;
  display: flex !important;          /* override Bricks default */
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--cp-container-max);
  margin: 0 auto;
  height: 72px;
  padding: 0 26px;
  background: var(--cp-nav-bg);
  border: 1px solid var(--cp-nav-border);
  border-radius: var(--cp-radius-xl);
  -webkit-backdrop-filter: blur(8.5px);
  backdrop-filter: blur(8.5px);
  font-family: var(--cp-font-body);
  color: var(--cp-text-primary);
}

/* Brand */
.brxe-block.cp-header__brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px;
  width: auto !important;            /* override Bricks default 100% */
  flex: 0 0 auto;
  min-width: 0;
}
/* SVG logo lockup */
.brxe-image.cp-header__logo {
  display: block;
  width: auto !important;
  flex: 0 0 auto;
  line-height: 0;
}
.brxe-image.cp-header__logo img,
.brxe-image.cp-header__logo svg {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
}

/* Nav (center) */
.brxe-block.cp-header__nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center;
  gap: 38px;
  width: auto !important;
  flex: 1 1 auto;
}
.cp-header__nav-link {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  font-weight: 400;
  color: var(--cp-text-primary);
  line-height: 28px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.cp-header__nav-link:hover { color: var(--cp-orange); }

/* Actions (Login + Free Consult) */
.brxe-block.cp-header__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px;
  width: auto !important;
  flex: 0 0 auto;
}
.cp-header__login {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  letter-spacing: -0.18px;
  color: var(--cp-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.cp-header__login:hover { color: var(--cp-orange); }

/* Free Consult — base styles come from .cp-btn + .cp-btn--primary in
   clever-prep-sections.css. Header just needs the .cp-header__cta hook for
   responsive hiding. */

/* Responsive */
@media (max-width: 991px) {
  .brxe-section.cp-header-wrap {
    top: 16px;
    padding: 0 16px;
  }
  .brxe-container.cp-header {
    height: 64px;
    padding: 0 18px;
    gap: 14px;
  }
  .brxe-block.cp-header__nav { display: none !important; }
  .cp-header__login { display: none; }
  /* Free Consult button — moved into the mobile menu panel; hide it from the
     pill on mobile so the layout doesn't get cramped next to the hamburger. */
  .brxe-button.cp-header__cta { display: none !important; }
}