/* blogkit.css — generated by bin/build-css.php from src/css/. Don't edit; edit the sources and rebuild. */

/* ── src/css/settings/_palette.css ── */

/* ==========================================================================
   SETTINGS — palette
   Generated by bin/build-css.php from src/Theme.php. Don't edit: change the
   lists in Theme.php and rebuild.

   --blogkit-accent-<name>-base  your colour as it is (swatches, decoration)
   --blogkit-accent-<name>       its readable shade, at least 4.5:1 for text
                                 on the page and on link buttons:
                                 light-dark(<light mode>, <dark mode>)
   --blogkit-scheme-<name>       dark backgrounds
   ========================================================================== */

:root {
	/* Accents as they are */
	--blogkit-accent-rose-base:    #fb7185;
	--blogkit-accent-orange-base:  #fb923c;
	--blogkit-accent-amber-base:   #fbbf24;
	--blogkit-accent-lime-base:    #a3e635;
	--blogkit-accent-green-base:   #4ade80;
	--blogkit-accent-teal-base:    #2dd4bf;
	--blogkit-accent-cyan-base:    #22d3ee;
	--blogkit-accent-blue-base:    #60a5fa;
	--blogkit-accent-indigo-base:  #818cf8;
	--blogkit-accent-purple-base:  #c084fc;
	--blogkit-accent-fuchsia-base: #e879f9;
	--blogkit-accent-pink-base:    #f472b6;

	/* Readable accents; the light ones also for browsers without light-dark() */
	--blogkit-accent-rose:    #c43f58;
	--blogkit-accent-orange:  #ac5900;
	--blogkit-accent-amber:   #8d6900;
	--blogkit-accent-lime:    #527a00;
	--blogkit-accent-green:   #00803f;
	--blogkit-accent-teal:    #007d70;
	--blogkit-accent-cyan:    #007a8b;
	--blogkit-accent-blue:    #2b70c1;
	--blogkit-accent-indigo:  #5e65cd;
	--blogkit-accent-purple:  #8e52c6;
	--blogkit-accent-fuchsia: #ac3ebd;
	--blogkit-accent-pink:    #bc3f85;

	/* Dark backgrounds */
	--blogkit-scheme-slate:   #0f172a;
	--blogkit-scheme-soho:    #34343d;
	--blogkit-scheme-ocean:   #183240;
}

@supports (color: light-dark(#000, #fff)) {
	:root {
		--blogkit-accent-rose:    light-dark(#c43f58, #fe8191);
		--blogkit-accent-orange:  light-dark(#ac5900, #fb923c);
		--blogkit-accent-amber:   light-dark(#8d6900, #fbbf24);
		--blogkit-accent-lime:    light-dark(#527a00, #a3e635);
		--blogkit-accent-green:   light-dark(#00803f, #4ade80);
		--blogkit-accent-teal:    light-dark(#007d70, #2dd4bf);
		--blogkit-accent-cyan:    light-dark(#007a8b, #22d3ee);
		--blogkit-accent-blue:    light-dark(#2b70c1, #68aafb);
		--blogkit-accent-indigo:  light-dark(#5e65cd, #98a4fb);
		--blogkit-accent-purple:  light-dark(#8e52c6, #c691fd);
		--blogkit-accent-fuchsia: light-dark(#ac3ebd, #ea81fa);
		--blogkit-accent-pink:    light-dark(#bc3f85, #f781bd);
	}
}

/* ── src/css/settings/_theme.css ── */

/* ==========================================================================
   SETTINGS — theme
   Colours by role, for light and dark mode. Which mode applies follows
   color-scheme, which blogkit/assets sets from the Panel (Home → Settings:
   Light, Dark, Automatic), together with the dark background
   (--blogkit-scheme) and the page's accent.

   --blogkit-light-*   light mode
   --blogkit-dark-*    dark mode, mixed from the dark background, so text
                       and lines keep its tint
   --blogkit-color-*   what components use: light-dark(light, dark)

   Browsers without light-dark() (before 2024) get the light values.
   The dark mixes are mirrored in src/Palette.php (contrast of the accents);
   change both together.
   ========================================================================== */

:root {
	/* Set by blogkit/assets from the Panel settings; these are the defaults */
	--blogkit-scheme: var(--blogkit-scheme-slate);
	--blogkit-color-accent: var(--blogkit-accent-indigo);           /* readable: links, hover, focus */
	--blogkit-color-accent-base: var(--blogkit-accent-indigo-base); /* as it is: decoration */

	/* Light mode */
	--blogkit-light-background: #fff;
	--blogkit-light-text: #1a1a1a;
	--blogkit-light-muted: #666;
	--blogkit-light-line: #e5e5e5;

	/* Dark mode */
	--blogkit-dark-background: var(--blogkit-scheme);
	--blogkit-dark-text: color-mix(in oklab, var(--blogkit-dark-background), white 88%);
	--blogkit-dark-muted: color-mix(in oklab, var(--blogkit-dark-background), white 62%);
	--blogkit-dark-line: color-mix(in oklab, var(--blogkit-dark-background), white 18%);

	/* By role (light values; light-dark() versions below) */
	--blogkit-color-background: var(--blogkit-light-background);
	--blogkit-color-text: var(--blogkit-light-text);
	--blogkit-color-muted: var(--blogkit-light-muted);
	--blogkit-color-line: var(--blogkit-light-line);
	--blogkit-color-surface: var(--blogkit-color-background); /* cards */

	/* Tonal scale of the page's accent, 10 % steps, the same in both modes.
	   Not used by blogkit itself yet: for your site and other plugins. */
	--blogkit-accent-lighter-6: color-mix(in oklab, var(--blogkit-color-accent-base), white 60%);
	--blogkit-accent-lighter-5: color-mix(in oklab, var(--blogkit-color-accent-base), white 50%);
	--blogkit-accent-lighter-4: color-mix(in oklab, var(--blogkit-color-accent-base), white 40%);
	--blogkit-accent-lighter-3: color-mix(in oklab, var(--blogkit-color-accent-base), white 30%);
	--blogkit-accent-lighter-2: color-mix(in oklab, var(--blogkit-color-accent-base), white 20%);
	--blogkit-accent-lighter-1: color-mix(in oklab, var(--blogkit-color-accent-base), white 10%);
	--blogkit-accent-darker-1: color-mix(in oklab, var(--blogkit-color-accent-base), black 10%);
	--blogkit-accent-darker-2: color-mix(in oklab, var(--blogkit-color-accent-base), black 20%);
	--blogkit-accent-darker-3: color-mix(in oklab, var(--blogkit-color-accent-base), black 30%);
	--blogkit-accent-darker-4: color-mix(in oklab, var(--blogkit-color-accent-base), black 40%);
	--blogkit-accent-darker-5: color-mix(in oklab, var(--blogkit-color-accent-base), black 50%);
	--blogkit-accent-darker-6: color-mix(in oklab, var(--blogkit-color-accent-base), black 60%);

	/* Shared names for your site and other plugins */
	--fg: var(--blogkit-color-text);
	--bg: var(--blogkit-color-background);
	--muted: var(--blogkit-color-muted);
	--line: var(--blogkit-color-line);
	--accent: var(--blogkit-color-accent);
}

@supports (color: light-dark(#000, #fff)) {
	:root {
		--blogkit-color-background: light-dark(var(--blogkit-light-background), var(--blogkit-dark-background));
		--blogkit-color-text: light-dark(var(--blogkit-light-text), var(--blogkit-dark-text));
		--blogkit-color-muted: light-dark(var(--blogkit-light-muted), var(--blogkit-dark-muted));
		--blogkit-color-line: light-dark(var(--blogkit-light-line), var(--blogkit-dark-line));
	}
}

/* ── src/css/settings/_tokens.css ── */

/* ==========================================================================
   SETTINGS — design tokens
   Every token is prefixed --blogkit- so a site can override it, e.g.
   :root { --blogkit-radius-button: 8px; }

   Colours come from _palette.css and _theme.css; the mixes below follow
   light and dark mode by themselves.
   ========================================================================== */

:root {
	/* Colour */
	--blogkit-color-placeholder: color-mix(in srgb, var(--blogkit-color-text) 6%, var(--blogkit-color-surface));

	/* Link buttons on the frontpage */
	--blogkit-button-background: color-mix(in srgb, var(--blogkit-color-text) 4%, var(--blogkit-color-surface));
	--blogkit-button-border: var(--blogkit-color-line);
	--blogkit-button-text: var(--blogkit-color-text);

	/* Type */
	--blogkit-font-size-title: 2rem;          /* page titles */
	--blogkit-font-size-title-large: 2.5rem;  /* frontpage headline */
	--blogkit-font-size-heading: 1.5rem;      /* post titles in the blog */
	--blogkit-font-size-card-title: 1.25rem;  /* post title on the frontpage card */
	--blogkit-font-size-subtitle: 1.2rem;
	--blogkit-font-size-text: 1.05rem;        /* text from the editor, excerpts */
	--blogkit-font-size-meta: 0.9rem;         /* dates, small labels */
	--blogkit-line-height-heading: 1.2;

	/* Space */
	--blogkit-space-xs: 0.25rem;
	--blogkit-space-s: 0.5rem;
	--blogkit-space-m: 1rem;
	--blogkit-space-l: 1.5rem;
	--blogkit-space-xl: 2rem;
	--blogkit-space-xxl: 2.5rem;
	--blogkit-space-xxxl: 4rem;

	/* Shape */
	--blogkit-radius-l: 8px;                  /* post cover, frontpage card */
	--blogkit-radius-s: 6px;                  /* covers in the blog list */
	--blogkit-radius-button: 999px;           /* link buttons: pill */

	/* Measures */
	--blogkit-stack-width: 36rem;             /* the frontpage column */
	--blogkit-stack-gap: 2.5rem;              /* between profile, links, latest post */
	--blogkit-photo-size: 6rem;               /* profile photo */
	--blogkit-touch-target: 3rem;             /* minimum height of a link button */
	--blogkit-teaser-image-width: 16rem;      /* cover in the blog list */
}

/* ── src/css/objects/_blogkit-stack.css ── */

/* ==========================================================================
   OBJECT — o-blogkit-stack
   A narrow column, centred in the page, its children evenly spaced.
   Layout only: no colours, no type.
   ========================================================================== */

.o-blogkit-stack {
	display: flex;
	flex-direction: column;
	gap: var(--blogkit-stack-gap);
	max-width: var(--blogkit-stack-width);
	margin-inline: auto;
}

/* ── src/css/components/_blogkit-document.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-document
   The page colours on <body>, for the plugin's fallback header only (sites
   without a header snippet). Your own site sets them on body itself, from
   the shared names (--bg, --fg).
   ========================================================================== */

.c-blogkit-document {
	background-color: var(--blogkit-color-background);
	color: var(--blogkit-color-text);
}

/* ── src/css/components/_blogkit-title.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-title
   Page title (h1), mixed into each page's own __title element.
   ========================================================================== */

.c-blogkit-title {
	margin: 0 0 0.5em;
	font-size: var(--blogkit-font-size-title);
	font-weight: 700;
	line-height: var(--blogkit-line-height-heading);
}

/* Modifier: the frontpage headline */
.c-blogkit-title--large {
	font-size: var(--blogkit-font-size-title-large);
}

/* ── src/css/components/_blogkit-text.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-text
   Text from the editor (textarea, blocks), mixed into an element of the
   page's block: c-blogkit-post__text, c-blogkit-page__text, …
   ========================================================================== */

.c-blogkit-text {
	font-size: var(--blogkit-font-size-text);
}

.c-blogkit-text > * + * {
	margin-top: 1em;
}

/* Editor output can't carry classes, so its images are styled by type:
   never wider than the column, figures aligned with the text. */
.c-blogkit-text img {
	max-width: 100%;
	height: auto;
}

.c-blogkit-text figure {
	margin-inline: 0;
}

/* ── src/css/components/_blogkit-social.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-social
   Social links in a row. Placement comes from the parent (mix).
   ========================================================================== */

.c-blogkit-social {
	display: inline-flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-blogkit-social__link {
	color: var(--blogkit-color-muted);
}

.c-blogkit-social__link:hover {
	color: var(--blogkit-color-text);
}

/* ── src/css/components/_blogkit-profile.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-profile
   Top of the frontpage: round photo, headline, subheadline, centred.
   ========================================================================== */

.c-blogkit-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--blogkit-space-s);
	text-align: center;
}

.c-blogkit-profile__photo {
	display: block;
	width: var(--blogkit-photo-size);
	height: var(--blogkit-photo-size);
	margin-bottom: var(--blogkit-space-s);
	border-radius: 50%;
	object-fit: cover;
	background: var(--blogkit-color-placeholder);
}

/* placement of the mixed-in c-blogkit-title */
.c-blogkit-profile__title {
	margin: 0;
}

.c-blogkit-profile__subtitle {
	margin: 0;
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-subtitle);
}

/* ── src/css/components/_blogkit-links.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-links
   The frontpage links: one full-width button per link.
   ========================================================================== */

.c-blogkit-links {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-blogkit-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--blogkit-touch-target);
	padding: 0.75rem var(--blogkit-space-l);
	border: 1px solid var(--blogkit-button-border);
	border-radius: var(--blogkit-radius-button);
	background: var(--blogkit-button-background);
	color: var(--blogkit-button-text);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.c-blogkit-links__link:hover {
	border-color: var(--blogkit-color-accent);
	color: var(--blogkit-color-accent);
	text-decoration: none;
}

.c-blogkit-links__link:focus-visible {
	outline: 3px solid var(--blogkit-color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.c-blogkit-links__link {
		transition: border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
	}

	.c-blogkit-links__link:hover {
		transform: translateY(-1px);
	}
}

/* ── src/css/components/_blogkit-blogroll.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-blogroll
   The latest post on the frontpage: a small label, a card (the title link
   covers the whole card) and a link to all posts.
   ========================================================================== */

.c-blogkit-blogroll__title {
	margin: 0 0 var(--blogkit-space-m);
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-meta);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: var(--blogkit-line-height-heading);
	text-transform: uppercase;
}

.c-blogkit-blogroll__card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--blogkit-color-line);
	border-radius: var(--blogkit-radius-l);
	background: var(--blogkit-color-surface);
}

.c-blogkit-blogroll__card:hover {
	border-color: var(--blogkit-color-accent);
}

.c-blogkit-blogroll__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--blogkit-color-placeholder);
}

.c-blogkit-blogroll__body {
	padding: var(--blogkit-space-m) var(--blogkit-space-l) var(--blogkit-space-l);
}

.c-blogkit-blogroll__heading {
	margin: 0;
	font-size: var(--blogkit-font-size-card-title);
	line-height: var(--blogkit-line-height-heading);
}

.c-blogkit-blogroll__link {
	color: var(--blogkit-color-text);
}

/* the whole card is clickable */
.c-blogkit-blogroll__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.c-blogkit-blogroll__card:hover .c-blogkit-blogroll__link {
	text-decoration: underline;
}

/* keyboard focus: the ring goes around the card instead of the title */
@supports selector(:has(*)) {
	.c-blogkit-blogroll__link:focus-visible {
		outline: none;
	}

	.c-blogkit-blogroll__card:has(.c-blogkit-blogroll__link:focus-visible) {
		outline: 3px solid var(--blogkit-color-accent);
		outline-offset: 2px;
	}
}

.c-blogkit-blogroll__date {
	display: block;
	margin-top: var(--blogkit-space-xs);
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-meta);
}

.c-blogkit-blogroll__excerpt {
	margin: var(--blogkit-space-s) 0 0;
	color: var(--blogkit-color-muted);
}

.c-blogkit-blogroll__more {
	margin: var(--blogkit-space-m) 0 0;
	text-align: right;
}

/* ── src/css/components/_blogkit-post-list.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-post-list
   Posts separated by lines: on the frontpage date + title as one link,
   in the blog one c-blogkit-teaser per item.
   ========================================================================== */

.c-blogkit-post-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-blogkit-post-list__item + .c-blogkit-post-list__item {
	margin-top: var(--blogkit-space-xl);
	padding-top: var(--blogkit-space-xl);
	border-top: 1px solid var(--blogkit-color-line);
}

.c-blogkit-post-list__date {
	display: block;
	margin: var(--blogkit-space-xs) 0 var(--blogkit-space-s);
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-meta);
}

/* ── src/css/components/_blogkit-teaser.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-teaser
   One post in the blog list: cover, title, date, excerpt.
   ========================================================================== */

.c-blogkit-teaser__image {
	width: 100%;
	max-width: var(--blogkit-teaser-image-width);
	height: auto;
	margin-bottom: var(--blogkit-space-m);
	border-radius: var(--blogkit-radius-s);
}

.c-blogkit-teaser__title {
	margin: 0;
	font-size: var(--blogkit-font-size-heading);
	font-weight: 700;
	line-height: var(--blogkit-line-height-heading);
}

.c-blogkit-teaser__date {
	display: block;
	margin: var(--blogkit-space-xs) 0 var(--blogkit-space-s);
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-meta);
}

.c-blogkit-teaser__excerpt {
	margin-top: var(--blogkit-space-s);
	color: var(--blogkit-color-muted);
	font-size: var(--blogkit-font-size-text);
}

/* ── src/css/components/_blogkit-post.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-post
   A single post: title, date, cover, text, link back to the blog.
   ========================================================================== */

.c-blogkit-post__date {
	color: var(--blogkit-color-muted);
}

.c-blogkit-post__cover {
	width: 100%;
	height: auto;
	margin: var(--blogkit-space-l) 0;
	border-radius: var(--blogkit-radius-l);
}

.c-blogkit-post__back {
	margin-top: var(--blogkit-space-xxl);
}

/* ── src/css/components/_blogkit-error.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-error
   The 404 page.
   ========================================================================== */

.c-blogkit-error {
	padding: var(--blogkit-space-xxxl) 0;
	text-align: center;
}

/* ── src/css/components/_blogkit-footer-nav.css ── */

/* ==========================================================================
   COMPONENT — c-blogkit-footer-nav
   Links to the footer pages (imprint, privacy, …), in a row that wraps.
   Colours come from the site's footer (links like its other links).
   ========================================================================== */

.c-blogkit-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--blogkit-space-xs) var(--blogkit-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-blogkit-footer-nav__link--current {
	font-weight: 600;
}

/* ── src/css/utilities/_blogkit-visually-hidden.css ── */

/* ==========================================================================
   UTILITY — u-blogkit-visually-hidden
   Text for screen readers only, e.g. "(opens in a new tab)".
   !important is fine here: a utility must always win.
   ========================================================================== */

.u-blogkit-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}