/**
 * S3L Handball – front-end styles.
 *
 * Everything is driven by custom properties, so Elementor's style controls or a
 * few lines of theme CSS can restyle the cards without overriding selectors.
 * Set the properties on .s3l-card or on any ancestor.
 */

.s3l-card {
	--s3l-accent: #f5b301;
	--s3l-bg: rgba(12, 12, 14, 0.62);
	--s3l-fg: #ffffff;
	--s3l-muted: rgba(255, 255, 255, 0.68);
	--s3l-border: rgba(255, 255, 255, 0.12);
	--s3l-score: var(--s3l-accent);
	--s3l-radius: 2px;
	--s3l-gap: 0.55rem;

	position: relative;
	box-sizing: border-box;
	padding: 1.15rem 1.4rem 1.25rem;
	background: var(--s3l-bg);
	color: var(--s3l-fg);
	border-radius: var(--s3l-radius);
	border-left: 3px solid var(--s3l-accent);
	font-family: inherit;
	line-height: 1.35;
}

.s3l-card *,
.s3l-card *::before,
.s3l-card *::after {
	box-sizing: border-box;
}

.s3l-card p {
	margin: 0;
}

.s3l-card p + p,
.s3l-card p + .s3l-match,
.s3l-card .s3l-match + p {
	margin-top: var(--s3l-gap);
}

/* --- Eyebrow label ------------------------------------------------------ */

.s3l-card__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	color: var(--s3l-accent);
	font-size: 0.688rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.s3l-card__label-date {
	color: var(--s3l-muted);
	font-weight: 600;
	letter-spacing: 0.1em;
}

.s3l-badge {
	padding: 0.15em 0.5em;
	border-radius: 999px;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
}

.s3l-badge--live {
	background: #e5342a;
	color: #fff;
	animation: s3l-pulse 1.8s ease-in-out infinite;
}

@keyframes s3l-pulse {
	50% {
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s3l-badge--live {
		animation: none;
	}
}

/* --- Match line --------------------------------------------------------- */

.s3l-match {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em 0.65em;
	font-size: clamp(1.15rem, 1.6vw + 0.8rem, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.s3l-team {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-width: 0;
}

.s3l-team__logo {
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	object-fit: contain;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
}

.s3l-team__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.s3l-team--own .s3l-team__name {
	color: var(--s3l-fg);
}

.s3l-match__vs,
.s3l-score {
	flex: 0 0 auto;
	color: var(--s3l-score);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.s3l-match__vs {
	font-size: 0.72em;
	text-transform: uppercase;
}

/* --- Next match (hero) --------------------------------------------------- */

/*
 * Three columns, "VS" in the middle: home reads left, away reads right, and the
 * accent sits between them. Falls back to a plain wrapping row on phones, where
 * three columns would shred long club names.
 */
.s3l-match--hero {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.3em 0.7em;
}

.s3l-match--hero .s3l-team--away {
	justify-content: flex-end;
	text-align: right;
}

.s3l-match--hero .s3l-match__vs {
	justify-self: center;
}

@media (max-width: 480px) {
	.s3l-match--hero {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.s3l-match--hero .s3l-team--away {
		justify-content: flex-start;
		text-align: left;
	}

	.s3l-match--hero .s3l-match__vs {
		justify-self: start;
	}
}

/* --- Meta lines --------------------------------------------------------- */

.s3l-card__meta,
.s3l-card__tags,
.s3l-card__empty {
	color: var(--s3l-muted);
	font-size: 0.813rem;
	font-weight: 500;
}

.s3l-card__tags {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* One line: "Sa., 12. Sep 2026 · 19:30 · Leverkusen". */
.s3l-next-match__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.1em 0.5em;
	font-size: 0.938rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Lets date, separator and time sit in the parent's flex flow. */
.s3l-next-match__when {
	display: contents;
}

.s3l-card__sep {
	color: var(--s3l-accent);
	opacity: 0.75;
}

.s3l-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: 0.7rem;
	color: var(--s3l-accent);
	font-size: 0.813rem;
	font-weight: 700;
	text-decoration: none;
}

.s3l-card__link:hover,
.s3l-card__link:focus-visible {
	text-decoration: underline;
}

.s3l-card__link span {
	transition: transform 0.18s ease;
}

.s3l-card__link:hover span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.s3l-card__link span {
		transition: none;
	}
}

/* --- League table ------------------------------------------------------- */

.s3l-standings .s3l-card__label {
	margin-bottom: 0.85rem;
}

/* Wide tables scroll inside the card instead of blowing out the page. */
.s3l-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.s3l-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.s3l-table th,
.s3l-table td {
	padding: 0.5rem 0.55rem;
	text-align: right;
	border-bottom: 1px solid var(--s3l-border);
	white-space: nowrap;
}

.s3l-table thead th {
	color: var(--s3l-muted);
	font-size: 0.688rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.s3l-table thead th abbr {
	text-decoration: none;
	border: 0;
}

.s3l-table__pos {
	width: 2.5rem;
	text-align: left;
	color: var(--s3l-muted);
}

.s3l-table__team {
	text-align: left;
	font-weight: 600;
	white-space: normal;
}

.s3l-table__team .s3l-team__logo {
	width: 1.15rem;
	height: 1.15rem;
	margin-right: 0.45em;
	vertical-align: -0.22em;
}

.s3l-table__points {
	font-weight: 800;
}

.s3l-table__row--own {
	background: color-mix(in srgb, var(--s3l-accent) 14%, transparent);
}

.s3l-table__row--own .s3l-table__pos,
.s3l-table__row--own .s3l-table__points {
	color: var(--s3l-accent);
}

.s3l-table tbody tr:last-child th,
.s3l-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- Schedule ------------------------------------------------------------ */

.s3l-schedule .s3l-card__label {
	margin-bottom: 0.85rem;
}

.s3l-schedule__date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.s3l-schedule__time {
	color: var(--s3l-muted);
	margin-left: 0.35em;
}

.s3l-schedule__fixture {
	min-width: 14rem;
}

.s3l-schedule__fixture .s3l-team {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	vertical-align: middle;
}

.s3l-schedule__fixture .s3l-team__logo {
	width: 1.5rem;
	height: 1.5rem;
}

.s3l-schedule__fixture .s3l-match__vs {
	margin: 0 0.4em;
	color: var(--s3l-muted);
}

.s3l-schedule__competition {
	display: block;
	color: var(--s3l-muted);
	font-size: 0.688rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.s3l-schedule__venue {
	color: var(--s3l-muted);
	font-weight: 500;
}

.s3l-schedule__result {
	white-space: nowrap;
	text-align: right;
}

.s3l-schedule__pending {
	color: var(--s3l-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.s3l-score--win {
	color: #2ecc71;
}

.s3l-score--loss {
	color: #e5342a;
}

.s3l-score--draw {
	color: var(--s3l-muted);
}

/* The next fixture is the row people scan for. */
.s3l-schedule__row--next > * {
	background: color-mix(in srgb, var(--s3l-accent) 14%, transparent);
}

.s3l-schedule__row--next .s3l-team__name {
	color: var(--s3l-fg);
}

.s3l-schedule__link {
	text-align: right;
}

.s3l-schedule__link a {
	color: var(--s3l-accent);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

.s3l-schedule__link a:hover,
.s3l-schedule__link a:focus-visible {
	text-decoration: underline;
}

/* Screen-reader-only, in case the theme does not ship the WordPress class. */
.s3l-card .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Light surfaces ----------------------------------------------------- */

.s3l-card--light {
	--s3l-bg: #ffffff;
	--s3l-fg: #14161a;
	--s3l-muted: rgba(20, 22, 26, 0.62);
	--s3l-border: rgba(20, 22, 26, 0.12);
}

.s3l-card--light .s3l-team__logo {
	background: rgba(20, 22, 26, 0.06);
}

/* --- Form guide --------------------------------------------------------- */

.s3l-table__form {
	white-space: nowrap;
}

.s3l-form {
	display: inline-block;
	width: 1.35em;
	margin-left: 0.15em;
	border-radius: 3px;
	background: rgba(127, 127, 127, 0.35);
	color: var(--s3l-fg);
	font-size: 0.688rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
}

.s3l-form--w {
	background: #2ecc71;
	color: #06301a;
}

.s3l-form--l {
	background: #e5342a;
	color: #fff;
}

.s3l-form--d {
	background: #f39c12;
	color: #3a2503;
}