/*
Theme Name: MJDiary
Template: twentytwentyfive
Description: Book view for mjdiary.com: paper, Literata for text, Jost for headings. Child theme of Twenty Twenty-Five.
Version: 1.1.4
Author: Scooch Media
Requires at least: 6.9
Text Domain: mjdiary-theme
*/

/* ------------------------------------------------------------------ */
/* WERTE – the only place with colours and paper (see theme.json for   */
/* the palette, fonts, sizes and spacings). A second view later only   */
/* needs a second set of these values, e.g. [data-ansicht="modern"].   */
/* ------------------------------------------------------------------ */
:root {
	--mjd-papier-muster:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .35 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .36 0 0 0 0 .14 .32 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
	--mjd-papier-rand: radial-gradient(ellipse at center, transparent 55%, rgba(110, 80, 35, .16) 100%);

	/* Values of the MJ Diary plugin, taken from the palette. */
	--mjd-accent: var(--wp--preset--color--gruen);
	--mjd-accent-ink: var(--wp--preset--color--weiss);
	--mjd-noinfo: var(--wp--preset--color--papier-dunkel);
	--mjd-noinfo-ink: var(--wp--preset--color--tinte);
	--mjd-empty-ink: var(--wp--preset--color--tinte-2);
	--mjd-ink-2: var(--wp--preset--color--tinte-2);
	--mjd-line: var(--wp--preset--color--linie);
	--mjd-sheet: transparent;
	--mjd-sheet-border: transparent;
	--mjd-sheet-shadow: none;
	--mjd-font-label: var(--wp--preset--font-family--jost);
	--mjd-space-1: var(--wp--custom--abstand--1);
	--mjd-space-2: var(--wp--custom--abstand--2);
	--mjd-space-3: var(--wp--custom--abstand--3);
	--mjd-space-4: var(--wp--custom--abstand--4);
	--mjd-space-5: var(--wp--custom--abstand--5);
	--mjd-space-6: var(--wp--custom--abstand--6);
}

/* ------------------------------------------------------------------ */
/* Paper                                                               */
/* ------------------------------------------------------------------ */
body {
	background-image: var(--mjd-papier-muster);
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--mjd-papier-rand);
}
/* "Increase contrast": plain paper without grain, fibres and edges. */
@media (prefers-contrast: more) {
	body { background-image: none; }
	body::before { display: none; }
}

/* ------------------------------------------------------------------ */
/* Text                                                                */
/* ------------------------------------------------------------------ */
a { text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--wp--preset--color--akzent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--wp--preset--color--papier-dunkel); }

/* ------------------------------------------------------------------ */
/* Page frame                                                          */
/* ------------------------------------------------------------------ */
.mjd-seite {
	padding-top: var(--wp--custom--abstand--7);
	padding-bottom: var(--wp--custom--abstand--8);
}

/* Header: name left, menu in the middle, language right; no menu icon.
   On a phone: name and language in the first row, menu centred below. */
.mjd-kopf {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "name menu sprache";
	align-items: center;
	gap: var(--wp--custom--abstand--3) var(--wp--custom--abstand--5);
	/* Same column as the text, like a book page. */
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--abstand--4));
	margin-inline: auto;
	padding: var(--wp--custom--abstand--5) var(--wp--custom--abstand--4);
}
.mjd-kopf .wp-block-site-tagline { margin-top: var(--wp--custom--abstand--1); }
.mjd-kopf__name { grid-area: name; }
.mjd-kopf__name > * { margin: 0; }
.mjd-kopfnav { grid-area: menu; justify-content: center; }
.mjd-kopfsprache { grid-area: sprache; justify-self: end; }
.mjd-kopfnav,
.mjd-kopfsprache {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--custom--abstand--2);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: var(--wp--custom--laufweite--klein);
}
.mjd-kopfnav a,
.mjd-kopfsprache a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--custom--abstand--2);
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}
.mjd-kopfnav a:hover,
.mjd-kopfsprache a:hover { color: var(--wp--preset--color--akzent); }
.mjd-kopfsprache a { gap: var(--wp--custom--abstand--2); }
.mjd-kopfsprache img { width: 1.25rem; height: auto; }
/* Phone: name and language in the first row, below one slim menu row across the full width
   (no menu icon while there are only a few pages). */
@media (max-width: 600px) {
	.mjd-kopf {
		grid-template-columns: 1fr auto;
		grid-template-areas: "name sprache" "menu menu";
		gap: var(--wp--custom--abstand--2) var(--wp--custom--abstand--3);
		padding-top: var(--wp--custom--abstand--4);
		padding-bottom: 0;
	}
	.mjd-kopfnav {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: var(--wp--custom--abstand--3);
		border-top: 1px solid var(--wp--preset--color--linie);
		border-bottom: 1px solid var(--wp--preset--color--linie);
	}
	.mjd-kopfnav a { padding: 0 var(--wp--custom--abstand--1); white-space: nowrap; }
	.mjd-seite { padding-top: var(--wp--custom--abstand--6); }
}
.mjd-kopfnav a[aria-current="page"] { color: var(--wp--preset--color--akzent); }

/* Footer: links in the page language, then the copyright line. */
.mjd-fuss {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding: var(--wp--custom--abstand--6) var(--wp--custom--abstand--4) var(--wp--custom--abstand--7);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: var(--wp--custom--laufweite--klein);
}
.mjd-fuss__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--custom--abstand--5);
	margin-block: 0 var(--wp--custom--abstand--4);
	padding: 0;
}
.mjd-fuss__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--tinte);
}
.mjd-fuss__copy { margin-block: 0; color: var(--wp--preset--color--tinte-2); }

/* Day and month pages: the plugin's date line sits closer to the headline. */
.mjd-seite .wp-block-post-title + .wp-block-post-content > .mjd-dayinfo:first-child .mjd-dayinfo__meta { margin-top: calc(-1 * var(--wp--custom--abstand--3)); }