/* =========================================================================
   ZZLab — refreshed look (site-wide)
   Load order: main.css, then hero.css, then this file last.
   Built on WSU's crimson as the primary accent, WSU's own web typeface
   (Montserrat -- WSU brand guidelines designate this as "the official
   web typeface" for consistent display across browsers), a solid nav
   bar (not floating over photos), and wide, shorter banner photos in
   the style of wsu.edu / Cornell Biotech.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

:root {
	--zz-crimson: #981e32;
	--zz-crimson-dark: #6f1725;
	--zz-ink: #2b2b2b;
	--zz-gray: #6b6b6b;
	--zz-line: #e2e2e2;
	--zz-paper: #ffffff;
	--zz-bg: #f7f6f4;
	--zz-accent: #c9711a; /* softened version of the site's existing orange, used sparingly */
}

body {
	background: var(--zz-bg);
	color: var(--zz-ink);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* main.css has dozens of old, high-specificity rules (#main #Publication p,
   .container #Research p, etc.) that each pin a different legacy serif
   font (Constantia/Cambria/Baskerville/Gotham...) directly onto text
   elements. Inheriting Montserrat from body isn't enough to beat those, so
   force it everywhere text actually renders, once, here. */
body, p, li, td, th, div, span, a, blockquote, figcaption {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* -------------------------------------------------------------------------
   Nav — a plain solid bar above the photo, not floating on top of it.
   Logo left, links right, like wsu.edu / most university sites.
   ------------------------------------------------------------------------- */
.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--zz-paper);
	border-bottom: 3px solid var(--zz-crimson);
	padding: 0.6em 1.5em;
	position: relative;
	z-index: 2;
	flex-wrap: wrap;
}
.site-nav .brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.site-nav .brand img {
	height: 2.6em;
	width: auto;
	display: block;
}
.site-nav .brand-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 1.15em;
	color: var(--zz-crimson);
	line-height: 1.1;
}
.site-nav .brand-text small {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.55em;
	color: var(--zz-gray);
	letter-spacing: 0.02em;
}
.site-nav ul {
	list-style: none;
	display: flex;
	gap: 0.25em;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.site-nav ul a {
	display: block;
	padding: 0.6em 0.9em;
	color: var(--zz-ink);
	text-decoration: none;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 3px;
	transition: background 0.15s ease, color 0.15s ease;
}
.site-nav ul a:hover {
	background: var(--zz-bg);
	color: var(--zz-crimson);
}
.site-nav ul li.active a {
	color: var(--zz-crimson);
}

/* Photo sizing/scroll behavior lives in hero.css (.hero-frame) so it's
   shared unchanged whether or not a page uses the refreshed nav/colors. */

/* -------------------------------------------------------------------------
   Content card
   ------------------------------------------------------------------------- */
.wrapper {
	background: var(--zz-paper) !important;
	background-image: none !important;
}
body.uses-hero .wrapper {
	margin-top: 0;
	padding-top: 0;
}
.wrapper .container {
	max-width: 980px;
	margin: 0 auto;
	padding: 2.5em 1.5em 3em 1.5em;
}
.wrapper .container article {
	background: var(--zz-paper);
}

/* main.css also has many old rules (#main #Publication p, .container
   #Outreach, #page-wrapper .people, etc.) that shrink content to
   width:70%/80% and then shove it sideways with margin-left:15%/10% -- a
   leftover centering hack from the old fixed-width layout. Inside our
   new fluid .container that just leaves a narrow text column with a big
   empty gutter next to it. Force page content to use the full width of
   the container here, once, so text reads at a normal, readable width
   instead of a slim strip beside dead space. */
.wrapper .container #Publication,
.wrapper .container #Research,
.wrapper .container #Teaching,
.wrapper .container #Jobs,
.wrapper .container #Outreach,
.wrapper .container p,
.wrapper .container li,
.wrapper .container table,
.wrapper .container #SoftwareTable {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

h1, h2, .zzlabresearch {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--zz-ink);
}
p {
	line-height: 1.7;
	color: #3a3a3a;
}
a { color: var(--zz-crimson); }
a:hover { color: var(--zz-crimson-dark); }

/* Simple grid for photo/member listings, replacing the hand-floated % widths */
.zz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1.5em;
	margin: 1.5em 0;
}
.zz-grid figure {
	margin: 0;
	text-align: center;
}
.zz-grid figure {
	overflow: hidden;
}
.zz-grid .thumb {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: #eee;
}
.zz-grid .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.zz-grid figcaption {
	margin-top: 0.5em;
	font-size: 0.95em;
	color: var(--zz-ink);
}

/* Modifier for grids of wide logo/badge images (e.g. publication profile
   icons) instead of portrait photos. These are already cropped to clean
   rectangles with no baked-in caption to hide, so unlike .zz-grid .thumb
   above they should show the whole logo (object-fit: contain) inside a
   short wide box instead of being cover-cropped into a square. */
.zz-grid--logos .thumb {
	padding-bottom: 44%;
	background: #fff;
	border: 1px solid #eee;
}
.zz-grid--logos .thumb img {
	object-fit: contain;
	object-position: center;
	padding: 0.6em;
	box-sizing: border-box;
}

/* Modifier for the software-tool icon cards (GAPIT, BLINK, ROOSTER, etc).
   Those source images all share one template: logo art on top, a light
   gray caption band with the tool's name baked in at the very bottom
   (roughly the last 20% of the image height). The default .zz-grid .thumb
   above crops to a full square (top 100%/82% of a 1331x1624 source),
   which reaches just past that gray band's top edge and lets a sliver of
   it peek through under the logo. Cropping to a shorter box instead stops
   safely above the band -- clean logo, no gray line. */
.zz-grid--icons .thumb {
	padding-bottom: 93%;
}

/* Escape hatch for individual icons inside a .zz-grid--icons grid whose
   source image doesn't match the shared template (GRID_logo.png is its own
   small standalone logo with no baked-in caption band at all; audio4edu.jpg
   is template-sized but its "Audio EDU" wordmark runs all the way down to
   ~90% of the frame instead of stopping by ~72% like the other tool icons).
   The standard cover-crop above was zooming into and slicing off part of
   both logos. This keeps the same box size as its siblings but switches to
   object-fit: contain so the whole logo shows, letterboxed on a plain
   white card like the other "just show the whole logo" grids. */
.zz-grid .thumb.thumb--contain {
	background: #fff;
}
.zz-grid .thumb.thumb--contain img {
	object-fit: contain;
	object-position: center;
	padding: 0.6em;
	box-sizing: border-box;
}

/* Modifier for the research-topic icon cards (GWAS, GS, Alfalfa, UAV,
   Satellite, Cloud Computing). Same 1331x1624 template/gray-caption-band
   issue as .zz-grid--icons above, but this set's own artwork runs almost
   edge-to-edge -- content fills right up to ~80% down before the band
   starts, leaving far less headroom than the software-tool icons had.
   93% (tuned for those) would clip real content here (chart dots, the
   triangle diagram), so this set needs its own, much less aggressive
   crop that stops right at the content/band boundary instead. */
.zz-grid--topics .thumb {
	padding-bottom: 97.5%;
}
/* On computer-width screens, lock the 6 research-topic cards into a clean
   3-across x 2-row block instead of letting auto-fill pack in as many
   columns as fit (which left an orphaned 6th card alone on its own row). */
@media screen and (min-width: 701px) {
	.zz-grid--topics {
		grid-template-columns: repeat(3, 1fr);
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Modifier for the outreach/event logo cards (GWAS Wuhan, GS Harbin, etc).
   Same underlying issue as .zz-grid--icons above (source images are a logo
   over a gray caption band), but here the source images were pre-cropped
   to standalone logo-only files (see images/pic89-logo.jpg etc -- the
   gray caption band was removed entirely rather than just scrolled past),
   so like .zz-grid--logos these should show the whole logo via
   object-fit: contain rather than being cover-cropped. Box aspect is
   tuned to this set's own logo proportions (roughly 0.67-0.72 tall per
   unit wide) instead of the much wider publication badges. */
.zz-grid--events .thumb {
	padding-bottom: 70%;
	background: #fff;
	border: 1px solid #eee;
}
.zz-grid--events .thumb img {
	object-fit: contain;
	object-position: center;
	padding: 0.5em;
	box-sizing: border-box;
}
/* On computer-width screens, lock the 6 outreach event cards into a clean
   3-across x 2-row block instead of letting auto-fill pack in as many
   columns as fit. */
@media screen and (min-width: 701px) {
	.zz-grid--events {
		grid-template-columns: repeat(3, 1fr);
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Two side-by-side categories of tools (e.g. software page: Genomics vs.
   AI). Each keeps its own .zz-grid, so the two groups never interleave --
   they stay two distinct blocks (side by side on wide screens, stacked on
   phone) at every width, instead of one grid that reflows column-by-column
   and mixes the groups together. */
.zz-tool-groups {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5em;
	margin: 1.5em 0;
}
.zz-tool-group .zz-grid {
	margin: 0;
}
.zz-tool-group-title {
	margin: 0 0 1em;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--zz-crimson);
	border-bottom: 2px solid var(--zz-crimson);
	padding-bottom: 0.5em;
}
/* The divider lives in the gap itself (a positioned pseudo-element) rather
   than as padding/border on the second group -- padding would eat into
   that group's own width and could knock its .zz-grid down a column count
   at some screen widths while the first group keeps its column count,
   making the two sides look lopsided. This way both groups always measure
   exactly the same width. */
.zz-tool-group + .zz-tool-group {
	position: relative;
}
.zz-tool-group + .zz-tool-group::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.25em;
	width: 1px;
	background: #e0e0e0;
}

@media screen and (max-width: 700px) {
	.zz-tool-groups {
		grid-template-columns: 1fr;
		gap: 2em;
	}
	.zz-tool-group + .zz-tool-group::before {
		top: -1em;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}
}

footer#footernew {
	background: var(--zz-ink);
	color: #cfcfcf;
}

/* -------------------------------------------------------------------------
   Homepage mission block, restyled as a clean intro section
   under the hero rather than text stacked over an image.
   ------------------------------------------------------------------------- */
.zz-mission {
	max-width: 900px;
	margin: 0 auto;
	padding: 3em 1.5em;
	text-align: center;
}
.zz-mission h1 {
	font-size: 1.8em;
	color: var(--zz-crimson);
	margin-bottom: 0.6em;
}
.zz-mission p {
	font-size: 1.1em;
	line-height: 1.8;
	text-align: left;
	max-width: 700px;
	margin: 0 auto;
}
.zz-mission .letter {
	color: var(--zz-crimson);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Bio pages (PI + lab members): photo hero, then a two-column layout --
   long-form bio on the left, a slim sidebar (links / contact) on the right.
   Replaces the old .people1/.leftzhiwu column hack.
   ------------------------------------------------------------------------- */
.zz-bio-name {
	color: var(--zz-crimson);
	font-size: 1.5em;
	margin-bottom: 1em;
}
.zz-bio {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 2.5em;
	align-items: start;
}
.zz-bio-main p {
	margin: 0 0 1em 0;
}
.zz-bio-side {
	background: var(--zz-bg);
	border-radius: 6px;
	padding: 1.4em 1.5em;
}
.zz-bio-side + .zz-bio-side {
	margin-top: 1.2em;
}
.zz-bio-side h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--zz-crimson);
	margin: 0 0 0.7em 0;
}
.zz-bio-side div, .zz-bio-side p {
	font-size: 0.92em;
	line-height: 1.6;
	color: #3a3a3a;
	margin: 0 0 0.3em 0;
}
.zz-bio-side a {
	word-break: break-word;
}
@media screen and (max-width: 820px) {
	.zz-bio {
		grid-template-columns: 1fr;
	}
}

/* Simple two-link landing card (used on the People page) */
.zz-linkcards {
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap;
	margin: 1.5em 0 2.5em 0;
}
.zz-linkcards a {
	flex: 1 1 220px;
	display: block;
	background: var(--zz-bg);
	border: 1px solid var(--zz-line);
	border-left: 4px solid var(--zz-crimson);
	border-radius: 4px;
	padding: 1.2em 1.4em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.1em;
	color: var(--zz-ink);
	text-decoration: none;
	transition: background 0.15s ease;
}
.zz-linkcards a:hover {
	background: #f0ece7;
	color: var(--zz-crimson);
}