/**
 * GWR Tables
 * Responsive tables styled to match the Great Western Runners theme.
 *
 * Colours are set as custom properties on .gwr-table-wrap so a page builder
 * can override any of them per table with a single inline style.
 */

.gwr-table-wrap {
	/* Palette taken from the RunCrew theme skin. */
	--gwrt-accent: #0db496;
	--gwrt-accent-dark: #0a9880;
	--gwrt-header-bg: var(--gwrt-accent);
	--gwrt-header-color: #ffffff;
	--gwrt-text: #3c3838;
	--gwrt-muted: #888585;
	--gwrt-border: #e4e7e8;
	--gwrt-row-bg: #ffffff;
	--gwrt-row-alt-bg: #f7f8f8;
	--gwrt-hover-bg: #eaf8f4;

	--gwrt-radius: 6px;
	--gwrt-pad-y: 12px;
	--gwrt-pad-x: 16px;
	--gwrt-font-head: 'Oswald', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--gwrt-font-body: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	position: relative;
	margin: 0 0 30px;
	max-width: 100%;
}

/* The scroller is what actually clips and rounds the table. */
.gwr-table-wrap .gwr-table-scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--gwrt-border);
	border-radius: var(--gwrt-radius);
	background: var(--gwrt-row-bg);
}

.gwr-table-wrap .gwr-table-scroll:focus-visible {
	outline: 2px solid var(--gwrt-accent);
	outline-offset: 2px;
}

.gwr-table-wrap .gwr-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: var(--gwrt-font-body);
	font-size: 15px;
	line-height: 1.45;
	color: var(--gwrt-text);
	background: transparent;
}

/* Caption ------------------------------------------------------------- */

.gwr-table-wrap .gwr-table__caption {
	caption-side: top;
	padding: 14px var(--gwrt-pad-x);
	font-family: var(--gwrt-font-head);
	font-size: 17px;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gwrt-text);
	background: var(--gwrt-row-alt-bg);
	border-bottom: 1px solid var(--gwrt-border);
}

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

.gwr-table-wrap .gwr-table__head th {
	padding: var(--gwrt-pad-y) var(--gwrt-pad-x);
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--gwrt-header-bg);
	color: var(--gwrt-header-color);
	font-family: var(--gwrt-font-head);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	vertical-align: middle;

	/* Headings wrap so a long one cannot force its whole column wide. */
	white-space: normal;
	overflow-wrap: break-word;
}

.gwr-table-wrap.is-nowrap-headers .gwr-table__head th {
	white-space: nowrap;
}

.gwr-table-wrap .gwr-table__head th:last-child {
	border-right: 0;
}

/* Body ---------------------------------------------------------------- */

.gwr-table-wrap .gwr-table__body th,
.gwr-table-wrap .gwr-table__body td {
	padding: var(--gwrt-pad-y) var(--gwrt-pad-x);
	border: 0;
	border-bottom: 1px solid var(--gwrt-border);
	background: transparent;
	font-weight: 400;
	vertical-align: middle;
}

.gwr-table-wrap .gwr-table__body th {
	font-family: var(--gwrt-font-body);
	font-weight: 700;
	color: var(--gwrt-text);
}

.gwr-table-wrap .gwr-table__body tr:last-child th,
.gwr-table-wrap .gwr-table__body tr:last-child td {
	border-bottom: 0;
}

.gwr-table-wrap .gwr-table__body tr {
	background: var(--gwrt-row-bg);
}

.gwr-table-wrap.is-striped .gwr-table__body tr:nth-child(even) {
	background: var(--gwrt-row-alt-bg);
}

.gwr-table-wrap.is-hoverable .gwr-table__body tr:hover {
	background: var(--gwrt-hover-bg);
}

.gwr-table-wrap .gwr-table a {
	color: var(--gwrt-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(13, 180, 150, 0.35);
}

.gwr-table-wrap .gwr-table a:hover,
.gwr-table-wrap .gwr-table a:focus {
	color: var(--gwrt-accent-dark);
	border-bottom-color: currentColor;
}

.gwr-table-wrap .gwr-table__empty {
	color: var(--gwrt-muted);
}

/* Alignment ----------------------------------------------------------- */

.gwr-table-wrap .gwr-align-left { text-align: left; }
.gwr-table-wrap .gwr-align-center { text-align: center; }
.gwr-table-wrap .gwr-align-right { text-align: right; }

/* Column sizing --------------------------------------------------------
 *
 * A race results table is nearly all short values sitting under long
 * headings. Left to itself the browser shares the spare width out across
 * every column, which strands single digits in the middle of nothing. So the
 * data columns are shrunk to their contents and one text column - the names,
 * usually - takes everything that is left over.
 */

.gwr-table-wrap.is-fit .gwr-table__head th,
.gwr-table-wrap.is-fit .gwr-table__body th,
.gwr-table-wrap.is-fit .gwr-table__body td {
	width: 1%;
}

.gwr-table-wrap.is-fit .gwr-table__body th,
.gwr-table-wrap.is-fit .gwr-table__body td {
	white-space: nowrap;
}

.gwr-table-wrap.is-fit .gwr-table__head th.is-flex-col,
.gwr-table-wrap.is-fit .gwr-table__body th.is-flex-col,
.gwr-table-wrap.is-fit .gwr-table__body td.is-flex-col {
	width: auto;
	white-space: normal;
}

/* Nothing long enough to hand the spare width to, so let the table shrink
   to fit its contents rather than stretch to the container. The 1% widths
   have to go with it: a percentage column on an auto width table pushes the
   table back out to fill the space. */
.gwr-table-wrap.is-shrink .gwr-table {
	width: auto;
	min-width: 0;
	max-width: 100%;
}

.gwr-table-wrap.is-shrink .gwr-table__head th,
.gwr-table-wrap.is-shrink .gwr-table__body th,
.gwr-table-wrap.is-shrink .gwr-table__body td {
	width: auto;
}

/* Shrinking measures the widest line a cell could take, so a long heading
   would keep the table wide on its own. Cap it and let it wrap instead. */
.gwr-table-wrap.is-shrink .gwr-table__head th {
	max-width: 12em;
}

/* Explicit column widths, and equal columns, both need fixed layout for the
   browser to stop sizing columns by their contents. */
.gwr-table-wrap.is-fixed .gwr-table {
	table-layout: fixed;
}

.gwr-table-wrap.is-fixed .gwr-table__head th,
.gwr-table-wrap.is-fixed .gwr-table__body th,
.gwr-table-wrap.is-fixed .gwr-table__body td {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Modifiers ----------------------------------------------------------- */

.gwr-table-wrap.is-compact {
	--gwrt-pad-y: 7px;
	--gwrt-pad-x: 10px;
}

.gwr-table-wrap.is-compact .gwr-table {
	font-size: 14px;
}

.gwr-table-wrap.is-sticky-header .gwr-table__head th {
	position: sticky;
	top: 0;
	z-index: 3;
}

.gwr-table-wrap.is-sticky-column .gwr-table__head th:first-child,
.gwr-table-wrap.is-sticky-column .gwr-table__body tr > *:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
}

.gwr-table-wrap.is-sticky-column .gwr-table__head th:first-child {
	z-index: 4;
}

/* The sticky cell needs an opaque background of its own to scroll under. */
.gwr-table-wrap.is-sticky-column .gwr-table__body tr > *:first-child {
	background: var(--gwrt-row-bg);
	box-shadow: 1px 0 0 var(--gwrt-border);
}

.gwr-table-wrap.is-sticky-column.is-striped .gwr-table__body tr:nth-child(even) > *:first-child {
	background: var(--gwrt-row-alt-bg);
}

.gwr-table-wrap.is-sticky-column.is-hoverable .gwr-table__body tr:hover > *:first-child {
	background: var(--gwrt-hover-bg);
}

/* Scroll hint --------------------------------------------------------- */

.gwr-table-wrap .gwr-table-hint {
	display: none;
	margin: 8px 0 0;
	font-family: var(--gwrt-font-body);
	font-size: 12px;
	font-style: italic;
	color: var(--gwrt-muted);
}

.gwr-table-wrap.has-overflow .gwr-table-hint {
	display: block;
}

/* Sorting ------------------------------------------------------------- */

.gwr-table-wrap.is-sortable .gwr-table__head th {
	cursor: pointer;
	padding-right: calc(var(--gwrt-pad-x) + 14px);
	position: relative;
	user-select: none;
}

.gwr-table-wrap.is-sortable .gwr-table__head th::after {
	content: '';
	position: absolute;
	right: calc(var(--gwrt-pad-x) - 4px);
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.35;
}

.gwr-table-wrap.is-sortable .gwr-table__head th[aria-sort='ascending']::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
	opacity: 1;
}

.gwr-table-wrap.is-sortable .gwr-table__head th[aria-sort='descending']::after {
	opacity: 1;
}

/* Editor placeholder -------------------------------------------------- */

.gwr-table-placeholder {
	padding: 24px;
	border: 1px dashed #c8cccd;
	border-radius: 6px;
	background: #f7f8f8;
	color: #888585;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-align: center;
}

/* Mobile: stacked cards ------------------------------------------------ */

@media (max-width: 767px) {

	.gwr-table-wrap--stack .gwr-table-scroll {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.gwr-table-wrap--stack .gwr-table,
	.gwr-table-wrap--stack .gwr-table__body,
	.gwr-table-wrap--stack .gwr-table__body tr,
	.gwr-table-wrap--stack .gwr-table__body th,
	.gwr-table-wrap--stack .gwr-table__body td {
		display: block;
		width: auto;
	}

	.gwr-table-wrap--stack .gwr-table__caption {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--gwrt-border);
		border-radius: var(--gwrt-radius);
	}

	/* Headings become the per cell labels instead, so hide the row itself. */
	.gwr-table-wrap--stack .gwr-table__head {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.gwr-table-wrap--stack .gwr-table__body tr {
		margin: 0 0 14px;
		border: 1px solid var(--gwrt-border);
		border-radius: var(--gwrt-radius);
		background: var(--gwrt-row-bg);
		overflow: hidden;
	}

	.gwr-table-wrap--stack .gwr-table__body tr:last-child {
		margin-bottom: 0;
	}

	/* Striping would fight with the card look, so drop it. */
	.gwr-table-wrap--stack.is-striped .gwr-table__body tr:nth-child(even) {
		background: var(--gwrt-row-bg);
	}

	.gwr-table-wrap--stack .gwr-table__body th,
	.gwr-table-wrap--stack .gwr-table__body td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 10px var(--gwrt-pad-x);
		border-bottom: 1px solid var(--gwrt-border);
		text-align: right;
	}

	/* Column sizing is meaningless once each row is a stack of labels, and a
	   1% column width left in place would collapse the cell to nothing. The
	   extra .gwr-table in these selectors is there to outweigh the sizing
	   rules above rather than rely on source order. */
	.gwr-table-wrap--stack.is-fit .gwr-table .gwr-table__body th,
	.gwr-table-wrap--stack.is-fit .gwr-table .gwr-table__body td,
	.gwr-table-wrap--stack.is-shrink .gwr-table .gwr-table__body th,
	.gwr-table-wrap--stack.is-shrink .gwr-table .gwr-table__body td,
	.gwr-table-wrap--stack.is-fixed .gwr-table .gwr-table__body th,
	.gwr-table-wrap--stack.is-fixed .gwr-table .gwr-table__body td {
		width: auto;
		max-width: none;
		white-space: normal;
	}

	.gwr-table-wrap--stack.is-fit .gwr-table,
	.gwr-table-wrap--stack.is-shrink .gwr-table,
	.gwr-table-wrap--stack.is-fixed .gwr-table {
		width: 100%;
		max-width: none;
		table-layout: auto;
	}

	.gwr-table-wrap--stack .gwr-table__body th::before,
	.gwr-table-wrap--stack .gwr-table__body td::before {
		content: attr(data-label);
		flex: 0 1 auto;
		min-width: 0;
		font-family: var(--gwrt-font-head);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		text-align: left;
		color: var(--gwrt-muted);
	}

	/* The first column is the row's identity, so it becomes the card header. */
	.gwr-table-wrap--stack .gwr-table__body tr > *:first-child {
		background: var(--gwrt-header-bg);
		color: var(--gwrt-header-color);
		border-bottom: 0;
		font-family: var(--gwrt-font-head);
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.gwr-table-wrap--stack .gwr-table__body tr > *:first-child::before {
		color: var(--gwrt-header-color);
		opacity: 0.7;
	}

	.gwr-table-wrap--stack .gwr-table__body tr > *:last-child {
		border-bottom: 0;
	}

	/* An empty cell has nothing to say on a phone, so leave it out. */
	.gwr-table-wrap--stack .gwr-table__body td.is-empty:not(:first-child) {
		display: none;
	}

	/* Alignment is handled by the flex row on mobile. */
	.gwr-table-wrap--stack .gwr-table__body .gwr-align-center,
	.gwr-table-wrap--stack .gwr-table__body .gwr-align-left,
	.gwr-table-wrap--stack .gwr-table__body .gwr-align-right {
		text-align: right;
	}

	/* Sticky positioning makes no sense once the rows are stacked. */
	.gwr-table-wrap--stack.is-sticky-column .gwr-table__body tr > *:first-child,
	.gwr-table-wrap--stack.is-sticky-header .gwr-table__head th {
		position: static;
		box-shadow: none;
	}

	.gwr-table-wrap--stack .gwr-table-hint {
		display: none;
	}

	/* Mobile: horizontal scroll ---------------------------------------- */

	.gwr-table-wrap--scroll {
		--gwrt-pad-y: 9px;
		--gwrt-pad-x: 12px;
	}

	.gwr-table-wrap--scroll .gwr-table {
		font-size: 14px;
	}

	.gwr-table-wrap--scroll .gwr-table__body th,
	.gwr-table-wrap--scroll .gwr-table__body td {
		white-space: nowrap;
	}

}

@media (max-width: 479px) {

	.gwr-table-wrap {
		--gwrt-pad-x: 12px;
	}

}

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

@media print {

	.gwr-table-wrap .gwr-table-scroll {
		overflow: visible;
	}

	.gwr-table-wrap .gwr-table__head th {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

}