/*
 * IJshockey Nederland - basisopmaak voor de shortcodes en blokken.
 *
 * Klein en bescheiden: het thema van de club blijft de baas. Alles hangt aan
 * .ijnl en werkt met custom properties, zodat een thema één kleur kan
 * overschrijven zonder deze regels te kopiëren:
 *
 *   .ijnl { --ijnl-accent: #c8102e; }
 *
 * Of zet bij Instellingen > IJshockey Nederland "Eigen stylesheet" aan; dan
 * wordt dit bestand niet geladen.
 */

.ijnl {
	--ijnl-tekst: #1b1f24;
	--ijnl-zacht: #5b6470;
	--ijnl-lijn: #d9dee4;
	--ijnl-vlak: #f4f6f8;
	--ijnl-accent: #0b4f9c;
	--ijnl-eigen: #e8f0fb;
	--ijnl-live: #c8102e;
	color: var(--ijnl-tekst);
	font-variant-numeric: tabular-nums;
	margin: 0 0 1.5em;
	max-width: 100%;
	overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
	.ijnl {
		--ijnl-tekst: #e8ebef;
		--ijnl-zacht: #a3acb7;
		--ijnl-lijn: #3a414a;
		--ijnl-vlak: #22272e;
		--ijnl-accent: #7fb2f0;
		--ijnl-eigen: #1f3350;
		--ijnl-live: #ff6b7d;
	}
}

.ijnl h2,
.ijnl h3 {
	margin: 1em 0 .5em;
}

.ijnl ul,
.ijnl ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ijnl-leeg,
.ijnl-info,
.ijnl-seizoen,
.ijnl-bijgewerkt {
	color: var(--ijnl-zacht);
	font-size: .9em;
}

.ijnl-logo {
	display: inline-block;
	height: auto;
	object-fit: contain;
	vertical-align: middle;
}

/* Stand */
.ijnl-tabel {
	border-collapse: collapse;
	width: 100%;
}

.ijnl-tabel caption {
	font-weight: 600;
	margin-bottom: .5em;
	text-align: left;
}

.ijnl-tabel th,
.ijnl-tabel td {
	border-bottom: 1px solid var(--ijnl-lijn);
	padding: .45em .4em;
	text-align: left;
}

.ijnl-tabel thead th {
	color: var(--ijnl-zacht);
	font-size: .85em;
	font-weight: 600;
}

.ijnl-tabel abbr {
	text-decoration: none;
}

.ijnl-tabel .ijnl-getal {
	text-align: right;
	white-space: nowrap;
}

.ijnl-tabel .ijnl-plek {
	width: 2em;
}

.ijnl-tabel tbody th {
	font-weight: 400;
}

.ijnl-tabel .ijnl-punten {
	font-weight: 700;
}

.ijnl-tabel tr.ijnl-eigen > * {
	background: var(--ijnl-eigen);
	font-weight: 600;
}

/* Statistieken: de tabel van de stand; op een telefoon blijven # , speler,
   GS en de kerncijfers over (de rest is .ijnl-breed). */
.ijnl-statistiek .ijnl-onderdeel {
	font-weight: 400;
}

.ijnl-keuze {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	align-items: center;
	margin-bottom: 1em;
}

.ijnl-keuze select {
	max-width: 100%;
}

/* Programma, uitslagen en live */
.ijnl-dag {
	border-bottom: 2px solid var(--ijnl-accent);
	font-size: 1em;
	padding-bottom: .25em;
}

/* "Zaterdag 26 september": alleen de eerste letter, de maand blijft klein. */
.ijnl-dag::first-letter {
	text-transform: uppercase;
}

.ijnl-wedstrijd {
	border-bottom: 1px solid var(--ijnl-lijn);
	display: grid;
	gap: .2em .75em;
	grid-template-columns: 4.5em 1fr;
	padding: .6em 0;
}

.ijnl-wedstrijd > :not(.ijnl-tijd) {
	grid-column: 2;
}

.ijnl-live .ijnl-wedstrijd {
	grid-template-columns: 1fr;
}

.ijnl-live .ijnl-wedstrijd > * {
	grid-column: 1;
}

.ijnl-tijd {
	color: var(--ijnl-zacht);
	font-weight: 600;
}

.ijnl-teams {
	align-items: center;
	display: grid;
	gap: .5em;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.ijnl-teamnaam {
	align-items: center;
	display: flex;
	gap: .4em;
	hyphens: auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ijnl-teams .ijnl-teamnaam:last-child {
	flex-direction: row-reverse;
	text-align: right;
}

.ijnl-teamnaam.ijnl-eigen {
	font-weight: 700;
}

.ijnl-score {
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.ijnl-score .ijnl-na {
	display: block;
	font-size: .75em;
	font-weight: 400;
}

.ijnl-volgt,
.ijnl-status {
	color: var(--ijnl-zacht);
	font-size: .85em;
	font-style: italic;
	font-weight: 400;
}

.ijnl-opmerking {
	font-size: .9em;
}

.ijnl-staat-live .ijnl-score,
.ijnl-staat-live .ijnl-toelichting {
	color: var(--ijnl-live);
}

.ijnl-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.ijnl-knop {
	border: 1px solid var(--ijnl-accent);
	border-radius: 4px;
	color: var(--ijnl-accent);
	display: inline-block;
	font-size: .85em;
	padding: .15em .6em;
	text-decoration: none;
}

.ijnl-knop:hover,
.ijnl-knop:focus {
	background: var(--ijnl-accent);
	color: #fff;
}

/* Wedstrijd */
.ijnl-wedstrijdkop {
	background: var(--ijnl-vlak);
	border-radius: 6px;
	padding: 1em;
	text-align: center;
}

.ijnl-scorebord {
	align-items: center;
	display: grid;
	gap: .75em;
	grid-template-columns: 1fr auto 1fr;
	margin: .75em 0;
}

.ijnl-scorebord .ijnl-score {
	font-size: 2em;
}

.ijnl-ploeg {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: .4em;
	font-weight: 600;
}

.ijnl-toelichting,
.ijnl-periodes {
	margin: .25em 0;
}

.ijnl-wedstrijdkop .ijnl-knoppen {
	justify-content: center;
	margin-top: .5em;
}

.ijnl-doelpunten li,
.ijnl-straffen li {
	border-bottom: 1px solid var(--ijnl-lijn);
	padding: .4em 0;
}

.ijnl-kant-uit {
	text-align: right;
}

.ijnl-assists,
.ijnl-sterkte,
.ijnl-reden {
	color: var(--ijnl-zacht);
}

/* Team */
.ijnl-teamkop {
	align-items: center;
	display: flex;
	gap: 1em;
}

.ijnl-teamtitel {
	margin: 0;
}

.ijnl-onderdelen li {
	padding: .2em 0;
}

.ijnl-personen {
	display: grid;
	gap: .75em;
	grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
}

.ijnl-persoon {
	align-items: center;
	background: var(--ijnl-vlak);
	border-radius: 6px;
	display: grid;
	gap: .1em .6em;
	grid-template-columns: 60px 1fr;
	padding: .5em;
}

.ijnl-persoon > :not(.ijnl-foto) {
	grid-column: 2;
}

.ijnl-foto {
	background: var(--ijnl-lijn);
	border-radius: 4px;
	display: block;
	grid-row: span 3;
	height: 80px;
	object-fit: cover;
	width: 60px;
}

.ijnl-rugnummer {
	color: var(--ijnl-accent);
	font-weight: 700;
}

/* [ijnl_team foto=groot]: kaarten met de foto bovenaan. De portretten uit
   het portaal zijn 300 x 400, dus tot 150 pixels breed blijven ze scherp. */
.ijnl-fotos-groot .ijnl-personen {
	grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
}

.ijnl-fotos-groot .ijnl-persoon {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.ijnl-fotos-groot .ijnl-persoon > :not(.ijnl-foto) {
	grid-column: 1;
}

.ijnl-fotos-groot .ijnl-foto {
	aspect-ratio: 3 / 4;
	grid-row: auto;
	height: auto;
	max-width: 150px;
	width: 100%;
}

.ijnl-positie,
.ijnl-rol {
	color: var(--ijnl-zacht);
	font-size: .85em;
}

/* Play-offs */
.ijnl-rondes {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}

.ijnl-serie {
	border: 1px solid var(--ijnl-lijn);
	border-radius: 6px;
	margin-bottom: .75em;
	padding: .4em .6em;
}

.ijnl-serieteam {
	display: flex;
	justify-content: space-between;
	gap: .5em;
	padding: .15em 0;
}

.ijnl-winnaar {
	font-weight: 700;
}

.ijnl-plaatshouder {
	color: var(--ijnl-zacht);
	font-style: italic;
}

.ijnl-formaat {
	color: var(--ijnl-zacht);
	font-size: .8em;
}

/* Alleen voor beheerders */
.ijnl-melding {
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: .9em;
	padding: .5em .75em;
}

/* Telefoon (390 px): minder kolommen, logo's kleiner */
@media (max-width: 480px) {
	.ijnl-tabel .ijnl-breed {
		display: none;
	}

	.ijnl-wedstrijd {
		grid-template-columns: 1fr;
	}

	.ijnl-wedstrijd > * {
		grid-column: 1 !important;
	}

	.ijnl-teams {
		font-size: .92em;
	}

	.ijnl-teams .ijnl-logo {
		width: 20px;
	}

	.ijnl-scorebord .ijnl-score {
		font-size: 1.5em;
	}

	.ijnl-scorebord .ijnl-logo {
		width: 48px;
	}
}