/*
Theme Name: Pianopad Child
Theme URI: https://example.com/pianopad-child
Description: Schlankes, barrierefreies Child Theme von Twenty Thirteen im Pianopad-Design. Reines CSS (Grid/Flexbox), keine externen Frameworks.
Author: Dein Name
Author URI: https://example.com
Template: twentythirteen
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pianopad-child
*/

/* =========================================================
   1. DESIGN-TOKENS (CSS-Variablen)
   Zentrale Stelle zur Anpassung der Optik – erleichtert
   spätere Erweiterungen / Theming.
   ========================================================= */
:root {
	--pp-color-blue-dark: #1414c8;      /* Kräftiges Header-Blau aus dem Screenshot */
	--pp-color-blue-darker: #0d0d8f;    /* Schatten / Hover-Blau */
	--pp-color-black: #000000;          /* Content-Hintergrund */
	--pp-color-white: #ffffff;          /* Primäre Schrift auf dunklem Grund */
	--pp-color-gold: #d8b26a;           /* Akzentfarbe (z.B. "wahrscheinlich") */
	--pp-color-gray-light: #e6e6e6;     /* Footer-Verlauf hell */
	--pp-color-gray-mid: #9a9a9a;       /* Footer-Verlauf mittel */
	--pp-color-text-muted: #cfcfff;     /* gedämpfter Text auf Blau */

	--pp-font-base: "Helvetica Neue", Arial, sans-serif;
	--pp-font-serif: Georgia, "Times New Roman", serif;

	--pp-radius: 4px;
	--pp-spacing-xs: 0.5rem;
	--pp-spacing-sm: 1rem;
	--pp-spacing-md: 1.5rem;
	--pp-spacing-lg: 2.5rem;
	--pp-spacing-xl: 4rem;

	--pp-max-width: 1400px;
	--pp-focus-outline: 3px solid var(--pp-color-gold);
}

/* =========================================================
   2. BASIS- UND RESET-STYLES
   ========================================================= */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--pp-color-black);
	color: var(--pp-color-white);
	font-family: var(--pp-font-base);
	line-height: 1.6;
}

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

a {
	color: var(--pp-color-white);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--pp-color-gold);
}

/* Sichtbarer Fokus-Indikator für Tastaturnutzung (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.menu-toggle:focus-visible {
	outline: var(--pp-focus-outline);
	outline-offset: 2px;
}

/* =========================================================
   3. SKIP-LINK (Barrierefreiheit)
   Visuell versteckt, bis Fokus per Tastatur erfolgt.
   ========================================================= */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.screen-reader-text.skip-link:focus {
	position: fixed;
	top: var(--pp-spacing-sm);
	left: var(--pp-spacing-sm);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--pp-spacing-xs) var(--pp-spacing-sm);
	background: var(--pp-color-gold);
	color: var(--pp-color-black);
	font-weight: bold;
	border-radius: var(--pp-radius);
}

/* =========================================================
   4. LAYOUT-CONTAINER
   ========================================================= */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pp-container {
	max-width: var(--pp-max-width);
	margin-inline: auto;
	padding-inline: var(--pp-spacing-lg);
}

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header {
	background-color: var(--pp-color-blue-dark);
	padding-block: var(--pp-spacing-lg);
	text-align: center;
}

.site-header .pp-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pp-spacing-md);
}

.home-link {
	display: inline-block;
}

.site-title {
	margin: 0;
	padding: var(--pp-spacing-sm) var(--pp-spacing-md);
	background-color: var(--pp-color-black);
	color: var(--pp-color-white);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	border-radius: var(--pp-radius);
}

.site-description {
	margin: 0;
	color: var(--pp-color-gold);
	font-family: var(--pp-font-serif);
	font-style: italic;
	font-size: 1rem;
	max-width: 40ch;
}

.site-description .accent {
	color: var(--pp-color-white);
}

/* =========================================================
   6. NAVIGATION – Buttons im Pianopad-Stil
   ========================================================= */
.main-navigation {
	width: 100%;
}

.pp-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pp-spacing-xs);
}

.pp-nav-list a {
	display: inline-block;
	padding: 0.6em 1.1em;
	background-color: var(--pp-color-blue-dark);
	color: var(--pp-color-white);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	border: 1px solid var(--pp-color-black);
	border-radius: var(--pp-radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pp-nav-list a:hover,
.pp-nav-list a:focus {
	background-color: var(--pp-color-black);
	color: var(--pp-color-white);
}

.pp-nav-list .current-menu-item a,
.pp-nav-list a[aria-current="page"] {
	background-color: var(--pp-color-black);
}

/* Mobiles Menü-Toggle (progressive enhancement via functions.php / navigation.js) */
.menu-toggle {
	display: none;
	margin: 0 auto;
	padding: 0.6em 1.2em;
	background-color: var(--pp-color-black);
	color: var(--pp-color-white);
	border: 1px solid var(--pp-color-gold);
	border-radius: var(--pp-radius);
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 600px) {
	.menu-toggle {
		display: inline-block;
	}

	.pp-nav-list {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.pp-nav-list.toggled {
		display: flex;
	}
}

/* =========================================================
   7. CONTENT-BEREICH
   ========================================================= */
#content {
	flex: 1 0 auto;
	padding-block: var(--pp-spacing-xl);
}

.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pp-spacing-lg);
}

@media (min-width: 900px) {
	.content-area.has-sidebar {
		grid-template-columns: 2fr 1fr;
	}
}

.entry-header .entry-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--pp-color-white);
	margin-bottom: var(--pp-spacing-xs);
}

.entry-header .entry-title a {
	color: inherit;
}

.entry-meta {
	color: var(--pp-color-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--pp-spacing-sm);
}

.entry-content,
.entry-summary {
	color: var(--pp-color-white);
}

article.post,
article.page {
	padding-bottom: var(--pp-spacing-lg);
	margin-bottom: var(--pp-spacing-lg);
	border-bottom: 1px solid var(--pp-color-blue-dark);
}

article.post:last-child,
article.page:last-child {
	border-bottom: none;
}

/* Bildergalerie-artige Anordnung wie im Screenshot (Grid) */
.pp-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--pp-spacing-sm);
	margin-block: var(--pp-spacing-md);
}

.pp-media-grid img {
	border-radius: var(--pp-radius);
}

/* =========================================================
   8. PAGINATION
   ========================================================= */
.pp-pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--pp-spacing-sm);
	margin-top: var(--pp-spacing-lg);
	font-weight: 700;
}

.pp-pagination a {
	padding: 0.5em 1em;
	background-color: var(--pp-color-blue-dark);
	border-radius: var(--pp-radius);
}

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer {
	flex-shrink: 0;
	padding-block: var(--pp-spacing-sm);
	text-align: center;
	font-size: 0.85rem;
	color: var(--pp-color-black);
	background: linear-gradient(to bottom, var(--pp-color-gray-light), var(--pp-color-gray-mid));
}

.site-footer a {
	color: var(--pp-color-black);
	font-weight: 700;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--pp-color-blue-dark);
}

/* =========================================================
   10. UTILITY-KLASSEN
   ========================================================= */
.pp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}