/* ------------------------------------------------------------------
   Visual refresh — layered ON TOP of the original main.css.
   main.css is never edited; removing the <link> to this file in
   src/_includes/base.njk restores the original look exactly.
   ------------------------------------------------------------------ */

/* 1. Menu links visible in the header on wide screens.
      Narrower screens keep the original "Menu" button + side panel. */
#header nav > ul > li.nav-inline {
	display: none;
}

@media screen and (min-width: 1400px) {
	#header nav > ul > li.nav-inline {
		display: inline-block;
	}
	#header nav > ul > li.nav-inline > a {
		font-size: 0.7em;
		letter-spacing: 0.08em;
		padding: 0 0 0 1.1em;
		opacity: 0.8;
		transition: opacity 0.2s ease;
	}
	#header nav > ul > li.nav-inline > a:hover,
	#header nav > ul > li.nav-inline > a.current {
		opacity: 1;
	}
	#header nav > ul > li.nav-inline > a.current {
		box-shadow: inset 0 -2px 0 #21b2a6;
	}
	#header nav > ul > li.special {
		display: none;
	}
	#header nav {
		padding-right: 1.5em;
	}
}

/* 2. Members: same-size round photos, cards aligned in tidy rows. */
body.members-page .row {
	display: flex;
	flex-wrap: wrap;
}
	body.members-page .row:before,
	body.members-page .row:after {
		display: none;
	}

body.members-page .image.fit img {
	width: 200px;
	height: 200px;
	max-width: 100%;
	max-height: none;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.members-page .image.fit {
	margin-bottom: 1em;
}

body.members-page h4 {
	margin-bottom: 0.4em;
}

body.members-page .member-role {
	color: #21b2a6;
	font-weight: 600;
}

body.members-page .icon:before {
	color: #8e8892;
	margin-right: 0.35em;
}

/* 3. Events: highlight the next upcoming talk in each table. */
/* (the Research Reports table keeps its rows inside <thead> — an original
   markup quirk — so match rows anywhere in the table) */
table tr.next-event,
table tbody tr.next-event:nth-child(2n + 1) {
	background-color: rgba(33, 178, 166, 0.15);
	box-shadow: inset 4px 0 0 #21b2a6;
}
	table tr.next-event td:first-child:before {
		content: "Next \203A\00a0";
		color: #21b2a6;
		font-weight: 600;
		font-size: 0.8em;
		text-transform: uppercase;
	}