/**
 * MF Post-Header — shared base stylesheet.
 *
 * Ported from docs/mayflower-header-varianten-r2.html (the shared blocks only).
 * Loaded on every post that renders the mf/post-header block; each variant's
 * own layout lives in a separate variant-{slug}.css that is enqueued alongside
 * this file (and only that one — Spec §8).
 *
 * Class-name convention (used in BOTH the partial markup and the variant CSS):
 *   - per-variant blocks: `mfph-{slug}` with BEM elements `mfph-{slug}__{part}`
 *   - shared elements:     `.mf-uncropped`, `.mfph-slot`, `.mf-ad-flag`
 *
 * Fonts: NO Google Fonts. Fraunces → var(--mf-serif), Inter → var(--mf-font),
 * JetBrains Mono → var(--mf-mono). The colour vars are ported from the demo.
 */

.mfph-header {
	/* Colour palette (ported from the demo :root). */
	--mf-magenta: #ff2d78;
	--mf-cyan: #00e5ff;
	--mf-lime: #c6ff3f;
	--mf-violet: #8a2be2;
	--mf-ink: #0e1116;
	--mf-paper: #ffffff;
	--mf-muted: #5b6472;
	--mf-line: #e6e8ec;

	/* Font stacks (replicated from src/embed/style.scss :root — self-hosted /
	   system only, no Google Fonts). */
	--mf-font: system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	--mf-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", menlo, consolas, monospace;
	--mf-serif: georgia, "Times New Roman", times, serif;

	color: var(--mf-ink);
	font-family: var(--mf-font);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.mfph-header *,
.mfph-header *::before,
.mfph-header *::after {
	box-sizing: border-box;
}

/* Image ground rule of this round: never crop, never distort. */
.mfph-header .mf-uncropped {
	display: block;
	width: 100%;
	height: auto;
}

/* Author avatar: a LOCAL Simple Local Avatars attachment (never Gravatar).
   Shared shape lives here; each variant sets width/height (and any accent
   border) on its own `mfph-{slug}__avatar` class. Rendered only when the
   author has a local avatar, so an absent one leaves no gap. */
.mfph-avatar {
	display: block;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

/* Author name → author archive link. Shared across every variant (dark and
   light), so it inherits the surrounding text colour rather than hardcoding one
   and reads as the plain author name, but underlines on hover/focus to signal it
   is clickable. Only the NAME links; the avatar is never wrapped. */
.mfph-header .mfph-author-link {
	color: inherit;
	text-decoration: none;
}

.mfph-header .mfph-author-link:hover,
.mfph-header .mfph-author-link:focus-visible {
	text-decoration: underline;
}

/* Primary category → term-archive link. Like the author link, it is shared
   across every variant (dark and light), inherits the surrounding colour of its
   kicker/eyebrow/cat/flag/crumb wrapper rather than hardcoding one, and only
   underlines on hover/focus. Rendered only when the post has a category. */
.mfph-header .mfph-category-link {
	color: inherit;
	text-decoration: none;
}

.mfph-header .mfph-category-link:hover,
.mfph-header .mfph-category-link:focus-visible {
	text-decoration: underline;
}

/* Optional manual label rendered next to the primary category (e.g.
   `Development · Visuelle QA`) by the variants that support it. Shared like the
   links above: it inherits its eyebrow/flag's colour, weight and size so the two
   parts read as one line (matching the demo), and the separator is baked into the
   span text by the renderer. Frame & Chips renders its addon as a `__chip`
   instead and does not use this class. */
.mfph-header .mfph-cat-addon {
	color: inherit;
}

/* Neutral ad slot. Width/alignment is set per variant on the second class; the
   registry element brings its own markup + CSS, so this container only frames
   it. Rendered only when a banner is selected (no empty frame). */
.mfph-slot {
	margin-top: 8px;
}

.mf-ad-flag {
	font: 700 10px/1 var(--mf-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mf-muted);
	margin: 0 0 6px;
}

/* Per-post banner placement within the ad slot (editor choice, default full).
   Non-invasive: only the <=340px minibutton BLOCK is shifted via margin-inline —
   the button's own inner content keeps the alignment its template defines (we do
   NOT set text-align on the slot, or it would leak into the button content). The
   "Anzeige" flag follows the button via text-align scoped to the flag only. */
.mfph-slot--align-left .mf-minibutton {
	margin-inline: 0 auto;
}

.mfph-slot--align-center .mf-minibutton {
	margin-inline: auto;
}

.mfph-slot--align-center .mf-ad-flag {
	text-align: center;
}

.mfph-slot--align-right .mf-minibutton {
	margin-inline: auto 0;
}

.mfph-slot--align-right .mf-ad-flag {
	text-align: right;
}

/* Full width: lift the .mf-minibutton max-width cap (<=340px) so the banner fills
   the slot's content width. The slot's own per-variant width (e.g. browser-chrome
   ~860px) then bounds it; text-align/margin-inline are irrelevant at full width. */
.mfph-slot--align-full .mf-minibutton {
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.mfph-header *,
	.mfph-header *::before,
	.mfph-header *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}