/*
Theme Name: P2 Neu
Author: Martin Conzelmann
Description: Schlankes Theme im Look des klassischen P2 – nur das Design, ohne Zusatzfunktionen. Kein JavaScript, läuft mit aktuellem WordPress und PHP 8.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: p2-neu
Tags: blog, two-columns, right-sidebar
*/

:root {
	--p2-bg: #eef0f2;
	--p2-card: #fff;
	--p2-text: #2c3338;
	--p2-muted: #787c82;
	--p2-line: #e2e4e7;
	--p2-accent: #2271b1;
	--p2-accent-dark: #135e96;
	--p2-head: #1d2327;
	--p2-comment: #f6f7f7;
	--p2-radius: 6px;
	--p2-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
	margin: 0;
	background: var(--p2-bg);
	color: var(--p2-text);
	font: 15px/1.6 var(--p2-font);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--p2-accent); text-decoration: none; }
a:hover { color: var(--p2-accent-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Kopfleiste ---------- */
.p2-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--p2-head);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.admin-bar .p2-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .p2-header { top: 0; position: relative; } }

.p2-header-inner {
	max-width: 1080px; margin: 0 auto; padding: 12px 16px;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.p2-site-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.p2-site-title a { color: #fff; }
.p2-site-title a:hover { text-decoration: none; opacity: .85; }
.p2-site-desc { margin: 0; color: #a7aaad; font-size: 13px; }
.p2-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.p2-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.p2-nav a { color: #dcdcde; }
.p2-nav a:hover { color: #fff; }
.p2-user { color: #a7aaad; }

/* ---------- Layout ---------- */
.p2-wrap {
	max-width: 1080px; margin: 24px auto; padding: 0 16px;
	display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start;
}
@media (max-width: 860px) { .p2-wrap { grid-template-columns: 1fr; } }

.p2-main, .widget {
	background: var(--p2-card);
	border: 1px solid var(--p2-line);
	border-radius: var(--p2-radius);
}

.p2-page-title { margin: 0; padding: 16px 20px; font-size: 18px; border-bottom: 1px solid var(--p2-line); }

/* ---------- Beiträge ---------- */
.p2-post {
	display: flex; gap: 14px; padding: 18px 20px;
	border-bottom: 1px solid var(--p2-line);
	border-left: 3px solid transparent;
}
.p2-post:last-child { border-bottom: 0; }
.p2-post.sticky { background: #fcf9e8; }

.p2-avatar { flex: 0 0 48px; }
.p2-avatar img { display: block; width: 48px; height: 48px; border-radius: 4px; }
.p2-body { flex: 1; min-width: 0; }

.p2-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--p2-muted); }
.p2-author { font-weight: 700; color: var(--p2-text); font-size: 14px; }
.p2-time { color: var(--p2-muted); }
.p2-post:hover 
.p2-title { margin: 4px 0 2px; font-size: 19px; line-height: 1.35; }
.p2-title a { color: var(--p2-text); }

.p2-content { word-wrap: break-word; }
.p2-content > :first-child { margin-top: 4px; }
.p2-content > :last-child { margin-bottom: 0; }
.p2-content blockquote { margin: 1em 0; padding: 4px 14px; border-left: 3px solid var(--p2-line); color: #50575e; }
.p2-content pre, .p2-content code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--p2-comment); border-radius: 3px; }
.p2-content code { padding: 1px 4px; }
.p2-content pre { padding: 10px 12px; overflow-x: auto; }
.p2-content pre code { padding: 0; background: none; }

.p2-tags { margin-top: 8px; font-size: 12px; }
.p2-tags a { display: inline-block; background: var(--p2-comment); border: 1px solid var(--p2-line); border-radius: 10px; padding: 0 8px; margin: 2px 4px 0 0; color: #50575e; }
.p2-tags a:hover { background: #e8f0f8; text-decoration: none; }

.p2-empty { padding: 30px 20px; color: var(--p2-muted); text-align: center; }

/* ---------- Seitennavigation ---------- */
.p2-main .navigation { padding: 14px 20px; border-top: 1px solid var(--p2-line); font-size: 14px; }
.p2-main .nav-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.p2-main .page-numbers.current { font-weight: 700; }

/* ---------- Seitenleiste ---------- */
.p2-sidebar { display: grid; gap: 16px; font-size: 14px; }
@media (min-width: 861px) { .p2-sidebar { position: sticky; top: 80px; } }
.widget { padding: 14px 16px; }
.widget-title { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--p2-muted); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 4px 0; border-bottom: 1px solid var(--p2-line); }
.widget li:last-child { border-bottom: 0; }
.widget .search-form { display: flex; gap: 6px; }
.widget .search-field { flex: 1; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid #c3c4c7; border-radius: 4px; }
.widget .search-submit { font: inherit; padding: 6px 10px; border: 0; border-radius: 4px; background: var(--p2-accent); color: #fff; cursor: pointer; }

@media (max-width: 600px) {
	.p2-post { padding: 14px; gap: 10px; }
	.p2-avatar { flex-basis: 36px; }
	.p2-avatar img { width: 36px; height: 36px; }
}

.p2-footer { max-width: 1080px; margin: 0 auto 30px; padding: 0 16px; color: var(--p2-muted); font-size: 12px; text-align: center; }