/**
 * Ambrosia Layout- und Breitensteuerung.
 *
 * Nutzt zentrale CSS-Custom-Properties (im <head> dynamisch gesetzt):
 *   --ambrosia-content-width, --ambrosia-configurator-width,
 *   --ambrosia-text-width, --ambrosia-header-width, --ambrosia-footer-width,
 *   --ambrosia-side-spacing(-tablet/-mobile)
 *
 * Grundsatz: möglichst ohne !important, über zentrale Variablen (Punkt 12).
 * Die Theme-Anbindung greift nur, wenn body.ambrosia-apply-theme gesetzt ist.
 */

/* Sichere Fallback-Werte, falls die <head>-Variablen fehlen. */
:root {
	--ambrosia-content-width: 1600px;
	--ambrosia-configurator-width: 1700px;
	--ambrosia-text-width: 1400px;
	--ambrosia-header-width: 1600px;
	--ambrosia-footer-width: 1600px;
	--ambrosia-side-spacing: 24px;
	--ambrosia-side-spacing-tablet: 20px;
	--ambrosia-side-spacing-mobile: 15px;
}

/* Zentrale Wrapper-Utility – überall wiederverwendbar. */
.ambrosia-container {
	width: 100%;
	max-width: var(--ambrosia-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ambrosia-side-spacing);
	padding-right: var(--ambrosia-side-spacing);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * Theme-Anbindung (Punkt 12) – nur bei body.ambrosia-apply-theme.
 * Wir erhöhen die max-width gängiger Theme-Container auf den globalen
 * Wert, ohne Design/Struktur zu verändern.
 * --------------------------------------------------------------- */
body.ambrosia-apply-theme .wp-site-blocks,
body.ambrosia-apply-theme .site-container,
body.ambrosia-apply-theme .content-container,
body.ambrosia-apply-theme .site-content,
body.ambrosia-apply-theme .container {
	max-width: var(--ambrosia-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ambrosia-side-spacing);
	padding-right: var(--ambrosia-side-spacing);
	box-sizing: border-box;
}

/* Block-Theme „content"/„wide" Layout-Constraints anheben. */
body.ambrosia-apply-theme .entry-content > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--ambrosia-text-width);
	margin-left: auto;
	margin-right: auto;
}
body.ambrosia-apply-theme .entry-content > .alignwide {
	max-width: var(--ambrosia-content-width);
}

/* Header / Footer eigene Breiten (fallen sonst auf global zurück). */
body.ambrosia-apply-theme .site-header .container,
body.ambrosia-apply-theme header.site-header > .wp-block-group {
	max-width: var(--ambrosia-header-width);
	margin-left: auto;
	margin-right: auto;
}
body.ambrosia-apply-theme .site-footer .container,
body.ambrosia-apply-theme footer.site-footer > .wp-block-group {
	max-width: var(--ambrosia-footer-width);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------
 * Layout-Modi (Punkt 10)
 * --------------------------------------------------------------- */

/* Breit: globalen Wert etwas großzügiger nutzen (bereits über Variablen). */
body.ambrosia-mode-wide.ambrosia-apply-theme .wp-site-blocks,
body.ambrosia-mode-wide.ambrosia-apply-theme .site-content,
body.ambrosia-mode-wide.ambrosia-apply-theme .container {
	max-width: var(--ambrosia-content-width);
}

/* Full-Width: nahezu volle Browserbreite mit sicherem Seitenabstand. */
body.ambrosia-mode-full.ambrosia-apply-theme .wp-site-blocks,
body.ambrosia-mode-full.ambrosia-apply-theme .site-content,
body.ambrosia-mode-full.ambrosia-apply-theme .container,
body.ambrosia-mode-full .ambrosia-container {
	max-width: none;
	padding-left: clamp(15px, 2vw, 32px);
	padding-right: clamp(15px, 2vw, 32px);
}

/* ---------------------------------------------------------------
 * Catering-Konfigurator: eigene Breite + mehr Spalten (Punkt 11)
 * --------------------------------------------------------------- */
.acc-configurator {
	width: 100%;
	max-width: var(--ambrosia-configurator-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ambrosia-side-spacing);
	padding-right: var(--ambrosia-side-spacing);
	box-sizing: border-box;
}
body.ambrosia-mode-full .acc-configurator {
	max-width: none;
	padding-left: clamp(15px, 2vw, 32px);
	padding-right: clamp(15px, 2vw, 32px);
}

/* Responsive Seitenabstände (Punkt 8/13). */
@media (max-width: 1024px) {
	.ambrosia-container,
	.acc-configurator,
	body.ambrosia-apply-theme .wp-site-blocks,
	body.ambrosia-apply-theme .site-content,
	body.ambrosia-apply-theme .container {
		padding-left: var(--ambrosia-side-spacing-tablet);
		padding-right: var(--ambrosia-side-spacing-tablet);
	}
}
@media (max-width: 600px) {
	.ambrosia-container,
	.acc-configurator,
	body.ambrosia-apply-theme .wp-site-blocks,
	body.ambrosia-apply-theme .site-content,
	body.ambrosia-apply-theme .container {
		padding-left: var(--ambrosia-side-spacing-mobile);
		padding-right: var(--ambrosia-side-spacing-mobile);
	}
}

/* Kein horizontaler Scroll (Punkt 13). */
html, body { overflow-x: hidden; }

/* ===============================================================
 * Ambrosia Gourmet Catering – Theme-Anbindung
 * Das Theme begrenzt Breiten über .agc-wrap { max-width: var(--agc-wrap) }
 * (ältere Version: .casa-wrap). Die Variablen werden bereits im <head>
 * aus der Backend-Einstellung gesetzt. Hier koppeln wir Konfigurator-
 * Breite und Abstände konsistent, ohne das Theme-Design zu verändern.
 * =============================================================== */

/* Auf Seiten MIT Konfigurator: schmalen Narrow-Container aufheben,
   damit der Konfigurator die volle (Konfigurator-)Breite nutzt. */
body.ambrosia-has-configurator .agc-wrap--narrow,
body.ambrosia-has-configurator .casa-wrap--narrow {
	max-width: var(--ambrosia-configurator-width);
}
body.ambrosia-has-configurator .acc-configurator {
	max-width: var(--ambrosia-configurator-width);
}