/*
 * Blatt (Beiträge und normale Seiten, Body-Klasse studio-sheet aus inc/pages.php): Text auf liniertem Papier
 * (Zeilenhöhe = Linienabstand, Absätze genau eine Zeile Abstand, blauer Rand), Formulare als Felder auf dem Papier,
 * Kommentarformular als Karteikarte. Beiträge setzen rechts den Steckbrief daneben (studio-article.css).
 * Markup: Eltern-Templates page, single-post, single-audio-blog.
 */

/* ---------- Blatt: Schrift sitzt auf den Linien ---------- */
.studio-sheet main#main-page .wp-block-group.default-box-shadow:has(> .wp-block-post-content) {
	--studio-line-h: 1.95rem;
	--studio-margin: clamp(2.25rem, 5vw, 4rem);
	position: relative;
	isolation: isolate;
	margin: 0 0 var(--wp--preset--spacing--60, 2.5rem);
	padding: calc(var(--studio-line-h) * 1.5) clamp(1.25rem, 4vw, 3rem) var(--studio-line-h) var(--studio-margin) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--studio-paper-ink);
	box-shadow: none !important;
	filter: drop-shadow(0 20px 26px oklch(0% 0 0 / 0.55));
}

/* Papier mit Lineatur ab der ersten Textzeile und blauem Rand */
.studio-sheet main#main-page .wp-block-group.default-box-shadow:has(> .wp-block-post-content)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, transparent calc(var(--studio-margin) - 0.8rem), oklch(71.5% 0.135 234 / 0.45) calc(var(--studio-margin) - 0.8rem) calc(var(--studio-margin) - 0.8rem + 1px), transparent 0),
		repeating-linear-gradient(transparent 0 calc(var(--studio-line-h) - 1px), oklch(78% 0.03 240 / 0.8) calc(var(--studio-line-h) - 1px) var(--studio-line-h)) 0 calc(var(--studio-line-h) * 1.5 - 0.2rem) / 100% 100% no-repeat,
		var(--studio-crumple) 0 0 / 420px,
		var(--studio-paper);
	background-blend-mode: normal, normal, multiply, normal;
	clip-path: var(--studio-edge-a);
}

/* Tape-Streifen oben */
.studio-sheet main#main-page .wp-block-group.default-box-shadow:has(> .wp-block-post-content)::after {
	content: "";
	position: absolute;
	top: -12px;
	left: 44%;
	width: 92px;
	height: 26px;
	background: oklch(91% 0.012 95 / 0.86);
	clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%);
	rotate: 2deg;
}

.studio-sheet main#main-page .wp-block-post-content {
	max-width: 64ch;
	font-size: 1.125rem;
	line-height: var(--studio-line-h);
}

.studio-sheet main#main-page .wp-block-post-content > * { margin-block: 0 var(--studio-line-h) !important; }
.studio-sheet main#main-page .wp-block-post-content > :last-child { margin-bottom: 0 !important; }
/* Tinte statt der hellen Schrift aus dem alten Design (auch Farben, die Essential Blocks je Block setzt) */
.studio-sheet main#main-page .wp-block-post-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, strong, em, .eb-text, .has-text-color) { color: var(--studio-paper-ink) !important; }
.studio-sheet main#main-page .wp-block-post-content p:empty { display: none; }

/* Zwischentitel belegen genau eine Linie (große nehmen zwei) */
.studio-sheet main#main-page .wp-block-post-content :is(h2, h3, h4, h5, h6) {
	font-size: 1.3rem !important;
	font-weight: 800;
	line-height: var(--studio-line-h) !important;
}

.studio-sheet main#main-page .wp-block-post-content h1 {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem) !important;
	font-weight: 800;
	line-height: var(--studio-line-h) !important;
}

/* Kästen aus dem alten Design (Essential-Blocks-Rahmen, farbige Gruppen) liegen nicht mehr dunkel auf dem Papier */
.studio-sheet main#main-page .wp-block-post-content :is(.eb-wrapper-outer, .eb-wrapper-inner, .wp-block-group.has-background) {
	padding-inline: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-sheet main#main-page .wp-block-post-content a {
	color: oklch(42% 0.13 250);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.studio-sheet main#main-page .wp-block-post-content a:hover { color: oklch(32% 0.13 250); }
.studio-sheet main#main-page .wp-block-post-content img { height: auto; border-radius: 0; }

.studio-sheet main#main-page .wp-block-post-content blockquote {
	margin-inline: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--studio-brand);
	font-style: italic;
}


/* ---------- Seiten: Blatt in Lesebreite, ohne Steckbrief ---------- */
.studio-sheet.page main#main-page .wp-block-group.default-box-shadow:has(> .wp-block-post-content) { max-width: 52rem; }
.studio-sheet.page main#main-page .wp-block-post-content :is(img, iframe, video) { max-width: 100%; }

/* ---------- Formulare auf dem Blatt (Fluent Forms, Suche, eigene Felder) ---------- */
.studio-sheet main#main-page .wp-block-post-content :is(label, .ff-el-input--label label) {
	color: var(--studio-paper-ink) !important;
	font-weight: 700;
}

.studio-sheet main#main-page .wp-block-post-content :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), textarea, select) {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 1px solid oklch(70% 0.015 260) !important;
	border-radius: var(--studio-radius-s) !important;
	background: oklch(99% 0.003 250) !important;
	color: var(--studio-paper-ink) !important;
	font: 400 1rem / 1.4 var(--studio-font-text);
	box-shadow: none !important;
}

.studio-sheet main#main-page .wp-block-post-content :is(input, textarea, select)::placeholder { color: oklch(52% 0.015 260); }

.studio-sheet main#main-page .wp-block-post-content :is(input, textarea, select):focus-visible {
	outline: 2px solid var(--studio-brand);
	outline-offset: 1px;
	border-color: var(--studio-paper-ink) !important;
}

.studio-sheet main#main-page .wp-block-post-content :is(button[type="submit"], input[type="submit"], .ff-btn-submit, .wp-block-button__link) {
	min-height: 44px;
	padding: 0 1.2rem !important;
	border: 0 !important;
	border-radius: var(--studio-radius-s) !important;
	background: var(--studio-paper-ink) !important;
	color: var(--studio-paper) !important;
	font: 650 var(--studio-step-0) / 1 var(--studio-font-text) !important;
	text-decoration: none;
	cursor: pointer;
}

.studio-sheet main#main-page .wp-block-post-content :is(button[type="submit"], input[type="submit"], .ff-btn-submit, .wp-block-button__link):hover { background: oklch(32% 0.03 260) !important; }
.studio-sheet main#main-page .wp-block-post-content :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--studio-paper-ink); }
.studio-sheet main#main-page .wp-block-post-content .ff-el-is-error .text-danger { color: oklch(48% 0.19 27); }

/* ---------- Kommentarformular: Karteikarte mit roter Kopflinie, Felder auf Linien ---------- */
.studio-sheet main#main-page .comment-box {
	position: relative;
	max-width: 44rem;
	margin-block: 0 var(--wp--preset--spacing--60, 2.5rem);
	padding: 1.1rem 1.25rem 1rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background:
		linear-gradient(oklch(60% 0.17 25 / 0.75), oklch(60% 0.17 25 / 0.75)) 0 3.1rem / 100% 2px no-repeat,
		var(--studio-grain),
		var(--studio-paper-aged) !important;
	color: var(--studio-paper-ink);
	rotate: -0.4deg;
	box-shadow: 0 18px 28px -12px oklch(0% 0 0 / 0.75) !important;
}

/* Tape-Streifen oben rechts */
.studio-sheet main#main-page .comment-box::after {
	content: "";
	position: absolute;
	top: -12px;
	right: 12%;
	width: 84px;
	height: 24px;
	background: oklch(91% 0.012 95 / 0.86);
	clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%);
	rotate: -3deg;
}

.studio-sheet main#main-page .comment-box > h2 {
	margin: 0 0 1.1rem;
	color: var(--studio-paper-ink);
	font: 400 var(--studio-step-1) / 1.3 var(--studio-font-tape);
}

.studio-sheet main#main-page .comment-box .comment-reply-title { display: none; }
.studio-sheet main#main-page .comment-box :is(p, label) { color: var(--studio-paper-ink); }

.studio-sheet main#main-page .comment-box .comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem 0.75rem;
	align-items: center;
}

@media (min-width: 520px) {
	.studio-sheet main#main-page .comment-box .comment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.studio-sheet main#main-page .comment-box .comment-form > * { margin: 0; }
.studio-sheet main#main-page .comment-box .comment-form-author { order: 1; }
.studio-sheet main#main-page .comment-box .comment-form-email { order: 2; }
.studio-sheet main#main-page .comment-box .comment-form-comment { order: 3; grid-column: 1 / -1; }
.studio-sheet main#main-page .comment-box .comment-form-cookies-consent { order: 4; }
.studio-sheet main#main-page .comment-box .form-submit { order: 5; justify-self: end; }
.studio-sheet main#main-page .comment-box .comment-form > [style*="display: none"] { order: 6; }

.studio-sheet main#main-page .comment-box :is(.comment-form-author, .comment-form-email, .comment-form-comment) { display: grid; gap: 0.3rem; }

/* Das Eltern-Theme gibt Formular-Beschriftungen feste Breiten und zentriert sie */
.studio-sheet main#main-page .comment-box :is(.comment-form-author, .comment-form-email, .comment-form-comment) label {
	display: block;
	width: auto !important;
	margin: 0;
	padding: 0;
	color: var(--studio-paper-ink);
	font-size: var(--studio-step--1);
	font-weight: 700;
	text-align: left;
}

.studio-sheet main#main-page .comment-box label small { color: var(--studio-paper-ink-2); font-weight: 400; }

.studio-sheet main#main-page .comment-box :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 1px solid oklch(70% 0.015 260) !important;
	border-radius: var(--studio-radius-s) !important;
	background: oklch(99% 0.003 250) !important;
	color: var(--studio-paper-ink) !important;
	font: 400 1rem / 1.4 var(--studio-font-text);
	box-shadow: none !important;
}

.studio-sheet main#main-page .comment-box textarea { resize: vertical; }

.studio-sheet main#main-page .comment-box :is(input, textarea):focus-visible {
	outline: 2px solid var(--studio-brand);
	outline-offset: 1px;
	border-color: var(--studio-paper-ink) !important;
}

.studio-sheet main#main-page .comment-box .comment-form-cookies-consent {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--studio-step--1);
}

.studio-sheet main#main-page .comment-box input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--studio-paper-ink); }

.studio-sheet main#main-page .comment-box a { color: oklch(42% 0.13 250); }

.studio-sheet main#main-page .comment-box .akismet_comment_form_privacy_notice {
	margin: 0.75rem 0 0;
	color: var(--studio-paper-ink-2);
	font-size: 0.8rem;
}

/* Smart Slider (Bildergalerie z. B. auf „Mitmachen“): Punkte 10 px groß, Tippfläche auf 24 px vergrößern (WCAG 2.5.8) */
.studio-sheet main#main-page .wp-block-post-content .n2-bullet {
	box-sizing: border-box !important;
	width: 24px !important;
	height: 24px !important;
	padding: 7px !important;
	background-clip: content-box !important;
}