/**
 * wordpress.css – Layout-Container, Theme-Fallbacks und WordPress-Klassen.
 *
 * Alle Styles neutral/minimal; Farben und Abstände kommen aus den
 * Custom Properties in base.css und lassen sich pro Projekt über
 * :root anpassen.
 *
 * Inhalt:
 *   0. Layout-Container, Fallback-Header/-Footer, Content-Rhythmus
 *   1. Ausrichtung (.alignleft, .alignright, …, .alignwide, .alignfull)
 *   2. Captions (.wp-caption)
 *   3. Legacy-Galerien (.gallery)
 *   4. Barrierefreiheit (.screen-reader-text)
 *   5. Kommentare
 *   6. Pagination
 *   7. Sonstiges (.sticky, .bypostauthor, .wp-block-image, .has-text-align-*)
 */

/* -------------------------------------------------------------------------
 * 0. Layout-Container, Fallback-Header/-Footer, Content-Rhythmus
 * ---------------------------------------------------------------------- */

/* Zentrierter Container nur für klassische Seiten – Elementor-Seiten
 * (body-Klasse elementor-page) layouten sich selbst. Bewusst die stabile
 * Klasse statt Substring-Match auf elementor-page-{id}. */
body:not(.elementor-page) .site-main {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--spacing-4);
	padding-block: var(--spacing-5);
}

/* Auf Elementor-Beiträgen steht der Container oben ab, Post-Navigation
 * und Kommentarbereich sind aber Theme-Markup und sollen auch dort nicht
 * randlos über die volle Viewport-Breite laufen. */
body.elementor-page .site-main > .post-navigation,
body.elementor-page .site-main > .comments-area {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--spacing-4);
}

/* Abstände der Listen- und Fallback-Ansichten: Der Reset in base.css nullt
 * alle Margins, der :where()-Rhythmus unten greift nur im gerenderten
 * Content – article/.page-header/.entry-header brauchen eigene Regeln. */
.site-main article,
.site-main .page-header {
	margin-block-end: var(--spacing-5);
}

.site-main .entry-header {
	margin-block-end: var(--spacing-3);
}

/* Fallback-Header/-Footer – nur sichtbar, solange kein
 * Elementor-Theme-Builder-Template die Location übernimmt. */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-4);
	max-width: var(--content-width);
	margin-inline: auto;
	padding: var(--spacing-4);
}

.site-title {
	font-weight: 600;
	text-decoration: none;
}

.custom-logo {
	max-height: 3.75rem;
	width: auto;
}

.site-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation a {
	text-decoration: none;
}

.site-footer {
	max-width: var(--content-width);
	margin-inline: auto;
	padding: var(--spacing-5) var(--spacing-4);
	color: var(--color-secondary);
	text-align: center;
}

/* Vertikaler Rhythmus für gerenderten Content – :where() hält die
 * Spezifität bei den Elementen selbst, Elementor-Widgets bleiben unberührt. */
:where(.entry-content, .page-content, .comment-content) :is(p, ul, ol, dl, blockquote, figure, table, pre) {
	margin-block-end: var(--spacing-4);
}

:where(.entry-content, .page-content, .comment-content) :is(h1, h2, h3, h4, h5, h6) {
	margin-block: var(--spacing-5) var(--spacing-3);
}

:where(.entry-content, .page-content, .comment-content) > :first-child {
	margin-block-start: 0;
}

:where(.entry-content, .page-content, .comment-content) > :last-child {
	margin-block-end: 0;
}

/* Breite Inhalte scrollen im eigenen Container – html { overflow-x: clip }
 * in base.css kappt den Seiten-Scrollbalken, ohne diese Regeln wären
 * überbreite Tabellen/Codeblöcke auf schmalen Viewports unerreichbar. */
:where(.entry-content, .page-content, .comment-content) pre {
	overflow-x: auto;
}

:where(.entry-content, .page-content, .comment-content) table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Floats sicher einschließen (ersetzt ::after-Clearfixes) */
.entry-content,
.page-content,
.comment-content {
	display: flow-root;
}

.post-thumbnail {
	margin-block-end: var(--spacing-4);
}

.archive-description {
	color: var(--color-secondary);
}

/* -------------------------------------------------------------------------
 * 1. Ausrichtung
 *
 * Floats sind physisch – die Margins deshalb ebenfalls physisch,
 * damit RTL-Seiten konsistent bleiben.
 * ---------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin-right: var(--spacing-4);
	margin-bottom: var(--spacing-4);
}

.alignright {
	float: right;
	margin-left: var(--spacing-4);
	margin-bottom: var(--spacing-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-block-end: var(--spacing-4);
	clear: both;
}

.alignnone {
	margin-block-end: var(--spacing-4);
	clear: both;
}

/* Negativ-Margin exakt = Container-Padding (--spacing-4): .alignwide
 * reicht auf schmalen Viewports bis an den Rand, nie darüber hinaus
 * (html { overflow-x: clip } würde den Überstand unsichtbar schlucken). */
.alignwide {
	margin-inline: calc(-1 * var(--spacing-4));
	max-width: calc(100% + 2 * var(--spacing-4));
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
}

/* -------------------------------------------------------------------------
 * 2. Captions
 * ---------------------------------------------------------------------- */

.wp-caption {
	max-width: 100%;
	margin-block-end: var(--spacing-4);
	display: flow-root;
}

.wp-caption img {
	margin-inline: auto;
}

.wp-caption-text {
	margin-block-start: var(--spacing-2);
	font-size: 0.875em;
	color: var(--color-secondary);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 3. Legacy-Galerien
 * ---------------------------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-3);
	margin-block-end: var(--spacing-4);
}

.gallery-item {
	margin: 0;
}

.gallery-item img {
	width: 100%;
}

.gallery-caption {
	margin-block-start: var(--spacing-1);
	font-size: 0.8125em;
	color: var(--color-secondary);
	text-align: center;
}

.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

@media (max-width: 767px) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 4. Barrierefreiheit
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* Skip-Links bei Fokus sichtbar machen */
.screen-reader-text:focus {
	position: absolute !important;
	top: var(--spacing-2);
	left: var(--spacing-2);
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--spacing-3) var(--spacing-4);
	clip-path: none;
	background-color: var(--color-background);
	color: var(--color-primary);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 2px var(--color-primary);
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	white-space: normal;
}

/* -------------------------------------------------------------------------
 * 5. Kommentare
 * ---------------------------------------------------------------------- */

.comments-area {
	margin-block-start: var(--spacing-6);
}

.comment-list {
	margin: 0 0 var(--spacing-5);
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0;
	padding-inline-start: var(--spacing-5);
	list-style: none;
}

.comment-body {
	padding-block: var(--spacing-4);
	border-block-end: 1px solid var(--color-border);
}

.comment-meta,
.comment-metadata {
	margin-block-end: var(--spacing-2);
	font-size: 0.875em;
	color: var(--color-secondary);
}

/* Avatar rund und inline neben dem Autor-Namen */
.comment-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}

.comment-author .avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-metadata a {
	color: inherit;
}

.comment-reply-link {
	display: inline-block;
	margin-block-start: var(--spacing-2);
	font-size: 0.875em;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
}

.comment-reply-link:hover {
	text-decoration: underline;
}

#respond,
.comment-respond {
	margin-block: var(--spacing-5);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
	margin-block-end: var(--spacing-1);
}

/* Checkbox-Zeilen (z. B. Cores Cookie-Consent-Opt-in) bleiben inline –
 * display:block oben würde das Label unter die Checkbox brechen. */
.comment-form .comment-form-cookies-consent label {
	display: inline;
	margin-block-end: 0;
}

.comment-form .form-submit {
	margin-block-start: var(--spacing-2);
}

.comment-notes,
.logged-in-as {
	font-size: 0.875em;
	color: var(--color-secondary);
}

/* -------------------------------------------------------------------------
 * 6. Pagination
 *
 * the_posts_pagination() liefert .navigation.pagination mit .nav-links
 * und .page-numbers – genau dieses Markup nutzen die Fallback-Templates.
 * ---------------------------------------------------------------------- */

.navigation {
	margin-block: var(--spacing-5);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	padding: var(--spacing-1) var(--spacing-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--transition), background-color var(--transition);
}

.page-numbers:hover {
	border-color: var(--color-primary);
}

.page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-background);
}

.page-numbers.dots {
	border: 0;
	color: var(--color-secondary);
}

.post-navigation,
.posts-navigation,
.comment-navigation {
	margin-block: var(--spacing-5);
}

.post-navigation .nav-links,
.posts-navigation .nav-links,
.comment-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-4);
}

.post-navigation a,
.posts-navigation a,
.comment-navigation a {
	color: var(--color-primary);
	text-decoration: none;
}

.post-navigation a:hover,
.posts-navigation a:hover,
.comment-navigation a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 7. Sonstiges
 * ---------------------------------------------------------------------- */

/* Von Theme-Check verlangt – bewusst ohne aufdringliches Styling. */
.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}

.wp-block-image {
	margin-block-end: var(--spacing-4);
}

.wp-block-image figcaption {
	margin-block-start: var(--spacing-2);
	font-size: 0.875em;
	color: var(--color-secondary);
	text-align: center;
}

/* Überschreiben Core-Block-CSS (physische .5em/1em-Margins) mit den
 * Theme-Abständen – nicht löschen, sonst gewinnt wp-block-library. */
.wp-block-image .alignleft {
	float: left;
	margin-right: var(--spacing-4);
}

.wp-block-image .alignright {
	float: right;
	margin-left: var(--spacing-4);
}

.has-text-align-left {
	text-align: left;
}

.has-text-align-center {
	text-align: center;
}

.has-text-align-right {
	text-align: right;
}