/* ============================================================
   SEEK LABS — Gutenberg block-layout override layer
   ============================================================
   The static-site CSS (homepage.css, diagnostics.css, etc.) was
   written for clean semantic HTML. WordPress wraps every block
   in extra divs and pumps in three layers of generic layout
   styling that fight the design:

     1. .has-global-padding adds left/right padding from a CSS var
     2. .is-layout-constrained applies max-width:1200px AND
        margin-left/right:auto !important to every direct child,
        which centers content that should flow left-aligned.
     3. .alignfull gets compensating negative margins keyed to
        the global-padding var.

   This file scopes those defaults to no-ops inside .site-main so
   the original per-page CSS can do its job. We keep .container's
   intentional margin:auto and .aligncenter intact. */

/* (1) Zero the root padding inside Seek Labs page main so
       has-global-padding adds no padding. The design uses its
       own section-specific padding throughout. */
.site-main {
	--wp--style--root--padding-top: 0;
	--wp--style--root--padding-right: 0;
	--wp--style--root--padding-bottom: 0;
	--wp--style--root--padding-left: 0;
}

/* (2) Undo Gutenberg's auto-margin-centering for the INNER
       constrained groups (hero-inner, content-inner, etc.).
       We deliberately leave the top-level .wp-block-post-content
       child centering alone — the page-level sections are still
       constrained to 1200px and centered by that outer wrapper.
       This rule only targets nested constrained groups (deeper
       than the post-content layer). */
.site-main .is-layout-constrained:not(.wp-block-post-content) > :not(.alignleft):not(.alignright):not(.alignfull):not(.aligncenter):not(.container):not(.container-narrow):not(.section-inner):not(.page-cta-inner):not(.home-hero-inner):not(.why-now-inner):not(.dx-hero-content):not(.tx-hero-inner):not(.bs-hero-inner):not(.about-hero-inner):not(.page-hero):not(.news-featured-card):not(.news-featured-query):not(.news-section-head):not(.news-pubs-grid):not(.news-blog-grid):not(.news-archive-grid):not(.news-grid-3):not(.news-archive-query):not(.news-view-all):not(.news-cta-inner):not(.contact-inner):not(.careers-inner):not(.hero-content):not(.about-quality-body):not(.about-board-grid):not(.section-desc) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* (3) Restore the original element max-widths that should still
       apply (some are overridden by the .is-layout-constrained
       rule's max-width:1200px because of CSS rule order). These
       are the per-element widths from the static site's CSS. */
.site-main .home-hero-title { max-width: 14ch; }
.site-main .home-hero-sub   { max-width: 56ch; }
.site-main .hero-doctrine   { max-width: 32ch; }
.site-main .dx-hero-title   { max-width: 18ch; }
.site-main .dx-hero-subtitle{ max-width: 56ch; }

/* The wp-block-post-content wrapper is itself .is-layout-constrained
   with contentSize:1200px, which caps top-level sections at 1200px.
   Allow .alignfull sections to span the full viewport. */
.site-main .wp-block-post-content > .alignfull {
	width: 100%;
	max-width: 100%;
}

/* ============================================================
   Page CTA pattern (page-cta-partner)
   This pattern doesn't exist in the static site; it's added by
   the WordPress template. Styled to match Seek Labs system. */
.page-cta {
	background: var(--white);
	padding: clamp(80px, 10vw, 140px) 0;
	border-top: 1px solid var(--cream-dark, #E2E8F0);
}
.page-cta-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-6);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}
.page-cta-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--teal, #0072CE);
	margin: 0;
}
.page-cta-eyebrow::before {
	content: "— ";
	color: var(--teal-light);
}
.page-cta-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 var(--space-3);
	max-width: 22ch;
}
.page-cta-body {
	font-family: var(--font-body);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.55;
	color: var(--ink-light, #3A3F4A);
	max-width: 60ch;
	margin: 0 0 var(--space-4);
}
.page-cta .wp-block-buttons {
	margin-top: var(--space-2);
}
.page-cta .wp-block-button__link {
	background: var(--ink, #1A1E26);
	color: var(--white);
	border-radius: 999px;
	padding: 16px 32px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: background 0.3s ease;
}
.page-cta .wp-block-button__link:hover {
	background: var(--teal);
}

/* ============================================================
   News CTA pattern (seek-labs/news-cta)
   Centered follow + links section at the bottom of the news page. */
.news-cta {
	background: var(--white);
	padding: clamp(80px, 10vw, 128px) 0;
	border-top: 1px solid var(--cream-dark, #E2E8F0);
}
.news-cta-inner {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 var(--space-6);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
}
.news-cta-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--teal, #0072CE);
	margin: 0;
}
.news-cta-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
	margin: 0;
}
.news-cta-body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-muted);
	margin: 0 0 var(--space-4);
	max-width: 56ch;
}
.news-cta-follow.wp-block-buttons {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}
.news-cta-follow .wp-block-button__link {
	border: 1.5px solid var(--ink-muted, #6B7280);
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.news-cta-follow .wp-block-button__link:hover {
	border-color: var(--teal);
	color: var(--teal);
}
.news-cta-secondary.wp-block-buttons {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}
.news-cta-secondary .wp-block-button__link {
	background: var(--ink, #1A1E26);
	color: var(--white);
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
}
.news-cta-secondary .wp-block-button__link:hover {
	background: var(--teal);
}

/* ============================================================
   Homepage dark-footer overrides
   The homepage uses a dark footer (set in homepage.css). The
   default footer styling in style.css assumes a light footer
   (with dark text). Override the colors when we're on the
   homepage so headings/links are visible on the dark bg. */
body.home .footer-col h4 { color: rgba(255,255,255,0.55); }
body.home .footer-col a { color: rgba(255,255,255,0.75); }
body.home .footer-col a:hover { color: var(--teal-light); }
body.home .footer-tagline { color: rgba(255,255,255,0.55); }
body.home .footer-location { color: rgba(255,255,255,0.4); }
body.home .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
body.home .footer-bottom p,
body.home .footer-disclaimer p { color: rgba(255,255,255,0.42); }
body.home .footer-disclaimer strong { color: rgba(255,255,255,0.62); }
body.home .footer-ip,
body.home .footer-copyright { color: rgba(255,255,255,0.32); }

/* ============================================================
   Header navigation — bridge WP block markup to static-site .nav-link styles.
   Static site uses <a class="nav-link"> with .btn-nav for the CTA.
   WP outputs <a class="wp-block-navigation-item__content"> inside .nav-desktop
   nav. Mirror the static styling onto WP's class names. */

/* Desktop primary nav (.nav-desktop) — match .nav-link styling.
   !important is required to beat WP's doubled-class specificity trick:
   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   which sets color:inherit at 0,3,0 specificity. */
.nav-desktop .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85) !important;
	transition: color var(--transition-interactive);
	padding: var(--space-1) 0;
	text-decoration: none;
}
.nav-desktop .wp-block-navigation-item__content:hover { color: var(--white) !important; }

/* When the header has scrolled, links go dark */
.header.scrolled .nav-desktop .wp-block-navigation-item__content,
.header.is-scrolled .nav-desktop .wp-block-navigation-item__content {
	color: var(--ink-light) !important;
}
.header.scrolled .nav-desktop .wp-block-navigation-item__content:hover,
.header.is-scrolled .nav-desktop .wp-block-navigation-item__content:hover {
	color: var(--teal) !important;
}

/* Active page indicator (WP adds aria-current="page") */
.nav-desktop .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--white);
	position: relative;
}
.nav-desktop .wp-block-navigation-item__content[aria-current="page"]::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0; right: 0;
	height: 2px;
	background: var(--teal);
	border-radius: 1px;
}
.header.scrolled .nav-desktop .wp-block-navigation-item__content[aria-current="page"],
.header.is-scrolled .nav-desktop .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--teal);
}

/* Partner With Us CTA pill — flagged with className "is-style-cta-pill" */
.nav-desktop .is-style-cta-pill .wp-block-navigation-item__content {
	background: var(--teal);
	color: var(--white) !important;
	padding: var(--space-2) var(--space-5);
	border-radius: 8px;
	font-weight: 600;
	transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.nav-desktop .is-style-cta-pill .wp-block-navigation-item__content:hover {
	background: var(--teal-dark);
	transform: translateY(-1px);
}
.nav-desktop .is-style-cta-pill .wp-block-navigation-item__content::after {
	content: none !important;
	display: none !important;
}
/* Keep pill text white in all header states (scrolled rule would otherwise go dark) */
.header.scrolled .nav-desktop .is-style-cta-pill .wp-block-navigation-item__content,
.header.is-scrolled .nav-desktop .is-style-cta-pill .wp-block-navigation-item__content {
	color: var(--white) !important;
}
.header.scrolled .nav-desktop .is-style-cta-pill .wp-block-navigation-item__content:hover,
.header.is-scrolled .nav-desktop .is-style-cta-pill .wp-block-navigation-item__content:hover {
	color: var(--white) !important;
}

/* Utility bar links (Investors / Careers) — small, white, tight */
.utility-links .wp-block-navigation__container {
	gap: 1rem;
}
.utility-links .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0;
}
.utility-links .wp-block-navigation-item__content:hover { color: var(--white); }

/* When the header scrolls into a light state, invert the white logo so it
   stays visible (the static site has two logo images; WP only has one). */
.header.scrolled .wp-block-site-logo img,
.header.is-scrolled .wp-block-site-logo img,
.site-top:has(.header.scrolled) .wp-block-site-logo img,
.site-top:has(.header.is-scrolled) .wp-block-site-logo img {
	filter: invert(1) hue-rotate(180deg) brightness(0.6) saturate(2);
}

/* Footer is now dark — logo is already white, no filter needed. */
.footer .wp-block-site-logo img,
.footer .custom-logo,
.footer-brand .wp-block-site-logo img {
	filter: none !important;
}

/* ============================================================
   Page Sub-Nav (.dx-page-nav)
   Moved to global so therapeutics and other pages with sub-navs
   get the same styling. (Originally only in diagnostics.css.) */
.dx-page-nav {
	background: var(--cream, #F7F9FC);
	border-top: 1px solid var(--cream-dark, #E2E8F0);
	border-bottom: 1px solid var(--cream-dark, #E2E8F0);
	position: fixed;
	left: 0; right: 0;
	top: var(--site-top-height, 112px);
	margin: 0;
	z-index: 301;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 180ms ease, transform 180ms ease;
}
.dx-page-nav.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
/* Prevent the fixed nav from leaving a gap in the normal document flow */
.wp-block-html:has(> .dx-page-nav) {
	margin-block: 0 !important;
}
.dx-page-nav-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted, #6B7280);
	margin: 0;
	padding: 18px 0;
	flex-shrink: 0;
}
.dx-page-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 32px;
	flex-wrap: wrap;
}
.dx-page-nav-link {
	display: inline-flex;
	align-items: center;
	padding: 18px 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1;
	color: var(--ink, #1A1E26);
	text-decoration: none;
	position: relative;
	transition: color 200ms ease;
}
.dx-page-nav-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--teal, #0072CE);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}
.dx-page-nav-link:hover,
.dx-page-nav-link:focus-visible,
.dx-page-nav-link.is-active { color: var(--teal, #0072CE); outline: none; }
.dx-page-nav-link:hover::after,
.dx-page-nav-link:focus-visible::after,
.dx-page-nav-link.is-active::after { transform: scaleX(1); }
@media (max-width: 760px) {
	.dx-page-nav .dx-page-nav-inner { flex-direction: column; gap: 0; padding-bottom: 8px; }
}

/* Force-center inner wrappers that use margin:0 auto. Gutenberg's
   .is-layout-constrained > * rule applies margin:auto !important which
   we already exempt above, but the original CSS for these wrappers
   doesn't use !important; some other Gutenberg rule could still
   override. Pin centering explicitly. */
.site-main .page-cta-inner,
.site-main .section-inner,
.site-main .why-now-inner,
.site-main .home-hero-inner,
.site-main .dx-hero-content,
.site-main .page-hero,
.site-main .news-featured-query,
.site-main .news-featured-card,
.site-main .news-cta-inner,
.site-main .news-pubs-grid,
.site-main .news-blog-grid,
.site-main .news-archive-grid,
.site-main .news-grid-3,
.site-main .news-archive-query,
.site-main .news-view-all {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================================
   Page-hero text colors (page-hero has a dark gradient bg in pages.css).
   Force titles/text to white so they're visible on the dark hero. */
.page-hero h1,
.page-hero h2,
.page-hero .section-title,
.page-hero .section-label,
.page-hero .page-hero-eyebrow {
	color: #ffffff !important;
}
.page-hero p,
.page-hero .section-desc,
.page-hero .page-hero-subtitle {
	color: rgba(255,255,255,0.78) !important;
}
.page-hero .section-label,
.page-hero .page-hero-eyebrow {
	color: rgba(255,255,255,0.55) !important;
}

/* ============================================================
   Hero CTAs (homepage)
   wp:buttons wraps each CTA in <div.wp-block-button> + inner <a>.
   The static design uses a single <a class="hero-cta hero-cta-primary">.
   Strip the wp-block-button wrapper styling and put the design directly
   on the inner <a class="wp-block-button__link">. */

/* Outer wrapper — kill all default styling */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.wp-block-button.hero-cta {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
/* Inner anchor — pin static design */
.hero-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.3s var(--ease-out, ease), color 0.3s var(--ease-out, ease), border-color 0.3s var(--ease-out, ease);
	white-space: nowrap;
	border: 1px solid transparent;
}
.hero-cta-primary .wp-block-button__link {
	background: var(--teal, #0072CE) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.hero-cta-primary .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--teal, #0072CE) !important;
}
.hero-cta-secondary .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border-color: rgba(255,255,255,0.32) !important;
}
.hero-cta-secondary .wp-block-button__link:hover {
	border-color: #fff !important;
	background: rgba(255,255,255,0.06) !important;
}

/* ============================================================
   Social-links — force monochrome to match static design.
   WP renders each platform in its brand color (X = black,
   Instagram = pink, LinkedIn = blue) which is unreadable on
   the dark utility bar. Static design uses white. */
.utility-bar .wp-block-social-link,
.utility-bar .wp-social-link {
	color: rgba(255,255,255,0.65) !important;
	background: transparent !important;
}
.utility-bar .wp-social-link:hover { color: #fff !important; }
.utility-bar .wp-social-link svg { fill: currentColor !important; }

/* Footer follow icons — on homepage (dark) use white, elsewhere keep
   the static design's monochrome teal-ish color. */
.footer .wp-block-social-link,
.footer .wp-social-link {
	background: transparent !important;
}
body.home .footer .wp-social-link {
	color: rgba(255,255,255,0.75) !important;
}
body.home .footer .wp-social-link:hover { color: #fff !important; }
body:not(.home) .footer .wp-social-link {
	color: var(--ink-muted, #6B7280) !important;
}
body:not(.home) .footer .wp-social-link:hover { color: var(--teal, #0072CE) !important; }
.footer .wp-social-link svg { fill: currentColor !important; }

/* ============================================================
   News page sub-nav (.news-nav) — positioning/visibility defined in pages.css. */
.news-nav {
	background: var(--cream, #F7F9FC);
	border-top: 1px solid var(--cream-dark, #E2E8F0);
	border-bottom: 1px solid var(--cream-dark, #E2E8F0);
}
.news-nav-inner {
	max-width: var(--max-width);
	margin: 0 auto !important;
	padding: 0 var(--space-6);
	display: flex;
	align-items: baseline;
	gap: var(--space-8, 32px);
}
.news-nav-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted, #6B7280);
	margin: 0;
	padding: 18px 0;
	flex-shrink: 0;
}
.news-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.news-nav-link {
	display: inline-flex;
	align-items: center;
	padding: 18px 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink, #1A1E26);
	text-decoration: none;
	position: relative;
	transition: color 200ms ease;
}
.news-nav-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--teal, #0072CE);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}
.news-nav-link:hover,
.news-nav-link.is-active { color: var(--teal, #0072CE); }
.news-nav-link:hover::after,
.news-nav-link.is-active::after { transform: scaleX(1); }
@media (max-width: 760px) {
	.news-nav-inner { flex-direction: column; gap: 0; padding-bottom: 8px; }
}

/* ============================================================
   Footer nav vertical-flex spacing — Gutenberg's .is-layout-flex
   adds gap: 1.2rem (19.2px) between every nav item, way too much.
   Static site uses 0 gap because each <a> has its own padding. */
.footer-col .wp-block-navigation__container.is-layout-flex,
.footer-col .wp-block-navigation,
.footer-col nav.wp-block-navigation .wp-block-navigation__container {
	gap: 0 !important;
	row-gap: 0 !important;
}
.footer-col .wp-block-navigation-item {
	margin: 0 !important;
}

/* Nav color: the !important on the base .nav-desktop rule above handles all
   pages universally. The investors page forces .scrolled at all times via JS
   so its nav automatically gets the dark scrolled color — no override needed. */

/* ============================================================
   About page — every top-level section and the hero must break out
   of the 1200px constrained post-content to fill the full viewport.
   Each section's own is-layout-constrained handles inner centering. */
body.page-template-page-about .wp-block-post-content > .section,
body.page-template-page-about .page-hero.about-hero,
body.page-template-page-investors .wp-block-post-content > .section,
body.page-template-page-investors .wp-block-post-content > .page-hero,
body.page-template-page-investors .wp-block-post-content > .inv-securities-banner,
body.page-template-page-careers .wp-block-post-content > .section,
body.page-template-page-careers .wp-block-post-content > .page-hero,
body.page-template-page-contact .wp-block-post-content > .section,
body.page-template-page-contact .wp-block-post-content > .page-hero,
body.page-template-page-news .wp-block-post-content > .section,
body.page-template-page-news .wp-block-post-content > .page-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Kill WP's is-layout-constrained block-gap between these pages' top-level children */
body.page-template-page-investors .wp-block-post-content,
body.page-template-page-careers .wp-block-post-content,
body.page-template-page-contact .wp-block-post-content,
body.page-template-page-news .wp-block-post-content {
	gap: 0 !important;
	row-gap: 0 !important;
}
body.page-template-page-investors .wp-block-post-content > *,
body.page-template-page-careers .wp-block-post-content > *,
body.page-template-page-contact .wp-block-post-content > *,
body.page-template-page-news .wp-block-post-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ============================================================
   Single article page overrides */

/* Hero section: full-width break-out */
.site-main.article .article-hero-section.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Inner flex row — WP adds is-layout-flex but we control sizing via CSS */
.site-main.article .article-hero-inner.is-layout-flex {
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--space-10, 40px) !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--space-6, 24px) !important;
	padding-right: var(--space-6, 24px) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Left body: grow to fill available space */
.site-main.article .article-hero-body {
	flex: 1 1 55% !important;
	min-width: 0 !important;
}

/* Right image: fixed proportion, rounded, no WP link wrapper oddities */
.site-main.article .article-hero-img.wp-block-post-featured-image {
	flex: 0 0 42% !important;
	max-width: 42% !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 4 / 3 !important;
}
.site-main.article .article-hero-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Zero WP block-gap on hero section children */
.article-hero-section > * + *,
.article-hero-body.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}

/* Bare <a> tags that are direct children of article-body (e.g. "Back to All Posts")
   are inline by default — inline elements ignore margin:auto, so they stick to the
   left edge. Force them to block so the margin:auto centering rule below works. */
.site-main.article .article-body > a {
	display: block !important;
}

/* Constrain all direct children of article-body to the 700px reading column.
   WP's is-layout-constrained rule should do this, but falls back to left-edge
   on some children (e.g. plain paragraphs with links). Enforce it explicitly. */
.site-main.article .article-body > * {
	max-width: 700px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Let alignfull/alignwide children still break out */
.site-main.article .article-body > .alignfull,
.site-main.article .article-body > .alignwide {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Author block spans full width of the body padding box */
.site-main.article .article-body > .article-author-block {
	max-width: 700px !important;
}

/* Article body text — override WP's default post-content sizes */
.site-main.article .article-body h2 {
	font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--ink, #1A1E26) !important;
}
.site-main.article .article-body h3 {
	font-size: clamp(1.1rem, 2vw, 1.375rem) !important;
	font-weight: 700 !important;
	color: var(--ink, #1A1E26) !important;
}
.site-main.article .article-body h6 {
	font-family: var(--font-body, 'General Sans', sans-serif) !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: var(--ink-muted, #6B7280) !important;
	font-style: italic !important;
	margin-top: -8px !important;
	margin-bottom: var(--space-6, 24px) !important;
	border-left: none !important;
	padding-left: 0 !important;
}

/* Author bio block — override the generic h6 caption rules */
.site-main.article .article-author-block h6 {
	font-size: 0.8rem !important;
	font-style: normal !important;
	color: var(--ink-muted, #6B7280) !important;
	margin: 0 !important;
	border-left: none !important;
	padding-left: 0 !important;
}
.site-main.article .article-author-block p {
	margin: 0 !important;
	padding: 0 !important;
}

/* Responsive: stack on mobile */
@media (max-width: 760px) {
	.site-main.article .article-hero-inner.is-layout-flex {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	.site-main.article .article-hero-img.wp-block-post-featured-image {
		flex: none !important;
		max-width: 100% !important;
		width: 100% !important;
		aspect-ratio: 16 / 9 !important;
		border-radius: 8px !important;
	}
}

/* ============================================================
   Footer grid — must be 5 columns to match static design.
   style.css's older rule says 4 columns (2fr 1fr 1fr 1fr) which
   makes the Stay Updated / BioHive column wrap to a new row
   underneath the brand. Force 5 columns. */
.footer .footer-grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
	gap: var(--space-8) !important;
}
@media (max-width: 960px) {
	.footer .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
	.footer .footer-grid { grid-template-columns: 1fr !important; }
}

/* Footer social icons — match static design (monochrome, not brand). */
.footer .footer-col--follow .wp-social-link,
.footer .footer-col--follow .wp-block-social-link {
	background: transparent !important;
	color: var(--ink-muted, #6B7280) !important;
}
.footer .footer-col--follow .wp-social-link:hover {
	color: var(--teal, #0072CE) !important;
}
.footer .footer-col--follow svg { fill: currentColor !important; }

/* On the dark homepage footer, social icons need to be white. */
body.home .footer .footer-col--follow .wp-social-link {
	color: rgba(255,255,255,0.75) !important;
}
body.home .footer .footer-col--follow .wp-social-link:hover {
	color: #fff !important;
}

/* ============================================================
   News page — card image figure resets & WP-class-name bridges.
   wp:post-featured-image renders a <figure> element; remove the
   default browser/Gutenberg margin so it doesn't break card layouts.
   WP's is-layout-flow > * + * rule adds margin-block-start via block-gap
   to every non-first child — must override with !important. */
.news-featured-img,
.news-blog-img,
.news-article-img {
	margin: 0 !important;
	margin-block-start: 0 !important;
}

/* Zero out is-layout-flow block-gap inside every news card so WP's
   * + * rule never adds space above the image or between card sections. */
.news-blog-card.is-layout-flow > * + *,
.news-article-card.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}

/* Featured card: force two-column flex layout and block-link technique. */
.site-main .news-featured-card.is-layout-flex {
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0 !important;
	position: relative;
}
.site-main .news-featured-card > figure.news-featured-img {
	flex: 0 0 52% !important;
	max-width: 52% !important;
}
.site-main .news-featured-card > .news-featured-body {
	flex: 1 1 auto !important;
}
/* Block-link: stretch the featured title's anchor to cover the whole card */
.news-featured-card .news-featured-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.news-featured-card .news-featured-meta,
.news-featured-card .news-featured-excerpt,
.news-featured-card .news-read-more {
	position: relative;
	z-index: 2;
}

/* Featured card: the <figure> must fill its grid cell fully. */
figure.news-featured-img {
	height: 100%;
	min-height: 280px;
}
figure.news-featured-img a,
figure.news-featured-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blog card: figure image sizing.
   Fixed height beats aspect-ratio for cross-browser consistency.
   flex-shrink:0 prevents the flex parent from squishing the image. */
figure.news-blog-img {
	height: 220px !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
	background: var(--cream-dark, #E2E8F0);
	margin: 0 !important;
}
figure.news-blog-img a { display: block; height: 100%; }
figure.news-blog-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.news-blog-card:hover figure.news-blog-img img { transform: scale(1.04); }

/* Archive card: figure image sizing. */
figure.news-article-img {
	height: 220px !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
	background: var(--cream-dark, #E2E8F0);
	margin: 0 !important;
}
figure.news-article-img a { display: block; height: 100%; }
figure.news-article-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.news-article-card:hover figure.news-article-img img { transform: scale(1.04); }

/* Publication badge — style the wp:post-terms link inside news-pub-badge. */
.news-pub-badge a.wp-block-post-terms__item {
	font-family: var(--font-mono, monospace);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--teal, #0072CE);
	color: #fff;
	text-decoration: none;
}
.news-pub-badge { display: flex; align-items: center; gap: 8px; }

/* Make news-pub-link text non-underlined */
.news-pub-link { text-decoration: none !important; }

/* news-card-date inside blog cards */
.news-blog-card .news-card-date,
.news-article-card .news-card-date {
	font-size: 0.8rem;
	color: var(--ink-muted, #6B7280);
	margin-top: auto;
}

/* ============================================================
   News grids — WordPress wraps all post-template items in a single
   ul.wp-block-post-template, which becomes one grid cell. The grid must
   be applied to the ul, not the outer wp-block-query div. */
.news-pubs-grid .wp-block-post-template,
.news-blog-grid .wp-block-post-template,
.news-grid-3 .wp-block-post-template,
.news-archive-query .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--space-6, 24px) !important;
	width: 100% !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
@media (max-width: 900px) {
	.news-pubs-grid .wp-block-post-template,
	.news-blog-grid .wp-block-post-template,
	.news-grid-3 .wp-block-post-template,
	.news-archive-query .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 580px) {
	.news-pubs-grid .wp-block-post-template,
	.news-blog-grid .wp-block-post-template,
	.news-grid-3 .wp-block-post-template,
	.news-archive-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}
/* Outer query divs just need to fill their centered container */
.news-pubs-grid,
.news-blog-grid,
.news-grid-3,
.news-archive-query {
	display: block !important;
	width: 100%;
}

/* Equal-height pub cards — li items must stretch so card fills the row */
.news-pubs-grid .wp-block-post {
	display: flex !important;
}
.news-pub-card {
	height: 100%;
	width: 100%;
}

/* Center the featured query wrapper (wp-block-query is a direct child of the
   constrained .news-featured section; our margin:0 override hits it so we must
   re-center it here). */
.news-featured .wp-block-query {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

/* Center section headings inside constrained news sections */
.site-main .news-section-head {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
}

/* Archive section alias */
.news-all { background: var(--white, #fff); }

/* "View all news" button row */
.news-view-all {
	margin-top: var(--space-8, 32px) !important;
	justify-content: center !important;
}

/* Center the archive query on the clean archive template */
.news-archive-query {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
}

/* Equal-height cards — WordPress sets align-self:start on .wp-block-post grid
   items which prevents rows from stretching. Override to stretch so all cards
   in a row reach the same height, then make each card fill its li.
   Also zero margin-block-start: WP's * + * block-gap rule adds 19.2px to
   every li after the first, offsetting it downward in the grid row. */
.news-pubs-grid .wp-block-post-template > .wp-block-post,
.news-blog-grid .wp-block-post-template > .wp-block-post,
.news-grid-3 .wp-block-post-template > .wp-block-post,
.news-archive-query .wp-block-post-template > .wp-block-post {
	align-self: stretch !important;
	display: flex !important;
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
.news-pub-card,
.news-blog-card,
.news-article-card {
	height: 100% !important;
	width: 100% !important;
}

/* Clamp long auto-excerpts so cards stay uniform height. */
.news-featured-excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
.news-article-excerpt,
.news-blog-excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
/* Pub excerpts can be a bit longer */
.news-pub-excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* ── Archive pagination ──────────────────────────────────────────────────── */
.wp-block-query-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: var(--space-10, 48px) !important;
	padding: var(--space-6, 24px) 0 !important;
	flex-wrap: wrap !important;
}

/* Hide WP's default prev/next text links — we show numbers only */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: none !important;
}

/* Every page number (anchor or span) */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 10px !important;
	font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	color: var(--gray-600, #6b7280) !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	transition: color 0.18s, border-color 0.18s, background 0.18s !important;
	cursor: pointer !important;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	color: var(--teal, #0072CE) !important;
	border-color: var(--teal, #0072CE) !important;
	background: rgba(0, 114, 206, 0.06) !important;
}

/* Current page */
.wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--teal, #0072CE) !important;
	border-color: var(--teal, #0072CE) !important;
	background: rgba(0, 114, 206, 0.08) !important;
	font-weight: 700 !important;
	cursor: default !important;
}

/* Ellipsis dots */
.wp-block-query-pagination-numbers .page-numbers.dots {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--gray-400, #9ca3af) !important;
	cursor: default !important;
	letter-spacing: 0.1em !important;
}

/* WP admin bar offset — shift fixed site-top below the 32px admin bar when logged in */
body.admin-bar .site-top {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-top {
		top: 46px !important;
	}
}

/* Remove WP block gap between header/main/footer template parts */
.wp-site-blocks {
	row-gap: 0 !important;
}
/* Zero margin-block-start gaps between top-level template parts (header/main/footer) */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}
/* Zero gap between utility bar and main nav inside .site-top */
.site-top > * + * {
	margin-block-start: 0 !important;
}

/* Diagnostics page — zero flow gaps inside <main> between subnav/post-content/scene */
body.page-template-page-diagnostics .site-main.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}
/* Diagnostics page — make wp:html blocks in post-content full viewport width
   (WP's constrained layout caps them at 1200px; sections need edge-to-edge backgrounds) */
body.page-template-page-diagnostics .wp-block-post-content > .wp-block-html,
body.page-template-page-diagnostics .wp-block-post-content > .wp-block-group {
	max-width: 100% !important;
	width: 100% !important;
}

/* Constrain WP social-links block icons in the utility bar */
.utility-social .wp-block-social-links {
	gap: 6px !important;
	padding: 0 !important;
}
.utility-social .wp-block-social-link,
.utility-social .wp-social-link {
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
}
.utility-social .wp-block-social-link a,
.utility-social .wp-social-link a {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.utility-social .wp-block-social-link svg,
.utility-social .wp-social-link svg {
	width: 14px !important;
	height: 14px !important;
}

/* FluentForm select — custom arrow with proper right padding */
select.ff-el-form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231A1E26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 40px !important;
}