/* Slog koledarja večernega, nočnega in jutranjega neba (po vzoru spletne strani društva). */

@font-face {
	font-family: 'squarish_sans_ctregular';
	src: url('/static/fonts/squarish_sans_ct_regular-webfont.woff') format('woff'),
	     url('/static/fonts/squarish_sans_ct_regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

:root {
	/* barve neba na časovnem traku */
	--nebo-dan: #9dbde3;
	--nebo-civilni: #5f86ba;
	--nebo-navticni: #3b5b8c;
	--nebo-astronomski: #243a5e;
	--nebo-noc: #141d33;

	--planet: #FFE8A8;
	--planet-besedilo: #5a4300;
	--globoko: #CFE0FA;
	--globoko-besedilo: #1e3d6e;
	--globoko-rob: #7d9cc9;
	--globoko-moteno: 207, 224, 250;

	--glavna: #2C5AA0;
	--glavna-svetla: #dde6f3;
	--glava-povezave: #ccc;
	--poudarek: #BDE1FF;
}

/* Jutranji koledar (?nacin=jutro): rožnata shema in barve jutranjega neba. */
:root.jutro {
	--nebo-dan: #f6c3d5;
	--nebo-civilni: #d47b9f;
	--nebo-navticni: #8a4a7d;
	--nebo-astronomski: #4a2a56;
	--nebo-noc: #1d1428;

	--globoko: #FAD3E5;
	--globoko-besedilo: #6b1d44;
	--globoko-rob: #c97da2;
	--globoko-moteno: 250, 211, 229;

	--glavna: #B23A73;
	--glavna-svetla: #f7dbe8;
	--glava-povezave: #f0c4d8;
	--poudarek: #FFD3E6;
}

/* Nočni koledar (?nacin=noc): za prave astronome v enem od odtenkov sive. */
:root.noc {
	--nebo-dan: #cfcfcf;
	--nebo-civilni: #9a9a9a;
	--nebo-navticni: #6a6a6a;
	--nebo-astronomski: #3e3e3e;
	--nebo-noc: #1a1a1a;

	--globoko: #e2e2e2;
	--globoko-besedilo: #333;
	--globoko-rob: #999;
	--globoko-moteno: 226, 226, 226;

	--glavna: #4f4f4f;
	--glavna-svetla: #e4e4e4;
	--glava-povezave: #bdbdbd;
	--poudarek: #d4d4d4;
}

* {
	line-height: 1.3em;
	box-sizing: border-box;
}

body {
	margin: 0px;
	font-size: 10pt;
	font-family: Tahoma, Arial, sans-serif;
	color: #505050;
	background-color: white;
}

a {
	text-decoration: none;
	color: var(--glavna);
}

[hidden] {
	display: none !important;
}

/* Besedila, odvisna od načina (razred "noc" ali "jutro" nastavi skripta v glavi strani). */
.samo-noc,
.samo-jutro,
:root.noc .samo-vecer,
:root.jutro .samo-vecer {
	display: none;
}

:root.noc .samo-noc,
:root.jutro .samo-jutro {
	display: inline;
}

/* Izbor objektov (razred "osoncje": le Luna in planeti). */
.samo-osoncje,
:root.osoncje .samo-vsi {
	display: none;
}

:root.osoncje .samo-osoncje {
	display: inline;
}

/* GLAVA */

header {
	background-color: var(--glavna);
	padding: 0.8em 0.5em 1.2em;
	text-align: center;
	color: white;
}

header h1 {
	margin: 0px;
	font-size: 2.4em;
	font-family: "squarish_sans_ctregular", Tahoma, Arial, sans-serif;
	font-variant: small-caps;
	font-weight: normal;
	line-height: 1.4em;
}

header p {
	margin: 0.2em 0 0;
	color: var(--glavna-svetla);
}

/* Stikali za čas opazovanja in izbor objektov (kot navigacija na strani društva) */
#nacin {
	margin-top: 0.3em;
	font-size: 1.3em;
	font-family: "squarish_sans_ctregular", Tahoma, Arial, sans-serif;
}

#nacin .skupina {
	display: inline-block;
	white-space: nowrap;
}

#nacin .skupina + .skupina {
	margin-left: 0.4em;
	padding-left: 0.4em;
	border-left: 1px solid var(--glava-povezave);
}

#nacin a {
	padding: 0 0.4em;
	color: var(--glava-povezave);
}

#nacin a:hover,
#nacin a.izbran {
	color: white;
}

#listanje-mesecev {
	margin-top: 0.6em;
	font-size: 1.3em;
}

#listanje-mesecev a {
	color: var(--glava-povezave);
	padding: 0 0.6em;
}

#listanje-mesecev a:hover {
	color: white;
}

#listanje-mesecev b {
	color: white;
	font-weight: normal;
}

/* VSEBINA */

main {
	max-width: 60em;
	margin: 0 auto 3em;
	padding: 0 0.5em;
}

#izbira {
	text-align: center;
	margin: 1.5em 0 0.8em;
}

#izbira input {
	font: inherit;
	width: 9em;
}

#nalaganje {
	text-align: center;
	color: #999;
	margin: 3em 0;
}

#napaka {
	max-width: 44em;
	margin: 2em auto;
	padding: 0.8em 1em;
	border: 1px solid #e0a0a0;
	background-color: #fff3f3;
	color: #8a1f1f;
	white-space: pre-line;
}

h2 {
	margin: 1.8em 0 0.5em;
	font-family: "squarish_sans_ctregular", Tahoma, Arial, sans-serif;
	font-variant: small-caps;
	font-weight: normal;
	font-size: 1.7em;
	color: #333;
}

/* POJASNILO NA DNU */

#pojasnilo {
	max-width: 44em;
	margin-top: 3em;
	border-top: 1px solid #dbdbdb;
}

#pojasnilo p {
	text-align: justify;
}

#pojasnilo ul {
	padding-left: 1.4em;
}

/* BRANJE NA GLAS */

#branje-danes {
	text-align: center;
	margin: 0 0 1em;
}

button.preberi {
	font: inherit;
	font-size: 110%;
	color: var(--glavna);
	background-color: white;
	border: 1px solid var(--glavna);
	border-radius: 3px;
	padding: 0.15em 0.7em;
	cursor: pointer;
}

button.preberi:hover,
button.preberi.bere {
	color: white;
	background-color: var(--glavna);
}

/* Ikona le za oko, bralnik zaslona prebere samo napis (prva vrstica za
   brskalnike, ki ne poznajo nadomestnega besedila za "/"). */
button.preberi::before {
	content: "🔊\00a0";
	content: "🔊\00a0" / "";
}

button.preberi.bere::before {
	content: "■\00a0";
	content: "■\00a0" / "";
}

button.od-zacetka {
	font: inherit;
	color: var(--glavna);
	background: none;
	border: none;
	padding: 0.25em 0.3em;
	text-decoration: underline;
	cursor: pointer;
}

.govor-stanje {
	display: block;
	clear: both;
	margin-top: 0.3em;
	color: #8a1f1f;
}

.govor-stanje:empty {
	display: none;
}

/* V oknu dneva sta gumba levo, "Povzetek v besedilu" v isti vrstici desno od
   njiju, razprto besedilo pa pod njimi v polni širini. */
.podrobnosti .branje {
	display: flow-root;
	margin: 0.3em 0 0.6em;
}

.podrobnosti .branje button {
	float: left;
	margin-right: 0.8em;
}

details.povzetek summary {
	padding-top: 0.3em;
	cursor: pointer;
	color: var(--glavna);
}

details.povzetek p {
	clear: both;
	padding-top: 0.3em;
}

/* LEGENDA */

ul.legenda {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
	font-size: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em 1.4em;
}

ul.legenda svg {
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.3em;
}

ul.legenda .ni-vidna svg {
	opacity: 0.35;
}

/* IKONA LUNE */

svg.lunica circle {
	fill: #4a4a4a;
	stroke: #999;
	stroke-width: 0.6;
}

svg.lunica path {
	fill: #f4e9b8;
}

/* MESEČNA TABELA */

table.mesec {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border: 1px solid #c3c3c3;
}

table.mesec th {
	background-color: #dbdbdb;
	border: 1px solid #c3c3c3;
	padding: 3px;
	font-weight: normal;
	color: #333;
}

table.mesec th.poudarjen {
	background-color: var(--poudarek);
}

table.mesec th small {
	display: block;
	font-size: 85%;
	color: var(--glavna);
}

table.mesec th small:empty {
	display: none;
}

table.mesec td {
	position: relative;
	border: 1px solid #c3c3c3;
	vertical-align: top;
	height: 6.5em;
	padding: 0px;
	background-color: #fff;
}

table.mesec td.prazen {
	background-color: #f7f7f9;
}

table.mesec td.danes {
	outline: 2px solid var(--glavna);
	outline-offset: -2px;
}

table.mesec td.preteklo {
	opacity: 0.55;
}

/* Povezava ne sme imeti height: 100%, ker Firefox potem celice ne razširi
   in oznake zlezejo v naslednjo vrstico. Da je klikljiva vsa celica, jo
   pokrije ::after. */
table.mesec td > a {
	display: block;
	min-height: 6.5em;
	padding: 3px 4px 5px;
	color: inherit;
}

table.mesec td > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Luna in oznake morajo biti nad ::after, da se jim prikažejo namigi (title). */
table.mesec .luna,
table.mesec .o {
	position: relative;
	z-index: 1;
}

table.mesec td:has(> a:hover) {
	background-color: #f0f0f0;
}

.dan {
	float: left;
	font-weight: bold;
	color: #333;
	font-size: 110%;
}

.dan i {
	display: none;
	font-style: normal;
	font-weight: normal;
	color: #777;
}

table.mesec .luna {
	float: right;
	font-size: 85%;
	color: #777;
	white-space: nowrap;
	text-align: right;
}

table.mesec .luna svg {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.35em;
}

table.mesec .luna.ni-vidna svg {
	opacity: 0.35;
}

.faza {
	display: block;
	font-size: 95%;
	color: var(--glavna);
}

.faza:empty {
	display: none;
}

.objekti {
	display: block;
	clear: both;
	padding-top: 0.3em;
}

/* Oznaka objekta: v = vidno, d = vidno, a delno moti Luna, m = vidno, a moti Luna */
.o {
	display: inline-block;
	font-size: 85%;
	line-height: 1.25em;
	padding: 0 0.3em;
	margin: 1px 2px 0 0;
	border-radius: 3px;
	white-space: nowrap;
}

.o.planet {
	background-color: var(--planet);
	color: var(--planet-besedilo);
}

.o.globoko {
	background-color: var(--globoko);
	color: var(--globoko-besedilo);
}

.o.globoko.d {
	border: 1px dashed var(--globoko-rob);
	padding: 0 0.25em;
}

.o.globoko.m {
	background: transparent;
	color: #999;
	border: 1px dashed #bbb;
	padding: 0 0.25em;
}

.o.luna {
	background-color: #eeeeee;
	color: #333;
}

/* Objekt tisti dan ni viden (le v tabeli dneva). */
.o.ni {
	background: transparent;
	color: #aaa;
	border: 1px dashed #ccc;
	padding: 0 0.25em;
}

/* PODROBNOSTI DNEVA (odprejo se s klikom na dan) */

.podrobnosti {
	display: none;
}

.podrobnosti:target {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 10;
	background-color: rgba(30, 40, 60, 0.55);
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 2em 0.5em;
}

.podrobnosti .okno {
	position: relative;
	background-color: white;
	width: 100%;
	max-width: 46em;
	padding: 1em 1.2em 1.2em;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.podrobnosti h3 {
	margin: 0 1.5em 0.6em 0;
	font-size: 1.4em;
	color: #333;
}

.zapri {
	position: absolute;
	top: 0.3em;
	right: 0.6em;
	font-size: 1.8em;
	color: #777;
}

.podrobnosti p {
	margin: 0.3em 0;
}

/* Ponoči sta v vrstici Sonca dve vrstici: večer in jutro. */
.podrobnosti [data-polje="sonce"] {
	white-space: pre-line;
}

.podrobnosti .luna-vrstica svg {
	width: 1.4em;
	height: 1.4em;
	vertical-align: -0.4em;
	margin-right: 0.3em;
}

table.seznam {
	width: 100%;
	border-collapse: collapse;
	margin: 0.8em 0;
}

table.seznam th {
	text-align: left;
	background-color: #dbdbdb;
	font-weight: normal;
	color: #333;
	padding: 3px 0.5em;
}

table.seznam td {
	border-bottom: 1px solid #e3e3e3;
	padding: 3px 0.5em;
	vertical-align: top;
}

table.seznam tr.ni td {
	color: #aaa;
}

table.seznam tr.m td.stanje,
table.seznam tr.d td.stanje {
	color: #a06a00;
}

/* Časovni trak */

.trak {
	position: relative;
	margin: 1em 0 0.3em;
	font-size: 90%;
	overflow: hidden;
}

/* Ure so nad nebom na beli podlagi, da so berljive v vseh barvnih shemah. */
.trak .ure {
	position: relative;
	height: 1.4em;
	background-color: white;
}

.trak .ura {
	position: absolute;
	top: 0.1em;
	transform: translateX(-50%);
	color: #777;
	font-size: 85%;
}

.trak .ura::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 1.3em;
	height: 100vh;
	border-left: 1px dotted rgba(255, 255, 255, 0.25);
}

.trak .vrsta {
	position: relative;
	height: 1.35em;
	margin: 0.15em 0;
}

.trak .vrsta:last-child {
	margin-bottom: 0;
	border-bottom: 0.3em solid transparent;
}

.trak .vrsta span {
	position: absolute;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 90%;
	line-height: 1.35em;
	padding-left: 0.3em;
}

.trak .vrsta span.planet {
	background-color: var(--planet);
	color: var(--planet-besedilo);
}

.trak .vrsta span.globoko {
	background-color: var(--globoko);
	color: var(--globoko-besedilo);
}

.trak .vrsta span.luna {
	background-color: #eeeeee;
	color: #333;
}

/* Oznaka objekta je besedilo na začetku prvega dela. Če je del preozek,
   jo koledar.js prestavi zraven njega (razred "zunaj"). */
.trak .vrsta span.nalepka {
	z-index: 1;
	background: none;
	color: var(--globoko-besedilo);
	pointer-events: none;
}

.trak .vrsta span.nalepka.planet {
	color: var(--planet-besedilo);
}

.trak .vrsta span.nalepka.luna {
	color: #333;
}

.trak .vrsta span.nalepka.moteno {
	color: var(--glavna-svetla);
}

.trak .vrsta span.nalepka.zunaj {
	color: var(--glavna-svetla);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

.trak .vrsta span.globoko.m {
	background: repeating-linear-gradient(45deg, rgba(var(--globoko-moteno), 0.35) 0 4px,
		rgba(var(--globoko-moteno), 0.15) 4px 8px);
	color: var(--glavna-svetla);
}

/* Flex, da se legenda prelomi tudi brez presledkov med postavkami
   (zjutraj jih koledar.js prerazporedi). */
.trak-legenda {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.8em;
	font-size: 85%;
	color: #777;
}

.trak-legenda i {
	font-style: normal;
	white-space: nowrap;
}

.trak-legenda i::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	vertical-align: -0.1em;
	margin-right: 0.25em;
	border-radius: 2px;
}

.trak-legenda i.nebo-dan::before { background-color: var(--nebo-dan); }
.trak-legenda i.nebo-civilni::before { background-color: var(--nebo-civilni); }
.trak-legenda i.nebo-navticni::before { background-color: var(--nebo-navticni); }
.trak-legenda i.nebo-astronomski::before { background-color: var(--nebo-astronomski); }
.trak-legenda i.nebo-noc::before { background-color: var(--nebo-noc); }

.listanje {
	display: flex;
	justify-content: space-between;
	margin-top: 0.8em;
}

footer {
	max-width: 60em;
	margin: 0 auto 2em;
	padding: 0 0.5em;
	font-size: 85%;
	color: #999;
}

/* OZKI ZASLONI: tabelo prikažemo kot seznam dni */

@media only screen and (max-width: 600px) {
	table.mesec, table.mesec tbody, table.mesec tr, table.mesec td {
		display: block;
		width: 100%;
	}

	table.mesec thead {
		display: none;
	}

	table.mesec td {
		height: auto;
		border-width: 0 0 1px 0;
	}

	table.mesec td.prazen {
		display: none;
	}

	table.mesec td > a {
		min-height: 0;
	}

	.dan i {
		display: inline;
	}

	#nacin {
		font-size: 1.1em;
	}

	/* Obdobje v svoji vrstici, pod njim povezavi levo in desno. */
	#listanje-mesecev {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 1.1em;
		padding: 0 0.5em;
	}

	#listanje-mesecev b {
		order: -1;
		flex-basis: 100%;
		margin-bottom: 0.2em;
	}

	#listanje-mesecev a {
		padding: 0;
	}

	/* Glave tabele tu ni, zato poudarimo vrstico z dnevom. */
	table.mesec td.poudarjen .dan {
		background-color: var(--poudarek);
		border-radius: 3px;
		padding: 0 0.3em;
		margin-left: -0.3em;
	}

	table.mesec td.preteklo {
		background-color: #e4e4e4;
	}
}

@media print {
	header {
		background-color: white;
		color: black;
	}

	header h1, header p, #listanje-mesecev b {
		color: black;
	}

	#nacin, #listanje-mesecev a, #izbira, #branje-danes, #pojasnilo {
		display: none;
	}

	table.mesec {
		page-break-inside: avoid;
	}

	table.mesec td.preteklo {
		opacity: 1;
	}
}