/*
Theme Name: Baselines Neve Child
Template: neve
Description: Child theme for baselinesinc.com — scroll-reveal, glassmorphism accents, an animated Vanta.js page background, and icon badges, layered on top of stock Neve, without touching Neve core.
Version: 0.35.0
*/

/* ---- Page background ----
   Dark navy + light text is now the page's default, unconditional look —
   set directly here (not gated behind a JS-added class) so there's no flash
   of the old light background before JS runs. bli-pop.js only adds the
   animated Vanta.js TOPOLOGY canvas on top when it can (desktop, JS/WebGL
   available, no prefers-reduced-motion); if that fails or is skipped, the
   page just stays this same flat dark navy with light text instead of
   falling back to a different (light) theme.
   !important: Neve's own stylesheet sets body{background-color:var(--nv-site-bg)}
   (resolving to white) at equal selector specificity — without !important
   that rule wins the cascade tiebreak, leaving an opaque white body behind
   everything. Harmless-looking most of the time since the fixed Vanta
   canvas sits on top of it, but it became visible as a solid white layer
   trapped between the canvas and the new translucent header/footer glass,
   which needs to blend with the canvas, not a solid white body. */
body {
	background-color: #0a1526 !important;
}

/* Alternate content sections so they read as distinct, clearly separated bands */
.entry-content > .wp-block-group {
	position: relative;
}
.entry-content > .wp-block-group:nth-of-type(even) {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 28px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* !important: without it, Neve's own .wp-block-paragraph rule (equal
   specificity, later in the cascade) wins the tiebreak and paragraphs render
   in their original near-black color — invisible against this dark
   background. Found this by opening a blog post and finding the entire body
   text was essentially unreadable, not just low-contrast. The card-text
   resets further down (for the light glass cards, which need to stay dark
   text regardless of this global light default) are upgraded to !important
   too so they still win over this. */
.entry-content {
	color: #e7edf3 !important;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: #ffffff !important;
}

/* ---- Animated Vanta.js page background (added by bli-pop.js when it can run) ---- */
.bli-page-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
}
/* TOPOLOGY draws its flowing lines as thousands of very thin (1px) strokes
   with no exposed option to change that — a blur softens/merges adjacent
   strokes into visibly thicker bands. Dropped contrast()/saturate() from
   this filter: the canvas is a persistent bitmap that never fully clears
   (see vanta.topology.bli.js for the fade logic that bounds how bright it
   can get over time), and a 1.6x contrast boost was amplifying any residual
   brightness creep on top of that — direct contributor to the page going
   fully pale blue after a few minutes open. Also a real, continuous
   compositing cost on a full-viewport canvas repainting at 60fps, which is
   most of what "CPU still seems high" was pointing at, on top of the JS
   fade fix below. */
.bli-page-bg canvas {
	filter: blur(1.5px);
}

/* ---- Liquid-glass treatment for solid-black content blocks ----
   Targets WP core's generic "black" background-color preset class, not a
   one-off selector for the homepage's "Video Tips & Insights" section (the
   one with the kevin-belt.png photo) — so the same frosted-glass look
   applies anywhere on the site a block uses that preset as its background,
   not just there. Kyler wants this site-wide. Opaque-ish (not a see-through
   window) but blurred, so the animated page background reads as soft
   colored light behind frosted glass rather than a flat black slab or a
   fully transparent cutout. */
/* :not(.wp-block-cover__background) matters here — cover blocks with a black
   overlayColor (the hero) reuse this exact class for their dim scrim, which
   is a different thing entirely and must not get blurred/lightened. */
.has-black-background-color:not(.wp-block-cover__background) {
	background-color: rgba(8, 16, 30, 0.62) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---- Header & footer: bright liquid-glass bars ----
   The Vanta canvas is position:fixed and covers the full viewport regardless
   of scroll position, so it's genuinely behind the header at the top of the
   page and behind the footer at the bottom. Unlike the dark glass panel
   above (white text), this text is Neve's default near-black, so this needs
   to be BRIGHT glass — same rgba(255,255,255,...) + blur recipe as the light
   content cards elsewhere: rgba(255,255,255,0.55) + blur(10px).

   Footer: applied directly to .baselines-custom-footer. It has no
   interactive descendants that can be clipped, so the simple approach is
   fine, and it's confirmed working in Kyler's real browser.

   Header: NOT applied directly to .header-main-inner, because it contains
   the Industries/Services/Resources dropdown submenus, and backdrop-filter
   on a real element that contains other content makes that element the
   containing/clipping box for its descendants in Safari — confirmed live:
   Kyler reported the dropdowns "cut off" after the direct-element version
   shipped. A ::before pseudo-element would sidestep that (nothing to clip,
   since pseudo-elements have no descendants), but an earlier attempt at
   that rendered literally zero glass effect for him — a ::before +
   backdrop-filter rendering gap specific to his browser, not a compositing
   math issue (the footer, a real element with no ::before involved, worked
   fine at the time). So: bli-pop.js inserts a REAL <div class="bli-header-
   glass"> as the first child of .header-main-inner, a sibling of
   .container (which holds the logo/nav/dropdowns), not their ancestor.
   Real element (renders, like the footer) + sibling-not-ancestor (nothing
   to clip, like the ::before) — gets both properties this time instead of
   trading one bug for the other. */
.header-main {
	background: transparent !important;
}
.header-main-inner {
	position: relative;
	background: transparent !important;
}
/* Plain, cheap, no-JS-required fallback so the header is never illegible
   (dark nav text on the dark page background) if bli-header-glass.js fails
   to insert .bli-header-glass for any reason. Scoped with :not(:has(...))
   rather than just putting this background on .header-main-inner directly,
   because .header-main-inner is .bli-header-glass's own PARENT — a
   background there sits directly behind the glass div, and backdrop-filter
   samples whatever's immediately behind it. That meant this "just in case"
   fallback was permanently blending into the real glass effect the moment
   JS successfully mounted it too, washing the whole thing out toward white
   regardless of what the animated canvas further back was actually doing —
   this is what "loads the right color, then gets overtaken by white" was.
   Scoping it to only apply when .bli-header-glass ISN'T present means the
   fallback and the real glass effect are never both live at once. */
.header-main-inner:not(:has(> .bli-header-glass)) {
	background: rgba(255, 255, 255, 0.95) !important;
}
.bli-header-glass {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	pointer-events: none;
	z-index: 0;
}

.header-main-inner > .container {
	position: relative;
	z-index: 1;
}
.baselines-custom-footer {
	background: rgba(255, 255, 255, 0.95) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
}
/* The footer's copyright/tagline text was authored as light/medium gray
   (rgb(102,102,102) and rgb(153,153,153) — the latter only 11px) for a solid
   opaque white background. Against the new blurred, semi-transparent glass
   it's too low-contrast to read, worst on the smaller all-caps tagline. */
.baselines-custom-footer p {
	color: #333333 !important;
}
.baselines-custom-footer p:last-of-type {
	color: #4d4d4d !important;
}
/* The thin Neve footer-bottom strip between the dark glass section above and
   the custom footer below is empty (no content) — make it transparent so it
   doesn't interrupt the glass look with a stray dark seam. */
.footer-bottom {
	background: transparent !important;
}

/* ---- Hero cover: unchanged photo/video, just a legibility scrim ---- */
.wp-block-cover.alignfull {
	overflow: hidden;
}
.wp-block-cover.alignfull::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 10, 18, 0.05) 0%, rgba(4, 10, 18, 0.45) 100%);
	pointer-events: none;
	z-index: 1;
}
.wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---- Glassmorphism accent for the "expertise/competencies" columns ---- */
.wp-block-column:has(.wp-block-heading + .wp-block-list),
.wp-block-column:has(h3.wp-block-heading) {
	background: rgba(15, 98, 254, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 14px;
	padding: 28px 32px !important;
	box-shadow: 0 8px 30px rgba(20, 30, 40, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-column:has(.wp-block-heading + .wp-block-list):hover,
.wp-block-column:has(h3.wp-block-heading):hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(20, 30, 40, 0.12);
}
/* Cards keep a light/white background regardless of the dark page background
   behind them, so their text always resets back to dark here rather than
   inheriting .entry-content's light color. */
.wp-block-column:has(.wp-block-heading + .wp-block-list),
.wp-block-column:has(.wp-block-heading + .wp-block-list) *,
.wp-block-column:has(h3.wp-block-heading),
.wp-block-column:has(h3.wp-block-heading) * {
	color: #272626 !important;
}

/* ---- Icon grid cards (e.g. homepage ELM feature icons) ----
   These columns use a bare Font Awesome <i> icon + h4 heading + paragraph, with
   no card wrapper and hardcoded black icon color — give them the same glass-card
   treatment as the competency columns above, plus a colored badge behind the icon
   so the row reads as five distinct highlights instead of a flat bullet list. */
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid) {
	background: rgba(15, 98, 254, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	padding: 32px 20px !important;
	box-shadow: 0 8px 30px rgba(20, 30, 40, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(20, 30, 40, 0.12);
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid),
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid) * {
	color: #272626 !important;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid) i.fa-solid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: #fff !important;
	font-size: 1.6rem !important;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):nth-of-type(5n + 1) i.fa-solid {
	background: #1a3c5c;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):nth-of-type(5n + 2) i.fa-solid {
	background: #1a6c80;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):nth-of-type(5n + 3) i.fa-solid {
	background: #f0c419;
	color: #1a3c5c !important;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):nth-of-type(5n + 4) i.fa-solid {
	background: #1a6c80;
}
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid):nth-of-type(5n + 5) i.fa-solid {
	background: #1a3c5c;
}

/* ---- Scroll reveal ---- */
.bli-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.bli-reveal.bli-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Blog archive: full redesign ----
   The stock layout was a single full-width column: one post per row, each
   ~44.8px title plus two full excerpt paragraphs, 135px side margins eating
   most of the viewport, and a 60px gap between posts — with 90+ posts in
   this blog, that made for an extremely long, repetitive, low-density
   scroll, on top of the flat-white-box styling already fixed separately.
   Rebuilt as a responsive card grid: fixed-height cards, a much smaller
   title size appropriate for a list view, the excerpt clamped to a
   consistent number of lines instead of running however long the post's
   auto-generated excerpt happens to be, and the entire card clickable
   (there's no real "read more" link in Neve's markup here — the accidental
   link this uncovered, a stray "#short" hashtag link some old excerpt text
   happens to contain, is why the clickable card explicitly keeps any real
   in-excerpt links above it in z-index, see .excerpt-wrap a below). */
.posts-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
	align-items: stretch;
	margin-top: 96px !important;
}
/* Neve sets a fixed width on each article (via --postwidth, computed for its
   OWN flex-based layout) which fights the grid column tracks below — cards
   were rendering as a handful of pixels wide, wrapping one character per
   line. width:100% makes each article fill its grid cell instead. */
.posts-wrapper > article[class*="post-"] {
	width: 100% !important;
	margin: 0 !important;
}
.article-content-col {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 30px 32px !important;
	background: rgba(15, 98, 254, 0.95) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(20, 30, 40, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-content-col:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(20, 30, 40, 0.35);
}
.article-content-col .content {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.blog-entry-title {
	font-size: 1.3rem !important;
	line-height: 1.3 !important;
	margin-bottom: 10px !important;
}
/* Stretched-link pattern: the title's own link expands to cover the whole
   card, so the card is clickable anywhere, without needing a separate
   "read more" link that doesn't exist in this template. */
.blog-entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.article-content-col .nv-meta-list,
.article-content-col .nv-meta-list * {
	color: #c6c6c6 !important;
	font-size: 0.8rem;
}
.article-content-col .nv-meta-list {
	margin-bottom: 16px !important;
}
.excerpt-wrap {
	flex-grow: 1;
}
.excerpt-wrap p {
	margin-bottom: 0 !important;
}
.excerpt-wrap p:first-of-type {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.excerpt-wrap p:not(:first-of-type) {
	display: none;
}
/* A real link that happens to appear inside the excerpt text itself (rare,
   but some of this blog's older posts have one) stays independently
   clickable above the stretched card-link instead of being shadowed by it. */
.excerpt-wrap a {
	position: relative;
	z-index: 1;
}

/* ---- Single post: same glass card, wrapping title/meta/body together ----
   Unlike the archive cards, Neve gives the single-post template no card
   background at all — title, meta, and body text were just floating
   directly on the dark animated page background using their original
   dark-on-white colors, which was unreadable (this is what "the blog looks
   kinda bad" and the near-invisible body text both trace back to). Wrapping
   .nv-single-post-wrap in the same light-glass treatment and forcing its
   text dark (overriding the sitewide light .entry-content default, same
   pattern as the other card-content resets above) fixes both the legibility
   bug and the "doesn't match the rest of the site" complaint in one move. */
.nv-single-post-wrap {
	background: rgba(15, 98, 254, 0.95);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 14px;
	padding: 40px clamp(20px, 5vw, 56px) !important;
	box-shadow: 0 8px 40px rgba(20, 30, 40, 0.25);
	margin-top: 96px !important;
}
.nv-single-post-wrap .entry-title,
.nv-single-post-wrap .entry-content,
.nv-single-post-wrap .entry-content * {
	color: #272626 !important;
}
.nv-single-post-wrap .nv-meta-list,
.nv-single-post-wrap .nv-meta-list * {
	color: #c6c6c6 !important;
	font-size: 0.8rem;
}
.nv-single-post-wrap .entry-content h1,
.nv-single-post-wrap .entry-content h2,
.nv-single-post-wrap .entry-content h3,
.nv-single-post-wrap .entry-content h4,
.nv-single-post-wrap .entry-content h5,
.nv-single-post-wrap .entry-content h6 {
	color: #14202e !important;
}

/* ---- Button lift ---- */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}


/* ---- IBM Carbon aesthetic ----
   Additive-only block — remove from here to END CARBON to revert completely.
   IBM Plex Sans loaded via functions.php (enqueued, not @import, for perf).
   Colors: Carbon Gray 100 (#161616) background, Gray 10 (#f4f4f4) body text,
   white headings, Blue 60 (#0f62fe) already on cards. Nav text kept dark
   since header is solid white. */

/* Page background: Carbon Gray 100 instead of custom navy */
body {
	background-color: #161616 !important;
}

/* Body copy: Carbon Gray 10 */
.entry-content {
	color: #f4f4f4 !important;
}

/* Headings: pure white */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: #ffffff !important;
}

/* IBM Plex Sans sitewide */
body,
.primary-menu-ul a,
.wp-block-heading,
.entry-content,
button,
input,
select,
textarea {
	font-family: IBM Plex Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif !important;
}

/* Card text stays dark (white bg on cards would be unreadable with dark override) */
.wp-block-column:has(.wp-block-heading + .wp-block-list) *,
.wp-block-column:has(h3.wp-block-heading) *,
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid) *,
.article-content-col * {
	color: #f4f4f4 !important;
}

/* Card headings: white for contrast on IBM Blue */
.wp-block-column:has(.wp-block-heading + .wp-block-list) .wp-block-heading,
.wp-block-column:has(h3.wp-block-heading) .wp-block-heading,
.wp-block-column:has(h4.wp-block-heading):has(i.fa-solid) .wp-block-heading {
	color: #ffffff !important;
}

/* Vanta canvas bg color now matches Carbon Gray 100 */
/* (VANTA backgroundColor is set in bli-pop.js — updated separately) */

/* Columns with an inline background-color (e.g. the DSX Files #f5f5f5 CTA
   panel) need dark text — the Carbon rules set light text globally on
   .entry-content and its headings, which bleeds through on light backgrounds.
   [style*="background-color"] targets only the columns that actually have a
   background set inline by the block editor, leaving bare columns (dark page
   bg, light text) unaffected. */
.wp-block-column[style*="background-color"],
.wp-block-column[style*="background-color"] * {
	color: #1d1d1d !important;
}
/* END CARBON */

/* Hide SDM download counter */
.sdm_download_item_count {
	display: none !important;
}

/* ---- Page content breathing room ----
   Singular pages (industry, services, resources) have no horizontal padding
   on .nv-content-wrap — text runs edge-to-edge inside the container.
   Add generous side padding; alignfull blocks already break out via negative
   margins so they're unaffected. */
.single-page-container .nv-content-wrap > *:not(.alignfull):not(.alignwide) {
	padding-left: clamp(20px, 5vw, 80px);
	padding-right: clamp(20px, 5vw, 80px);
}
/* END PAGE MARGINS */
@media (prefers-reduced-motion: reduce) {
	.bli-reveal,
	.wp-block-cover__image-background,
	.wp-block-cover__video-background,
	.wp-block-button__link,
	.wp-block-column {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ---- Nav dropdown fix ----
   backdrop-filter on .bli-header-glass promotes .header-main-inner to a new
   compositing layer, which creates a stacking context. Without an explicit
   z-index on the outer #header-grid, the browser can place the entire header
   below other composited layers, making the absolutely-positioned sub-menus
   render beneath page content and lose hover tracking.
   The pseudo-element on li.menu-item-has-children closes any sub-pixel gap
   between the bottom of the .wrap trigger and the top of the .sub-menu,
   which would cause the li:hover state to lapse mid-mouse-movement. */
#header-grid {
	position: relative;
	z-index: 1000;
}
.nav-ul li.menu-item-has-children {
	position: relative;
}
.nav-ul li.menu-item-has-children::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	height: 6px;
}