/*
Theme Name: Reisetagebuch (Astra Child)
Theme URI: https://example.com/
Description: Child-Theme für Astra. Ruhiges, fotolastiges Layout für ein privates Reisetagebuch. Beiträge erhalten automatisch ein fertiges Gerüst, damit alle Berichte gleich aussehen.
Author: Für dich gebaut
Version: 1.0.0
Template: astra
License: GNU General Public License v2 or later
Text Domain: reisetagebuch
*/

/* ---------------------------------------------------------
   1. Design-Werte
   Schriften bewusst als System-Stacks: keine Google Fonts,
   damit nichts an externe Server geht (DSGVO).
   --------------------------------------------------------- */

:root {
	--rt-ink: #16232b;
	--rt-muted: #5d6b73;
	--rt-rule: #e1e6e8;
	--rt-paper: #ffffff;
	--rt-accent: #1f6f6b;

	--rt-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--rt-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--rt-text-width: 36rem;
	--rt-wide-width: 60rem;
}

/* ---------------------------------------------------------
   2. Grundtypografie
   --------------------------------------------------------- */

body {
	font-family: var(--rt-serif);
	color: var(--rt-ink);
	background: var(--rt-paper);
	font-size: 1.1875rem;
	line-height: 1.75;
}

.entry-content p {
	margin: 0 0 1.4em;
}

h1, h2, h3, h4,
.entry-title {
	font-family: var(--rt-serif);
	color: var(--rt-ink);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.2;
}

.entry-content h2 {
	font-size: 1.6rem;
	margin: 2.6em 0 0.7em;
}

.entry-content h3 {
	font-size: 1.28rem;
	margin: 2.2em 0 0.6em;
}

a {
	color: var(--rt-accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	color: var(--rt-ink);
}

:focus-visible {
	outline: 2px solid var(--rt-accent);
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   3. Der Einzelbeitrag
   Textspalte schmal, Bilder brechen bewusst aus.
   --------------------------------------------------------- */

.single-post .entry-content > * {
	max-width: var(--rt-text-width);
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-title {
	font-size: clamp(2rem, 5vw, 2.9rem);
	max-width: 20ch;
	margin-bottom: 0.5rem;
}

/* Einleitungsabsatz: etwas größer, ruhig */
.entry-content .reise-lead {
	font-size: 1.32rem;
	line-height: 1.62;
	color: var(--rt-ink);
	margin-bottom: 2.2em;
}

/* Datum und Kategorie über dem Titel */
.single-post .entry-meta,
.single-post .post-meta {
	font-family: var(--rt-sans);
	font-size: 0.82rem;
	color: var(--rt-muted);
	letter-spacing: 0.01em;
}

/* Bilder und Galerien dürfen breiter werden als der Text */
.single-post .entry-content .wp-block-image,
.single-post .entry-content .wp-block-gallery,
.single-post .entry-content .wp-block-embed {
	max-width: var(--rt-wide-width);
	margin-top: 2.6em;
	margin-bottom: 2.6em;
}

.wp-block-image img,
.wp-block-gallery img {
	border-radius: 2px;
}

figcaption,
.wp-element-caption {
	font-family: var(--rt-sans);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--rt-muted);
	text-align: left;
	margin-top: 0.7em;
}

.entry-content blockquote {
	border-left: 2px solid var(--rt-accent);
	padding-left: 1.4em;
	margin: 2.4em auto;
	font-style: normal;
	color: var(--rt-muted);
}

.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rt-rule);
	width: 100%;
	margin: 3.2em auto;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
}

.entry-content li {
	margin-bottom: 0.5em;
}

/* Beitragsbild ganz oben, volle Breite */
.single-post .post-thumb img,
.single-post .ast-single-post-featured-section img {
	width: 100%;
	height: auto;
	object-fit: cover;
	max-height: 70vh;
	border-radius: 2px;
}

/* ---------------------------------------------------------
   4. Die Übersicht der Reiseberichte
   Die Beiträge sind eine Chronologie, deshalb eine
   durchgehende Linie mit Datumspunkten statt Kacheln.
   --------------------------------------------------------- */

.blog .ast-article-post,
.archive .ast-article-post {
	position: relative;
	border: 0;
	border-bottom: 1px solid var(--rt-rule);
	padding: 0 0 2.6rem 0;
	margin-bottom: 2.6rem;
	box-shadow: none;
}

.blog .ast-article-post:last-of-type,
.archive .ast-article-post:last-of-type {
	border-bottom: 0;
}

.blog .entry-title,
.archive .entry-title {
	font-size: 1.75rem;
	margin: 0.6rem 0 0.4rem;
}

.blog .entry-title a,
.archive .entry-title a {
	color: var(--rt-ink);
	text-decoration: none;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
	color: var(--rt-accent);
	text-decoration: underline;
}

.blog .post-thumb img,
.archive .post-thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
}

.blog .entry-content p,
.archive .entry-content p {
	color: var(--rt-muted);
	max-width: 60ch;
}

/* Weiterlesen unauffällig halten */
.ast-blog-featured-section + .entry-content .read-more,
.read-more a {
	font-family: var(--rt-sans);
	font-size: 0.88rem;
}

/* ---------------------------------------------------------
   5. Kopf- und Fußbereich
   --------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--rt-rule);
}

.main-header-menu a,
.site-footer {
	font-family: var(--rt-sans);
}

.main-header-menu a {
	font-size: 0.95rem;
}

.site-footer {
	font-size: 0.88rem;
	color: var(--rt-muted);
	border-top: 1px solid var(--rt-rule);
}

/* ---------------------------------------------------------
   6. Karte (Travelers' Map / Leaflet) einpassen
   --------------------------------------------------------- */

.leaflet-container {
	border-radius: 2px;
	border: 1px solid var(--rt-rule);
	font-family: var(--rt-sans);
}

.single-post .leaflet-container {
	max-width: var(--rt-wide-width);
	margin: 2.6em auto;
}

/* ---------------------------------------------------------
   7. Kleine Bildschirme
   --------------------------------------------------------- */

@media (max-width: 782px) {
	body {
		font-size: 1.0625rem;
	}

	.entry-content .reise-lead {
		font-size: 1.18rem;
	}

	.single-post .entry-content .wp-block-image,
	.single-post .entry-content .wp-block-gallery {
		margin-top: 2em;
		margin-bottom: 2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}