/* Bo Krantz Simonsen, boks@kb.dk, 2025
   Stylesheet for EPUB3
*/

:root {
	--indent1: 1.2rem;
	--indent2: 2.4rem;
	--link-color: #2168cd;
	--button-background: rgb(227, 226, 220);
	--tooltip-hover-background: rgb(200, 200, 200);
	--button-hover-background: #000;
	--button-hover-color: #fff;
}


@font-face {
	font-family: 'Noto Music';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	X-src: url(../font/NotoMusic-Regular.ttf) format('truetype');
	src: url(../font/NotoMusic-Regular.woff2) format('woff2');
	unicode-range: U+25CC, U+2669-266F, U+1D000-1D0F5, U+1D100-1D126, U+1D129-1D1EA, U+1D200-1D245;
}

html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
.nobr {
	white-space: nowrap;
}

.r {
	text-align: right;
}
.center {
	text-align: center;
}
.caps {
	font-variant: small-caps;
}
.warn {
	color: #f00;
}
a, a:visited {
	color: var(--link-color);
}
span.music,
span.music-low,
span.music-low2 {
	font-family: Noto Music, serif;
	font-size: 150%;
}
span.music-low {
	position: relative;
	top: .3em;
}
span.music-low2 {
	position: relative;
	top: .4em;
}

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, sans-serif;
	font-size: 13pt;
	color: #000;
	background-color: rgb(247 246 240);
	overflow-y: scroll; /* scroll bar always visible to avoid jumping buttons on righthand side */
}

h1 {
	font-size: 20pt;
}
body > header {
    display: flex;
    gap: .6em;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 16px;
	padding: 1rem;
	background-color: rgb(247 246 240);
}

body > header nav {
	float: right;
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	align-items: stretch;
}
@media (min-width: 801px) {
	body > header {
		position: sticky;
		top: 0;
	}
	body > header nav {
		flex-wrap: nowrap;
	}
}
body > header nav a span[lang=en] {
	display: none;
}
body[lang=en] > header nav a span[lang=da] {
	display: none;
}
body[lang=en] > header nav a span[lang=en] {
	display: inline;
}

body > header nav a,
body > header nav a:visited,
#pre a:is(.tback, .tforw),
#pre a:is(.tback, .tforw):visited {
	border-radius: 5px;
	border: 1px solid #aaa;
	background-color:  var(--button-background);
	color: var(--link-color);
	text-align: center;
	text-decoration: none;
	font-size: 14pt;
	padding: 0 .2em 0 .2em;
}
body > header nav a, body > header nav a:visited {
	display: flex;
	align-items: center;
}
#pre a:is(.tback, .tforw) {
	display: inline-block;
	font-size: 90%;
	padding: .2em .3em;
}
#pre a.tback {
	margin-right: .3rem;
}

body > header nav a:hover,
#pre a:is(.tback, .tforw):hover {
	text-decoration: none;
	background-color: var(--button-hover-background);
	color: var(--button-hover-color);
}
body > header nav a img {
	width: 22px;
}

body > header nav a:is(#toggleDa, #toggleEn), header nav a:is(#toggleDa, #toggleEn):visited {
	font-size: 12pt;
}
body.daOn nav a#toggleDa {
	background-color: #fcc;
}
body > header nav a#toggleNotes span {
	font-size: 10pt;
}

body.hideDA > header nav a#toggleDa,
body:not(.showEN) > header nav a#toggleEn,
body:not(.showFacs) > header nav a#toggleFacs,
body.hideNotes > header nav a#toggleNotes {
	position: relative;
	overflow: hidden; /* hide overflow of pseudo elements */
}
body.hideDA > header nav a#toggleDa::before,
body:not(.showEN) > header nav a#toggleEn::before,
body:not(.showFacs) > header nav a#toggleFacs::before,
body.hideNotes > header nav a#toggleNotes::before {
	position: absolute;
	content: '';
	background: #888;
	display: block;
	width: 100%;
	height: 2px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
body > header nav a#toggleFacs:hover img {
	filter: brightness(997%); /* from blue to white */
}

main header {
    display: flex;
    gap: .6em;
	align-items: flex-start;
}

main #da a[href^="http"]::after,
main #en a[href^="http"]::after { /* icon after external link */
	content: '';
	width: .8em;
	height: .8em;
	margin-left: .3em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232168cd' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}
a.noExtIcon[href^="http"]::after { /* no icon after external link */
	width: auto;
	height: auto;
	margin-left: 0;
	background-image: none;
}

body > header div.meta {
	display: flex;
	gap: .6em;
	flex-wrap: wrap;
	align-items: start;
}

body > header div.meta > * {
	border-radius: 5px;
	background-color: var(--button-background);
	display: inline-block;
	padding: .2em .3em;
}
body > header div.meta > div.meta-input {
	border: 1px solid #aaa;
	cursor: pointer;
	color: var(--link-color);
}
body > header div.meta > div.meta-input:hover {
	color: var(--button-hover-color);
	background-color: var(--button-hover-background);
}
body > header div.meta > div > input {
	width: 7ch;
}

/*--- text translations through CSS ---*/
body div.meta .mVol::before {
	content: 'Bind: ';
}
body[lang=en] div.meta .mVol::before {
	content: 'Volume: ';
}
body div.meta .mNumber::before {
	content: 'Nummer: ';
}
body div.meta .mType::before {
	content: 'Type: ';
}
body div.meta .mName::before {
	content: 'Navn: ';
}
body[lang=en] div.meta .mName::before {
	content: 'Name: ';
}
body div.meta .mFrom::before {
	content: 'Fra: ';
}
body[lang=en] div.meta .mFrom::before {
	content: 'From: ';
}
body div.meta .mTo::before {
	content: 'Til: ';
}
body[lang=en] div.meta .mTo::before {
	content: 'To: ';
}
body div.meta .mDate::before {
	content: 'Dato: ';
}
body[lang=en] div.meta .mDate::before {
	content: 'Date: ';
}
body[lang=en] div.meta .mNumber::before {
	content: 'Number: ';
}
body div.meta .mArch::before {
	content: 'Arkiv: ';
}
body[lang=en] div.meta .mArch::before {
	content: 'Archive: ';
}
/*--- end CSS translations ---*/

body div.meta div[lang=en] {
	display: none;
}
body[lang=en] div.meta div[lang=da] {
	display: none;
}
body[lang=en] div.meta div[lang=en] {
	display: block;
}


main {
	padding: 0 1rem 1.2em 1rem;
}
main > section#content {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-family: Times New Roman, serif;
}
@media (max-width: 800px) {
	main > section#content {
		flex-direction: column;
	}
}
@media (min-width: 801px) {
	main > section#content > div {
		min-height: 300px;
	}
}

body #en, body #facs {
	display: none;
}
body.hideDA #da {
	display: none;
}
body.showEN #en {
	display: block;
}
body.showFacs #facs {
	display: block;
}
div#da, div#en, div#facs {
	flex: 1;
	padding: 1rem;
	max-width: 900px;
	border: 1px solid #888;
	border-radius: 5px;
	background-color: #fff;
}

body:not(:has(#facs)) header nav a#toggleFacs {
	display: none; /* hide facsimile on/off button if there is no facsimile element */
}


div#facs {
	font-family: Helvetica, sans-serif;
	font-size: .9rem;
}
div#facs div {
	margin-bottom: 2em;
}
div#facs:not([data-facs="missing"]) {
	padding: 2px;
}
div#facs:has(img.noFacs) {
	text-align: center;
}
div#facs img {
	width: 100%;
}
div#facs img.noFacs {
	width: 10%;
	min-width: 70px;
}
body div#facs [lang=en] {
	display: none;
}
body[lang=en] div#facs [lang=da] {
	display: none;
}
body[lang=en] div#facs [lang=en] {
	display: block;
}


#content p {
	font-family: Georgia;
	font-size: 14px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: .3em;
	text-indent: 2rem;
}
#content p.noNormal {
	text-indent: 0;
}
#content p.ti span{
	margin-right: .5em;
}
#content p.red,
#content p.rf {
	font-size: 90%;
	text-indent: 0;
	color: #333333;
}

#content p.normalair {
	margin-left: 3em;
	text-indent: 0;
}
#content p.sign {
	text-align: right;
	margin-right: 3rem;
	margin-bottom: 0;
	text-indent: 0;
}
#content p.titlePageHeading1 {
	font-size: 36px;
	line-height: 48px;
	text-transform: uppercase;
	text-indent: 0;
}

#content p.titlePageHeading2 {
	font-size: 18px;
	line-height: 24px;
	text-transform: uppercase;
	text-indent: 0;
}

#content p.titlePageHeading3 {
	font-size: 24px;
	line-height: 36px;
	font-style: italic;
	text-indent: 0;
}

#content p.titlePage {
	margin-bottom: 24px;
	text-indent: 0;
}

#content p:is(.ti, .nf, .BILLEDTEKST, .BT) {
	text-indent: 0;
}
#content p:is(.BILLEDTEKST, .BT) {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 800px) {
	#content p:has( > img) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

#content table {
	width: 90%;
}

#content td {
	vertical-align: top;
}
#content td.right {
	text-align: right;
}
#content td.footnote {
	font-size: 11px;
	line-height: 18px;
	padding: 0px;
	text-align: left;
	vertical-align: top;
}
#content .box {
	border-radius: 5px;
	background-color: #eee;
	padding: .5em;
}
#content .box p {
	text-indent: 0;
}
#content a[href^=cnw],
#content a.cnw-ref {
	white-space: nowrap;
	font-size: 80%;
}
#content #da img,
#content #en img {
	max-width: 100%;
	object-fit: scale-down;
}

span.square {
	background-color: #ddeeff;
	color: #000;
}
span.nobr {
	white-space: nowrap;
}
span.underline {
	text-decoration: underline;
}
span.linethrough {
	text-decoration: line-through;
}

sup {
	font-size: 80%;
}
sup.age {
	font-size: 70%;
	vertical-align: top;
	cursor: help;
}
sup.age:hover {
	background-color: var(--button-hover-background);
	color: var(--button-hover-color);
}
body sup.age::after {
	content: ' år';
}
body[lang=en] sup.age::after {
	content: ' y.o.';
}

span.note { /* note in running text */
	display: block;
	border: 1px solid #888;
	border-radius: 5px;
	margin-left: 2em;
	padding: .3em;
	margin: .3em 2em;
	text-align: left;
	text-indent: 0;
}
span.note::before {
	content: 'Note: ';
	color: #888;
	font-family: Helvetica, sans-serif;
}
body.hideNotes span.note {
	display: none;
}
body.hideNotes span.note::before {
	content: '';
}

aside {
	padding-top: 1.2rem;
}
aside a, aside a:visited {
	text-decoration: none;
	color: var(--link-color);
}
aside a:hover {
	text-decoration: none;
	color: var(--button-hover-color);
	background-color: var(--button-hover-background);
}
div.persons + div.works {
	margin-top: .2em;
}
div.persons > *, div.works > * {
	display: inline-block;
}
body div.persons > *:first-child::before {
	content: 'Personer: ';
	color: #888;
	padding-right: .3em;
}
body[lang=en] div.persons > *:first-child::before {
	content: 'People: ';
}
body div.works > *:first-child::before {
	content: 'Værker: ';
	color: #888;
	padding-right: .3em;
}
body[lang=en] div.works > *:first-child::before {
	content: 'Works: ';
}
div.persons > *:not(:last-child)::after,
div.works > *:not(:last-child)::after {
	content: ',\00A0 ';
}
body span.regPersons::before {
	content: 'Registerpersoner: ';
	color: #888;
	padding-right: .3em;
}
body[lang=en] span.regPersons::before {
	content: 'Register persons: ';
}
body a.linkPersonReg::before {
	content: 'Se personregister';
}
body[lang=en] a.linkPersonReg::before {
	content: 'See person register';
}
body a.linkWorkReg::before {
	content: 'Se værkregister';
}
body[lang=en] a.linkWorkReg::before {
	content: 'See work register';
}

/* previous/next thread links */
#pre *:is(.tback, .tforw) {
}
body #pre *:is(.tback, .tforw) > [lang=en] {
	display: none;
}
body[lang=en] #pre *:is(.tback, .tforw) > [lang=da] {
	display: none;
}
body[lang=en] #pre *:is(.tback, .tforw) > [lang=en] {
	display: inline;
}