/* Solar-Index Theme 2026 - Main Stylesheet
 * Tokens stammen aus theme.json. Diese Datei haelt Komponenten-Styles
 * die nicht ueber Block-CSS abgedeckt sind. */

:root {
	--si-radius-xs: 4px;
	--si-radius-sm: 6px;
	--si-radius-md: 10px;
	--si-radius-lg: 14px;
	--si-radius-full: 9999px;
	--si-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Skip-Link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	padding: 12px 16px;
	background: var(--wp--preset--color--primary-700);
	color: #fff;
	z-index: 9999;
}
.skip-link:focus { top: 0; }

/* Header */
.si-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }

/* Bottom-Nav Mobile */
.si-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--bg-card);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9;
}
@media (max-width: 767px) {
	.si-bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); }
}

/* Karma-Pillen */
.si-karma {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--si-radius-full);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}
.si-karma--established { background: var(--wp--preset--color--primary-50); color: var(--wp--preset--color--primary-700); }
.si-karma--trusted     { background: #FFF8E1; color: var(--wp--preset--color--accent-amber-dark); }
.si-karma--mod         { background: var(--wp--preset--color--primary-700); color: #FFFFFF; }
.si-karma--pioneer     { background: var(--wp--preset--color--accent-amber); color: var(--wp--preset--color--ink-900); }

/* Voting-Bar */
.si-vote {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
}
.si-vote__btn {
	background: transparent;
	border: 1px solid transparent;
	padding: 4px 6px;
	border-radius: var(--si-radius-sm);
	cursor: pointer;
	transition: background var(--si-transition), transform 220ms;
	color: inherit;
}
.si-vote__btn:hover { background: var(--wp--preset--color--bg-subtle); }
.si-vote__btn:active { transform: scale(1.15); }
.si-vote__btn--up.is-active   { color: var(--wp--preset--color--primary-700); }
.si-vote__btn--down.is-active { color: var(--wp--preset--color--danger); }

/* Thread-Card */
.si-thread-card {
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--si-radius-md);
	padding: 16px 20px;
	transition: border-color var(--si-transition);
}
.si-thread-card:hover { border-color: var(--wp--preset--color--line-strong); }

/* Comment-Tree */
.si-comment-tree { list-style: none; padding: 0; margin: 0; }
.si-comment-tree .si-comment-tree {
	margin-left: 20px;
	padding-left: 16px;
	border-left: 2px solid var(--wp--preset--color--line);
}

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

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}