/*
 * Optometrie Online — das Forum.
 *
 * Wird nur auf Forenseiten geladen. Der Rahmen kommt aus layout.css; hier
 * geht es nur darum, wpForos eigene Gestaltung an die gemeinsamen Bausteine
 * anzugleichen.
 *
 * wpForo bringt eine vollständige Oberfläche mit. Sie wird nicht ersetzt,
 * sondern an den Stellen gefasst, die neben den anderen Modulen auffallen
 * würden: Breite, Rahmenfarbe, Radius, Zeilenhöhe.
 */

/*
 * Die Breite. wpForo läuft im Inhaltsbereich und darf ihn ganz ausnutzen —
 * eine Forenübersicht ist eine Tabelle, kein Fließtext.
 */
.oo-forum .oo-main {
	padding-inline: 20px;
}

/*
 * page.php legt den Seiteninhalt in .oo-content, und das trägt eine
 * Lesebreite von 78 Zeichen. Für einen Fachartikel ist das richtig; das
 * Forum wurde davon auf 737 px eingeschnürt — bei 1.680 px Bildschirm.
 */
.oo-forum .oo-content {
	max-width: none;
}

.oo-forum #wpforo,
.oo-forum #wpforo-wrap,
.oo-forum #wpforo #wpforo-wrap .wpforo-content,
.oo-forum #wpforo #wpforo-wrap .wpforo-main {
	max-width: none;
}

.oo-forum #wpforo {
	line-height: var(--oo-line-height);
}

/*
 * wpForos eigenes Menü ist ausgeblendet.
 *
 * Es stand direkt unter der Kopfleiste und zeigte dieselben Bereiche ein
 * zweites Mal — auf Englisch, weil für wpForo kein deutsches Sprachpaket
 * existiert. Zwei Navigationen nebeneinander sind eine zu viel.
 *
 * Seine Punkte stehen jetzt in der Navigationsspalte (siehe
 * optometrie_navigation() in functions.php). Das Suchfeld darin entfällt
 * ebenfalls: Die Suche steht in der Kopfleiste.
 */
/*
 * Zur Schreibweise der Selektoren in dieser Datei:
 *
 * wpForo adressiert seine Elemente mit zwei bis drei Kennungen, etwa
 * „#wpforo #wpforo-wrap #wpforo-menu". Ein Selektor mit nur einer Kennung
 * kommt dagegen nicht an, auch wenn er später geladen wird — beim ersten
 * Versuch liefen sämtliche Anpassungen hier deshalb ins Leere, ohne dass
 * irgendetwas eine Fehlermeldung ausgegeben hätte.
 *
 * Deshalb spiegeln die Selektoren wpForos Struktur und stellen „.oo-forum"
 * voran. Das ist absichtlich kein „!important": Damit ließe sich zwar alles
 * erzwingen, aber die nächste Anpassung hätte keinen Hebel mehr.
 */
.oo-forum #wpforo #wpforo-wrap #wpforo-menu {
	display: none;
}

/* ------------------------------------------------------------ Kopfbereich */

/*
 * Der Kopf eines Forums: Name, Beschreibung, RSS, „Thema erstellen".
 *
 * wpForo gibt ihm eine graue Fläche mit einer geschwungenen Form am rechten
 * Rand und einem farbigen Balken links. Das ist eine eigene Handschrift, die
 * neben den übrigen Modulen fremd wirkt — und der Balken kommt als
 * „border-left: 3px solid" ohne Farbwert aus dem Markup, ist also ohnehin
 * unfertig.
 *
 * Hier wird daraus dieselbe Kachel, die alle Bereiche verwenden.
 */
.oo-forum #wpforo #wpforo-wrap .wpf-head-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	padding: var(--oo-card-padding);
	margin-bottom: 20px;
	border: 1px solid var(--oo-line);
	/*
	 * Die geschwungene Form kommt aus „border-radius: 0 0 60% 0" — kein
	 * Pseudoelement, wie zunächst vermutet, sondern eine Ecke, die über die
	 * halbe Fläche gezogen wird. Hier wird daraus dieselbe Kachel, die alle
	 * Bereiche verwenden.
	 */
	border-radius: var(--oo-radius);
	background: var(--oo-surface);
}

/*
 * Der Balken links steht als „border-left: 3px solid" direkt im Markup —
 * ohne Farbwert, also unfertig; der Browser nimmt dann die Textfarbe und
 * malt einen dunklen Strich.
 *
 * Das ist die einzige Stelle in diesem Theme mit „!important", und sie ist
 * es aus einem sachlichen Grund: Gegen einen Inline-Style kommt kein
 * Stylesheet an, egal wie spezifisch. Der saubere Weg wäre ein Filter im
 * Plugin — den bietet wpForo hier nicht an, und im Plugin selbst wird nicht
 * geschnitten.
 */
.oo-forum #wpforo #wpforo-wrap .wpf-head-bar[style] {
	border-left: 1px solid var(--oo-line) !important;
}

.oo-forum #wpforo #wpforo-wrap .wpf-head-bar-left {
	flex: 1 1 320px;
	min-width: 0;
}

.oo-forum #wpforo #wpforo-wrap .wpf-head-bar-right {
	flex: 0 0 auto;
}

.oo-forum #wpforo #wpforo-wrap #wpforo-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--oo-ink);
}

.oo-forum #wpforo #wpforo-wrap #wpforo-description {
	margin-top: 6px;
	font-size: 13px;
	line-height: var(--oo-line-height);
	color: var(--oo-ink-soft);
}

/* Der RSS-Verweis ist Beiwerk und tritt entsprechend zurück. */
.oo-forum #wpforo #wpforo-wrap .wpf-head-bar .wpf-action-link {
	margin-top: 10px;
	font-size: 12px;
}

/*
 * Die Brotkrumen darüber geben den Weg an und sollen ihn nicht überstrahlen.
 * wpForo setzt sie als Pfeilkette mit Flächen — hier bleibt schlichter Text.
 */
.oo-forum #wpforo #wpforo-wrap .wpf-breadcrumb {
	padding: 0 0 14px;
	font-size: 13px;
	background: transparent;
}

/*
 * Die Pfeilkette der Brotkrumen bleibt, wie wpForo sie baut.
 *
 * Ein Versuch, sie zu schlichtem Text zu machen, ist gescheitert: Die
 * Innenabstände der Glieder tragen dort die Pfeilform, und ohne sie wurde
 * der Text abgeschnitten („ptometrie Onl:"). Wer diese Kette umbauen will,
 * muss sie ganz neu bauen — dafür ist sie zu nebensächlich.
 *
 * Angepasst wird nur die Farbe der Verweise.
 */
.oo-forum #wpforo #wpforo-wrap .wpf-breadcrumb a:hover {
	color: var(--oo-ink);
}

/* -------------------------------------------------------------- Themenliste */

/*
 * Die Themenzeile als Einheit halten.
 *
 * wpForo baut jede Zeile als Flex-Reihe: links Symbol und Titel, rechts die
 * Zahlen. Wird der Inhaltsbereich breit, liegen beide so weit auseinander,
 * dass das Auge die Zuordnung verliert. Die Zahlen bekommen deshalb eine
 * eigene, schmale Spalte und einen leiseren Ton — sie sind Beiwerk.
 *
 * Der Titelbereich bekommt bewusst KEINE Höchstbreite: Beim ersten Versuch
 * stand dort 72ch, woraufhin er schrumpfte und wpForos Flex-Verteilung eine
 * Lücke zwischen Symbol und Titel aufriss.
 */
.oo-forum #wpforo #wpforo-wrap .wpforo-topic {
	gap: 20px;
	align-items: flex-start;
	justify-content: flex-start;
}

.oo-forum #wpforo #wpforo-wrap .wpforo-topic-info {
	flex: 1 1 auto;
	min-width: 0;
}

.oo-forum #wpforo #wpforo-wrap .wpforo-topic-stat-combined {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 120px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--oo-ink-quiet);
	text-align: right;
	white-space: nowrap;
}

.oo-forum #wpforo #wpforo-wrap .wpforo-topic-title {
	line-height: 1.45;
	overflow-wrap: break-word;
}

/* Rahmen leiser, Ecken runder — dieselben Werte wie bei den Kacheln. */
.oo-forum #wpforo #wpforo-wrap .wpforo-content,
.oo-forum #wpforo #wpforo-wrap .wpf-forum-row,
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-row,
.oo-forum #wpforo #wpforo-wrap .wpforo-post {
	border-color: var(--oo-line);
}

/* ------------------------------------------------------------------ Beiträge */

.oo-forum #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content {
	padding: var(--oo-card-padding);
	line-height: var(--oo-line-height);
	overflow-wrap: break-word;
}

/*
 * 26 Jahre Forum heißt: sehr lange Beiträge, teils mit Tabellen und Zitaten.
 * Zeilenhöhe und Absatzabstand entscheiden hier über die Lesbarkeit mehr als
 * jede Farbe.
 */
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content p {
	line-height: var(--oo-line-height);
}

.oo-forum #wpforo #wpforo-wrap .wpforo-post-content p + p {
	margin-top: 1em;
}

/* Bei aller Breite bleibt der gelesene Text auf Lesebreite. */
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content > p,
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content > ul,
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content > ol {
	max-width: 90ch;
}

.oo-forum #wpforo #wpforo-wrap .wpforo-post-content img,
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content iframe {
	max-width: 100%;
	height: auto;
}

/* Tabellen aus Altbeiträgen scrollen für sich, statt die Seite zu sprengen. */
.oo-forum #wpforo #wpforo-wrap .wpforo-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ------------------------------------------------------------ schmale Geräte */

@media (max-width: 767px) {
	.oo-forum .oo-main {
		padding-inline: 10px;
	}

	/* Auf dem Telefon steht die Zeile untereinander, nicht nebeneinander. */
	.oo-forum #wpforo #wpforo-wrap .wpforo-topic-stat-combined {
		margin-left: 0;
		text-align: left;
	}

	.oo-forum #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content {
		padding: 12px;
	}
}