/**
 * DataAssist-IO — global navbar reskin to match index-V2's navbar (ui + theme).
 * Targets the Blocksy header (#header.ct-header). Loaded site-wide.
 *  - dark near-black bar (#08090a, index-V2 --dhp-bg)
 *  - title-case, muted-light menu links (overrides Blocksy's uppercase)
 *  - "Log in" extra-muted with a | separator; "Start free" pill kept (dhp-nav.css)
 *  - search + hamburger icons recoloured for the dark bar
 *  - logo swapped to the gradient SVG lockup (self-contained data-URI)
 */

/* ---- dark bar, sticky, no bottom border ---- */
#header.ct-header {
  background: #08090a !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
/* neutralise any per-row background so the bar reads as one dark surface */
#header .ct-header-row, #header [data-row] { background: transparent !important; border-bottom: 0 !important; }

/* ---- logo: hide raster + stray site-title, show the supplied lockup (logo.avif) ---- */
#header .site-title-container { display: none !important; }
#header .site-logo-container img { display: none !important; }
#header .site-logo-container {
  display: inline-block !important;
  width: 176px; height: 44px; max-width: 50vw;   /* logo.avif is 800x200 (4:1) */
  background: url("logo.avif") no-repeat left center;   /* relative to this stylesheet in /assets/ */
  background-size: contain;
}

/* ---- menu links (all except the CTA pill): index-V2 style ---- */
#header .menu-item:not(.dip-nav-cta) > .ct-menu-link {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 9px;
  color: rgba(236,235,243,.72) !important;
  transition: color .15s, background .15s;
}
/* hover changes the TEXT only — no background highlight */
#header .menu-item:not(.dip-nav-cta) > .ct-menu-link,
#header .menu-item:not(.dip-nav-cta) > .ct-menu-link:hover { background: transparent !important; }
#header .menu-item:not(.dip-nav-cta) > .ct-menu-link:hover { color: #fff !important; }

/* ---- "Log in": extra-muted + a thin separator before it (placed AFTER the
        general rule so equal-specificity order wins) ---- */
#header .menu-item.dip-nav-login > .ct-menu-link { color: rgba(236,235,243,.56) !important; }
#header .menu-item.dip-nav-login {
  border-left: 1px solid rgba(255,255,255,.14);
  margin-left: 6px; padding-left: 8px;
}

/* ---- search + hamburger toggles: light on dark ---- */
#header #search.ct-header-search,
#header #trigger.ct-header-trigger { color: rgba(236,235,243,.72) !important; }
#header #search.ct-header-search:hover,
#header #trigger.ct-header-trigger:hover { color: #fff !important; }
#header #search.ct-header-search svg,
#header #trigger.ct-header-trigger svg { fill: currentColor !important; }

/* ---- search modal backdrop ----
   Blocksy's full-screen search panel (#search-modal.ct-panel) ships with a
   transparent background, so the page content shows straight through it. Give
   it a near-solid dark surface + blur so it reads as a focused modal. */
#search-modal.ct-panel {
  background: rgba(5,5,7,.97) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#search-modal .ct-panel-content { background: transparent !important; }
/* keep the close (✕) legible on the dark backdrop */
#search-modal .ct-toggle-close,
#search-modal .ct-toggle-close svg { color: #fff !important; fill: currentColor !important; }

/* ============================================================
 * HIDE HEADER SEARCH ICON.
 * To SHOW the search icon again later, delete (or comment out)
 * the single rule on the line directly below this comment.
 * ========================================================== */
#header .ct-header-search { display: none !important; }

/* ============================================================
 * HEADER ROW HEIGHT.
 * Blocksy's Customizer sets the middle row to 120px (--header-height),
 * which reads too tall. Trim it to a standard bar height. Change the
 * two 72px values below to adjust (e.g. 66, 70, 80).
 * ========================================================== */
#header [data-row="middle"] { --header-height: 82px !important; }
#header [data-row="middle"] .ct-container { min-height: 82px !important; }