/*
 * MLEBEN – styles for text written in the WordPress editor (.mleben-content), the legal pages,
 * file inputs and the admin bar. The design system itself is in site.css (generated).
 */

:root {
	--ml-ink: var(--color-ink, #141414);
	--ml-ink-muted: var(--color-ink-muted, #58534b);
	--ml-line: var(--color-line, #dcd5c6);
	--ml-red: var(--color-red, #d7141a);
	--ml-red-deep: var(--color-red-deep, #a90f14);
	--ml-gold: var(--color-gold, #f2c11a);
	--ml-sand: var(--color-sand, #e9e3d6);
	--ml-paper-raised: var(--color-paper-raised, #fff);
}

/* Logged-in users: keep the floating header below the admin bar */
.admin-bar header.sticky { top: 32px; }
@media (max-width: 782px) {
	.admin-bar header.sticky { top: 46px; }
}

/* ───────── Editor content ───────── */

.mleben-content {
	color: var(--ml-ink-muted);
	font-size: 1.125rem;
	line-height: 1.65;
}
.mleben-content > * + * { margin-top: 1.1em; }
.mleben-content :where(h2, h3, h4, h5, h6) {
	color: var(--ml-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}
.mleben-content > :first-child { margin-top: 0; }
.mleben-content h2 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); }
.mleben-content h3 { font-size: 1.4rem; }
.mleben-content h4 { font-size: 1.2rem; }
.mleben-content strong { color: var(--ml-ink); font-weight: 600; }
.mleben-content a {
	color: var(--ml-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(138 131 118 / 0.6);
	text-underline-offset: 4px;
}
.mleben-content a:hover { text-decoration-color: var(--ml-red); }
.mleben-content :where(ul, ol) { padding-left: 1.3em; }
.mleben-content ul { list-style: disc; }
.mleben-content ol { list-style: decimal; }
.mleben-content li + li { margin-top: 0.4em; }
.mleben-content li::marker { color: var(--ml-red); }
.mleben-content blockquote {
	border-left: 2px solid var(--ml-red);
	color: var(--ml-ink);
	font-family: var(--font-serif, Georgia, serif);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.3;
	padding-left: 1.25rem;
}
.mleben-content img,
.mleben-content figure img { border-radius: 24px; height: auto; max-width: 100%; }
.mleben-content figcaption { color: var(--ml-ink-muted); font-size: 0.9rem; margin-top: 0.5rem; }
.mleben-content hr { border: 0; border-top: 1px solid var(--ml-line); margin: 2.5em 0; }
.mleben-content table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.mleben-content :where(th, td) { border-bottom: 1px solid var(--ml-line); padding: 0.75rem 0.5rem; text-align: left; }
.mleben-content th { color: var(--ml-ink); }

/* Buttons block in the colours of the site */
.mleben-content .wp-block-button__link {
	background: var(--ml-red);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	padding: 0.8em 1.5em;
	text-decoration: none;
}
.mleben-content .wp-block-button__link:hover { background: var(--ml-red-deep); }
.mleben-content .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgb(20 20 20 / 0.22);
	color: var(--ml-ink);
}

/* ───────── Legal pages ───────── */

.mleben-legal h2 { scroll-margin-top: 7rem; }
.mleben-legal { max-width: 68ch; }
.mleben-imprint { max-width: none; border-bottom: 1px solid var(--ml-line); }
.mleben-imprint h2 {
	border-top: 1px solid var(--ml-line);
	color: var(--ml-ink-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0;
	padding-top: 1.5rem;
	text-transform: uppercase;
}
.mleben-imprint h2 + p { color: var(--ml-ink); margin: 0.5rem 0 0; padding-bottom: 1.5rem; }
.mleben-imprint > p:first-child { margin-bottom: 2rem; }

/* ───────── Application page ───────── */

/* Documents photo in its own proportions (1199 × 1312), so it is never cropped */
.mleben-aspect-docs { aspect-ratio: 1199 / 1312; }

/* File inputs */

.mleben-file {
	background: var(--ml-paper-raised);
	border: 1.5px dashed rgb(138 131 118 / 0.7);
	border-radius: 0.75rem;
	color: var(--ml-ink-muted);
	cursor: pointer;
	font-size: 15px;
	min-height: 3rem;
	padding: 0.55rem 0.75rem;
	width: 100%;
}
.mleben-file:hover { border-color: rgb(138 131 118); }
.mleben-file:focus-visible { border-color: var(--ml-ink); outline-offset: 2px; }
.mleben-file[aria-invalid="true"] { border-color: var(--ml-red-deep); }
.mleben-file::file-selector-button {
	background: var(--ml-ink);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-right: 0.75rem;
	padding: 0.45rem 1rem;
}