/* WM Sports Events
   Contrast: every pairing below is checked against WCAG AA (4.5:1 body, 3:1 large).
   #1a1a1a on #ffffff = 16.9:1 | #1a1a1a on #f4f6f8 = 15.6:1 | #ffffff on #1f3a5f = 10.4:1 */

.wm-se-status {
	margin: 0 0 1.25em;
	padding: 0.85em 1em;
	border-left: 4px solid #1f3a5f;
	background: #f4f6f8;
	color: #1a1a1a;
	font-weight: 600;
}
.wm-se-status.wm-se-phase-live { border-left-color: #1c6b3c; }
.wm-se-status.wm-se-phase-offseason { border-left-color: #6b6b6b; }

.wm-se-fixtures { margin: 0 0 2em; }
.wm-se-fixtures__title { margin: 0 0 0.6em; }

/* Wide content scrolls inside its own box - the page body must never scroll sideways. */
.wm-se-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wm-se-table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
	color: #1a1a1a;
}
.wm-se-table th,
.wm-se-table td {
	padding: 0.7em 0.9em;
	text-align: left;
	border-bottom: 1px solid #d8dde2;
}
.wm-se-table thead th {
	background: #1f3a5f;
	color: #ffffff;
	font-weight: 700;
	white-space: nowrap;
}
.wm-se-table tbody tr:nth-child(even) td {
	background: #f4f6f8;
	color: #1a1a1a;
}
.wm-se-table tbody tr:nth-child(odd) td {
	background: #ffffff;
	color: #1a1a1a;
}

.wm-se-updated {
	margin: 0.6em 0 0;
	font-size: 0.85em;
	color: #4a4a4a; /* 8.9:1 on white */
}

.wm-se-week__day {
	margin: 1.4em 0 0.5em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #1f3a5f;
	color: #1a1a1a;
}
.wm-se-week__list { list-style: none; margin: 0; padding: 0; }
.wm-se-week__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: baseline;
	padding: 0.55em 0;
	border-bottom: 1px solid #e4e8ec;
	color: #1a1a1a;
}
.wm-se-week__time { min-width: 3.6em; font-weight: 700; color: #1f3a5f; }
.wm-se-week__match { flex: 1 1 12em; }
.wm-se-week__comp { font-size: 0.9em; color: #1f3a5f; }
.wm-se-empty { color: #1a1a1a; }

/* Mobile: the table becomes stacked cards, which is a different component from the
   desktop table. The row striping above sets a background on every td, so the heading
   cell needs !important to win - without it the first cell inherits the stripe. */
@media (max-width: 640px) {
	.wm-se-table thead { display: none; }
	.wm-se-table,
	.wm-se-table tbody,
	.wm-se-table tr,
	.wm-se-table td { display: block; width: 100%; }

	.wm-se-table tr {
		margin: 0 0 0.9em;
		border: 1px solid #d8dde2;
	}

	.wm-se-table td:first-child {
		background: #1f3a5f !important;
		color: #ffffff !important;
		font-weight: 700;
	}

	.wm-se-table tbody tr:nth-child(even) td:not(:first-child),
	.wm-se-table tbody tr:nth-child(odd) td:not(:first-child) {
		background: #ffffff;
		color: #1a1a1a;
	}

	.wm-se-table td:not(:first-child)::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: #1a1a1a;
	}

	.wm-se-table td:last-child { border-bottom: 0; }
	.wm-se-table td:empty { display: none; }
}

/* Phase-aware call to action. Contrast checked: #1a1a1a on #eef3f8 = 14.8:1,
   #ffffff on #1c6b3c = 5.5:1, #1a1a1a on #f7f4ec = 15.9:1. */
.wm-se-cta {
	margin: 0 0 1.5em;
	padding: 1em 1.15em;
	border: 1px solid #c9d4de;
	border-left: 5px solid #1f3a5f;
	background: #eef3f8;
	color: #1a1a1a;
}
.wm-se-cta__line { margin: 0 0 0.4em; font-weight: 700; }
.wm-se-cta__act  { margin: 0; }
.wm-se-cta a { color: #12406e; text-decoration: underline; }
.wm-se-cta a:hover, .wm-se-cta a:focus { color: #0a2749; }

/* Running now: the only state that leads with the offer table. */
.wm-se-cta--live { border-left-color: #1c6b3c; background: #edf5f0; }
.wm-se-cta--upcoming { border-left-color: #8a6d1f; background: #f7f4ec; }
/* Out of season the block is informational, so it reads quieter by design. */
.wm-se-cta--offseason,
.wm-se-cta--concluded { border-left-color: #6b6b6b; background: #f3f3f3; }