/*
	Rejsa.nu - sidans ram, gemensam för forumet (templates/rejsa3/Rejsa.css) och sidorna utanför (rejsa_sida.css, rejsa_kalender.css).
	Här bestäms allt runt korten: hur bred sidan får bli, luften mot skärmkanten, glappet mellan korten och annonsrutan.
	Det som finns inuti korten (padding, listor, rubriker) bestäms i respektive sidas css. Ladda filen före sidans egen css.

	--sida-bredd  1280px  största bredd, luften inräknad
	--sida-luft   20px    luft mot skärmkanten, 8px på mobilen
	--kort-glapp  20px    mellan korten, 12px på mobilen

	Luft-stegen (all margin/padding/gap pa hela sajten anvander dem, 2026-10-31):
	--luft-1  4px   inom en grupp (namn - ort)
	--luft-2  8px   mellan grupper
	--luft-3  12px  mellan block (datumraden - texten, texten - knapparna)
	--luft-4  16px  storre block
	--luft-5  24px  kortens luft och glapp pa datorn
*/

:root {
	--sida-bredd: 1280px;
	--sida-luft: 20px;
	--kort-glapp: 20px;
	--luft-1: 4px;
	--luft-2: 8px;
	--luft-3: 12px;
	--luft-4: 16px;
	--luft-5: 24px;
}
@media only screen and (max-width: 760px) {
	:root {
		--sida-luft: 8px;
		--kort-glapp: 12px;
	}
}

/* Behållaren: .sida (sidorna), .kal (Bankalendern), .forum (forumet) */
.sida, .kal, .forum {
	max-width: var(--sida-bredd);
	margin: 0 auto;
	padding: var(--kort-glapp) var(--sida-luft) calc(2 * var(--kort-glapp)) var(--sida-luft);
	box-sizing: border-box;
}
/* Forumet: bottenannonsen (eller menyn) direkt under har egen marginal - inget extra glapp ovanför den */
.forum {
	padding-bottom: 0;
}

/* Forumets annonser och meny ligger utanför .forum - samma bredd som korten där */
.f-ads, .f-nav {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--sida-luft));
	max-width: calc(var(--sida-bredd) - 2 * var(--sida-luft));
	margin: var(--kort-glapp) auto 0 auto;
}

.sida .card, .kal .card, .f-kort {
	margin-bottom: var(--kort-glapp);
}

/* Annonserna: samma vita ruta överallt, och ingen ruta om det inte finns någon banner */
.f-ads, .sida-ads {
	padding: var(--luft-3, 12px);
	overflow: hidden;
	text-align: center;
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
}
.sida-ads {
	margin-bottom: var(--kort-glapp);
}
.f-ads:not(:has(img, iframe, video)), .sida-ads:not(:has(img, iframe, video)) {
	display: none;
}
@media only screen and (max-width: 760px) {
	.f-ads, .sida-ads {
		padding: var(--luft-2, 8px);
	}
}

/* Sidans bakgrund (den gamla rejsa2-stilen har en bild) */
body {
	background-color: var(--farg-bakgrund, #f0f3f7);
	background-image: none;
}

/* Sidfoten från _inc_bottom.asp */
body > table td.HEADER, body > table td.TEXT {
	background: none;
	border-color: var(--farg-linje, #e1e8f5);
	color: var(--farg-text-svag, #666);
	font-family: var(--rubrik-font, sans-serif);
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
body > table td.HEADER {
	padding: var(--luft-2, 8px) 0 var(--luft-5, 24px) 0;
}

/* Fälten på sidorna (den gamla rejsa2-stilen ger dem blå bakgrund och svart text) */
.sida select, .sida textarea, .sida input[type=text], .sida input[type=search], .sida input:not([type]), .kal select, .kal textarea, .kal input[type=text], .kal input[type=search], .kal input:not([type]) {
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-ram, #c9ced6);
	border-radius: 2px;
	color: var(--farg-text, #333);
	font-family: var(--text-font);
}

/* Radioknappar och kryssrutor i sajtens valt-farg i stallet for webblasarens bla */
input[type=radio], input[type=checkbox] {
	accent-color: var(--farg-accent, #ff761e);
}