/* ==========================================================================
   HPL main file
   ========================================================================== */

/*
 * Globale Schrift- und Link-Optik der ganzen Website.
 *
 * Blocksy definiert body/a selbst mit derselben Selektor-Spezifität
 * (body{color:var(--theme-text-color)}, a{color:var(--theme-link-initial-color);...}),
 * daher braucht es !important, sonst gewinnt je nach Ladereihenfolge
 * der Stylesheets mal die eine, mal die andere Regel.
 *
 * "underline" vor var(--hpl-link-decoration) (30.8. ergänzt): die
 * text-decoration-Kurzform setzt text-decoration-line bei fehlender
 * Linienangabe implizit auf "none" zurück - ohne dieses "underline"
 * blieb die in --hpl-link-decoration (hpl-variables.css) hinterlegte
 * gepunktete Linie unsichtbar, auf der gesamten Website, für JEDEN
 * Link. Die gepunktete Unterstreichung ist bewusst so gewählt (nicht
 * nur Farbe), damit Links auch für farbenblinde Besucher als Links
 * erkennbar sind - ohne "underline" verfehlte die Regel genau diesen
 * Zweck.
 *
 * WICHTIG (30.8. korrigiert, siehe Nutzerfeedback "Bleistift und
 * Muelleimer und Menu-punkte sind unterstrichen"): Spezielle Links wie
 * Icons (".hpl-event-edit-link", ".hpl-event-delete-link", ...) oder
 * Menuepunkte (".ct-menu-link") sollen NIE unterstrichen sein - nur
 * gewoehnliche, inhaltliche Links sollen die hier zentral definierte
 * Unterstreichung bekommen. Eine hoehere CSS-Spezifitaet allein reicht
 * dafuer NICHT aus: !important schlaegt Spezifitaet immer, unabhaengig
 * davon, wie spezifisch der konkurrierende Selektor ist. Jede Ausnahme
 * von dieser Regel braucht deshalb selbst "text-decoration: none
 * !important" (siehe .hpl-event-edit-link/.hpl-event-delete-link in
 * hpl-events-manager.css, .hpl-tile/.hpl-news-teaser-title a in
 * hpl-start-page.css, .ct-menu-link in hpl-menu.css) - eine blosse
 * hoehere Spezifitaet ohne !important wird stillschweigend ignoriert.
 */
body {
	color: var(--hpl-font-color) !important;
	font-weight: var(--hpl-font-weight) !important;
	font-family: var(--hpl-font-family) !important;
}

a {
	color: var(--hpl-link-color) !important;
	text-decoration: underline var(--hpl-link-decoration) !important;
}

/*
 * Header-Leiste (.ct-header, der farbige Balken oben): alle Texte und
 * Links darin bekommen die eigens dafür vorgesehene Kontrastoptik
 * (--hpl-header-bar-*, hpl-variables.css) statt der generischen
 * Link-/Textfarbe von oben.
 *
 * Ersetzt die frühere Lösung über "a:not(.ct-menu-link)" - eine
 * Ausschlussliste, die bei jedem neuen Link im Header von Hand
 * nachgepflegt werden musste (zuletzt hat der Seitentitel "Longku"
 * gefehlt und war dadurch rot auf rotem Balken unsichtbar). Diese
 * Regel hier gilt automatisch für jedes Element innerhalb von
 * .ct-header, auch für künftig hinzukommende, ohne dass an dieser
 * Datei noch etwas geändert werden muss.
 *
 * "!important" ist nötig, um die ebenfalls "!important" gesetzte
 * generische a-Regel direkt oberhalb zu schlagen - bei zwei
 * "!important"-Regeln entscheidet zuerst wieder die Spezifität, und
 * ".ct-header a" (Klasse + Element) ist spezifischer als "a" (nur
 * Element).
 *
 * hpl-menu.css bleibt unverändert bestehen: seine Selektoren sind
 * noch spezifischer als diese Regel hier und kümmern sich weiterhin
 * eigenständig um den Hover-/Aktiv-Textschatten der Menüpunkte - hier
 * geht es nur um Farbe/Schriftstärke als Basis für ALLE Header-Texte,
 * nicht nur das Menü.
 */
.ct-header {
	background-color: var(--hpl-header-bar-background-color) !important;
}

.ct-header,
.ct-header a {
	color: var(--hpl-header-bar-color) !important;
	font-weight: var(--hpl-header-bar-font-weight) !important;
	font-size: 16px;    /* Ist bei den anderen Menupunkten auch hartcodiert */
}

/*
 * Blendet die Autor/Datum-Zeile des Themes auf der Single-Event-Seite
 * aus.
 *
 * "entry-meta" ist die Standard-Post-Meta-Box des Themes (Blocksy),
 * die Autor und Datum unter dem Titel anzeigt - nicht Teil unseres
 * Format-Strings. Auf die Klasse "single-event" beschränkt (von
 * WordPress automatisch für den Post-Type "event" vergeben), damit
 * Blogbeiträge und andere Post-Typen davon unberührt bleiben.
 */
.entry-meta {
	display: none;
}

/*
 * Alle Buttons der Website: weisse Schrift auf rotem Grund.
 *
 * Ein einfacher "button"-Element-Selektor allein reicht nicht: viele
 * "Buttons" sind gar keine <button>-Elemente (Block-Editor-Buttons sind
 * <a class="wp-block-button__link">, WooCommerce nutzt teils <input
 * type="submit">, usw.), und WordPress' eigene Admin-Klassen wie
 * ".button.button-secondary" sind mit zwei Klassen spezifischer als ein
 * blosser Element-Selektor und würden sonst gewinnen (siehe z.B. den
 * "Ausgewählte löschen"-Button in hpl-events-manager.css). Diese
 * Selektorliste entspricht deshalb genau der, die Blocksy selbst
 * theme-weit für alle Arten von Buttons verwendet (WordPress-Kern,
 * Block-Editor, WooCommerce, Formulars-Plugins), ergänzt um den reinen
 * "button"-Element-Selektor als Auffangnetz für sonstige, klassenlose
 * Buttons.
 */
.button,
.ct-button,
.added_to_cart,
.ct-button-ghost,
[type="submit"],
.wp-element-button,
.wp-block-button__link,
button.regform-button,
button[class*="ajax"],
.woocommerce button.button,
.woocommerce-message .showlogin,
.woocommerce-message .restore-item,
.forminator-ui[data-design="none"] .forminator-button,
.fluentform .ff-el-group button.ff-btn,
button {
	background-color: var(--hpl-button-background-color) !important;
	color: var(--hpl-button-text-color) !important;
}

/*
 * Ausnahme vom Marken-Rot oben: WordPress-/TinyMCE-eigene
 * Bedienelemente, die per JavaScript direkt an <body> gehängt werden
 * (TinyMCE-Popup beim Link-Einfügen/-Bearbeiten, das klassische
 * "Link einfügen/bearbeiten"-Fenster #wp-link-wrap) - unabhängig
 * davon, in welchem Editor auf welcher Seite sie geöffnet wurden.
 * Ohne diese Ausnahme greift der Button-Selektor oben trotzdem, weil
 * er rein auf Element-/Attribut-Selektoren beruht und diese
 * Popup-Buttons nicht innerhalb irgendeines Editor-Wrappers liegen,
 * sondern direkt unter <body> ("rotes Meer in den Unterpopups",
 * Rückmeldung vom 30.8.: Ausrichtungs-Icons, "Entfernen", "Abbrechen"
 * usw. wurden dadurch in Markenrot statt in ihrer gewohnten
 * WordPress-Optik dargestellt).
 *
 * ".mce-container" ist die Basisklasse, die TinyMCE jedem seiner
 * Bedienelemente gibt (Werkzeugleisten, Popups, Fenster) - deckt damit
 * automatisch auch künftige TinyMCE-Popups ab (z.B. Zeichentabelle,
 * Farbwähler), nicht nur das Link-Popup. Zwei Zielfarben statt einer,
 * weil WordPress/TinyMCE selbst zwischen normalen und primären
 * Buttons unterscheidet ("Anwenden", "Link hinzufügen") - dieselben
 * Werte wie WordPress' eigenes wp-admin (#f6f7f7/#2c3338 bzw.
 * #2271b1/#fff), damit diese Elemente wieder wie gewohntes
 * WordPress-Kern-UI aussehen statt wie Website-Buttons. Höhere
 * Spezifität als die Regel oben (zwei Klassen bzw. ID+Element statt
 * einer Klasse/eines Attributs) gewinnt zuverlässig, unabhängig von
 * der Ladereihenfolge.
 */
.mce-container button,
.mce-container input[type="submit"],
.mce-container .button,
#wp-link-wrap button,
#wp-link-wrap input[type="submit"],
#wp-link-wrap .button {
	background-color: #f6f7f7 !important;
	color: #2c3338 !important;
}

.mce-container .mce-primary button,
#wp-link-wrap .button-primary {
	background-color: #2271b1 !important;
	color: #fff !important;
}