/**
 * CRC Upcoming Races — front end.
 *
 * Everything is scoped to .crc-upr and inherits the theme's typography on
 * purpose, so the cards sit inside the site rather than beside it. The five
 * custom properties below are the whole design surface: override them in the
 * theme's Additional CSS to restyle without touching this file.
 */

.crc-upr {
	--crc-upr-cols: 3;
	--crc-upr-gap: 26px;
	--crc-upr-logo: 250px;
	--crc-upr-card-bg: #fff;
	--crc-upr-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	--crc-upr-text: #2b3440;
	--crc-upr-muted: #63707d;
	--crc-upr-link: #14689e;
	--crc-upr-link-hover: #0d4a72;
	--crc-upr-rule: #ececef;

	margin: 0 0 2em;
}

.crc-upr *,
.crc-upr *::before,
.crc-upr *::after {
	box-sizing: border-box;
}

/* Filter ----------------------------------------------------------------- */

.crc-upr-filter {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin: 0 0 20px;
}

.crc-upr-filter-label {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
}

/* Search on the left, and given the room, because it is the wider question. */
.crc-upr-filter-search {
	margin-right: auto;
}

.crc-upr-filter-input {
	background: #fff;
	border: 1px solid #767c85;
	border-radius: 3px;
	color: var(--crc-upr-text);
	font-family: inherit;
	font-size: max(0.95em, 15px);
	line-height: 1.3;
	max-width: 100%;
	padding: 8px 10px;
	width: 15em;
}

.crc-upr-filter-input::placeholder {
	color: #6a737c;
	opacity: 1;
}

.crc-upr-filter-input:focus-visible {
	border-color: var(--crc-upr-link);
}

.crc-upr-filter-clear {
	color: var(--crc-upr-link);
	font-size: max(0.92em, 14px);
	padding: 6px 2px;
}

.crc-upr-filter-check {
	gap: 6px;
}

.crc-upr-filter-box {
	height: 18px;
	margin: 0;
	width: 18px;
}

.crc-upr-filter-check .crc-upr-filter-text {
	color: var(--crc-upr-text);
}

.crc-upr-filter-text {
	color: var(--crc-upr-muted);
	font-size: 0.92em;
}

/* #767c85 is 3.05:1 on white — a control's boundary has to be visible. */
.crc-upr-filter-select {
	background: #fff;
	border: 1px solid #767c85;
	border-radius: 3px;
	color: var(--crc-upr-text);
	font-size: max(0.95em, 15px);
	line-height: 1.3;
	max-width: 100%;
	padding: 8px 10px;
}

.crc-upr-filter-go {
	background: #fff;
	border: 1px solid #767c85;
	border-radius: 3px;
	color: var(--crc-upr-link);
	cursor: pointer;
	font-family: inherit;
	font-size: max(0.95em, 15px);
	line-height: 1.3;
	padding: 8px 16px;
}

.crc-upr-filter-go:hover,
.crc-upr-filter-go:focus-visible {
	background: #f0f4f7;
	color: var(--crc-upr-link-hover);
}

.crc-upr-filter-select:focus-visible {
	border-color: var(--crc-upr-link);
	outline: 2px solid var(--crc-upr-link);
	outline-offset: 1px;
}

.crc-upr-empty-back {
	margin: 8px 0 0;
}

.crc-upr-empty-back a {
	color: var(--crc-upr-link);
}

.crc-upr-empty-back a:hover,
.crc-upr-empty-back a:focus-visible {
	color: var(--crc-upr-link-hover);
}

/* Grid ------------------------------------------------------------------- */

.crc-upr-grid {
	display: grid;
	gap: var(--crc-upr-gap);
	grid-template-columns: repeat(var(--crc-upr-cols), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Card ------------------------------------------------------------------- */

.crc-upr-card {
	background: var(--crc-upr-card-bg);
	border-radius: 3px;
	box-shadow: var(--crc-upr-card-shadow);
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	/*
	 * Location is free text somebody types. Paste a long URL or an unbroken
	 * venue name into it and, without this, the text escapes the card and drags
	 * the whole page into horizontal scrolling on a phone.
	 */
	overflow-wrap: anywhere;
	padding: 26px 22px 28px;
	text-align: center;
	word-wrap: break-word;
}

.crc-upr-grid::before,
.crc-upr-grid::after {
	content: none;
}

.crc-upr-logo {
	align-items: center;
	display: flex;
	height: var(--crc-upr-logo);
	justify-content: center;
	margin-bottom: 18px;
}

.crc-upr-logo-link {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	max-width: 100%;
}

.crc-upr-logo img,
.crc-upr-logo-img {
	display: block;
	height: auto;
	max-height: var(--crc-upr-logo);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.crc-upr-logo-none {
	align-items: center;
	background: #f6f7f8;
	border-radius: 3px;
	color: #c6ccd2;
	display: flex;
	height: 140px;
	justify-content: center;
	width: 140px;
}

.crc-upr-name {
	color: var(--crc-upr-text);
	font-size: 1.25em;
	line-height: 1.35;
	margin: 0 0 8px;
	padding: 0;
}

.crc-upr-name a {
	color: inherit;
	text-decoration: none;
}

.crc-upr-name a:hover,
.crc-upr-name a:focus-visible {
	color: var(--crc-upr-link-hover);
	text-decoration: underline;
}

/*
 * The date line carries the start time too, and is the second-loudest thing on
 * the card after the race name. The address and distance stay quiet underneath —
 * useful once you have decided to go, not while you are scanning.
 */
/*
 * padding:0 as well as margin:0 on every card paragraph. Divi and friends ship
 * `p { padding-bottom: 1em }`, which otherwise pulls the date/details/links
 * rhythm apart — the heading already defended itself this way.
 */
.crc-upr-date {
	color: var(--crc-upr-text);
	font-size: max(1.02em, 15px);
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
	padding: 0;
}

.crc-upr-date .crc-upr-sep {
	color: var(--crc-upr-muted);
	font-weight: 400;
}

/*
 * The time is deliberately NOT in the link colour: blue text that cannot be
 * clicked reads as a broken link. Override --crc-upr-time-color if you want it
 * to pop harder.
 */
.crc-upr-time {
	color: var(--crc-upr-time-color, inherit);
	white-space: nowrap;
}

/*
 * Floored in px as well as em. The em keeps it in proportion to whatever the
 * theme sets, but Divi's base is 14px, and 0.88em of that is 12.3px grey text
 * for a race address — too small for an audience that skews older.
 */
.crc-upr-details {
	color: var(--crc-upr-muted);
	font-size: max(0.92em, 14px);
	line-height: 1.5;
	margin: 7px 0 0;
	padding: 0;
}

/*
 * Double points, directly under the date. Rare, and a reason to pick this race
 * over another, so it earns a badge where the distance — on every card, and
 * usually a repeat of the race name — does not.
 */
.crc-upr-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	line-height: 1;
	margin: 9px 0 0;
	padding: 0;
}

/*
 * "Just Added" and "Double Points" are the same shape on purpose. A card can
 * carry both, and when it does they should read as two facts rather than as one
 * badge and one piece of decoration.
 */
.crc-upr-new {
	background: var(--crc-upr-new-bg, #e6f4e6);
	border: 1px solid var(--crc-upr-new-edge, #97ca97);
	border-radius: 999px;
	color: var(--crc-upr-new-text, #1e5c22);
	display: inline-block;
	font-size: max(0.78em, 12px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	padding: 3px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.crc-upr-double {
	background: var(--crc-upr-double-bg, #fbf1d5);
	border: 1px solid var(--crc-upr-double-edge, #e0c877);
	border-radius: 999px;
	color: var(--crc-upr-double-text, #6b4e00);
	display: inline-block;
	font-size: max(0.78em, 12px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	padding: 3px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * The distance gets its own line, tucked under the address. Sharing the address
 * line meant that on anything long enough to wrap, the dot dangled at the end of
 * one line and "5K" was stranded at the start of the next.
 *
 * Below, not above: the race name almost always contains the distance already,
 * so this line is usually a repeat and should not sit in the loud position
 * directly under the date.
 */
.crc-upr-distance {
	color: var(--crc-upr-muted);
	font-size: max(0.92em, 14px);
	line-height: 1.5;
	margin: 3px 0 0;
	padding: 0;
}

/* With no address above it, it takes the address's place in the rhythm. */
.crc-upr-date + .crc-upr-distance {
	margin-top: 7px;
}

/*
 * margin-top:auto pins the links to the bottom of the card, so the
 * "Register Here" line sits on the same baseline right across a row however
 * long the race names are.
 */
.crc-upr-links {
	border-top: 1px solid var(--crc-upr-rule);
	margin: 18px 0 0;
	margin-top: auto;
	padding: 16px 0 0;
}

/*
 * The vertical padding is the tap target, not decoration: without it these are
 * two ~21px links stacked 25px apart on a phone, and a mis-tap sends somebody
 * to a PDF when they meant to register.
 */
.crc-upr-links a {
	display: block;
	font-size: max(1em, 15px);
	line-height: 1.5;
	padding: 6px 0;
	text-decoration: none;
}

/*
 * Underlined, because it is otherwise the quietest text on the card — lighter
 * than the body text beside it — with no cue at all that it is a link.
 */
.crc-upr-links .crc-upr-flyer {
	color: var(--crc-upr-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.crc-upr-register {
	color: var(--crc-upr-link);
	font-weight: 600;
}

.crc-upr-links a:hover,
.crc-upr-links a:focus-visible {
	color: var(--crc-upr-link-hover);
	text-decoration: underline;
}

/* Empty state ------------------------------------------------------------ */

.crc-upr-empty {
	color: var(--crc-upr-muted);
	margin: 0;
}

.crc-upr-empty-admin {
	background: #fcf9e8;
	border-left: 3px solid #dba617;
	color: #4a4438;
	font-size: 0.9em;
	margin: 10px 0 0;
	padding: 8px 12px;
}

/* Pagination ------------------------------------------------------------- */

.crc-upr-pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: flex-end;
	margin-top: 26px;
}

.crc-upr-pageof {
	color: var(--crc-upr-muted);
	font-size: 0.9em;
}

.crc-upr-pages {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.crc-upr-pages .page-numbers {
	border-radius: 3px;
	color: var(--crc-upr-link);
	display: inline-block;
	line-height: 1;
	min-width: 30px;
	padding: 7px 8px;
	text-align: center;
	text-decoration: none;
}

.crc-upr-pages a.page-numbers:hover,
.crc-upr-pages a.page-numbers:focus-visible {
	background: #f0f4f7;
	color: var(--crc-upr-link-hover);
}

.crc-upr-pages .page-numbers.current {
	color: var(--crc-upr-text);
	font-weight: 700;
}

.crc-upr-pages .page-numbers.dots {
	color: var(--crc-upr-muted);
	min-width: 0;
}

/* See all ---------------------------------------------------------------- */

.crc-upr-all {
	margin: 26px 0 0;
	text-align: center;
}

.crc-upr-btn {
	background: var(--crc-upr-link);
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-weight: 600;
	line-height: 1.2;
	padding: 13px 26px;
	text-decoration: none;
}

.crc-upr-btn:hover,
.crc-upr-btn:focus-visible {
	background: var(--crc-upr-link-hover);
	color: #fff;
	text-decoration: none;
}

/* Focus ------------------------------------------------------------------ */

/*
 * !important is deliberate. "outline: none !important" on links is a common
 * theme and snippet habit, and losing the focus ring is a silent lockout for
 * anyone navigating by keyboard — worth winning that fight.
 */
.crc-upr a:focus-visible,
.crc-upr button:focus-visible,
.crc-upr select:focus-visible {
	outline: 2px solid var(--crc-upr-link) !important;
	outline-offset: 2px;
}

/* Screen-reader text, in case the theme does not define it. */

.crc-upr .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* Narrower screens ------------------------------------------------------- */

/*
 * --crc-upr-cols-mid is worked out in PHP rather than with min() in the
 * repeat(). A math function inside repeat() is valid CSS, but an engine that
 * does not support it resolves the whole declaration to `unset` — which on a
 * grid means one column, not the two intended and not the three being fallen
 * back from. Doing the arithmetic server-side removes the question.
 */
@media (max-width: 980px) {
	.crc-upr-grid {
		grid-template-columns: repeat(var(--crc-upr-cols-mid, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.crc-upr {
		--crc-upr-logo: 200px;
		--crc-upr-gap: 18px;
	}

	.crc-upr-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.crc-upr-card {
		padding: 22px 18px 24px;
	}

	.crc-upr-pager {
		justify-content: center;
	}

	/* Stacked and full width — two controls side by side at 320px is neither. */
	.crc-upr-filter {
		align-items: stretch;
		flex-direction: column;
	}

	.crc-upr-filter-label {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	/* A tickbox and its words belong side by side at any width. */
	.crc-upr-filter-check {
		align-items: center;
		flex-direction: row;
		gap: 8px;
		padding: 4px 0;
	}

	.crc-upr-filter-search {
		margin-right: 0;
	}

	.crc-upr-filter-input,
	.crc-upr-filter-select {
		width: 100%;
	}

	.crc-upr-filter-text {
		text-align: left;
	}

	.crc-upr-filter-clear {
		text-align: center;
	}
}

/* Print ------------------------------------------------------------------ */

@media print {
	.crc-upr {
		--crc-upr-logo: 110px;
	}

	/*
	 * The page numbers go; "Page 1 of 4" stays. Hiding both means a printed
	 * sheet shows 12 of 47 races with nothing saying so.
	 */
	.crc-upr-pages,
	.crc-upr-filter,
	.crc-upr-all,
	.crc-upr-empty-admin {
		display: none;
	}

	.crc-upr-card {
		border: 1px solid #ccc;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.crc-upr-links a {
		color: #000;
	}

	/* "Register Here" on paper is useless without the address. */
	.crc-upr-links a::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		word-break: break-all;
	}
}