/*
 * Badminton Toernooi Standings - front-end styles
 *
 * Styling is driven by the active block theme (FSE) through WordPress global
 * CSS custom properties, so the table inherits the theme's palette, fonts and
 * spacing. Tested against the "Blog" FSE theme.
 *
 * Variables used (all with fallbacks so it degrades gracefully on any theme):
 *   --wp--preset--color--*      theme palette colors
 *   --wp--preset--font-size--*  theme font-size scale
 *   --wp--preset--font-family--*theme fonts
 *   --wp--preset--spacing--*    theme spacing scale
 *   --wp--style--block-gap      default vertical rhythm
 *
 * currentColor + color-mix() are used for borders/zebra striping so contrast
 * automatically tracks the theme's text color (works in light and dark styles).
 */

.bts-standings {
	/* Local tokens resolved from the theme, with sensible fallbacks. */
	--bts-text: var( --wp--preset--color--contrast, var( --wp--preset--color--foreground, currentColor ) );
	--bts-bg: var( --wp--preset--color--base, var( --wp--preset--color--background, transparent ) );
	--bts-accent: var( --wp--preset--color--accent, var( --wp--preset--color--primary, currentColor ) );
	--bts-border: color-mix( in srgb, currentColor 18%, transparent );
	--bts-stripe: color-mix( in srgb, currentColor 5%, transparent );
	--bts-hover: color-mix( in srgb, currentColor 9%, transparent );
	--bts-highlight: color-mix( in srgb, var( --bts-accent ) 14%, transparent );

	margin-block: var( --wp--style--block-gap, 1.5em );
	color: var( --bts-text );
	font-family: var( --wp--preset--font-family--body, inherit );
}

.bts-standings__title {
	margin: 0 0 var( --wp--preset--spacing--20, 0.5em );
	font-family: var( --wp--preset--font-family--heading, inherit );
	font-size: var( --wp--preset--font-size--medium, 1.15em );
	color: inherit;
}

.bts-standings__table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
}

.bts-standings__table table.ruler {
	min-width: 900px;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small, 0.95em );
	color: inherit;
}

.bts-standings__table table.ruler caption {
	margin-bottom: var( --wp--preset--spacing--20, 0.5em );
	font-weight: 600;
	text-align: left;
	color: inherit;
}

.bts-standings__table table.ruler th,
.bts-standings__table table.ruler td {
	/* Honour the source table's align="center|right" attributes. */
	padding: var( --wp--preset--spacing--10, 0.4em ) var( --wp--preset--spacing--20, 0.6em );
	border-bottom: 1px solid var( --bts-border );
	vertical-align: middle;
}

/* Default left alignment only when the markup doesn't specify one. */
.bts-standings__table table.ruler th:not([align]),
.bts-standings__table table.ruler td:not([align]) {
	text-align: left;
}

.bts-standings__table table.ruler thead th,
.bts-standings__table table.ruler thead td {
	border-bottom: 2px solid color-mix( in srgb, currentColor 35%, transparent );
	font-weight: 600;
	white-space: nowrap;
}

.bts-standings__table table.ruler tbody tr:nth-child(even) {
	background: var( --bts-stripe );
}

.bts-standings__table table.ruler tbody tr:hover {
	background: var( --bts-hover );
}

/* toernooi.nl marks the requested team's row with class "selected". */
.bts-standings__table table.ruler tbody tr.selected {
	background: var( --bts-highlight );
	font-weight: 600;
}

.bts-standings__table table.ruler a {
	color: var( --bts-accent );
	text-decoration: none;
}

.bts-standings__table table.ruler a:hover,
.bts-standings__table table.ruler a:focus {
	text-decoration: underline;
}

/* Keep the score separator ("-") visually quiet. */
.bts-standings__table table.ruler .separator {
	color: color-mix( in srgb, currentColor 55%, transparent );
	padding-inline: 0.15em;
}

.bts-standings--error p {
	margin: 0;
	padding: var( --wp--preset--spacing--20, 0.75em ) var( --wp--preset--spacing--30, 1em );
	background: color-mix( in srgb, currentColor 6%, transparent );
	border-inline-start: 4px solid var( --bts-accent );
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Matches schedule (table.ruler.matches)
 * ---------------------------------------------------------------------- */

/* The date/time cell ("zo 21-9-2025 10:00"). */
.bts-standings__table table.ruler.matches td.plannedtime {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bts-standings__table table.ruler.matches td.plannedtime .time {
	margin-inline-start: 0.35em;
}

/* Team names; the followed team is marked .highlighted by toernooi.nl. */
.bts-standings__table table.ruler.matches a.teamname {
	color: color-mix(in srgb, var(--wp--preset--color--tertiary), 20% black);
}

.bts-standings__table table.ruler.matches a.teamname.highlighted {
	color: var(--wp--preset--color--primary);
}

/* The score block (span.score > span). */
.bts-standings__table table.ruler.matches .score {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Don't zebra-stripe the schedule; it reads better ungrouped. */
.bts-standings__table table.ruler.matches tbody tr:nth-child(even) {
	background: none;
}

.bts-standings__table table.ruler.matches tbody tr:hover {
	background: var( --bts-hover );
}

/* -------------------------------------------------------------------------
 * Match status cards ([badminton_match_status])
 * Two cards side-by-side on wider screens, stacked on mobile.
 * ---------------------------------------------------------------------- */

.bts-match-status {
	border: 1px solid var(--bts-accent);
    border-left: 0;
    border-right: 0;
	display: grid;
	grid-template-rows: auto auto;
	color: inherit;
}

.bts-match-status__label {
	margin: 0 0 var( --wp--preset--spacing--10, 0.35em );
	font-size: var( --wp--preset--font-size--small, 0.85em );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bts-match-status__block {
	padding-top: 1em;
}

.bts-match-status__block--last {
    border-bottom: 1px solid var( --bts-accent );
}

.bts-match-card {
	background: var( --bts-bg );
}

.bts-match-card__date {
	margin: 0 0 var( --wp--preset--spacing--20, 0.6em );
	font-size: var( --wp--preset--font-size--small, 0.85em );
	color: color-mix( in srgb, currentColor 65%, transparent );
	font-variant-numeric: tabular-nums;
}

/* Home – score/vs – Away laid out as a flex row. */
.bts-match-card__fixture {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20, 0.5em );
	flex-wrap: wrap;
	font-weight: 600;
	margin-bottom: var( --wp--preset--spacing--10, 0.35em );
}

.bts-match-card__team {
	flex: 1 1 0;
}

@media (width < 780px) {
	.wp-block-spacer:has(+ .bts-match-status) {
    	display: none;
	}
}

/* Push the away team name to the right. */
.bts-match-card__team--away {
	text-align: right;
}

.bts-match-card__score {
	flex: 0 0 auto;
	padding: 0.15em 0.5em;
	background: color-mix( in srgb, currentColor 10%, transparent );
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bts-match-card__vs {
	flex: 0 0 auto;
	font-weight: 400;
	color: color-mix( in srgb, currentColor 50%, transparent );
}

/* Clickable fixture row — inherits card colours, no underline. */
.bts-match-card__fixture-link {
	display: block;
	text-decoration: none;
}

.bts-match-card__fixture-link:hover .bts-match-card__team,
.bts-match-card__fixture-link:focus .bts-match-card__team {
	text-decoration: underline;
}