/* -------------------------------------------------------------------------
 * Salvia – Hilfsklassen für Breite und Position
 * Wird im Frontend UND im Editor geladen.
 *
 * Reihenfolge ist wichtig:
 *   1. Breiten            (.salvia-w-*)
 *   2. Position           (.salvia-pos-*)   – überschreibt die Außenabstände
 *   3. Bildschirmbreite   (.salvia-w-screen*) – überschreibt beides
 * ---------------------------------------------------------------------- */

/* --- 1. Breiten --------------------------------------------------------- */

.salvia-w-content,
.salvia-w-wide,
.salvia-w-full,
.salvia-w-custom {
	width: var(--salvia-w, 100%);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.salvia-w-content {
	--salvia-w: 100%;
	max-width: var(--wp--style--global--content-size, 860px);
}

.salvia-w-wide {
	--salvia-w: 100%;
	max-width: var(--wp--style--global--wide-size, 1320px);
}

.salvia-w-full {
	--salvia-w: 100%;
	max-width: none;
}

.salvia-w-custom {
	max-width: 100%;
}

/* --- 2. Position des Elements im Container ------------------------------ */

.salvia-pos-left,
.salvia-pos-center,
.salvia-pos-right {
	width: var(--salvia-w, fit-content);
	max-width: 100%;
	box-sizing: border-box;
}

.salvia-pos-left {
	align-self: flex-start;
	margin-left: 0;
	margin-right: auto;
}

.salvia-pos-center {
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.salvia-pos-right {
	align-self: flex-end;
	margin-left: auto;
	margin-right: 0;
}

.salvia-pos-stretch {
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Blöcke, die selbst eine Reihe sind (Buttons, Social-Links):
 * Sie behalten die volle Breite, der Inhalt darin wird ausgerichtet.
 * Sonst würde nur der Kasten schrumpfen und nichts sichtbar wandern.
 */
.wp-block-buttons.salvia-pos-left,
.wp-block-buttons.salvia-pos-center,
.wp-block-buttons.salvia-pos-right,
.wp-block-social-links.salvia-pos-left,
.wp-block-social-links.salvia-pos-center,
.wp-block-social-links.salvia-pos-right {
	width: var(--salvia-w, 100%);
	max-width: 100%;
	align-self: stretch;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-buttons.salvia-pos-left,
.wp-block-social-links.salvia-pos-left {
	justify-content: flex-start;
}

.wp-block-buttons.salvia-pos-center,
.wp-block-social-links.salvia-pos-center {
	justify-content: center;
}

.wp-block-buttons.salvia-pos-right,
.wp-block-social-links.salvia-pos-right {
	justify-content: flex-end;
}

/* Einzelner Button innerhalb einer Buttonreihe */
.wp-block-button.salvia-pos-center {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-button.salvia-pos-right {
	margin-left: auto;
	margin-right: 0;
}

.wp-block-button.salvia-pos-left {
	margin-left: 0;
	margin-right: auto;
}


/* --- 3. Über die gesamte Bildschirmbreite ------------------------------- */

.salvia-w-screen,
.salvia-w-screen-pad {
	--salvia-w: 100vw;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.salvia-w-screen-pad {
	padding-left: clamp(1.2rem, 5vw, 3rem);
	padding-right: clamp(1.2rem, 5vw, 3rem);
}

/* Im Editor bleibt alles im sichtbaren Bereich (kein Querscrollen) */
.editor-styles-wrapper .salvia-w-screen,
.editor-styles-wrapper .salvia-w-screen-pad {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	outline: 1px dashed rgba(54, 96, 44, 0.35);
	outline-offset: 3px;
}

/* --- Textausrichtung in Buttons ---------------------------------------- */

.wp-block-button .wp-block-button__link {
	text-align: center;
	justify-content: center;
}

.wp-block-button.is-style-salvia-text-links .wp-block-button__link {
	text-align: left;
	justify-content: flex-start;
}

.wp-block-button.is-style-salvia-text-rechts .wp-block-button__link {
	text-align: right;
	justify-content: flex-end;
}

/* Buttons mit fester Breite: Text bleibt sauber zentriert */
.wp-block-button[class*="wp-block-button__width-"] .wp-block-button__link {
	display: flex;
	align-items: center;
}