/**
 * Łaszkowicz—shared additions
 *
 * Not one of the five named deliverables, but every page needs it.
 * Everything here is something Minttu core genuinely does not provide,
 * not a reproduction of something it already does:
 *
 * - Core's heading rule is hardcoded to --font-sans, not --font-header
 *   (see elements.css), so the header/body typeface split and the
 *   variable-axis wiring have to be applied here explicitly.
 * - Core styles real <button> elements fully but only gives
 *   a[role="button"] a bare flex/no-underline reset (components/
 *   button.css)—and role="button" would be the wrong choice for the
 *   sign-in link anyway, since it is a real navigation, not a
 *   script-triggered action. a.button below mirrors core's own button
 *   recipe (elements.css) so the one link that needs to look like a
 *   button uses the same visual language as a real one.
 * - Core's footer navigation (layout/footer.css) is built for a
 *   multi-section sitemap and stacks its list vertically by default.
 *   A language switcher is one flat row of links, so nav.language
 *   below overrides just that, at normal specificity, which is enough
 *   to win over core's :where()-scoped defaults without !important.
 * - The empty-state pattern is Łaszkowicz's own, seeded here because
 *   it belongs to every future surface, not only the doorway.
 *
 * Everything else—the body grid, the footer subgrid, real buttons,
 * cards, the reset—is the unmodified core, loaded before this file.
 */

@layer elements {
	body {
		font-family: var(--font-body);
		font-weight: var(--font-body-weight);
	}

	strong, b {
		font-weight: var(--font-body-weight-emphasis);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-header);
		font-weight: var(--font-header-weight);
	}

	/* The one element that pins two axes together—see tokens.css for
	 * why this uses font-variation-settings instead of font-weight. */
	h1.wordmark {
		font-variation-settings:
			"opsz" var(--font-header-opsz-display),
			"wght" var(--font-header-weight-display);
		font-optical-sizing: none;
	}
}

@layer components {
	/*
	 * A link styled as a button, for the one call to action a
	 * signed-out page is allowed. Same recipe as core's real <button>
	 * (elements.css): a state-layer ::before using currentColor, a
	 * spring hover lift, the same focus-ring shape—so it reads as the
	 * same component, not a look-alike.
	 */
	a.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		min-height: var(--touch-target-min);
		padding: var(--space-s) var(--space-l);
		border: 1px solid transparent;
		border-radius: var(--radius-full);
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size-base);
		text-decoration: none;
		position: relative;
		overflow: hidden;
		background-color: var(--button-background);
		color: var(--button-color);
		transition:
			transform var(--transition-spring-fast),
			box-shadow var(--transition-spring),
			background-color var(--transition-fast);
	}

	a.button::before {
		content: "";
		position: absolute;
		inset: 0;
		background: currentColor;
		opacity: 0;
		transition: opacity var(--transition-fast);
		pointer-events: none;
	}

	a.button:hover::before {
		opacity: var(--state-hover-opacity);
	}

	a.button:active::before {
		opacity: var(--state-pressed-opacity);
	}

	a.button:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px -2px oklch(0.2 0.02 var(--color-primary-hue) / 0.2), 0 2px 4px -1px oklch(0.2 0.02 var(--color-primary-hue) / 0.1);
	}

	a.button:active {
		transform: translateY(0) scale(0.98);
		box-shadow: none;
	}

	a.button:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
	}

	a.button.primary {
		--button-background: var(--color-primary);
		--button-color: var(--color-on-primary);
	}

	@media (prefers-reduced-motion: reduce) {
		a.button {
			transition: background-color var(--transition-fast);
		}

		a.button:hover {
			transform: none;
		}
	}

	/*
	 * The language switcher: a flat row of links, not a sitemap
	 * section, so it overrides core's stacked footer-nav default.
	 */
	body > footer nav.language ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
	}

	body > footer nav.language li {
		margin-block-end: 0;
	}

	body > footer nav.language a {
		display: inline-flex;
		align-items: center;
		min-height: var(--touch-target-min);
		color: var(--color-on-surface-variant);
		font-size: var(--font-size-s);
		text-decoration: none;
		letter-spacing: var(--letter-spacing-wide);
	}

	body > footer nav.language a[aria-current="page"] {
		color: var(--color-on-surface);
		font-weight: var(--font-weight-semibold);
	}

	body > footer nav.language a:hover {
		color: var(--color-on-surface);
	}

	/*
	 * Empty, on purpose. Every future surface that has nothing to show
	 * yet—an empty gallery, a group with no members, a filter with no
	 * matches—uses this pattern rather than a bare "no results"
	 * message, so emptiness reads as intentional everywhere it happens,
	 * not only on the doorway. See design/README.md.
	 */
	div.empty-state {
		display: grid;
		place-items: center;
		text-align: center;
		gap: var(--space-xs);
		padding: var(--space-2xl) var(--space-m);
		background-color: var(--color-surface-container-low);
		border-radius: var(--radius-xl);
	}

	div.empty-state span.mark {
		width: 2rem;
		height: 2rem;
		border-radius: var(--radius-full);
		border: 2px solid var(--color-outline);
	}

	div.empty-state p {
		max-width: 40ch;
		color: var(--color-on-surface-variant);
	}
}