/*
	Rejsa.nu - Bankalendern (bankalender.asp)
	Samma stil som startsidan: ljusgrå bakgrund, vita kort, orange accent.
	Under 800px läggs varje träff som ett kort i stället för en tabellrad.
*/

body {
	background-color: var(--farg-bakgrund, #f0f3f7);
}

.kal {
	font-family: var(--text-font);
	font-size: var(--text-m);
	line-height: 1.45;
	color: var(--farg-text, #333);
}

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

.kal a, .kal a:link, .kal a:visited {
	color: var(--farg-bla, #3D5C98);
	text-decoration: none;
}
.kal a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}

.kal .card {
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
	padding: var(--luft-4, 16px) var(--luft-5, 24px);
}

.kal h1 {
	font-family: var(--rubrik-font);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--farg-rubrik, #3b3b3b);
	margin: 0 0 var(--luft-2, 8px) 0;
}

.kal p {
	margin: 0 0 var(--luft-3, 12px) 0;
}


/* ---------- Månadsgenvägar ---------- */

.kal-months {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
	row-gap: var(--knapp-radavstand);
	margin-top: var(--luft-2, 8px);
}
.kal-months span {
	margin-right: var(--luft-1, 4px);
	font-size: var(--text-s);
}
/* "Gå direkt till" och månadsknapparna i introrutan, som grupperna på Våra banåkabilar
   (.kal-grupp delar regel med .bil-grupp i rejsa_sida.css) */
.card.intro .kal-months {
	margin-top: 0;
}
.kal-months a, .kal-months a:link, .kal-months a:visited,
.kal-years a, .kal-years a:link, .kal-years a:visited {
	display: inline-block;
	padding: var(--knapp-pad);
	border: 1px solid var(--val-ram, var(--farg-ram, #c4d2ed));
	border-radius: var(--knapp-radie);
	background-color: var(--val-bakgrund, var(--farg-yta, #f7f9fc));
	font-size: var(--knapp-fs);
}
.kal-months a:hover, .kal-years a:hover {
	border-color: var(--val-hover, var(--farg-accent, #ff761e));
	color: var(--val-text, var(--farg-bla, #3D5C98));
	text-decoration: none;
}
.kal-months a.active, .kal-years a.active {
	border-color: var(--val-aktiv, var(--farg-accent, #ff761e));
	color: var(--val-aktiv, var(--farg-accent, #ff761e));
}
/* Bara en orange knapp i taget, som på de andra sidorna */
.kal-months:has(a:hover) a.active:not(:hover) {
	border-color: var(--val-ram, var(--farg-ram, #c4d2ed));
	color: var(--val-text, var(--farg-bla, #3D5C98));
}


/* ---------- Filter ---------- */

/* Sökvalen: samma textstorlek som introrutans text (knapparna har sin egen storlek) */
.kal-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-4, 16px) 40px;
	font-size: var(--text-s);
}
.kal-filter .kal-types label {
	display: block;
	cursor: pointer;
	line-height: 1.9;
}
.kal-filter .kal-types .kal-year {
	margin-top: var(--luft-2, 8px);
}
.kal-filter .kal-selects {
	flex: 1 1 320px;
	max-width: 440px;
}
.kal-filter .kal-selects label {
	display: block;
	font-weight: bold;
	margin-bottom: var(--luft-1, 4px);
}
.kal-filter select {
	width: 100%;
	padding: var(--luft-2, 8px);
	margin-bottom: var(--luft-3, 12px);
	font-size: var(--text-s);
	font-family: inherit;
}
.kal-filter .kal-actions {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px) var(--luft-3, 12px);
	padding-top: var(--luft-2, 8px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
	padding-top: var(--luft-4, 16px);
}
.kal-filter button, .kal-filter input[type=submit], .kal-filter input[type=button] {
	font-family: inherit;
	font-size: var(--knapp-l-fs);
	padding: var(--knapp-l-pad);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie);
	background-color: var(--farg-yta, #f7f9fc);
	color: var(--farg-bla, #3D5C98);
	cursor: pointer;
	margin: 0;
}
.kal-filter input[type=button]:hover {
	border-color: var(--farg-accent, #ff761e);
}
.kal-filter input[type=submit] {
	font-weight: bold;
	background-color: var(--farg-primar, #3D5C98);
	border-color: var(--farg-primar, #3D5C98);
	color: var(--farg-primar-text, #fff);
	min-width: 200px;
}
.kal-filter input[type=button].active {
	border-color: var(--farg-accent, #ff761e);
	color: var(--farg-accent, #ff761e);
}
.kal-filter .kal-filtrera {
	display: none;
}


/* ---------- Listan ---------- */

.kal-list {
	padding-top: var(--luft-2, 8px);
}

/* Texten om plusset står ovanför arrangörskolumnen */
.kal-hint {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 280px;
	gap: 0 var(--luft-5, 24px);
	text-align: left;
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
	padding: var(--luft-2, 8px) 0;
}
.kal-hint span {
	grid-column: 4;
}
.kal-hint img {
	vertical-align: middle;
}
/* Första månaden direkt under texten om plusset: mindre luft */
.kal-hint + .kal-month, .kal-hint + a + .kal-month {
	margin-top: var(--luft-1, 4px);
}

.kal-month {
	font-size: var(--text-xl);
	font-weight: bold;
	color: var(--farg-rubrik, #3b3b3b);
	margin: var(--luft-5, 24px) 0 0 0;
	padding: var(--luft-2, 8px) 0 var(--luft-2, 8px) 0;
	border-bottom: 2px solid var(--farg-accent, #ff761e);
}

.kal-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 280px;
	grid-template-areas:
		"date track event org"
		"date track extra org"
		"date track . org";
	grid-template-rows: auto auto 1fr;
	gap: var(--luft-1, 4px) var(--luft-5, 24px);
	padding: var(--luft-4, 16px) 2px var(--luft-4, 16px) var(--luft-1, 4px);	/* lite luft mellan hovringsfärgens kant och texten */
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.kal-row:hover {
	background-color: var(--farg-yta, #f7f9fc);
}

.kal-date  { grid-area: date; white-space: nowrap; }
.kal-track { grid-area: track; display: flex; flex-direction: column; align-items: flex-start; }
/* Knapparna en bit under banans namn, lika långt ner i alla rader (ungefär i höjd med träffens tredje rad) */
.kal-track .kal-tradar { margin-top: 0; padding-top: 12px; }
.kal-event { grid-area: event; }
.kal-org   { grid-area: org; text-align: left; }

/* Arrangören: rött plus till vänster om loggan, mitt för, likadant i alla bredder */
.kal-org {
	display: grid;
	grid-template-columns: auto 200px;
	row-gap: var(--luft-2, 8px);
	align-items: center;
	justify-content: start;
	align-self: start;
}
.kal-org > a, .kal-org .kal-annan, .kal-org .kal-inbjudna {
	grid-column: 2;
	min-width: 0;
}
.kal-org > a.kal-plus {
	grid-column: 1;
}
/* Inbjuden arrangör: under huvudarrangörens logga */
.kal-org .kal-inbjudna {
	margin-top: 0;
	text-align: left;
}
.kal-extra { grid-area: extra; font-size: var(--text-s); }

.kal-date .helg {
	color: var(--farg-fel, #c0392b);
	font-weight: bold;
}
.kal-date .tid {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.kal-date .ical {
	display: inline-block;
	margin-top: var(--luft-2, 8px);
}

.kal-track .typ, .kal-event .typ {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}

.kal-event b {
	font-size: var(--text-l);
}

/* Arrangörernas loggor (gif, max 200x66) är ritade mot vitt och får kantiga konturer på mörk bakgrund:
   varje logga ligger i en vit ruta på 200x66, även i mörkt läge (vitt med flit, inte en token) */
.kal-org a:not(.kal-plus) img, .kal-org .kal-inbjudna img {
	box-sizing: border-box;
	width: 200px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 200 / 66;
	object-fit: contain;
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-radius: 4px;
	background-color: #fff;
}
/* Mörkt läge: rutan lite dämpad så att den inte bländar, och utan ram */
:root[data-theme="dark"] .kal-org a:not(.kal-plus) img, :root[data-theme="dark"] .kal-org .kal-inbjudna img {
	border-color: transparent;
	filter: brightness(0.9);
}
.kal-org .kal-plus {
	margin-right: var(--luft-2, 8px);
	line-height: 0;
}

.kal-row .kal-btn, .kal-row .kal-btn:link, .kal-row .kal-btn:visited {
	display: inline-block;
	font-size: var(--knapp-s-fs);
	padding: var(--knapp-s-pad);
	margin: 0 var(--luft-2, 8px) var(--luft-2, 8px) 0;
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie);
	background-color: var(--farg-yta, #f7f9fc);
}
.kal-tradar {
	margin-top: var(--luft-2, 8px);
}
.kal-tradar:empty {
	display: none;
}
.kal-row .kal-btn:hover {
	border-color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.kal-extra img {
	max-width: 100%;
	height: auto;
}

.kal-sum {
	padding: var(--luft-4, 16px) 0 var(--luft-1, 4px) 0;
	color: var(--farg-text-svag, #666);
}

/* Tidigare års kalendrar: samma knappar som månaderna */
/* fotnoten samma storlek som introtexten, aven pa mobilen dar .kal har storre text */
.kal-foot p {
	font-size: var(--text-m);
}
.kal-foot .kal-years {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px) var(--luft-2, 8px);
	row-gap: var(--knapp-radavstand);
}


/* ---------- Mobil ---------- */

/* Under 900px: tre kolumner - datum, träffen (bana, typ, trådar, info) under varandra, arrangören till höger */
@media only screen and (max-width: 900px) {
	.kal-hint {
		grid-template-columns: 110px minmax(0, 1fr) 230px;
		text-align: left;
	}
	.kal-hint span {
		grid-column: 3;
	}
	.kal-org {
		justify-content: start;
	}
	.kal-org .kal-inbjudna {
		text-align: left;
	}
	.kal-row {
		grid-template-columns: 110px minmax(0, 1fr) 230px;
		grid-template-areas:
			"date track org"
			"date event org"
			"date extra org"
			"date . org";
		grid-template-rows: auto auto auto 1fr;
		gap: var(--luft-1, 4px) var(--luft-5, 24px);
	}
}

@media only screen and (max-width: 800px) {
	.kal {
		font-size: var(--text-l);
	}
	.kal .card {
		padding: var(--luft-3, 12px) var(--luft-3, 12px);
	}
	.kal h1 {
		font-size: var(--text-xxl);
	}
	.kal-filter {
		gap: var(--luft-2, 8px);
	}
	.kal-filter .kal-selects {
		max-width: none;
	}
	.kal-filter .kal-actions > * {
		flex: 1 1 100%;
		width: 100%;
	}
	.kal-filter .kal-actions .kal-or {
		display: none;
	}
	/* filtren dolda bakom Filtrera-knappen tills den trycks, sa traffarna syns direkt */
	.kal-filter .kal-filtrera {
		display: flex;
		flex: 1 1 100%;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
	}
	.kal-filter .kal-filtrera-pil {
		transition: transform .15s;
	}
	.kal-filter.oppen .kal-filtrera-pil {
		transform: rotate(180deg);
	}
	.kal-filter:not(.oppen) > div {
		display: none;
	}
	.kal-hint {
		display: block;
		text-align: left;
	}
	.kal-row {
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas:
			"date track"
			"date event"
			"date org"
			"date extra";
		gap: var(--luft-1, 4px) var(--luft-3, 12px);
		padding: var(--luft-3, 12px) 2px var(--luft-3, 12px) var(--luft-1, 4px);
	}
	.kal-date {
		white-space: normal;
		font-size: var(--text-m);
	}
	.kal-org {
		justify-content: flex-start;
		text-align: left;
	}
	.kal-org .kal-inbjudna {
		text-align: left;
	}
}

/* Under 800px (surfplatta, telefon): arrangören i en egen kolumn till höger */
@media only screen and (max-width: 800px) {
	.kal-row {
		grid-template-columns: 84px minmax(0, 1fr) 230px;
		grid-template-areas:
			"date track org"
			"date event org"
			"date extra org"
			"date . org";
		grid-template-rows: auto auto auto 1fr;
	}
	.kal-hint {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) 230px;
		gap: 0 var(--luft-3, 12px);
	}
}

/* Loggorna centreras i en 200px bred ruta (de flesta är 200px, några smalare) - gäller alla bredder */
.kal-row .kal-org > a:not(.kal-plus), .kal-row .kal-org .kal-annan, .kal-row .kal-org .kal-inbjudna {
	text-align: center;
}

/* Telefon: samma tre kolumner. Loggorna krymps lite (max 140px) och texten blir mindre
   och plusset hamnar under loggan, högerställt. */
@media only screen and (max-width: 519px) {
	.kal .card {
		padding: var(--luft-3, 12px) var(--luft-2, 8px);
	}
	.kal-row {
		grid-template-columns: 60px minmax(0, 1fr) 140px;
		gap: var(--luft-1, 4px) var(--luft-2, 8px);
	}
	.kal-hint {
		grid-template-columns: 60px minmax(0, 1fr) 140px;
		gap: 0 var(--luft-2, 8px);
		font-size: var(--text-xs);
	}
	.kal-date {
		font-size: var(--text-xs);
		white-space: nowrap;
		padding-top: 1px;
		line-height: 17.5px; /* samma radhöjd som banans namn (13px * 1.35), så första raden linjerar */
	}
	.kal-track, .kal-event {
		font-size: var(--text-xs);
		line-height: 1.35;
	}
	.kal-track b, .kal-event b {
		font-size: var(--text-xs);
	}
	.kal-track .typ, .kal-event .typ {
		font-size: 10px;
	}
	.kal-row .kal-btn, .kal-row .kal-btn:link, .kal-row .kal-btn:visited {
	}
	.kal-org {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.kal-org > a:not(.kal-plus), .kal-org .kal-annan { order: 1; }
	.kal-org > .kal-plus:first-child                 { order: 2; }
	.kal-org .kal-inbjudna                           { order: 3; margin-top: 6px; }
	.kal-org > .kal-plus:not(:first-child)           { order: 4; }
	.kal-org .kal-plus {
		align-self: flex-end;
		margin: 0;
	}
	.kal-org a:not(.kal-plus) img, .kal-org .kal-inbjudna img {
		width: 140px;
	}
}

/* Full bredd (fyra kolumner): lite större text i listan */
@media only screen and (min-width: 901px) {
	.kal-row {
		font-size: var(--text-l);
	}
	.kal-track b, .kal-event b {
		font-size: var(--text-xl);
	}
	.kal-track .typ, .kal-event .typ {
		font-size: var(--text-m);
	}
	.kal-date {
		font-size: var(--text-m);
	}
	.kal-date .tid {
		font-size: var(--text-xs);
	}
	.kal-extra {
		font-size: var(--text-m);
	}
	.kal-row .kal-btn, .kal-row .kal-btn:link, .kal-row .kal-btn:visited {
	}
	.kal-hint {
		font-size: var(--text-s);
	}
	.kal-month {
		font-size: var(--text-xxl);
	}
}

/* ---------- Ikonerna: Lägg till i din kalender och Arrangörens alla träffar ---------- */
/* Inline svg i bankalender.php ($ikon_kal, $ikon_lista), ritade i textfärgen: följer mörkt/ljust läge */

.kal-ikon {
	display: block;
	width: 18px;
	height: 18px;
}
.kal a.ical, .kal a.ical:link, .kal a.ical:visited,
.kal a.kal-plus, .kal a.kal-plus:link, .kal a.kal-plus:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid var(--farg-ram, #c9ced6);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	color: var(--farg-bla, #1f2329);
	line-height: 0;
}
.kal a.ical:hover, .kal a.kal-plus:hover {
	border-color: var(--farg-accent, #ff761e);
	color: var(--lank-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}
/* I texten ovanför listan: bara ikonen, i radens storlek */
.kal-hint .kal-ikon {
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: -3px;
	color: var(--farg-text, #333);
}

/* ---------- Årsnavigering (sent på säsongen) och admin ---------- */
.kal-arsnav {
	margin-top: var(--luft-3, 12px);
}
.kal-arsnav p {
	margin: 0 0 var(--luft-2, 8px) 0;
}
.kal-dold {
	opacity: .55;
}
/* Admin: pennan svävar till höger om loggan och tar ingen plats, så sidan ser likadan ut som för andra */
.kal-org {
	position: relative;
}
.kal-org > a.kal-edit {
	position: absolute;
	left: calc(100% + 4px);
	top: 24px;
	line-height: 0;
}
/* Rutan krymper till loggans bredd så att pennan hamnar tätt intill (loggan flyttar sig inte) */
@media only screen and (min-width: 520px) {
	.kal-org:has(> .kal-edit) {
		width: fit-content;
	}
}
/* Telefon: ingen plats till höger, pennan ligger i loggans övre högra hörn */
@media only screen and (max-width: 519px) {
	.kal-org > a.kal-edit {
		left: auto;
		right: 2px;
		top: 2px;
		padding: 2px;
		border-radius: var(--knapp-radie);
		background-color: var(--farg-yta, #f7f9fc);
	}
	/* När plusset ligger under loggan: pennan bredvid plusset i stället för i loggans hörn */
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 2px var(--luft-2, 8px);
	}
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) > a:not(.kal-plus):not(.kal-edit),
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) > .kal-annan,
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) > .kal-inbjudna {
		flex-basis: 100%;
	}
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) > .kal-plus {
		align-self: center;
	}
	.kal-org:has(> .kal-edit):has(> .kal-plus:first-child) > a.kal-edit {
		position: static;
		order: 2;
		padding: 0;
		background: none;
	}
}