/*
 * Neutrale Basis des Vorlese-Knopfes. Diese Datei wird immer geladen und
 * orientiert sich am WordPress-Standardlook (Aktionsblau #2271b1, 3px
 * Eckenradius), damit das Plugin unter jedem fremden Theme unauffaellig
 * aussieht.
 *
 * Die A&B-eigenen Design-Extras - die Theme-Aktionsfarbe und der Dunkelmodus -
 * stehen in assets/css/ab-theme-design.css und kommen nur bei aktivem Theme
 * "A&B Schulungen" hinzu (siehe AB_Read_Aloud_Plugin::ab_theme_design_active()).
 *
 * Barrierefreiheit steht bewusst HIER und nicht in der Zusatzdatei:
 * Fokusrahmen und Mindesthoehe des Knopfes gelten unter jedem Theme.
 */

[data-ab-plugin-read-aloud] {
	display: none;
}

.has-read-aloud [data-ab-plugin-read-aloud] {
	display: inline-flex;
}

.ab-read-aloud-shortcode {
	margin: 0 0 1.5rem;
}

/*
 * Rahmen und Flaeche des Knopfes - bewusste Abweichung von den neutralen
 * Familienwerten fuer Kaesten (Flaeche #fff, Rahmen 1px #c3c4c7):
 *
 * background: transparent bleibt Absicht. Der Knopf wird in den Fliesstext
 * eingefuegt (automatisch vor dem Inhalt oder per Shortcode) und sitzt damit
 * auf der Seitenflaeche des fremden Themes, nicht in einem eigenen Kasten. Eine
 * feste weisse Flaeche wuerde auf jeder farbigen oder dunklen Seitenflaeche als
 * heller Fleck stehen. Transparent erbt die Seitenflaeche und bleibt neutral.
 *
 * border-color: currentColor statt der Kastenkante #c3c4c7 - ebenfalls Absicht.
 * Das entspricht dem WordPress-Standard fuer sekundaere Schaltflaechen
 * (Rahmen in der Aktionsfarbe) und ist zugleich die barrierefreie Wahl:
 * #c3c4c7 erreicht gegen Weiss nur rund 1,7:1 und verfehlt die 3:1 nach WCAG
 * 1.4.11 fuer die Umgrenzung eines Bedienelements, waehrend currentColor
 * (#2271b1) rund 5,2:1 erreicht.
 *
 * Die Rahmenstaerke folgt dagegen dem Familienstandard: 1px wie jede neutrale
 * Kante. Die 2px-Kontur ist ein Merkmal des A&B-Zusatzdesigns und steht in
 * assets/css/ab-theme-design.css.
 */
.ab-read-aloud-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: #2271b1;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	cursor: pointer;
}

/*
 * Gefuellter Zustand im WordPress-Aktionsblau: Weiss auf #2271b1 erreicht rund
 * 5,2:1 und erfuellt damit WCAG 1.4.3 (mindestens 4,5:1).
 */
.ab-read-aloud-button:focus-visible,
.ab-read-aloud-button[aria-pressed="true"] {
	background: #2271b1;
	color: #fff;
}

/* Hover-Ton des WordPress-Standards: Weiss auf #135e96 erreicht rund 6,8:1. */
.ab-read-aloud-button:hover {
	background: #135e96;
	color: #fff;
}

/*
 * Fokusfarbe #005fcc: erreicht gegen Weiss rund 6:1 und erfuellt damit WCAG
 * 1.4.11 (mindestens 3:1 gefordert). Der bis Version 1.1 verwendete Gelbton
 * kam gegen Weiss nur auf etwa 1,8:1.
 *
 * Nur :focus-visible: so erscheint der Rahmen bei Tastaturbedienung, bleibt
 * aber nach einem Mausklick oder einem per JavaScript gesetzten Fokus - etwa
 * beim Schliessen eines Dialogs - nicht am Knopf stehen. Die :focus-Regeln als
 * Rueckfallebene fuer aeltere Browser stehen am Dateiende im @supports-Block.
 */
.ab-read-aloud-button:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 3px;
}

@media (forced-colors: active) {
	.ab-read-aloud-button {
		border-color: ButtonText;
	}

	.ab-read-aloud-button:focus-visible {
		outline-color: Highlight;
	}
}

/* Rueckfallebene fuer Browser ohne :focus-visible: dort traegt :focus den
   Rahmen, damit die Tastaturbedienung auch dort sichtbar bleibt. Aktuelle
   Browser ueberspringen diesen Block, deshalb bleibt der Rahmen dort nach
   einem Mausklick oder einem per Skript gesetzten Fokus unsichtbar. */
@supports not selector(:focus-visible) {
	.ab-read-aloud-button:focus {
		outline: 3px solid #005fcc;
		outline-offset: 3px;
		background: #2271b1;
		color: #fff;
	}

	@media (forced-colors: active) {
		.ab-read-aloud-button:focus {
			outline-color: Highlight;
		}
	}
}