/*
 * Site-specific overrides. This is the only stylesheet in assets/css/ that is
 * ours -- everything else is the Slanted theme, Font Awesome, or Google Fonts.
 * Put custom rules here rather than editing vendor files.
 */

:root {
	/*
	 * Matches the theme's body background. The affiliation tiles overlap each
	 * other, and each one carries a ring in this colour to punch a visible gap
	 * out of its neighbour. If the theme background ever changes, change this
	 * too or the rings will show up as halos.
	 */
	--mj-page-bg: #23282d;
}

/* ---------------------------------------------------------------------------
 * Affiliation tiles
 *
 * One circular tile per organisation, laid out by .mj-cluster below.
 *
 * Each tile carries up to two rings, and they live on different elements on
 * purpose:
 *
 *   - the OUTER separator is padding + background on the <a>, in the page
 *     colour, so overlapping tiles punch a visible gap out of each other;
 *   - the INNER white ring is a border on the <img>, and only square logos get
 *     it -- the round logos already sit on a white disc with their artwork
 *     inset, and this reproduces that for the ones that don't.
 *
 * Don't be tempted to collapse the white ring into an inset box-shadow: inset
 * shadows on a replaced element paint *behind* the image, so it renders as
 * nothing at all.
 * ------------------------------------------------------------------------- */

.mj-tile {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: 50%;
	transition: transform .28s ease;
}

.mj-tile img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	background: #fff;
	box-sizing: border-box;
	transition: box-shadow .28s ease;
}

.mj-tile.mj-logo-square img {
	border: 7px solid #fff;
}

.mj-tile:hover,
.mj-tile:focus-visible {
	transform: scale(1.09);
	z-index: 5;
}

.mj-tile:hover img,
.mj-tile:focus-visible img {
	box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* Name on hover. Each tile is a link, so this doubles as a visible label. */
.mj-tile-name {
	position: absolute;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%) translateY(4px);
	z-index: 20;
	padding: 4px 9px;
	border-radius: 4px;
	background: rgba(12, 14, 16, .94);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.mj-tile:hover .mj-tile-name,
.mj-tile:focus-visible .mj-tile-name {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.mj-tile,
	.mj-tile img,
	.mj-tile-name {
		transition: none;
	}

	.mj-tile:hover,
	.mj-tile:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Cluster layout
 *
 * Three rows of 5 / 4 / 5 pulled together with a negative top margin so the
 * circles interlock instead of sitting on a grid. The row lengths alternate,
 * which is what staggers them -- there is no per-tile offset to maintain.
 * ------------------------------------------------------------------------- */

.mj-cluster {
	/*
	 * The widest row holds five tiles. Rather than stepping the size down at
	 * breakpoints -- which squeezed the tiles out of round on narrow phones --
	 * derive it from the viewport and cap it at the design size. The 68px
	 * allows for the theme's page padding plus the four gaps in a row.
	 */
	--mj-tile: min(118px, calc((100vw - 68px) / 5));
	--mj-gap: 14px;
	--mj-separator: 4px;

	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 2.4em 0 0;
}

.mj-cluster-row {
	display: flex;
	gap: var(--mj-gap);
}

/* Pull each row up into the one above so the circles interlock. */
.mj-cluster-row + .mj-cluster-row {
	margin-top: calc(var(--mj-gap) * -1);
}

.mj-cluster .mj-tile {
	/* flex: 0 0 auto so a row never squeezes its tiles out of round. */
	flex: 0 0 auto;
	width: var(--mj-tile);
	height: var(--mj-tile);
	padding: var(--mj-separator);
	background: var(--mj-page-bg);
	box-sizing: border-box;
}

.mj-cluster-tagline {
	max-width: 30em;
	margin: 1.6em auto 0;
	text-align: center;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}

/*
 * Below ~700px a row of five can't hold its size -- the tiles shrink to about
 * 60px and the interlock reads as clutter rather than composition. Drop the
 * three fixed rows and let all fourteen wrap at a legible size.
 *
 * `display: contents` on the rows dissolves them so their tiles become direct
 * flex children of .mj-cluster and wrap as one set. It also stops the
 * row-to-row negative margin applying, since the rows no longer generate boxes.
 */
@media (max-width: 699px) {
	.mj-cluster {
		--mj-tile: min(96px, calc((100vw - 66px) / 4));
		--mj-gap: 12px;
		--mj-separator: 3px;

		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--mj-gap);
	}

	.mj-cluster-row {
		display: contents;
	}

	/* The ring scales with the tile, or it eats the artwork at phone sizes. */
	.mj-cluster .mj-tile.mj-logo-square img {
		border-width: 5px;
	}

	.mj-cluster-tagline {
		font-size: 15px;
	}
}

/*
 * On phones proper, three across at a larger size beats four cramped ones --
 * it just runs further down the page, which scrolling handles fine.
 */
@media (max-width: 599px) {
	.mj-cluster {
		--mj-tile: min(112px, calc((100vw - 54px) / 3));
	}

	.mj-cluster .mj-tile.mj-logo-square img {
		border-width: 6px;
	}
}

/* ---------------------------------------------------------------------------
 * Footer credit
 *
 * The theme drops #copyright into a half-width floated grid column, with an
 * empty companion column beside it. That pins the line to the left and wraps
 * it well before it needs to. Give it the whole container and centre it.
 * ------------------------------------------------------------------------- */

#footer-bottom .grid.one-half {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* The empty second column; nothing left to sit beside. */
#footer-bottom .grid.one-half.last {
	display: none;
}

#copyright {
	text-align: center;
}

#copyright p {
	margin: 0;
	white-space: nowrap;
}

/*
 * The credit needs ~551px to stay on one line. Below roughly this viewport the
 * container is narrower than that, and wrapping beats a horizontal scrollbar.
 */
@media (max-width: 640px) {
	#copyright p {
		white-space: normal;
	}
}

/*
 * Social links, centred on the last line of the footer.
 *
 * The theme's #footer-bottom already tints links to rgba(255,255,255,.9); these
 * are pure white, so the id is in the selector to win that specificity.
 * Icons are Font Awesome *brands* — note this build of all.min.css defines the
 * short `.fab` alias only, not `.fa-brands`, so the markup uses `fab`.
 */

.mj-social {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mj-social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer-bottom .mj-social a {
	display: block;
	color: #fff;
	font-size: 19px;
	line-height: 1;
	transition: opacity .2s ease, transform .2s ease;
}

#footer-bottom .mj-social a:hover,
#footer-bottom .mj-social a:focus-visible {
	color: #fff;
	opacity: .72;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	#footer-bottom .mj-social a {
		transition: none;
	}

	#footer-bottom .mj-social a:hover,
	#footer-bottom .mj-social a:focus-visible {
		transform: none;
	}
}