/*
Theme Name: Notizbuch
Description: Ein persönliches Blog-Theme im Geist der frühen Blogger-Jahre: freundlich, gut lesbar, mit Eigenheiten. Block-Theme (Full Site Editing) ohne Build-Schritt, Schriften lokal eingebunden.
Author: Martin
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: notizbuch
*/

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */

:root {
	--nb-f-anzeige: var(--wp--preset--font-family--young-serif);
	--nb-f-lesen: var(--wp--preset--font-family--literata);
	--nb-f-ui: var(--wp--preset--font-family--figtree);
	--nb-radius: 20px;
	--nb-punkte: color-mix(in srgb, var(--wp--preset--color--himmel) 88%, var(--wp--preset--color--tinte) 12%);
	--nb-feld: color-mix(in srgb, var(--wp--preset--color--himmel) 70%, var(--wp--preset--color--tinte) 30%);
	--nb-zettel-tinte: var(--wp--preset--color--zettelschrift);
}

body {
	background-image: radial-gradient(circle, var(--nb-punkte) 1px, transparent 1.5px);
	background-size: 18px 18px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 3px;
}

/* Rahmen: Kopf und Blatt bilden eine Karte */
.wp-block-group.nb-rahmen > * {
	margin-block: 0;
}

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */

.wp-block-group.nb-masthead {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	background: var(--wp--preset--color--kopf);
	border-radius: var(--nb-radius) var(--nb-radius) 0 0;
	padding: 44px clamp(20px, 5vw, 48px) 0;
	box-sizing: border-box;
}

.nb-masthead::before {
	content: "";
	position: absolute;
	right: -90px;
	top: -110px;
	width: 290px;
	height: 290px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--marker) 38%, transparent);
	pointer-events: none;
}

.nb-masthead::after {
	content: "";
	position: absolute;
	right: -50px;
	top: -70px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--wp--preset--color--marker);
	pointer-events: none;
}

.wp-block-group.nb-masthead > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.nb-masthead :focus-visible {
	outline-color: var(--wp--preset--color--marker);
}

.nb-eyebrow {
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--marker);
}

.nb-masthead .wp-block-site-title {
	font-family: var(--nb-f-anzeige);
	font-size: var(--wp--preset--font-size--logo);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--papier);
}

.nb-masthead .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.nb-masthead .wp-block-site-tagline {
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	color: var(--wp--preset--color--kopfleise);
}

/* Menü */
.wp-block-group.nb-masthead > .nb-nav {
	margin-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--papier) 16%, transparent);
}

.nb-nav .wp-block-navigation__container {
	column-gap: 28px;
	row-gap: 0;
}

/* Die Selektoren verdoppeln die Klasse bewusst: Der Kern setzt
   „.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content“
   auf color: inherit, und das soll hier nicht gewinnen. */
.wp-block-navigation.nb-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	padding: 16px 0 13px;
	border-bottom: 3px solid transparent;
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--kopftext);
}

.wp-block-navigation.nb-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--marker);
}

.wp-block-navigation.nb-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--papier);
	border-bottom-color: var(--wp--preset--color--marker);
}

/* ------------------------------------------------------------------
   Blatt (weiße Lesefläche) und Spalten
   ------------------------------------------------------------------ */

.wp-block-group.nb-blatt {
	background: var(--wp--preset--color--papier);
	border-radius: 0 0 var(--nb-radius) var(--nb-radius);
	padding: clamp(24px, 5vw, 56px);
	box-sizing: border-box;
}

.wp-block-columns.nb-spalten {
	gap: 56px;
	margin: 0;
}

.nb-spalten > .wp-block-column {
	min-width: 0;
}

@media (max-width: 781px) {
	.wp-block-columns.nb-spalten {
		gap: 48px;
	}
}

.wp-block-group.nb-lesespalte > * + * {
	margin-top: 64px;
}

/* ------------------------------------------------------------------
   Einträge in der Liste
   ------------------------------------------------------------------ */

.nb-schleife .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.nb-schleife .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.nb-schleife .wp-block-post-template > li > * {
	margin: 0;
}

.nb-schleife .nb-text {
	max-width: 36em;
}

/* Datumszeile mit Textmarker */
.nb-datum {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--nb-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinte);
}

.nb-datum time {
	padding: 0 4px;
	background: linear-gradient(
		transparent 58%,
		var(--wp--preset--color--marker) 58%,
		var(--wp--preset--color--marker) 92%,
		transparent 92%
	);
}

.nb-datum::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--linie);
}

/* Titel */
.nb-titel {
	margin: 0;
	font-family: var(--nb-f-anzeige);
	font-size: var(--wp--preset--font-size--beitragstitel);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
	color: var(--wp--preset--color--tinte);
}

.nb-titel a {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.nb-titel a:hover {
	color: var(--wp--preset--color--ziegel);
}

/* Zeile unter dem Eintrag */
.nb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--gedaempft);
}

.nb-meta > * {
	margin: 0;
}

.nb-meta > * + *::before {
	content: "·";
	display: inline-block;
	margin-right: 14px;
}

/* Seitenwechsel */
.wp-block-query-pagination.nb-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 72px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-family: var(--nb-f-ui);
	font-size: 14.5px;
	font-weight: 600;
}

.nb-pager .wp-block-query-pagination-previous::before {
	content: "‹ ";
}

.nb-pager .wp-block-query-pagination-next {
	margin-left: auto;
}

.nb-pager .wp-block-query-pagination-next::after {
	content: " ›";
}

/* Archiv- und Suchtitel */
.nb-archivtitel {
	margin: 0 0 56px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

/* ------------------------------------------------------------------
   Inhalt der Beiträge
   ------------------------------------------------------------------ */

.nb-text ul,
.nb-text ul.wp-block-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.nb-text ul > li {
	position: relative;
	padding-left: 25px;
}

.nb-text ul > li + li {
	margin-top: 0.7em;
}

.nb-text ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--marker);
}

.nb-text ol {
	padding-left: 1.4em;
}

.nb-text ol > li + li {
	margin-top: 0.7em;
}

.nb-text figure {
	margin-block: 1.4em;
}

.nb-text img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.nb-text figcaption,
.wp-block-image figcaption {
	margin-top: 12px;
	font-style: italic;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--gedaempft);
}

.nb-text strong {
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}

/* Zitat als Zettel-Satz mit gelbem Anführungszeichen */
.nb-text .wp-block-quote {
	margin: 1.6em 0;
	padding: 0;
	border: 0;
	font-family: var(--nb-f-anzeige);
	font-size: clamp(22px, 3.2vw, 27px);
	line-height: 1.35;
	color: var(--wp--preset--color--tinte);
}

.nb-text .wp-block-quote::before {
	content: "„";
	display: block;
	height: 0.45em;
	margin-bottom: 12px;
	font-family: var(--nb-f-anzeige);
	font-size: 72px;
	line-height: 0.6;
	color: var(--wp--preset--color--marker);
}

.nb-text .wp-block-quote p {
	margin: 0;
	text-wrap: balance;
}

.nb-text .wp-block-quote p:last-of-type::after {
	content: "“";
}

.nb-text .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	font-style: normal;
	font-weight: 500;
	color: var(--wp--preset--color--gedaempft);
}

.nb-text .wp-block-separator {
	width: 72px;
	margin: 2em auto;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--marker);
}

/* ------------------------------------------------------------------
   Einzelansicht und Seiten
   ------------------------------------------------------------------ */

.wp-block-group.nb-einzel,
.wp-block-group.nb-seite {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.nb-einzel > *,
.nb-seite > * {
	margin: 0;
}

.nb-einzel .nb-titel,
.nb-seite .nb-titel {
	font-size: var(--wp--preset--font-size--seitentitel);
	line-height: 1.1;
}

.nb-einzel .nb-text,
.nb-seite .nb-text {
	font-size: 19px;
	line-height: 1.75;
}

/* Initiale: nur bei langen Texten (functions.php setzt dann die Klasse nb-lang)
   und mit etwas Luft zum Titel */
.nb-text.nb-lang {
	padding-top: 22px;
}

.nb-text.nb-lang > p:first-child::first-letter {
	float: left;
	padding: 0.06em 0.1em 0 0;
	font-family: var(--nb-f-anzeige);
	font-size: 3.6em;
	line-height: 0.8;
	color: var(--wp--preset--color--tinte);
}

.nb-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
}

.nb-zurueck {
	align-self: flex-start;
	font-family: var(--nb-f-ui);
	font-size: 14px;
	font-weight: 600;
}

.wp-block-group.nb-einzelnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-family: var(--nb-f-ui);
	font-size: 14.5px;
	font-weight: 600;
}

.nb-einzelnav .post-navigation-link-previous a::before {
	content: "‹ ";
}

.nb-einzelnav .post-navigation-link-next {
	margin-left: auto;
}

.nb-einzelnav .post-navigation-link-next a::after {
	content: " ›";
}

/* ------------------------------------------------------------------
   Kommentare
   ------------------------------------------------------------------ */

.wp-block-group.nb-kommentare > * + * {
	margin-top: 40px;
}

.nb-kommentare .wp-block-comments-title {
	margin: 0 0 24px;
	font-family: var(--nb-f-anzeige);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}

.nb-kommentare .wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.nb-kommentare .wp-block-comment-template li {
	list-style: none;
}

.nb-kommentare .wp-block-comment-template > li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--linie);
}

.nb-kommentare .wp-block-comment-template > li > * {
	margin: 0;
}

.nb-kommentar-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.nb-kommentar-kopf > * {
	margin: 0;
}

.nb-kommentare .wp-block-comment-author-name {
	font-family: var(--nb-f-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}

.nb-kommentare .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.nb-kommentare .wp-block-comment-date {
	font-family: var(--nb-f-ui);
	font-size: 13px;
	color: var(--wp--preset--color--gedaempft);
}

.nb-kommentare .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

.nb-kommentare .wp-block-comment-content {
	font-size: 17px;
	line-height: 1.65;
}

.nb-kommentare .wp-block-comment-content p {
	margin: 0;
}

.nb-kommentare .wp-block-comment-reply-link {
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

/* Formular */
.nb-kommentare .wp-block-post-comments-form,
.nb-kommentare .wp-block-comments-pagination {
	margin-top: 48px;
}

.wp-block-post-comments-form .comment-reply-title {
	margin: 0 0 20px;
	font-family: var(--nb-f-anzeige);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}

.wp-block-post-comments-form .comment-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wp-block-post-comments-form .comment-form > p {
	margin: 0;
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .logged-in-as {
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}

.wp-block-post-comments-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--nb-feld);
	border-radius: 8px;
	background: var(--wp--preset--color--papier);
	font-family: var(--nb-f-lesen);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.wp-block-post-comments-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 500;
}

.wp-block-post-comments-form input[type="submit"] {
	min-height: 46px;
	cursor: pointer;
}

/* Suche */
.nb-suche .wp-block-search__inside-wrapper {
	gap: 10px;
}

.nb-suche .wp-block-search__input {
	width: auto;
	flex: 1;
}

/* ------------------------------------------------------------------
   Seitenleiste
   ------------------------------------------------------------------ */

.wp-block-template-part.nb-seitenleiste {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.nb-seitenleiste > * {
	margin: 0;
}

.nb-abschnitt {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nb-abschnitt > * {
	margin: 0;
}

.nb-abschnitt p {
	font-size: var(--wp--preset--font-size--seitlich);
	line-height: 1.6;
}

.nb-rubrik {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--etikett);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinte);
}

.nb-portrait {
	margin: 0;
}

.nb-portrait img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 16px;
}

.nb-mehr {
	font-family: var(--nb-f-ui);
	font-size: 14px;
	font-weight: 600;
}

/* Der Zettel „Zur Zeit“ */
.wp-block-group.nb-zettel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 20px 22px;
	border-radius: 4px;
	background: var(--wp--preset--color--zettel);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--wp--preset--color--tinte) 8%, transparent),
		0 10px 20px -12px color-mix(in srgb, var(--wp--preset--color--tinte) 40%, transparent);
	transform: rotate(-0.6deg);
}

.nb-zettel > * {
	margin: 0;
}

.nb-zettel .nb-rubrik {
	padding: 0;
	border: 0;
	color: var(--nb-zettel-tinte);
}

.nb-paar {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.nb-paar > * {
	margin: 0;
}

.nb-etikett {
	font-family: var(--nb-f-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--nb-zettel-tinte);
}

.nb-wert {
	font-style: italic;
	font-size: var(--wp--preset--font-size--seitlich);
	line-height: 1.45;
	color: var(--wp--preset--color--tinte);
}

/* Listen in der Seitenleiste */
.nb-liste-klein,
.nb-linkliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nb-liste-klein li,
.nb-linkliste li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--seitlich);
	line-height: 1.4;
}

.nb-liste-klein a {
	text-decoration: none;
}

.nb-liste-klein a:hover {
	text-decoration: underline;
}

.nb-liste-klein.wp-block-archives-list,
.nb-linkliste {
	gap: 8px;
}

.nb-liste-klein time {
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--etikett);
	color: var(--wp--preset--color--gedaempft);
}

.nb-linkliste {
	font-style: italic;
	color: var(--wp--preset--color--gedaempft);
}

/* ------------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------------ */

.wp-block-group.nb-fuss {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-family: var(--nb-f-ui);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}

.nb-fuss > * {
	margin: 0;
}