/* Anfang: Goerdes-Design Layout und Lesebreite

   Zweck:
   Diese Datei bündelt die grundlegende Breitensteuerung des Child Themes.

   Warum diese Datei existiert:
   Twenty Twenty-One arbeitet mit eigenen Breitenvariablen.
   Ohne eigene Anpassung können einzelne Bereiche unterschiedlich breit wirken.
   Besonders Kategorie- und Schlagwortarchive können dadurch optisch zu breit laufen.

   Ziel:
   Beiträge, Seiten, Kategoriearchive, Schlagwortarchive, Kommentare
   und zentrale Navigationsbereiche sollen dieselbe ruhige Lesebreite verwenden.

   Wichtig:
   Der Header-Hintergrund darf weiterhin breiter sein.
   Das dekorative Headerbild bleibt also nicht auf die Lesespalte beschränkt.
   Beschränkt werden vor allem echte Inhalte, die gelesen oder bedient werden.

   Lesebreite:
   72ch bedeutet ungefähr eine Zeilenlänge von 72 Zeichen.
   Das ist nicht millimetergenau, weil Buchstaben unterschiedlich breit sind.
   Es ist aber eine gute CSS-Einheit für lesbare Textspalten.
*/

/* Anfang: Zentrale Layout-Variablen

   --goerdes-layout-reading-width:
   Maximale Breite der normalen Lesespalte.

   --goerdes-layout-side-padding:
   Seitlicher Sicherheitsabstand auf schmalen Bildschirmen.

   --responsive--aligndefault-width und --responsive--alignwide-width:
   Diese Variablen stammen aus Twenty Twenty-One.
   Sie werden hier bewusst überschrieben, damit auch Parent-Theme-Bereiche
   dieselbe Lesebreite verwenden.

   Wichtig:
   alignwide wird absichtlich nicht breiter gesetzt.
   Für diese textorientierte Website sollen auch breite Inhaltsblöcke
   ruhig in der normalen Lesespalte bleiben.
*/

:root {
	--goerdes-layout-reading-width: 72ch;
	--goerdes-layout-side-padding: clamp(1rem, 4vw, 2rem);
	--responsive--aligndefault-width: min(
		var(--goerdes-layout-reading-width),
		calc(100vw - var(--goerdes-layout-side-padding) - var(--goerdes-layout-side-padding))
	);
	--responsive--alignwide-width: min(
		var(--goerdes-layout-reading-width),
		calc(100vw - var(--goerdes-layout-side-padding) - var(--goerdes-layout-side-padding))
	);
}

/* Ende: Zentrale Layout-Variablen */


/* Anfang: Normale Inhaltsbreite für Beiträge und Seiten

   Diese Regeln greifen bei einzelnen Beiträgen und statischen Seiten.
   Sie halten Überschrift, Inhalt, Footer des Beitrags,
   Beitragsnavigation und Kommentarbereich in derselben Lesespalte.

   Warum nicht .site-main global begrenzen?
   Eine globale Begrenzung wäre zu grob.
   Sie könnte Bereiche treffen, die Twenty Twenty-One anders behandelt.
   Deshalb werden hier die eigentlichen Inhaltsbereiche gezielt angesprochen.
*/

.singular .entry-header,
.singular .entry-footer,
.singular .post-navigation,
.singular .comments-area,
.page .entry-header,
.page .entry-footer,
.page .comments-area {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > *,
.entry-summary > *,
.page-content > * {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-summary > .alignwide,
.entry-summary > .alignfull,
.page-content > .alignwide,
.page-content > .alignfull {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

/* Ende: Normale Inhaltsbreite für Beiträge und Seiten */


/* Anfang: Kategorie- und Schlagwortarchive auf Lesebreite begrenzen

   Die eigenen Archiv-Templates category.php und tag.php verwenden:
   .goerdes-archive

   Deshalb kann die Breite hier sauber per CSS gesteuert werden,
   ohne die Template-Dateien erneut anzufassen.

   Ergebnis:
   Kategorien und Schlagwörter laufen nicht mehr über den ganzen Bildschirm.
   Sie verwenden dieselbe Lesebreite wie normale Beiträge und Seiten.
*/

.site-main.goerdes-archive {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

.goerdes-archive__header,
.goerdes-archive-az,
.goerdes-archive-list,
.goerdes-archive .navigation,
.goerdes-archive .pagination {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Ende: Kategorie- und Schlagwortarchive auf Lesebreite begrenzen */


/* Anfang: Grundabstände für Archivseiten

   Diese Regeln sind bewusst zurückhaltend.
   Sie sorgen nur dafür, dass Archivüberschrift, A-Z-Navigation
   und einzelne Archiv-Einträge nicht direkt aneinanderkleben.

   Die eigentliche Farblogik bleibt in colors.css.
*/

.goerdes-archive__header {
	margin-bottom: 2rem;
}

.goerdes-archive__description {
	margin-top: 1rem;
}

.goerdes-archive-az {
	margin: 2rem 0;
	padding: 1rem;
	background-color: var(--goerdes-color-surface, #f7f9fb);
	border: 0.125rem solid var(--goerdes-color-border, #c8d3dc);
	border-radius: 0.5rem;
}

.goerdes-archive-az__intro {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-weight: 700;
	color: var(--goerdes-color-text-strong, #102033);
}

.goerdes-archive-az__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.goerdes-archive-az__link {
	display: inline-block;
	padding: 0.25rem 0.5rem;
}

.goerdes-archive-list__letter {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.35rem;
	border-bottom: 0.125rem solid var(--goerdes-color-border, #c8d3dc);
	color: var(--goerdes-color-text-strong, #102033);
}

.goerdes-archive-entry {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 0.125rem solid var(--goerdes-color-border, #c8d3dc);
}

.goerdes-archive-entry__image {
	margin-bottom: 1rem;
}

.goerdes-archive-entry__image-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.goerdes-archive-entry__title {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--goerdes-color-text-strong, #102033);
}

.goerdes-archive-entry__excerpt {
	line-height: 1.7;
}

.goerdes-archive-entry__readmore-wrap {
	margin-top: 1rem;
	margin-bottom: 0;
}

/* Ende: Grundabstände für Archivseiten */


/* Anfang: Header-Inhalte und Footer an der Lesebreite ausrichten

   Der Header selbst bleibt breit, damit das Hintergrundbild wirken kann.
   Begrenzte Breite bekommen nur der echte Header-Inhalt,
   die Navigation und die Footer-Inhalte.

   Dadurch wirken Header, Inhalt und Footer zusammengehörig,
   ohne dass das dekorative Headerbild beschnitten wird.
*/

.site-branding,
.primary-navigation > .primary-menu-container,
.site-footer > .site-info,
.footer-navigation {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

/* Ende: Header-Inhalte und Footer an der Lesebreite ausrichten */


/* Ende: Goerdes-Design Layout und Lesebreite */