/*
Theme Name:   Somewhere With Us
Theme URI:    https://somewherewithus.com
Description:  Child-Theme fuer Astra. Enthaelt die eigenen Anpassungen des Reiseblogs,
              damit Astra-Updates sie nicht ueberschreiben.
Author:       Roman Pille
Template:     astra
Version:      1.1.0
Text Domain:  somewherewithus
*/

/* Das Aussehen steht in design.css (erzeugt aus dem Entwurf). Hier steht nur,
   was dazukommt, weil WordPress anderes Markup erzeugt als der Entwurf:
   echte Links statt Platzhaltertext, echte Bilder statt grauer Flaechen,
   echte Formularfelder statt Attrappen. */

/* ---------- Grundgeruest ---------- */

* { box-sizing: border-box; }

/* Die Seitenfarbe muss auch auf der Wurzel stehen, nicht nur auf body.
   Sonst malt der Browser alles ausserhalb des body-Kastens in der Standardfarbe
   seines Farbschemas, und die weicht sichtbar vom Seitenschwarz ab. */
html {
	-webkit-text-size-adjust: 100%;
	background: var(--m-bg);
}

/* Fusszeile am unteren Rand halten, auch wenn der Inhalt kurz ist. Ohne das
   sitzt sie direkt unter dem letzten Absatz und darunter bleibt die Seite leer. */
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

main {
	display: block;
	flex: 1 0 auto;
	width: 100%;
	padding: 0;
}

.swu-nav,
.swu-foot,
.private-band { flex: none; }

/* Das Farbschema des Browsers muss der Wahl auf der Seite folgen, nicht der
   Systemeinstellung. Der Entwurf setzt fest "light dark", weil dort das System
   entscheiden sollte. Hier entscheidet der Umschalter. Betroffen ist alles, was
   der Browser selbst faerbt: Scrollbalken, Formularelemente und die Flaeche
   jenseits des Dokuments. Steht das falsch, mischt sich ein zweiter Schwarzton ein. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Stammt aus dem Entwurf, wo jede Ansicht in einem eigenen Container lag.
   Auf body erzeugt es nur einen ueberfluessigen Stacking Context. */
body { isolation: auto; }

/* ---------- Hoehe der Fusszeile ---------- */

/* Die Fusszeile traegt nur Rechtliches und Kontakt. Sie soll den Abschluss
   markieren und selbst so wenig Platz wie moeglich einnehmen.
   Der obere Abstand kommt von hier, nicht mehr vom Inhalt darueber. */
.swu-foot {
	margin-top: 34px;
	padding-top: 10px;
	padding-bottom: 11px;
	line-height: 1.35;
}

/* Der Abstand ueber der Fusszeile schwankte je Seite zwischen 12 und 40 Pixeln,
   weil jeder Inhaltsblock seinen eigenen unteren Abstand mitbringt. Der letzte
   Block gibt seinen ab, damit der Abschluss ueberall gleich aussieht. */
main > :last-child,
main > :last-child > :last-child {
	padding-bottom: 0;
}

/* ---------- Raster der Beitragskarten ---------- */

/* Feste drei Spalten liessen bei zwei Beitraegen die rechte Haelfte leer.
   Das min() ist wichtig: Ohne es erzwingt minmax eine Spaltenbreite von 280px
   auch auf einem schmaleren Bildschirm, und die Seite laesst sich seitlich
   schieben. Die Obergrenze von 380px haelt die Kacheln in der Groesse des
   Entwurfs, statt sie auf breiten Bildschirmen aufzublasen. */
.cards,
.next-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 380px));
	justify-content: center;
}

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

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

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.swu-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: var(--m-gold);
	color: var(--m-bg);
	font-family: var(--m-body);
	font-size: 13px;
}

.swu-skip:focus { left: 0; }

.swu-leer {
	font-family: var(--m-read);
	color: var(--m-soft);
	padding: 10px 34px 60px;
	font-size: 16px;
}

/* ---------- Links, die im Entwurf noch Text waren ---------- */

.swu-nav ul li a,
.foot-legal a,
.swu-foot .socials a,
.art-foot a,
.map-legend a {
	color: inherit;
	text-decoration: none;
}

.swu-nav ul li a { display: block; transition: color .2s ease; }
.swu-nav ul li a:hover { color: var(--m-gold); }
.swu-nav ul li.swu-aktuell a { color: var(--m-ink); }

.brand { text-decoration: none; color: inherit; }

.card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.chip { text-decoration: none; color: inherit; }

.map-legend a {
	display: inline-flex;
	align-items: center;
}

.contact-item .v { text-decoration: none; }

/* ---------- Bilder, wo der Entwurf graue Flaechen hatte ---------- */

.shot { overflow: hidden; }

.shot img,
.art-lead img,
.about-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.art-lead, .about-portrait { overflow: hidden; }

.card .shot img { transition: transform .5s ease; }
.card:hover .shot img { transform: scale(1.03); }

/* ---------- Inhalte aus dem Editor ---------- */

.art-body :is(h2, h3) {
	font-family: var(--m-display);
	font-style: var(--m-display-style);
	font-weight: var(--m-display-weight);
	font-size: 27px;
	line-height: 1.25;
	margin: 42px 0 14px;
	color: var(--m-ink);
}

.art-body a { color: var(--m-gold); text-underline-offset: 3px; }

.art-body :is(ul, ol) {
	font-family: var(--m-read);
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--m-ink);
	max-width: 65ch;
	margin: 0 auto 20px;
	padding-left: 22px;
}

.art-body blockquote {
	margin: 34px auto;
	max-width: 65ch;
	padding: 22px 26px;
	background: var(--m-quote);
	border: none;
}

.art-body blockquote p {
	font-family: var(--m-display);
	font-style: italic;
	font-size: 21px;
	margin: 0;
}

.art-body figure { margin: 30px 0; }

.art-body figcaption {
	font-family: var(--m-body);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: var(--m-faint);
	text-align: center;
	margin-top: 9px;
	padding: 0 20px;
}

/* Galerie-Block: Vollbild zum Durchblaettern ist in WordPress eingebaut. */
.art-body .wp-block-gallery { margin: 34px 0; }

.art-body .wp-block-gallery img { border-radius: 2px; }

/* ---------- Seiten aus dem Editor (Impressum, Datenschutz, Über uns) ---------- */

/* Der Editor erzeugt h2, gestaltet war nur h4. Dadurch standen die Überschriften
   in Impressum und Datenschutz in der Standardschrift des Browsers. */
.about-body :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--m-display);
	font-style: var(--m-display-style);
	font-weight: var(--m-display-weight);
	letter-spacing: var(--m-display-track);
	color: var(--m-ink);
	margin: 34px 0 16px;
	line-height: 1.24;
	text-wrap: balance;
}

.about-body :is(h1, h2) { font-size: 27px; }
.about-body h3 { font-size: 25px; }
.about-body :is(h4, h5, h6) { font-size: 22px; }

.about-body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

.about-body :is(ul, ol) {
	font-family: var(--m-read);
	font-size: 19px;
	line-height: 1.72;
	color: var(--m-ink);
	margin: 0 0 24px;
	padding-left: 22px;
}

.about-body li { margin-bottom: 8px; }

.about-body a { color: var(--m-gold); text-underline-offset: 3px; }

.about-body :is(strong, b) { font-weight: 600; }

.about-body table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--m-read);
	font-size: 17px;
	margin: 0 0 24px;
}

.about-body :is(th, td) {
	text-align: left;
	padding: 9px 12px 9px 0;
	border-bottom: 1px solid var(--m-hair);
	vertical-align: top;
}

/* ---------- Kontaktblock auf "Über uns" ---------- */

.contact-item .k {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.contact-item .k svg {
	flex: none;
	/* Die Beschriftung steht in Versalien und wirkt dadurch höher als sie ist.
	   Ohne die Verschiebung sitzt das Symbol optisch zu tief. */
	transform: translateY(-0.5px);
	opacity: .85;
}

/* ---------- Kommentarformular ---------- */

.comment-form .row {
	display: flex;
	gap: 12px;
	margin: 0 0 12px;
}

.comment-form .row input {
	flex: 1;
	min-width: 0;
}

.comment-form :is(input, textarea) {
	width: 100%;
	font-family: var(--m-body);
	font-size: 14px;
	padding: 12px 14px;
	background: transparent;
	color: var(--m-ink);
	border: 1px solid var(--m-hair);
	border-radius: 2px;
}

.comment-form :is(input, textarea)::placeholder { color: var(--m-faint); }

.comment-form textarea { resize: vertical; min-height: 96px; }

.comment-form .form-submit { margin: 14px 0 0; }

.comment-wartet {
	font-family: var(--m-body);
	font-size: 13px;
	color: var(--m-faint);
	font-style: italic;
}

.comment-form .comment-form-cookies-consent { display: none; }

/* ---------- Blaetternavigation ---------- */

.pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 20px 34px 60px;
	font-family: var(--m-body);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pagination :is(a, span) {
	color: var(--m-soft);
	text-decoration: none;
	padding: 8px 13px;
	border: 1px solid var(--m-hair);
}

.pagination a:hover { color: var(--m-gold); border-color: var(--m-gold); }
.pagination .current { color: var(--m-bg); background: var(--m-gold); border-color: var(--m-gold); }

@media (max-width: 620px) {
	.swu-leer, .pagination { padding-left: 20px; padding-right: 20px; }
	.comment-form .row { flex-direction: column; }
}

/* ---------- Laenderleiste unter der Karte ---------- */

/* Der Entwurf gestaltete hier <button>. Es sind aber Links auf die Laenderseiten,
   deshalb erzeugt karte.js <a>, und die Gestaltung lief ins Leere. */
.map-legend a {
	font-family: var(--m-body);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	padding: 6px 14px;
	border: 1px solid var(--m-hair);
	border-radius: 999px;
	background: transparent;
	color: var(--m-soft);
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.map-legend a:hover,
.map-legend a:focus-visible {
	border-color: var(--m-gold);
	color: var(--m-gold);
}

.map-legend a i {
	font-style: normal;
	color: var(--m-faint);
	margin-left: 7px;
}

/* ---------- Ausrichtung von Legende und Fusszeile ---------- */

/* Die Fusszeile stand auf space-between. Dabei landet die mittlere Gruppe nur
   dann in der Seitenmitte, wenn die Bloecke links und rechts gleich breit sind,
   und das sind sie nie. Mit drei Spalten sitzt die Mitte wirklich mittig und
   liegt auf derselben Achse wie die Laenderleiste darueber. */
.swu-foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px 26px;
}

.swu-foot > :first-child { justify-self: start; }
.swu-foot .socials { justify-self: center; }
.swu-foot .foot-legal { justify-self: end; }

/* Symbol und Beschriftung als eine Einheit, damit der Zeilenumbruch sie nicht
   trennt und das Symbol nicht auf der Schriftlinie sitzt. */
.swu-foot .socials a,
.contact-item .k {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.swu-symbol {
	flex: none;
	opacity: .85;
}

/* Die Knoepfe bekommen eine feste Hoehe statt eines vertikalen Innenabstands.
   Mit Innenabstand richtet sich die Hoehe nach dem Inhalt, und der unterscheidet
   sich je nach Wort: "Portugal" hat mit dem g eine Unterlaenge, "Marokko" nicht.
   Dadurch waren die Knoepfe unterschiedlich hoch und der Text sass verschieden
   tief. Feste Hoehe plus Zentrierung in beide Richtungen loest beides. */
.map-legend {
	align-items: center;
	justify-content: center;
}

.map-legend a {
	min-height: 30px;
	padding: 0 15px;
	line-height: 1;
	align-items: center;
	justify-content: center;
}

/* ---------- Handyansicht ---------- */

@media (max-width: 620px) {
	/* Der Umschalter sitzt am rechten Rand, die Menuepunkte davor. */
	.swu-nav ul {
		width: 100%;
		align-items: center;
	}

	.swu-nav-umschalter { margin-left: auto; }

	/* Fusszeile untereinander, alles mittig. Nebeneinander wird es zu eng,
	   und Impressum und Datenschutz sollen nicht am Rand kleben. */
	.swu-foot {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 10px;
	}

	.swu-foot > :first-child,
	.swu-foot .socials,
	.swu-foot .foot-legal {
		justify-self: center;
	}

	.swu-foot .socials,
	.swu-foot .foot-legal {
		justify-content: center;
		flex-wrap: wrap;
	}
}