/**
 * Majaa – zentraler Button-Baustein.
 *
 * Einzige Stelle für Aussehen und Maße der Majaa-Buttons. Werte kommen aus
 * tokens.css (--majaa-button-…). Markup nutzt die Klasse .majaa-ui-button
 * und eine Rolle:
 *
 *   .majaa-ui-button                 Zweitbutton (Karte, Rand Gold dunkel)
 *   .majaa-ui-button--filled         Hauptbutton (Gold)
 *   .majaa-ui-button--create         Hinzufügen/Hochladen (gestrichelt, ohne Schatten)
 *   .majaa-ui-button--glass          Glas-Button auf Fotos (Profilkachel)
 *   .majaa-ui-button--icon           nur Icon, quadratisch 44 × 44
 *
 * Auch für <button type="submit">: das Theme färbt input/button[type=submit] blau
 * (Spezifität 0,1,1), deshalb zusätzlich body :is(button,input).majaa-ui-button.
 * Icons: <svg class="majaa-ui-button__icon"> (20 px). Beschriftung als Text daneben.
 * Bestehende Bausteine mit eigenem Markup (Profilkachel, Community-Feed) lesen
 * dieselben Tokens; eine Änderung der Maße gehört nach tokens.css.
 *
 * Wird von Majaa Core auf allen Frontend-Seiten geladen (auch für Gäste).
 */
.majaa-ui-button,
body :is(button, input).majaa-ui-button,
body #buddypress .majaa-ui-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--majaa-button-gap);
	min-height: var(--majaa-button-height);
	padding: 0 var(--majaa-button-padding-x);
	border: 1px solid var(--majaa-button-border);
	border-radius: var(--majaa-button-radius);
	background: var(--majaa-button-secondary-bg);
	box-shadow: var(--majaa-button-shadow);
	color: var(--majaa-color-ink);
	font: 400 var(--majaa-button-font-size) / 1.4 var(--majaa-font-body);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.majaa-ui-button:hover,
body #buddypress .majaa-ui-button:hover {
	border-color: var(--majaa-button-border);
	color: var(--majaa-color-ink);
	text-decoration: none;
}
.majaa-ui-button--filled,
body :is(button, input).majaa-ui-button--filled,
body #buddypress .majaa-ui-button--filled {
	background: var(--majaa-button-primary-bg);
}
.majaa-ui-button--create,
body #buddypress .majaa-ui-button--create {
	border-style: dashed;
	background: var(--majaa-button-secondary-bg);
	box-shadow: none;
}
.majaa-ui-button--glass,
body #buddypress .majaa-ui-button--glass {
	border-color: var(--majaa-button-glass-border);
	background: var(--majaa-button-glass-bg);
	-webkit-backdrop-filter: var(--majaa-button-glass-blur);
	backdrop-filter: var(--majaa-button-glass-blur);
}
.majaa-ui-button--glass:hover,
body #buddypress .majaa-ui-button--glass:hover {
	border-color: var(--majaa-button-border);
	background: var(--majaa-button-glass-bg-hover);
}
.majaa-ui-button--icon,
body #buddypress .majaa-ui-button--icon {
	width: var(--majaa-button-height);
	padding: 0;
}
.majaa-ui-button__icon {
	display: block;
	flex: none;
	width: var(--majaa-button-icon);
	height: var(--majaa-button-icon);
}
.majaa-ui-button:focus-visible {
	outline: 2px solid var(--majaa-color-ink);
	outline-offset: 3px;
}
/* Auf Bildschirmen geringer Pixeldichte rasten Icons auf ganze Pixel nach unten ein;
 * 1 px höher steht das Icon mittig zur Schrift (gemessen an der Profilkachel). */
@media (max-resolution: 1.5dppx), (-webkit-max-device-pixel-ratio: 1.5) {
	.majaa-ui-button__icon { position: relative; top: -1px; }
}