/**
 * Inspot Kalender — avsiktligt neutral bas.
 *
 * Allt som är smaksak går via custom properties. Varje klients tema sätter om
 * dem i sin egen CSS i stället för att brottas med specificitet, t.ex.:
 *
 *   .ik-kalender { --ik-accent: var(--farg-gron); }
 */

/* Standardomslag för pluginets egna sidmallar. Neutralt med flit — temat
   förväntas koppla bort det och haka in sitt eget via
   `inspot_kalender_fore_innehall` / `_efter_innehall`. */
.ik-omslag {
	margin-inline: auto;
	max-width: 72rem;
	padding: 3rem 1.25rem;
	width: 100%;
}

.ik-kalender {
	--ik-ram: #d9d9d9;
	--ik-accent: currentColor;
	--ik-idag-bg: rgba(0, 0, 0, 0.05);
	--ik-dampad: #666;
	--ik-lucka: 0.5rem;
	--ik-brytpunkt: 640px;

	margin-block: 1.5rem;
}

/* Navigering ------------------------------------------------------------- */

.ik-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ik-lucka);
	justify-content: space-between;
	margin-bottom: var(--ik-lucka);
}

/* Rutnät — månad och vecka delar markup ---------------------------------- */

.ik-rutnat {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.ik-rutnat__rubrik {
	caption-side: top;
	font-size: 1.25em;
	font-weight: 700;
	padding-bottom: var(--ik-lucka);
	text-align: left;
	text-transform: capitalize;
}

.ik-rutnat th {
	border-bottom: 1px solid var(--ik-ram);
	font-size: 0.85em;
	padding: 0.35rem 0.5rem;
	text-align: left;
	text-transform: uppercase;
}

.ik-rutnat th abbr {
	border: 0;
	text-decoration: none;
}

/* Veckonummerkolumnen: smal, dämpad, ingen egen ruta. */
.ik-rutnat__vecka {
	color: var(--ik-dampad);
	font-size: 0.85em;
	font-weight: 400;
	padding: 0.35rem 0.5rem 0.35rem 0;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	width: 3.25rem;
}

tbody .ik-rutnat__vecka {
	border: 0;
	vertical-align: top;
}

.ik-rutnat td {
	border: 1px solid var(--ik-ram);
	height: 6rem;
	padding: 0.35rem;
	vertical-align: top;
}

.ik-rutnat__tom {
	background: transparent;
	border-color: transparent;
}

.ik-rutnat__nummer {
	color: var(--ik-dampad);
	display: block;
	font-size: 0.85em;
	margin-bottom: 0.25rem;
}

/* Veckodagen i rutan är till för mobilläget, där kolumnrubrikerna faller
   bort. På desktop står den redan i <th> — dubbelt vore bara brus, även
   för en skärmläsare. */
.ik-rutnat__veckodag {
	display: none;
}

.ik-rutnat__dag--idag {
	background: var(--ik-idag-bg);
}

.ik-rutnat__dag--idag .ik-rutnat__nummer {
	color: inherit;
	font-weight: 700;
}

.ik-rutnat__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ik-rutnat__lista li + li {
	margin-top: 0.25rem;
}

.ik-rutnat__lista a {
	display: block;
	font-size: 0.85em;
	line-height: 1.3;
	text-decoration: none;
}

/* Titel på en rad, tiden under — kundens läsordning. */
.ik-rutnat__lista .ik-handelse__titel,
.ik-rutnat__lista .ik-handelse__tid {
	display: block;
}

.ik-rutnat__lista a:hover,
.ik-rutnat__lista a:focus-visible {
	text-decoration: underline;
}

/* Mobilläge: rutnätet fälls ihop till en lista.
 *
 * display:block på tabellelement tar bort tabellsemantiken för skärmläsare —
 * därför bär varje dag sitt eget veckodagsnamn här, så ingen information går
 * förlorad när kolumnrubrikerna försvinner. Tomma dagar döljs helt; en lista
 * med tjugo tomma rutor hjälper ingen. */
@media (max-width: 640px) {

	.ik-rutnat,
	.ik-rutnat caption,
	.ik-rutnat tbody,
	.ik-rutnat tr,
	.ik-rutnat td {
		display: block;
		height: auto;
		width: auto;
	}

	/* Kolumnrubrikerna säger inget när kolumnerna är borta — dölj dem visuellt
	   men behåll dem läsbara. Varje dagruta bär sitt eget veckodagsnamn här. */
	.ik-rutnat thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.ik-rutnat td {
		align-items: baseline;
		border: 0;
		border-bottom: 1px solid var(--ik-ram);
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		padding: 0.6rem 0;
	}

	/* MÅSTE stå efter regeln ovan och matcha lika hårt: `.ik-rutnat td` är
	   0,1,1 och slår en ensam klass, så `display:none` på bara klassen tappas
	   och utfyllnadsrutorna renderas som tomma rader. */
	.ik-rutnat td.ik-rutnat__tom,
	.ik-rutnat td.ik-rutnat__dag--tom {
		display: none;
	}

	/* En tom rad ska inte lämna kvar luft när alla dess celler är dolda. */
	.ik-rutnat tr {
		margin: 0;
		padding: 0;
	}

	/* Veckonumret blir en mellanrubrik i listan; en vecka helt utan
	   händelser döljs med sitt nummer. */
	.ik-rutnat tbody .ik-rutnat__vecka {
		display: block;
		padding: 0.8rem 0 0.2rem;
		width: auto;
	}

	.ik-rutnat tr:not(:has(.ik-rutnat__dag:not(.ik-rutnat__dag--tom))) {
		display: none;
	}

	.ik-rutnat__veckodag {
		display: inline;
		font-weight: 700;
		order: 1;
		text-transform: capitalize;
	}

	.ik-rutnat__nummer {
		display: inline;
		font-size: 1em;
		margin: 0;
		order: 2;
	}

	.ik-rutnat__lista {
		flex-basis: 100%;
		order: 3;
	}

	.ik-rutnat__lista a {
		font-size: 1em;
	}
}

/* Listvy ----------------------------------------------------------------- */

.ik-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ik-lista > li {
	align-items: baseline;
	border-bottom: 1px solid var(--ik-ram);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ik-lucka);
	padding: 0.6rem 0;
}

.ik-lista__tom {
	color: var(--ik-dampad);
	font-style: italic;
}

.ik-handelse__datum,
.ik-handelse__tid {
	color: var(--ik-dampad);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ik-handelse__titel {
	font-weight: 600;
}

.ik-handelse__plats {
	color: var(--ik-dampad);
	font-size: 0.9em;
}

/* Inställt tas inte bort — folk letar efter det som ställdes in. */
.ik-handelse--installd .ik-handelse__titel {
	text-decoration: line-through;
}

.ik-handelse__installd {
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 0.75em;
	padding: 0.05em 0.4em;
	text-transform: uppercase;
}

/* Veckolista --------------------------------------------------------------- */

.ik-veckolista {
	border-collapse: collapse;
	width: 100%;
}

.ik-veckolista__rubrik {
	caption-side: top;
	font-size: 1.25em;
	font-weight: 700;
	padding-bottom: var(--ik-lucka);
	text-align: left;
}

.ik-veckolista th,
.ik-veckolista td {
	border-bottom: 1px solid var(--ik-ram);
	padding: 0.6rem 0.75rem 0.6rem 0;
	text-align: left;
	vertical-align: top;
}

.ik-veckolista__dag {
	text-transform: capitalize;
	white-space: nowrap;
	width: 1%;
}

.ik-veckolista__tid {
	white-space: nowrap;
	width: 1%;
}

.ik-veckolista__handelse .ik-handelse__plats {
	display: block;
}

/* Enskild händelse ------------------------------------------------------- */

.ik-single__fakta {
	display: grid;
	gap: 0.25rem var(--ik-lucka);
	grid-template-columns: auto 1fr;
	margin-block: 1rem;
}

.ik-single__fakta dt {
	color: var(--ik-dampad);
	font-weight: 600;
}

.ik-single__fakta dd {
	margin: 0;
}

.ik-single__tillbaka {
	margin-block: 1.5rem;
}