/* ==========================================================================
   Custom overrides for the Stellar template.
   Loaded after main.css, so equal-specificity rules here win.
   ========================================================================== */

/* --- Light theme -----------------------------------------------------------
   main.css themes the page as light text on a purple gradient. Everything
   below repaints that top-level (header/footer) scope for a white background.
   #main and #nav carry their own scoped colours and are handled further down. */

	body {
		background-color: #ffffff;
		background-image: none;
		color: #333333;
	}

	h1, h2, h3, h4, h5, h6,
	strong, b,
	dl dt,
	table th,
	label,
	a:hover {
		color: #000000;
	}

	hr {
		border-bottom-color: rgba(0, 0, 0, 0.15);
	}

	blockquote {
		border-left-color: rgba(0, 0, 0, 0.15);
	}

	ul.alt li {
		border-top-color: rgba(0, 0, 0, 0.15);
	}

	.icon.alt {
		border-color: rgba(0, 0, 0, 0.2);
		color: #333333;
	}

		.icon.alt:hover {
			background-color: rgba(0, 0, 0, 0.04);
		}

		.icon.alt:active {
			background-color: rgba(0, 0, 0, 0.1);
		}

	.icon.major {
		border-color: rgba(0, 0, 0, 0.2);
	}

/* Darken the greys main.css uses inside the content and nav panels, so the
   text weight is consistent with the header and footer above. */

	#main,
	#main input, #main select, #main textarea,
	#main a:hover,
	#nav,
	#nav a:hover {
		color: #333333;
	}

	#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
	#main strong, #main b,
	#main dl dt,
	#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6,
	#nav strong, #nav b {
		color: #000000;
	}

	#main .icon.alt {
		color: #333333;
	}

/* --- Header ---------------------------------------------------------------- */

/* No entrance animation: main.css fades #header.alt children in from opacity 0
   (and spins the logo) once main.js drops the .is-preload class. Pin them to
   their final state in both phases so the header is simply there on load. */

	#header.alt > *,
	body.is-preload #header.alt > * {
		opacity: 1;
		-moz-transition: none;
		-webkit-transition: none;
		-ms-transition: none;
		transition: none;
	}

	#header.alt .header-image,
	body.is-preload #header.alt .header-image {
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	.header-image {
		display: block;
		margin: 0 0 1.5em 0;
	}

		.header-image img {
			display: block;
			width: 100%;
			height: clamp(220px, 40vw, 480px);
			-o-object-fit: cover;
			object-fit: cover;
			/* the dish sits above centre; bias the crop upward to keep it whole */
			-o-object-position: center 45%;
			object-position: center 45%;
			border-radius: 0.25em;
		}

	#header.alt h1 {
		font-size: 2em;
	}

/* --- NASA ADS icon ---------------------------------------------------------
   No Font Awesome glyph exists for ADS, so it is drawn through the same
   .icon.alt:before box the neighbouring icons use. ul.icons items are aligned
   to the top because an icon with no glyph has no text baseline to align on. */

	ul.icons li {
		vertical-align: top;
	}

	.icon.alt.icon-ads:before {
		content: '';
		background-image: url('../../images/ads.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 62% 62%;
	}

/* --- Education list --------------------------------------------------------
   main.css lays dl.alt out with a 3em floated term column, sized for short
   labels like "Email". Degree names need a wider column, and the block needs
   to be left-aligned inside its centred (.special) section. */

	#second dl.alt {
		max-width: 32em;
		margin: 0 auto;
		text-align: left;
	}

		#second dl.alt dt {
			width: 12em;
		}

		#second dl.alt dd {
			margin-left: 13em;
		}

	@media screen and (max-width: 736px) {

		#second dl.alt dt {
			float: none;
			width: auto;
			margin: 0 0 0.25em 0;
		}

		#second dl.alt dd {
			margin-left: 0;
		}

	}

/* --- Contact icon labels ---------------------------------------------------
   main.css hides .label outright (display: none), which also hides it from
   screen readers. Show it under the icon on hover/focus instead: kept in the
   layer but transparent, so it stays in the accessibility tree. */

	#third ul.icons {
		margin-bottom: 3em;
	}

	#third ul.icons li {
		position: relative;
	}

		#third ul.icons li a .label {
			display: block;
			position: absolute;
			top: 100%;
			left: 50%;
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			margin-top: 0.6em;
			font-size: 0.7em;
			line-height: 1;
			letter-spacing: 0;
			color: #999999;
			white-space: nowrap;
			pointer-events: none;
			opacity: 0;
			-moz-transition: opacity 0.2s ease;
			-webkit-transition: opacity 0.2s ease;
			-ms-transition: opacity 0.2s ease;
			transition: opacity 0.2s ease;
		}

		#third ul.icons li a:hover .label,
		#third ul.icons li a:focus .label {
			opacity: 1;
		}

/* --- Contact details -------------------------------------------------------
   Same problem as the Education list: dl.alt floats a 3em term column, too
   narrow for "Address", and .special centres its text. Give the terms room
   and left-align the block inside the centred section. */

	#third dl.alt {
		max-width: 26em;
		margin: 2em auto 0 auto;
		text-align: left;
	}

		#third dl.alt dt {
			width: 5em;
		}

		#third dl.alt dd {
			margin-left: 6em;
		}

	@media screen and (max-width: 736px) {

		#third dl.alt dt {
			float: none;
			width: auto;
			margin: 0 0 0.25em 0;
		}

		#third dl.alt dd {
			margin-left: 0;
		}

	}

/* --- CV page ---------------------------------------------------------------
   cv.html leans on dl.alt for the contact block, education and skills, where
   the terms ("2021 - present", "Programming") are far wider than the 3em
   column main.css floats them into. Widen the column, and stack it on narrow
   screens like the lists on the home page. */

	.cv-page #main dl.alt dt {
		width: 10em;
	}

	.cv-page #main dl.alt dd {
		margin-left: 11em;
	}

	.cv-page #main h2 {
		border-left: 4px solid #935d8c;
		padding-left: 0.6em;
	}

	.cv-page #main h3 {
		margin-top: 2em;
	}

		.cv-page #main h3::before {
			content: '';
			display: inline-block;
			width: 0.55em;
			height: 0.55em;
			margin-right: 0.5em;
			background-color: #c79cc8;
			vertical-align: middle;
		}

	.cv-page #main .tag-o {
		color: #935d8c;
	}

/* --- Hidden marker -----------------------------------------------------------
   A link with no visible affordance -- white on white, so it blends into the
   page rather than being cut from the layout entirely. */

	.cv-page #main .hidden-marker,
	.cv-page #main .hidden-marker:hover {
		color: #ffffff;
		text-decoration: none;
		margin-left: 0.35em;
	}

	@media screen and (max-width: 736px) {

		.cv-page #main dl.alt dt {
			float: none;
			width: auto;
			margin: 0 0 0.25em 0;
		}

		.cv-page #main dl.alt dd {
			margin-left: 0;
		}

	}

/* --- Research write-ups -----------------------------------------------------
   Each publication/project is one .research-paper block: a row of figures
   followed by the write-up prose (Core Question / Key Findings /
   Implications). The stock .spotlight is no use for the figures -- it crops
   its image to a 16em circle, which would destroy a plot. Sections marked
   .special centre their text, so the rows opt back out. Shared between the
   homepage's Research teaser (#first) and the full writeup on research.html
   (.research-page). Figure captions live in [data-caption] and are shown in
   the cursor-following tooltip set up in custom.js, rather than as static
   text, so several figures can sit in one compact row. */

	#first .research-paper,
	.research-page .research-paper {
		text-align: left;
		margin: 0 0 3em 0;
	}

		#first .research-paper:last-child,
		.research-page .research-paper:last-child {
			margin-bottom: 0;
		}

	#first .research-figures,
	.research-page .research-figures {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5em;
		margin: 0 0 1.5em 0;
	}

		#first .research-figure,
		.research-page .research-figure {
			flex: 1 1 20em;
			min-width: 0;
		}

			#first .research-figure img,
			.research-page .research-figure img {
				display: block;
				width: 100%;
				height: auto;
				border-radius: 0.2em;
				-moz-transition: opacity 0.2s ease;
				-webkit-transition: opacity 0.2s ease;
				-ms-transition: opacity 0.2s ease;
				transition: opacity 0.2s ease;
			}

			#first .research-figure:hover img,
			.research-page .research-figure:hover img {
				opacity: 0.85;
			}

	@media screen and (max-width: 980px) {

		#first .research-figures,
		.research-page .research-figures {
			flex-direction: column;
		}

	}

/* --- Figure caption tooltip -------------------------------------------------
   One shared gray box, moved to the cursor position by custom.js while
   hovering a .research-figure with a data-caption. Hover-follow doesn't
   translate to touch, so it's hidden below the tablet breakpoint. */

	#figure-tooltip {
		position: fixed;
		z-index: 10001;
		max-width: 20em;
		padding: 0.65em 0.9em;
		background-color: #f0f0f0;
		border: solid 1px rgba(0, 0, 0, 0.1);
		border-radius: 0.35em;
		box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.15);
		color: #444444;
		font-size: 0.8em;
		line-height: 1.5;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		-moz-transition: opacity 0.15s ease;
		-webkit-transition: opacity 0.15s ease;
		-ms-transition: opacity 0.15s ease;
		transition: opacity 0.15s ease;
	}

		#figure-tooltip.visible {
			opacity: 1;
			visibility: visible;
		}

	@media screen and (max-width: 980px) {

		#figure-tooltip {
			display: none;
		}

	}

/* --- CV entry lists --------------------------------------------------------
   Presentation Record rows: the name on the left, the venue and date pushed
   out to the right rather than trailing in parentheses. The meta column keeps
   its own line on narrow screens, where there is no room to sit alongside. */

	.cv-page #main ul.cv-entries li {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1.5em;
	}

		.cv-page #main .entry-name {
			flex: 1 1 auto;
		}

		.cv-page #main .entry-meta {
			flex: 0 0 auto;
			text-align: right;
			color: #909090;
			font-size: 0.9em;
		}

		/* Talk title, kept on its own line under the venue name. */
		.cv-page #main .entry-title {
			display: block;
			margin-top: 0.15em;
			color: #a0a0a0;
			font-size: 0.9em;
			font-style: italic;
		}

	@media screen and (max-width: 736px) {

		.cv-page #main ul.cv-entries li {
			display: block;
		}

			.cv-page #main .entry-meta {
				display: block;
				text-align: left;
				margin-top: 0.25em;
			}

	}

/* --- CV tables -------------------------------------------------------------
   Proposal titles are long enough that at the body size the columns wrap into
   an awkward shape, so set the proposal tables a size down and let the title
   column take the slack. The course level sits inline next to its course
   name, in a quieter, smaller font. */

	.cv-page #main #proposals table {
		font-size: 0.85em;
	}

		.cv-page #main #proposals table th,
		.cv-page #main #proposals table td:nth-child(1),
		.cv-page #main #proposals table td:nth-child(2),
		.cv-page #main #proposals table td:nth-child(4),
		.cv-page #main #proposals table td:nth-child(5) {
			white-space: nowrap;
		}

	.cv-page #main .course-level {
		font-size: 0.8em;
		color: #909090;
	}

/* --- TA table ---------------------------------------------------------------
   Sized down like the proposal tables above -- TA experience is a minor line
   item and doesn't need body-text-sized rows. Role is the same repeated
   value in every row, so shrink it to its content and let Course take the
   freed-up width. */

	.cv-page #main #ta table {
		font-size: 0.85em;
	}

		.cv-page #main #ta table td:nth-child(2) {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 1em;
		}

		.cv-page #main #ta table th:nth-child(3),
		.cv-page #main #ta table td:nth-child(3) {
			width: 1%;
			white-space: nowrap;
		}

/* --- Section note -----------------------------------------------------------
   Small print below a list, e.g. explaining the [O]/[P] markers in the
   Seminars & informal talks list. */

	.cv-page #main .section-note {
		font-size: 0.8em;
		color: #909090;
		margin-top: 0.75em;
	}

	/* --- Research text highlights ----------------------------------------------- */

.purple-highlight {
    color: #7b5aa6;
    font-weight: 500;
}

#first .major p {
    font-size: 1em;
    max-width: 33em;
    margin-left: auto;
    margin-right: auto;
}

/* --- Back to top button -----------------------------------------------------
   Fixed circle, bottom-right of the viewport. Hidden (and unclickable) until
   custom.js adds .visible once the page has scrolled past its threshold. */

	#top-button {
		position: fixed;
		right: 2em;
		bottom: 2em;
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 3.2em;
		height: 3.2em;
		border-radius: 100%;
		background-color: #e2e2e2;
		text-decoration: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		-moz-transition: opacity 0.3s ease, background-color 0.2s ease;
		-webkit-transition: opacity 0.3s ease, background-color 0.2s ease;
		-ms-transition: opacity 0.3s ease, background-color 0.2s ease;
		transition: opacity 0.3s ease, background-color 0.2s ease;
	}

		#top-button.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		#top-button:hover {
			background-color: #d0d0d0;
		}

		#top-button i {
			display: block;
			font-size: 1em;
			line-height: 1;
			color: #999999;
		}

		#top-button span {
			display: block;
			margin-top: 0.3em;
			font-size: 0.55em;
			letter-spacing: 0.05em;
			line-height: 1;
			color: #999999;
		}

	@media screen and (max-width: 736px) {

		#top-button {
			right: 1.25em;
			bottom: 1.25em;
			width: 2.8em;
			height: 2.8em;
		}

	}